JavaScript / jQuery中的这种设计模式是什么? [英] What is this design pattern known as in JavaScript/jQuery?
问题描述
我正在查看 SlickGrid 的JavaScript源代码。
我注意到,slick.grid.js具有以下结构:
(function($) {
// Slick.Grid
$ .extend(true,window,{
Slick:{
Grid:SlickGrid
}
});
var scrollbarDimensions; //在此页面上的所有网格共享
///////////////////// ////////////////////////////////////////////////// ///
// SlickGrid类实现(可作为Slick.Grid使用)
/ **
* @param {Node}容器容器创建网格的节点
* @param {Array,Object} data用于数据绑定的对象数组
* @param {Array}列列定义数组
* @param {Object}选项网格选项。
** /
函数SlickGrid(容器,数据,列,选项){
///< summary>
///在指定的$ container中创建和管理虚拟网格,
///将其连接到指定的数据源。数据呈现为
///作为具有指定列和data.length行的网格。
///选项改变网格的行为。
///< / summary>
//设置
var defaults = {
...
};
...
//私人
var $ container;
...
//////////////////////// /////////////////////////////////////////
/ /初始化
函数init(){
///< summary>
///初始化SlickGrid的this(self)实例。
///该函数由构造函数调用。
///< / summary>
$ container = $(container);
...
}
//////////////////////// //////////////////////////////
//私人和公共功能,Getters / Setters,交互性等
功能measureScrollbar(){
...
}
////////// ////////////////////////////////////////////////// ////////////
//公开API
$ .extend(this,{
slickGridVersion:2.0a1,
//活动
onScroll:new Slick.Event(),
...
//方法
registerPlugin:registerPlugin,
...
});
init();
}
}(jQuery));
为了简洁和清晰,省略了一些代码,但这应该给你一个通用的想法。 (function($){// code}(jQuery) ));
这是我看过的模块模式吗?这是为了保持全局命名空间清洁吗?
$。extend()
意思是:顶部 $。extends(true,window,{// code});
看起来像是与命名空间有关系;什么是命名空间?它看起来像底部 $。extends(this,{// code});
用于暴露public成员和函数?你如何定义私有函数或变量?
如果你想要的话,你如何初始化多个SlickGrids?他们会分享多少,他们将如何互动?请注意构造函数函数:函数SlickGrid(...){// code}
。
这种风格的编码有哪些书籍,链接和其他资源?谁发明了?
谢谢! ♥
这是一个jQuery插件。
(function($){// code}(jQuery));
给你一个新的函数范围,所以你的名字不会转储到全局范围内。将jQuery作为$,让您可以使用$简写,即使其他Javascript库使用$。
$。extend
一种将属性从一个对象复制到另一个对象的jQuery方法。第一个参数 true
意味着它应该是一个深而不是浅的副本。通过扩展窗口
,将创建新的全局属性,在这种情况下, Slick
。
底部的 $。extends(this,...)
在大写的函数SlickGrid中。 SlickGrid
旨在用作构造函数,在这种情况下这个
将是新创建的对象,所以这 extend
正在向对象添加属性。他们是公共成员。在这个代码示例中, measureScrollbar
是私有的:它只对此函数中定义的代码可见,不在外部。
您可以创建多个网格:
var grid1 = new Slick.Grid(blah,blah);
var grid2 = new Slick.Grid(blah,blah);
在您显示的代码中,这两个实例将共享的唯一的东西是 scrollBarDimensions
变量。
I was looking over the JavaScript source code for SlickGrid.
I've noticed that slick.grid.js has the following structure:
(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) {
/// <summary>
/// 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.
/// </summary>
// settings
var defaults = {
...
};
...
// private
var $container;
...
////////////////////////////////////////////////////////////////////////
// Initialization
function init() {
/// <summary>
/// Initialize 'this' (self) instance of a SlickGrid.
/// This function is called by the constructor.
/// </summary>
$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));
Some code has been omitted for brevity and clarity, but this should give you the general idea.
What is the purpose of the the following:
(function($) { // code }(jQuery));
Is this the module pattern that I've seen talked about? Is this meant to keep the global namespace clean?What do the
$.extend()
lines mean?: The top$.extend(true, window, { // code });
looks like it has to do with a "namespace"; what's a namespace? It looks like the bottom$.extend(this, { // code });
is used to exposed 'public' members and functions? How would you define a private function or variable?How would you initialize multiple "SlickGrids" if you wanted to? How much would they share and how would they interact? Note the "constructor" function:
function SlickGrid(...) { // code }
.What are some books, links, and other resources on coding in this style? Who invented it?
Thanks! ♥
This is a jQuery plugin.
(function($) { // code }(jQuery));
gives you a new function scope so your names are not dumped into the global scope. Passing jQuery as $ lets you use the $ shorthand even if other Javascript libraries use $.
$.extend
is a jQuery method to copy properties from one object to another. The first argument true
means it should be a deep rather than a shallow copy. By extending window
, new global properties are created, in this case, Slick
.
The $.extend(this,...)
at the bottom is in a capitalized function SlickGrid. SlickGrid
is meant to be used as a constructor, in which case this
will be the newly-created object, so this extend
is adding properties to the object. They are effectively public members. In this code sample, measureScrollbar
is private: it is only visible to the code defined in this function, not outside it.
You can create a number of grids with:
var grid1 = new Slick.Grid(blah, blah);
var grid2 = new Slick.Grid(blah, blah);
In the code you've shown, the only thing these two instances will share is the scrollBarDimensions
variable.
这篇关于JavaScript / jQuery中的这种设计模式是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!