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

Question

我正在编写一个小型CMS作为jQuery AJAX插件,虽然它绝不是太长(目前大约500行),但我可以看到将它拆分成单独的文件会很好,每个"子类"一个:

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

在上面的例子中,我想将classOne的代码放在一个文件中,将classTwo放在另一个文件中,将myCMS"baseclass"放在第三个文件中.有可能用这样的东西(在每个"子类"文件中)实现这一点吗？

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

非常感谢,

JS

Answer 1

您想要添加到具有私有范围/关注分离的"插件".这对于基于插件的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%肯定,因为我自己没有这样做,只读过关于它.