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

时间:2011-11-15 16:44:47

标签: javascript jquery django model-view-controller jinja2

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

以此为例:我们的网站上出现提交按钮的任何地方,我们将其转换为更漂亮的按钮(采用原始值和行为并基本上替换它)。这只是一个例子,但是有很多用例我在网站上放置了html片段,并且总体结构不知道页面上需要由Javascript操作的内容。所以2部分问题:在100页上执行某些东西是有效的,只能在50页上使用(首先搜索包装集的jQuery插件),如果我想用我的jQuery真正拥有模块化方法,那么我去了吗?

3 个答案:

答案 0 :(得分:1)

如果您问题中的基本问题是关于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代码共享相同的范围。

答案 1 :(得分:0)

通过适当的缓存,拥有一个缩小的.js文件肯定更有效。它只会被加载一次,每页只有1个电话。如果你模块化你的代码,你将最终做更多的请求,而不是节省任何时间dling额外的js,因为它将被缓存。

答案 2 :(得分:0)

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