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

How to code jQuery more modularly?

本文关键字：jQuery 代码 何更 模块化      更新时间：2023-09-26

我正在使用一个框架(Django)，我在如何编写HTML方面有很大的灵活性。我一直认为我编写jQuery的方式可以更好。

以这个为例:在我们的网站上几乎任何地方出现一个提交按钮，我们将它转换成一个更漂亮的按钮(采用原始值和行为，基本上替换它)。这只是一个例子，但是有很多用例，我把html片段放在网站上，总体结构不知道页面上需要用Javascript操作的是什么。所以有两个问题:在100个页面上执行只在50个页面上使用的东西是否有效(jQuery插件首先搜索包装集)，如果我想用jQuery真正采用模块化方法，我该怎么做?

如果您的问题中的基本关注点是关于模块化编程的。我目前正在学习Douglas Crockford的《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代码共享相同的作用域。

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

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

相关文章：