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

发布于 2024-12-15 20:45:20 字数 303 浏览 3 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蹲墙角沉默 2024-12-22 20:45:20

如果您问题中的根本问题是关于模块化编程。我目前正在学习 Douglas Crockford 的“JavaScript：优秀部分”。

来自这本书：

函数是 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代码相同的范围。

If the fundamental concern in your question is about Modular programming. I am currently studying Douglas Crockford's "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.

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

/* 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.

回复收藏 0 原文