如何在多个文件上拆分jQuery插件

StackOverflow https://stackoverflow.com/questions/1010089

  •  06-07-2019
  •  | 
  •  

题

我正在编写一个小型CMS作为jQuery AJAX插件，虽然它绝不是太长（目前大约500行）但我能看到将它分成单独的文件会很好，每个文件一个“ ;亚类＆QUOT;：

(function($) {
    $.fn.myCMS = function() {
        this.classOne = function() {
        ...
        }
        this.classTwo = function() {
        ...
        }
    }
})(jQuery);

在上面的示例中，我想将classOne的代码放在一个文件中，classTwo放在另一个文件中，myCMS“baseclass”放在一个文件中。在第三个。有可能用这样的东西（在每个“子类”文件中）实现这一点吗？ 

$.extend(myCMS,classOne = function() {
...
})

非常感谢，

JS

有帮助吗？

解决方案

您想要添加到“插件”中与私人范围/分离关注。这对于基于插件的Web应用程序的维护和长期可扩展性非常重要，无论是将所有内容都构建到一个文件还是多个文件中。

您可以通过直接附加方法或通过添加到jQuery.fn.foo方法的原型来创建私有范围并扩展现有的jQuery.fn方法

(function ($) {

     // instance method attached to the constructor function
     $.fn.myCMS.classOne = function () {

     };

     // or "shared" method attached to prototype
     $.fn.myCMS.prototype.classOne = function() {

     };

})(jQuery);

你可以使用jQuery.extend（），在这种情况下它实际上是一个“简写”。用于将方法添加到构造函数实例作为上面的第一个方法。你必须封装你添加到对象中的任何东西（通常这将是一个匿名对象）：

$.extend($.fn.myCMS,{ classOne: function () { } });

从设计的角度来看，如果你有“类”，那么需要经常获取相同的闭包变量它们应该是同一个函数作用域/闭包的一部分，或者你应该为那些闭包变量公开getter和setter（可能使用_foo约定，表明它们只能用于你的代码）。

(function ($) {

    var foo = "foo!";

    // combined getter/setter
    // could also check arguments.length
    $.fn.myCMS._foo = function (value) {
          if (typeof(value) != "undefined") {
               foo = value;
          } else {
               return foo;
          }
    };

)(jQuery);

如果你想成为一名黑客并且需要从不同的范围获取闭包变量，我相信你可以通过使用自己的范围执行这些新方法，使用.call（）或.apply（）来实现。其他范围。我可以尝试提供一些有关其工作原理的示例，但如果您自己研究范围分辨率如何在这些场景中工作，那将是一个好主意。

我相信你可以“借”来自原始“插件”的范围使用with（$ .fn.myCMS）{}构造的方法，但我并非100％肯定，因为我自己没有这样做，只读过它。

其他提示

查看jQuery ui代码也会有所帮助。例如，progressbar插件需要三个文件ui.core，ui.widget和ui.progressbar。下载jQuery UI源包并查看demos目录下的progressbar示例。 （我找不到任何地方托管的简化版本，但源包有简化示例）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top