8

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

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

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

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

非常感谢，

JS

4

2 回答 2

6

您想添加到具有私有范围/关注点分离的“插件”中。这对于基于插件的 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% 肯定，因为我自己没有做过，只是阅读关于它。

于 2009-12-12T14:16:30.967 回答
1

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

于 2010-10-09T07:51:30.340 回答