javascript框架

javascript框架

moo4q creator Ryan Florence and I generally agree on most JavaScript-related topics, one of which is that most JavaScript frameworks, jQuery, MooTools, and Dojo included, are much more feature-rich (and thus larger) than most websites need.  You wouldn't build a corporate or enterprise-level website without an expansive JavaScript framework, but many smaller scale websites simply don't need the heft.  Enter Florence's new JavaScript framework, SnackJS -- a JavaScript framework that provides only the functionality that most smaller websites need -- and in only 3KB! (minified and gzipped)

moo4q的创建者Ryan Florence和我通常在大多数与JavaScript有关的主题上达成共识，其中之一就是，大多数JavaScript框架，jQuery，MooTools和Dojo所包含的功能都比大多数网站所需的功能丰富(因此更大)。 如果没有扩展JavaScript框架，就不会建立公司或企业级网站，但是许多较小规模的网站根本不需要这些。 进入Florence的新JavaScript框架SnackJS ，这是一个仅提供大多数小型网站所需功能JavaScript框架，而且仅3KB ！ ( 缩小并压缩 )

Download SnackJS 下载SnackJS

What does "only the functionality that most smaller websites need" mean?  By that I mean the ability to:

“仅大多数小型网站需要的功能”是什么意思？ 我的意思是具有以下能力：

more easily work with arrays

更轻松地使用数组 efficiently retrieve and modify element CSS classes and attributes, etc.

有效地检索和修改元素CSS类和属性等。 easily add, remove, and fire event handlers

轻松添加，删除和触发事件处理程序 execute and handle the result of basic AJAX / JSON / JSONP request

执行并处理基本AJAX / JSON / JSONP请求的结果

SnackJS provides all of the above, with a few extras:

SnackJS提供了以上所有内容，并提供了一些额外功能：

a small pub/sub system for easier app communication

小型发布/订阅系统，可简化应用程序的交流 an extend method for shallow merging of object properties

浅合并对象属性的扩展方法 everyone's favorite: a "ready" event

每个人的最爱：“准备就绪”事件 a selector engine wrapper for easy implementation of any selector engine (Slick, Sizzle, etc.)

选择器引擎包装器，可轻松实现任何选择器引擎(Slick，Sizzle等) a punch method which acts very much like dojo.connect, in that a function can be assigned to execute any time another function is executed

打Kong方法，其作用与dojo.connect非常相似，因为可以将一个函数分配为在每次执行另一个函数时执行 an element store solution

元素存储解决方案

Let's take a look SnackJS code snippets so you can get a feel for it usage!

让我们看一下SnackJS代码片段，以便您了解它的用法！

零食扩展 (snack.extend)

This method simply merges properties from any number of objects into the first argument:

此方法只是将属性从任意数量的对象合并到第一个参数：

// Mix objects var endObject = { color: "red" }; snack.extend( endObject, // The starting object { color: "green", text: "Name" }, // A second object { color: "blue" } // And another ); // endObject becomes: { color: "blue", "text: "Name" }

小吃 (snack.punch)

The ability to "connect" to functions is extremely useful within the Dojo Toolkit, so I couldn't have been more happy to see this in SnackJS:

“连接”功能的功能在Dojo Toolkit中非常有用，因此，我对在SnackJS中看到这一点感到非常高兴：

// Create an object with a function var myObjectWithFns = { color: "red", onColorChange: function(color) { // Reset the color this.color = color; } }; // Punch time: whenever myObjectWithFns is called, call another function which simple logs the value var reactor = function(color) { console.log("The color was just changed to: ",color); }; snack.punch(myObjectWithFns,"onColorChange",reactor,true); myObjectWithFns.onColorChange("red");

Whenever the myObjectWithFn.onColorChange is executed, the reactor function immediately runs.

每当执行myObjectWithFn.onColorChange ， reactor函数都会立即运行。

零食包装 (snack.wrap)

snack.wrap acts very similar to the dojo.query method or jQuery("selector") usage in that it wraps nodes so extra functionality can be added to them. Nodes themselves are not modified as they are within MooTools.

snack.wrap行为与dojo.query方法或jQuery("selector")用法非常相似，因为它包装了节点，因此可以向其添加额外的功能。 节点本身不会像在MooTools中那样被修改。

