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屋！
