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

I'm writing a small CMS as a jQuery AJAX plugin and though it's by no means excessively long (currently about 500 lines) I can see it would be nice to be able to split it into separate files, one for each "subclass":

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

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

In the example above, I would like to put the code for classOne in one file, classTwo in another and the myCMS "baseclass" in a third. Is it possible to achieve this with with something like this (in each of the "subclass" files)?

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

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

Many thanks,

JS

2 个解决方案

#1

You want to add to the "plugin" with a private scope / separation of concern. This can be important for maintenance and long-term extensibility of your plugin-based web application, regardless of whether everything will be built into one file or multiple files.

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

You can create a private scope and extend an existing jQuery.fn method by attaching methods directly or by adding to the jQuery.fn.foo method's prototype

您可以通过直接附加方法或通过添加到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);

You can use jQuery.extend(), which in this case is really a "shorthand" for adding a method to the constructor instance as the first method above. You have to encapsulate whatever you're adding into an object (typically this would be an anonymous object):

您可以使用jQuery.extend(),在这种情况下,它实际上是一个“简写”,用于将方法添加到构造函数实例作为上面的第一个方法。您必须封装您添加到对象中的任何内容(通常这将是一个匿名对象):

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

From a design perspective if you have "classes" that need to get at the same closured variables frequently they should probably be part of the same function scope/closure, or you should expose getters and setters for those closured variables (perhaps with the _foo convention that shows they are intended to be used only by your code).

从设计的角度来看,如果你有“类”需要频繁获取相同的闭包变量,它们可能应该是相同函数作用域/闭包的一部分,或者你应该为那些闭包变量公开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);

If you want to be a hacker and you need to get at closured variables from a different scope, I believe you can do so by executing these new methods with their own scope using .call() or .apply() from the other scope. I can try to whip up some samples of how this works, but it will be a good idea if you do your own research into how scope resolution works in these kinds of scenarios.

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

I believe you can "borrow" the scope from the original "plugin" method by using a with ($.fn.myCMS) { } construction but I am not 100% positive about that because I haven't done it myself, only read about it.

我相信你可以通过使用with($ .fn.myCMS){}构造从原始的“插件”方法“借用”范围,但我不是100%肯定,因为我自己没有这样做,只读过关于它。

#2

It will help to also look at jQuery ui code. For example, the progressbar plugin requires three files ui.core, ui.widget and ui.progressbar. Download the jQuery UI source bundle and look at the progressbar example under demos directory. (I couldn't find the simplified version hosted anywhere, but the source bundle has simplified examples)

它还有助于查看jQuery ui代码。例如,progressbar插件需要三个文件ui.core,ui.widget和ui.progressbar。下载jQuery UI源包并查看demos目录下的progressbar示例。 (我找不到任何地方托管的简化版本,但源包有简化示例)