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

I'm using a framework (Django) and I have a lot of flexibility in how I write HTML. I keep thinking that the way I'm writing jQuery could be better.

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

Take this for example: mostly anywhere a submit button appears on our site, we convert it into a prettier button (takes the original values and behavior and replaces it basically). This is just an example but there are a lot of use cases where I have snippets of html placed on the site and the overarching structure has no idea what is on the page that need to be manipulated by Javascript. So 2 part question: is it efficient to execute something on 100 pages that will only be used on 50 (jQuery plugin that searches for a wrapped set first), and if I wanted to just really have a modular approach with my jQuery, how would I go about it?

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

3 个解决方案

#1

If the fundamental concern in your question is about Modular programming. I am currently studying Douglas Crockford's "JavaScript: The Good Parts".

如果您的问题中的基本问题是关于模块化编程。我目前正在研究Douglas Crockford的“JavaScript：The Good Parts”。

From this book:

从这本书：

Functions are the fundamental modular unit of JavaScript. They are used for code reuse, information hiding, and composition.

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

So, as in javascript all functions are objects, you can use object literal notation to define top-level structures as modules in this way:

因此，在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();
    });
})

Actually is my way to structure all my jquery code inside wordpress/joomla, etc., where we share the same scope with a lot of foreigner javascript code.

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

3 个解决方案

#1

更多相关文章

随机推荐