如何更模块化地编写 jQuery 代码？

Question

我正在使用框架 (Django)，并且在编写 HTML 方面有很大的灵活性。我一直在想，我编写 jQuery 的方式可能会更好。

以此为例：提交按钮出现在我们网站上的大多数情况下，我们都会将其转换为更漂亮的按钮（采用原始值和行为并基本上替换它）。这只是一个示例，但有很多用例我在网站上放置了 html 的 sn-ps，并且总体结构不知道页面上需要由 Javascript 操作的内容。所以 2 部分问题：在 100 个页面上执行一些只会在 50 个页面上使用的东西是否有效（首先搜索包装集的 jQuery 插件），如果我只想真正使用我的 jQuery 的模块化方法，如何我去吧？

Answer 1

这就是你需要的：http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html。但它仍然是非常实验性的。现在看看 google 关闭工具。

Answer 2

如果您问题中的根本问题是关于Modular programming。我目前正在学习Douglas Crockford's "JavaScript: The Good Parts"。

来自这本书：

函数是 JavaScript 的基本模块单元。他们是 用于代码重用、信息隐藏和组合。

因此，就像在 javascript 中所有函数都是对象一样，您可以使用对象字面量表示法将顶级结构定义为模块：

/* only one global variable to encapsulate all your code */

var MAINOBJ= {};

jQuery(document).ready(function($) {

    /* modules */

    MAINOBJ.formStuff = {
        results : [],
        myFunction: function (){
            // code
            results = MAINOBJ.ajaxStuff.loadResults();
            // code
        }
    }

    MAINOBJ.ajaxStuff = {
        results : [],
        loadResults: function (){
            // code
            return results;
        }
    }

    /* DOM traversing */

    $('#myForm').submit(function(e) {
        e.preventDefault();
        MAINOBJ.formStuff.myFunction();
    });
})

实际上是我在 wordpress/joomla 等中构建所有 jquery 代码的方式，我们与许多外国人的 javascript 代码共享相同的范围。

Answer 3

通过适当的缓存，拥有单个缩小的 .js 文件肯定更有效。它只会加载一次，每页只有 1 次调用。如果你模块化你的代码，你最终会做更多的请求，而不会节省任何时间来处理额外的 js，因为无论如何它都会被缓存。