这是什么 Javascript/jQuery 模式来封闭和隐藏所有内容，但仍然可以更改页面？

发布于 2024-11-09 10:17:47 字数 1039 浏览 2 评论 0原文

有人想出了这个模式，所以它是一个著名的、众所周知的模式吗？我看到这种使用 Javascript / jQuery 的模式，例如在 init.js 中：

var Initializations = {};

Initializations = (function($) {

  function doSomething(i, domElement) { 
    // ... 
  }

  $(function() {
    $("#foo").click(function() {
      // ...
    });
    $(".bar").each(doSomething);
  });

})(jQuery);

因此看起来它可以“隐藏”全局范围内的几乎所有内容，如果另一个库也使用 则可以避免冲突$ 作为变量，并且可以使用 jQuery 通过此代码更改 HTML 页面。该代码对全局范围几乎没有任何作用（除了变量Initializations），即使有 2 个 jQuery 版本，如果它们可以用 2 个变量 jQuery142 和 jQuery161 表示，那么代码甚至可以通过更改代码的最后一行来使用 2 个 jQuery 库多于到 jQuery161 （例如，如果某些第 3 方代码需要 jQuery 1.4.2，并且您的代码一直在使用 jQuery 1.6.1 来实现新功能和/或错误修复）。

上面的代码可以改进吗？我想知道为什么需要额外的变量 Initializations，为什么不只是：

(function($) {

  function doSomething(i, domElement) { 
    // ... 
  }

  $(function() {
    $("#foo").click(function() {
      // ...
    });
    $(".bar").each(doSomething);
  });

})(jQuery);

？

原文

Did somebody come up with this pattern so it is a famous and well-known pattern?
I see this pattern for using Javascript / jQuery, such as in init.js:

var Initializations = {};

Initializations = (function($) {

  function doSomething(i, domElement) { 
    // ... 
  }

  $(function() {
    $("#foo").click(function() {
      // ...
    });
    $(".bar").each(doSomething);
  });

})(jQuery);

So it looks like it can "hide" almost everything from the global scope, avoid conflict if another library also uses $ as a variable, and the HTML page can be altered by this code using jQuery. The code does almost nothing to the global scope (except the variable Initializations), and even if there are
2 jQuery versions, and if they can be denoted by 2 variables jQuery142 and jQuery161, then the code can be even using 2 jQuery libraries just by changing the last line of the code above
to jQuery161 (say, if some 3rd party code needs jQuery 1.4.2 and your code has been using jQuery 1.6.1 for new features and/or bug fixes).

Can the above code be improved? I am wondering why the extra variable Initializations, why not just:

(function($) {

  function doSomething(i, domElement) { 
    // ... 
  }

  $(function() {
    $("#foo").click(function() {
      // ...
    });
    $(".bar").each(doSomething);
  });

})(jQuery);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眉目亦如画i 2024-11-16 10:17:47

看看 Crockford 的模式和揭示模块模式。它们与您发布的内容类似，但更进一步并说明为什么您想要使用初始化变量来命名空间。

回复收藏 0 原文

寂寞清仓 2024-11-16 10:17:47

如果有效，那就继续吧。

就我个人而言，我认为您正在深入研究刚刚发布的代码片段。它是 Javascript 中相当标准的技术。

回复收藏 0 原文

半城柳色半声笛 2024-11-16 10:17:47

jQuery(function($, undefined) {

  function Something(i, domElement) { 
    // ... 
  }

  Something.prototype.doSomething = ...

  var something = new Something(10, $("#foo")[0]);
  something.doSomething();

});

是的，它可以改进。你的例子是一个开始。我建议您还添加一些 OOP。

jQuery(function($, undefined) {

  function Something(i, domElement) { 
    // ... 
  }

  Something.prototype.doSomething = ...

  var something = new Something(10, $("#foo")[0]);
  something.doSomething();

});

Yes it can be improved. Your example is a start. I recommend you also add a bit of OOP into the mix.

回复收藏 0 原文

~没有更多了~