// Get all DIV elements. var divs = snack.wrap("div"); // Add a CSS class to the divs divs.addClass("found"); // Add a click event that... divs.attach("click",function() { // Removes the class we added snack.wrap(this).removeClass("found"); });

零食听者 (snack.listener)

The snack.listener method is your standard cross-browser node event syntax.

snack.listener方法是您的标准跨浏览器节点事件语法。

// Add an event listener to a given node var listener = snack.listener({ node: document.getElementById("content"), event: "click" },function() { console.warn("You clicked on the node!"); }); // Detach the listener at any time listener.detach(); // ...and add it back again listener.attach();

Especially nice are the detach and attach methods, allowing you to effectively disable and enable event listeners.

detach和attach方法尤其好，它使您可以有效地禁用和启用事件侦听器。

点心请求 (snack.request)

Runs a standard AJAX request with the standard options:

使用标准选项运行标准AJAX请求：

// Create an AJAX request var req = snack.request({ url: "get-user-bio.php", data: { userId: 1234 }, method: "get", now: false // Don't send immediately },function(error,response){ // The success event // If it was successful... if(!error) { document.getElementById("content").innerHTML = response; } }); // Now send it! req.send();

dessert.publisher：PubSub实现 (snack.publisher: PubSub Implementation)

SnackJS implements the ever-useful pub/sub system by creating a publisher, and then publishing and subscribing to it:

SnackJS通过创建发布者，然后发布并订阅该发布者来实现有用的发布/订阅系统：

// Set up a pub/sub event var pubsub = snack.publisher(); // Create a subscription to an event pubsub.subscribe("inputchange",function(val) { console.warn("The value was changed to: ",val); }); // Attach an onKeyUp event to the input node // When keyup'd, the node's value has changed, and we should notify all subscribers snack.wrap("#email").attach("keyup",function() { pubsub.publish("inputchange",[this.value]); });

The power of pub/sub is that you don't need references to events or anything else -- you simply need the name of the wire. Whenever a message is published to that wire, you'll know about it!

pub / sub的强大功能是您不需要引用事件或其他任何内容，而只需要连接名称。 每当有消息发布到该线路时，您都会知道的！

These are just a few of the functionalities available within SnackJS.  There are many more methods available, so I encourage you to check out the SnackJS documentation. I'll bet that SnackJS has all the functionality you need for most websites!

这些只是SnackJS中可用的一些功能。 还有更多可用的方法，因此，我建议您查看SnackJS文档 。 我敢打赌，SnackJS具有大多数网站所需的所有功能！

向前进 (Moving Forward)

Snack JS was just recently released so there aren't many custom modules/plugins available.  There are a few items I'd like added to see added to SnackJS:

Snack JS是最近才发布的，因此可用的定制模块/插件不多。 我想添加一些内容以添加到SnackJS中：

style setter and getter -- I know that the style property of nodes is where you set individual styles, but opacity takes more work since it's not standard, and an object-to-styles setter would be awesome

样式设置器和获取器-我知道节点的style属性是您设置各个样式的地方，但是不透明性因为它不是标准的，所以需要更多的工作，并且对象到样式设置器会很棒

deferreds -- They're a godsend within Dojo, and could prove to be with SnackJS as well

deferreds-它们是Dojo中的天赐之物，并且可能与SnackJS一起使用 Download SnackJS 下载SnackJS

The SnackJS repository lives at GitHub and the documentation and demos can be found at snackjs.com.  Congratulations to Ryan Florence for this awesome micro framework!  I look forward to contributing in the future!

SnackJS存储库位于GitHub上 ，其文档和演示可在Snakejs.com上找到。 恭喜Ryan Florence使用了这个很棒的微框架！ 我期待着将来的贡献！

In the coming days, I'll be showing you how you can create your own SnackJS plugin for creating nodes, placing them within the page, and getting and setting their attributes! Stay tuned!

在接下来的几天中，我将向您展示如何创建自己的SnackJS插件来创建节点，将其放置在页面中以及获取和设置其属性！ 敬请关注！

翻译自: https://davidwalsh.name/snackjs

javascript框架