JavaScript / jQuery中的这种设计模式是什么？
我正在查看SlickGrid的JavaScript源代码。
我注意到slick.grid.js具有以下结构：
(function($) { // Slick.Grid $.extend(true, window, { Slick: { Grid: SlickGrid } }); var scrollbarDimensions; // shared across all grids on this page //////////////////////////////////////////////////////////////////////////// // SlickGrid class implementation (available as Slick.Grid) /** * @param {Node} container Container node to create the grid in. * @param {Array,Object} data An array of objects for databinding. * @param {Array} columns An array of column definitions. * @param {Object} options Grid options. **/ function SlickGrid(container,data,columns,options) { /// /// Create and manage virtual grid in the specified $container, /// connecting it to the specified data source. Data is presented /// as a grid with the specified columns and data.length rows. /// Options alter behaviour of the grid. /// // settings var defaults = { ... }; ... // private var $container; ... //////////////////////////////////////////////////////////////////////// // Initialization function init() { /// /// Initialize 'this' (self) instance of a SlickGrid. /// This function is called by the constructor. /// $container = $(container); ... } //////////////////////////////////////////////////////////////////////// // Private & Public Functions, Getters/Setters, Interactivity, etc. function measureScrollbar() { ... } //////////////////////////////////////////////////////////////////////// // Public API $.extend(this, { "slickGridVersion": "2.0a1", // Events "onScroll": new Slick.Event(), ... // Methods "registerPlugin": registerPlugin, ... }); init(); } }(jQuery)); 为简洁起见，省略了一些代码，但这应该给你一般的想法。
-
以下内容的目的是什么：
(function($) { // code }(jQuery));这是我见过的模块模式吗？ 这是否意味着保持全局命名空间的清洁？ -
$.extend()行是什么意思？：顶部$.extend(true, window, { // code });看起来它与“命名空间”有关; 什么是命名空间？ 它看起来像底部的$.extend(this, { // code });用于暴露“公共”成员和职能？ 您如何定义私有函数或变量？ -
如果你愿意，你会如何初始化多个“SlickGrids”？ 他们分享了多少，他们将如何互动？ 注意“构造函数”函数：
function SlickGrid(...) { // code }。 -
这种风格的编码有哪些书籍，链接和其他资源？ 谁发明了它？
谢谢！ ♥
这是一个jQuery插件。
(function($) { // code }(jQuery)); 为您提供了一个新的函数范围，因此您的名称不会转储到全局范围。 将jQuery作为$传递即使其他Javascript库使用$也可以使用$简写。
$.extend是一种将属性从一个对象复制到另一个对象的jQuery方法。 第一个参数为true意味着它应该是深而不是浅的副本。 通过扩展window ，可以创建新的全局属性，在本例中为Slick 。
底部的$.extend(this,...)位于大写函数SlickGrid中。 SlickGrid意味着用作构造函数，在这种情况下， this将是新创建的对象，因此这个extend是向对象添加属性。 他们实际上是公共成员。 在此代码示例中， measureScrollbar是私有的：它仅对此函数中定义的代码可见，而不是在其外部。
您可以使用以下命令创建多个网格：
var grid1 = new Slick.Grid(blah, blah); var grid2 = new Slick.Grid(blah, blah);
在您显示的代码中，这两个实例将共享的唯一内容是scrollBarDimensions变量。
(function($) { // code }(jQuery))
这是一个关闭。 它基本上保持其内部的所有内容“//代码”免受外界的影响。 你传递了jQuery和$，但是有更多知识的人必须解释为什么这是必要的。
$.extend()
这是一个jQuery函数，它将获取两个对象并将它们合并在一起。 用第二个对象替换第一个对象“window”{Slick：{Grid：SlickGrid}}。 这意味着如果有一个带有Grid的窗口对象：Null，它现在将等于Grid：SlickGrid。
添加true作为第一个参数意味着它也将替换嵌套对象：
var firstObj = { myObj:{ first:this, second: { new: obj } }} $.extend(true, firstObj, {myObj:{second:{new:newer}}});
如果您使用大量对象来存储信息，这将非常有用。
不确定＃3的含义，但请查看http://960.gs以获得良好的网格系统。
JavaScript Good Parts是一本很棒的书。 John Resig的Pro JavaScript也是一本很好的书，可以让你超越基础知识。
简单地说，你的例子中的人只是编写了各种各样的jQuery插件…查看jquery.com的PLUGINS部分，以获取有关如何编写插件的源代码的更多参考。 它们简单，直接且有趣。
对于第一个问题，这个构造是一种允许jQuery与可能使用$函数的其他库共存的方法，但仍然使用$来引用代码块中的jQuery。
整个包被包装在函数调用中， $作为参数。 执行此操作时唯一的“主要”活动是使用jQuery作为参数调用该函数，这将向着名的全局jQuery引用本地参数$ ，该参数掩盖$可能具有的任何全局值。
1）加载JS文件时立即调用该函数。 它接收jquery实例作为参数，并在内部以“$”forms提供。 所有代码都封装在该函数中（除非您忘记前面的一个尚未声明的变量），否则不会污染全局命名空间。
2）第二个对象的所有属性都被复制到第一个对象，这里是“window”，它也是Web浏览器中的全局命名空间对象。 因此，这段代码没有多大意义。 它假装封装但反其道而行之。 $ .extend的第二次调用也没有多大意义。 这没错，我只是认为代码“假装”。
4）我强烈建议你查看Douglas Crockford的video， url为http://developer.yahoo.com/yui/theater/ Crockford是一个JS神，非常有名（在严肃的JS程序员中） – 此外还有很多乐趣。听:)