My SnackJS: A Tiny-But-Tasty JavaScript Framework post exposed you to Ryan Florence's new JavaScript framework called SnackJS. SnackJS' motto is "Because sometimes, all you need is a snack" , and for good reason: this 3KB micro-framework provides the functionality you need for most websites without the huge overhead of jQuery or other frameworks. As SnackJS is in its infancy and its aim is to be tiny, the framework does not include some functionalities found in other frameworks; in short, SnackJS assumes you know how to accomplish some tasks (like modifying element styles, etc.) using basic JavaScript.
我的SnackJS：小巧但精巧JavaScript框架文章向您介绍了Ryan Florence的新JavaScript框架SnackJS 。 SnackJS的座右铭是“ 因为有时，您需要的只是零食” ，并且有充分的理由：这个3KB的微框架提供了大多数网站所需的功能，而没有jQuery或其他框架的巨大开销。 由于SnackJS尚处于起步阶段，其目标是缩小体积，因此该框架未包含其他框架中发现的某些功能。 简而言之，SnackJS假定您知道如何使用基本JavaScript完成某些任务(例如，修改元素样式等)。
There's no denying that even if you know JavaScript, shortcut methods are hugely helpful -- if they weren't, smart JavaScript developers wouldn't spend time creating JavaScript frameworks. One shortcut functionality that SnackJS doesn't have is DOM node creation...and by extension, node attribute modification and placements. Since I believe in the SnackJS project and the functionality mentioned is ideal for my projects, I've created create, attr, and place plugins which I'll share with the community.
不可否认的是，即使您了解JavaScript，快捷方式也非常有用-否则，聪明JavaScript开发人员不会花时间创建JavaScript框架。 SnackJS没有的一种快捷功能是DOM节点创建...以及扩展，节点属性修改和放置。 由于我相信SnackJS项目并且所提到的功能非常适合我的项目，因此我创建了create ， attr和place插件，并将与社区共享。
Modifying node attributes was the most difficult of the three tasks because I couldn't simply use the node's setAttribute method. The most obvious of those is style because that node property is a CSSStyleDeclaration object containing the complete list of node styles. For that purpose, as well as the purposes of innerHTML, I've created a few special definitions to accommodate for setting those properties as well:
修改节点属性是这三个任务中最困难的，因为我不能简单地使用节点的setAttribute方法。 其中最明显的是style因为该节点属性是一个CSSStyleDeclaration对象，其中包含节点样式的完整列表。 为此，以及innerHTML的目的，我创建了一些特殊的定义来容纳这些属性：
// The "attr" plugin !function(snack){ // Will hold special attributes, privately var props = {}; // The main method snack.attr = function(node,attr,value) { // Does the actual setting var doSet = function(val,key) { props[key] && props[key].set ? props[key].set(node,val) : node.setAttribute(key,val); }; // Setter var isObj = typeof attr == "object"; if(value != undefined || isObj) { isObj ? snack.each(attr,doSet) : doSet(value,attr); } else { // Getter return props[attr] ? props[attr].get(node) : node.getAttribute(attr); } // Return the node return node; }; // Creates a method by which one can define special node attributes snack.attr.define = function(name, obj){ if (typeof name === 'string'){ props[name] = obj; return; } // takes an object of key:values for (i in name) { if (name.hasOwnProperty(i)) { snack.attr.define(i, name[i]); } } }; // Define the special attributes now snack.attr.define({ html: { set: function(node,value) { node.innerHTML = value; }, get: function(node) { return node.innerHTML; } }, style: { set: function(node,value) { node.setAttribute("style",value); }, get: function(node) { return node.getAttribute("style"); } } }); // Extend to the "wrap" method snack.wrap.define('attr', function(attr, value){ this.each(function(node){ snack.attr(node, attr, value); }); }); }(snack);The attr property is used for both getting and setting attributes. Providing three arguments always acts as a setter, providing a key/value object as the second argument is a setter, otherwise it acts as a getter. Here are sample uses of attr:
attr属性用于获取和设置属性。 提供三个自变量始终充当setter，提供键/值对象，因为第二个自变量是setter，否则提供getter。 以下是attr的示例用法：
// Retrieve the title attribute of a node var title = snack.attr(node,"title"); // Then retrieve the node's innerHTML var html = snack.attr(node,"html"); // Set a node's "style" attribute snack.attr(node,"style","background-color:green;color:#fff;padding:20px;"); // Set multiple attributes at once snack.arr(node,{ tabindex: 1, value: "davidwalsh", placeholder: "username" });The attr method even allows you to create custom setters and getters:
attr方法甚至允许您创建自定义的setter和getter：
// Define the special attributes now snack.attr.define({ "class": { set: function(node,value) { node.className = value; }, get: function(node) { return node.className; } } });I plan of reworking attr just a bit in the future, but what's presented is the current state.
我计划在将来对attr进行一些修改，但是介绍的是当前状态。
The place method inserts nodes in specific locations within the DOM. In evaluating how many of the larger JavaScript frameworks place nodes, I found Dojo's to be the most concise for the number of positions it allows you to inject nodes. My method is largely based on the Dojo Tookit's:
place方法将节点插入DOM中的特定位置。 在评估有多少个较大JavaScript框架放置节点时，我发现Dojo对于允许您注入节点的位置数最为简洁。 我的方法主要基于Dojo Tookit的方法：
// Fun this function immediately after creation !function(snack) { // Places a node at a given position snack.place = function(node,domReference,position) { // Create functions for insertion var before = function(node,domReference) { var parent = domReference.parentNode; if(parent){ parent.insertBefore(node, domReference); } }; var after = function(node,domReference) { // summary: // Try to insert node after ref var parent = domReference.parentNode; if(parent){ if(parent.lastChild == domReference){ parent.appendChild(node); }else{ parent.insertBefore(node, domReference.nextSibling); } } }; if(typeof position == "number"){ // inline'd type check var cn = domReference.childNodes; if(!cn.length || cn.length <= position){ domReference.appendChild(node); }else{ before(node, cn[position < 0 ? 0 : position]); } }else{ switch(position){ case "before": before(node, domReference); break; case "after": after(node, domReference); break; case "replace": domReference.parentNode.replaceChild(node, domReference); break; case "first": if(domReference.firstChild){ before(node, domReference.firstChild); break; } // else fallthrough... default: // aka: last domReference.appendChild(node); } } return node; }; // Extend to the "wrap" method snack.wrap.define("place", function(domRef,pos){ this.each(function(node){ snack.place(node,domRef,pos); }); }); }(snack);Armed with the place method, you can place nodes in several positions:
有了place方法，您可以将节点放置在多个位置：
// Place the node into the BODY snack.place(node,document.body); // Place the node above the another node snack.place(node,otherNode,"before"); // Replace one node with another snack.place(node,otherNode,"replace");You can also use snack.wrap.place to move multiple nodes at a time:
您还可以使用snack.wrap.place移动多个节点：
// Create a UL var list = snack.create("ul"); // Place the element above the node snack.place(list,node,"before"); var arr = []; for(x = 0; x <= 4; x++) { arr.push(snack.create("li",{ html: "List item " + (x + 1) })); } snack.wrap(arr).place(list);Like I said, I've borrowed quite heavily from Dojo. My reason for doing so is that Dojo's been proven for years and offers the most flexibility. Hooray for not reinventing the wheel!
就像我说的，我从Dojo借了很多钱。 我这样做的原因是，Dojo已被证明多年，并且具有最大的灵活性。 万岁，没有重新发明轮子！
The create method was the easiest of the three, even employing attr and place when available. Simply provide the tag, optional properties, and optional placement:
create方法是这三种方法中最简单的方法，即使可用，也可以使用attr和place 。 只需提供标签，可选属性和可选位置：
!function(snack) { // If not already created... snack.create = function(nodeType,props,nodeRef,where) { // Create the node var node = document.createElement(nodeType); // Add properties if(props && snack.attr) { // Set properties snack.attr(node,props); } // Inject into parent if(nodeRef && snack.place) { snack.place(node,nodeRef,where); } // Return the node return node; }; }(snack);snack.create would be used as follows:
snack.create使用方式如下：
// Create a UL var list = snack.create("ul"); // Add an LI to the list snack.create("li",{ html: "List item " + (x + 1) },list);If attr and place plugins aren't loaded, snack.create simply acts as a document.createElement wrapper.
如果未加载attr和place插件，则snack.create仅充当document.createElement包装器。
Creating Snack.js plugins is extremely simple. Simply add your method to the snack object or use SnackJS' define method:
创建Snack.js插件非常简单。 只需将您的方法添加到snack对象或使用SnackJS的define方法：
!function(snack) { snack.pluginName = function(arg1,arg2/*, etc.*/) { }; }(snack);Voila -- your custom SnackJS plugin is now available. And if you want your plugin to work with snack.wrap, that's as easy as a snack.each loop:
瞧-您的自定义SnackJS插件现已可用。 而且，如果您想让您的插件与snack.wrap一起snack.wrap ，那就像了一个snack.each循环一样简单：
!function(snack) { snack.pluginName = function(arg1,arg2/*, etc.*/) { }; // Extend to the "wrap" method snack.wrap.define("pluginName", function(arg1,arg2/*, etc.*/){ this.each(function(arg){ snack.pluginName(arg,arg1,arg2/*, etc.*/); }); }); }(snack);Adding wrap support is useful in many cases but there are always exceptions. For example, adding snack.wrap.create doesn't make sense.
在许多情况下，添加wrap支持非常有用，但是总是有例外。 例如，添加snack.wrap.create没有任何意义。
Remember that one of SnackJS' goals is to be small and concise, so write your plugins that way.
请记住，SnackJS的目标之一是体积小巧且简洁，因此请以这种方式编写插件。
SnackJS is a new, growing framework so your contributions are always welcome. While they may not make the SnackJS core, there's no downside to creating simple but useful JavaScript plugins for SnackJS. The steps to creating SnackJS plugins are much like any other framework:
SnackJS是一个不断发展的新框架，因此随时欢迎您的贡献。 尽管他们可能无法成为SnackJS核心，但为SnackJS创建简单但有用JavaScript插件没有任何弊端。 创建SnackJS插件的步骤与其他框架非常相似：
Research your plugin; look at how other JS frameworks accomplish the same goal and decide which you think is best 研究您的插件； 了解其他JS框架如何实现相同的目标，并确定您认为最佳的框架 Code your plugin 编码你的插件 Test. Test. Test. 测试。 测试。 测试。Fork the official SnackJS repo and commit the code. Feel free to send a pull request to Ryan.
分叉官方的SnackJS存储库并提交代码。 随时向Ryan发送拉取请求。
Please, please consider contributing to SnackJS. It's a project with great intentions, coded beautifully by Ryan, which could vastly improve the speed of the web. It seems that jQuery is the default JavaScript frameworks for most websites at this point; it shouldn't be. Don't make more of a meal about your JavaScript framework when all you need is a snack.
请，请考虑为SnackJS做贡献。 这是一个由Ryan精心编写的充满怀抱的项目，可以极大地提高Web的速度。 目前看来，jQuery是大多数网站的默认JavaScript框架。 不应该这样。 当您需要的只是零食时，不要再多花时间谈论JavaScript框架了。
翻译自: https://davidwalsh.name/snackjs-plugins
相关资源：微信小程序源码-合集3.rar