Question

在此期间，我的自定义函数数量加上我的jQuery插件的初始化调用已经增长，导致视觉和功能混乱。

我的自定义功能

我正在寻找一种方法来将自定义函数组织到库中。

我应该创建一个对象并将它们组织为方法吗？

e.g。

(function($) {   
    $.myCUSTOMOBJECT = {};
    $.fn.myCUSTOMOBJECT = function(settings) {
        var var1 = ...
        var var2 = ...
        var var3 = ...
        function onTextSelectionDoSomething() {...}
        function onTextClickDoSomethingElse() {...}
    }

});

MY CONTRIB FUNCTIONS

我有jQuery库作为fancybox，jcarousel，parallax

是否建议将它们合并为一个缩小的文件？

Answer 1

为了简单起见，我不打算在jQuery命名空间中存储您的自定义工作。我采用这种方法;

我将有一个这样的文件：

( function () {

    var myNamespace = {
        fancybox: { ... },
        jcarousel: { ... }
    };

    window.myNamespace = myNamespace;

})();

然后在每个网站/应用程序的基础上，我会像我这样使用我的命名空间;

( function ( $, ns ) {

    $( document ).ready( function () {

        $( '.lightbox' ).on( 'click', ns.fancybox.init );

    });

})( jQuery, myNamespace );

这样做的目的是尝试从代码的其余部分中删除框架

Answer 2

自定义功能

我通常会创建一个utils对象，其中包含我所有的小功能函数，例如trim等。我将它视为松散的下划线。对于与我的网站或应用程序的细节无关的所有通用函数和方法，我将这些函数和方法包含在plugins.js文件中（基于implementation in HTML5 boilerplate）。

贡献函数

我通常会在plugins.js文件中包含所有相对较小的插件以及我自己的插件。我可能想要单独调试或更新的较大文件，具有非常独特的功能，我将作为单独的文件保存在/vendor/或/libs/文件夹中。这样可以轻松交换新版本并查看是否有任何中断，或者使用相同的文件名交换未经编译的版本以进行详细调试等。

缩小

如果您正在处理一个足够小的站点，在第一页上几乎所有脚本都是必需的，那么您可能希望将大多数（如果不是全部）脚本缩小为一个用于生产的脚本。这不应该影响您在开发中组织脚本的方式。

如何组织我的网站的自定义实用程序JS功能

2 个答案:

自定义功能

贡献函数

缩小