What does the dot after dollar sign mean in jQuery when declaring variables?
I see variables declared as:
$.root = $("body");and
$root = $("body");What is the difference between the two?
答案
Functions in JavaScript are objects. And like most objects in JavaScript, you can arbitrarily add properties to them. The $ function is just that, a function. So if you want to pop a property onto it and reference a jQuery collection, or reference, you can.
By adding the collection as a property on the $ function, it is one less variable in the current scope. You can examine the keys of the jQuery function before and after if you'd like to see how it affects the function's topography and (enumerable) property list:
Object.keys($);
// ["fn", "extend", "expando"..."parseHTML", "offset", "noConflict"]
$.root = $("body");
// [<body>]
Object.keys($);
// ["fn", "extend", "expando"..."parseHTML", "offset", "noConflict", "root"]实例
https://github.com/tkvw/jQuery-File-Upload/blob/master/js/jquery.fileupload-image-editor.js
$.widget('blueimp.fileupload', $.blueimp.fileupload, {})
这个widget的定义在https://github.com/tkvw/jQuery-File-Upload/blob/master/js/vendor/jquery.ui.widget.js#L57
$.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype,
// proxiedPrototype allows the provided prototype to remain unmodified
// so that it can be used as a mixin for multiple widgets (#8876)
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];
name = name.split( "." )[ 1 ];
fullName = namespace + "-" + name;
if ( !prototype ) {
prototype = base;
base = $.Widget;
}
// create selector for plugin
$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
return !!$.data( elem, fullName );
};
$[ namespace ] = $[ namespace ] || {};
existingConstructor = $[ namespace ][ name ];
constructor = $[ namespace ][ name ] = function( options, element ) {
// allow instantiation without "new" keyword
if ( !this._createWidget ) {
return new constructor( options, element );
}
// allow instantiation without initializing for simple inheritance
// must use "new" keyword (the code above always passes args)
if ( arguments.length ) {
this._createWidget( options, element );
}
};
// extend with the existing constructor to carry over any static properties
$.extend( constructor, existingConstructor, {
version: prototype.version,
// copy the object used to create the prototype in case we need to
// redefine the widget later
_proto: $.extend( {}, prototype ),
// track widgets that inherit from this widget in case this widget is
// redefined after a widget inherits from it
_childConstructors: []
});
basePrototype = new base();
// we need to make the options hash a property directly on the new instance
// otherwise we'll modify the options hash on the prototype that we're
// inheriting from
basePrototype.options = $.widget.extend( {}, basePrototype.options );
$.each( prototype, function( prop, value ) {
if ( !$.isFunction( value ) ) {
proxiedPrototype[ prop ] = value;
return;
}
proxiedPrototype[ prop ] = (function() {
var _super = function() {
return base.prototype[ prop ].apply( this, arguments );
},
_superApply = function( args ) {
return base.prototype[ prop ].apply( this, args );
};
return function() {
var __super = this._super,
__superApply = this._superApply,
returnValue;
this._super = _super;
this._superApply = _superApply;
returnValue = value.apply( this, arguments );
this._super = __super;
this._superApply = __superApply;
return returnValue;
};
})();
});
constructor.prototype = $.widget.extend( basePrototype, {
// TODO: remove support for widgetEventPrefix
// always use the name + a colon as the prefix, e.g., draggable:start
// don't prefix for widgets that aren't DOM-based
widgetEventPrefix: existingConstructor ? (basePrototype.widgetEventPrefix || name) : name
}, proxiedPrototype, {
constructor: constructor,
namespace: namespace,
widgetName: name,
widgetFullName: fullName
});
// If this widget is being redefined then we need to find all widgets that
// are inheriting from it and redefine all of them so that they inherit from
// the new version of this widget. We're essentially trying to replace one
// level in the prototype chain.
if ( existingConstructor ) {
$.each( existingConstructor._childConstructors, function( i, child ) {
var childPrototype = child.prototype;
// redefine the child widget using the same prototype that was
// originally used, but inherit from the new version of the base
$.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, child._proto );
});
// remove the list of existing child constructors from the old constructor
// so the old child constructors can be garbage collected
delete existingConstructor._childConstructors;
} else {
base._childConstructors.push( constructor );
}
$.widget.bridge( name, constructor );
return constructor;
};
What does the dot after dollar sign mean in jQuery when declaring variables?的更多相关文章
- Fedora 24中的日志管理
Introduction Log files are files that contain messages about the system, including the kernel, servi ...
- Markdown使用指南（2）—— 键盘符号说明
符号 中文名 英文名 ! 叹号 exclamation mark/bang ? 问号 question mark , 逗号 comma . 点号 dot/period/point : 冒号 colon ...
- HTML转义字符大全
ISO Latin-1字符集: — 制表符Horizontal tab — 换行Line feed — 回车Carriage Return — Space ! ! — 惊叹号Exclamati ...
- 【转】HTML转义字符大全
ISO Latin-1字符集: — 制表符Horizontal tab — 换行Line feed — 回车Carriage Return — Space ! ! — 惊叹号Exclamati ...
- Linux命令中特殊符号
转自:http://blog.chinaunix.net/uid-16946891-id-5088144.html 在shell中常用的特殊符号罗列如下:# ; ;; . , / \ 'strin ...
- (转载)Bash 中的特殊字符大全
转自:https://linux.cn/article-5657-1.html Linux下无论如何都是要用到shell命令的,在Shell的实际使用中,有编程经验的很容易上手,但稍微有难度的是she ...
- linux特殊符号大全
# ; ;; . , / \ 'string'| ! $ ${} $? $$ $* " ...
- HTML语言特殊字符对照表(ISO Latin-1字符集)
HTML字符实体(Character Entities) 有些字符在HTML里有特别的含义,比如小于号<就表示HTML Tag的开始,这个小于号是不显示在我们最终看到的网页里的.那如果我们希望在 ...
- 爬虫技术 -- 基础学习（一）HTML规范化（附特殊字符编码表）
最近在做网页信息提取这方面的,由于没接触过这系列的知识点,所以逛博客,看文档~~看着finallyly大神的博文和文档,边看边学习边总结~~ 对网站页面进行信息提取,需要进行页面解析,解析的方法有以下 ...
随机推荐
- Java - PhantomJS + EChartsConvert实现ECharts图片保存到服务端
1.所需工具 1>phantomjs:官网下载http://phantomjs.org/download.html 国内镜像http://npm.taobao.org/dist/phantomj ...
- FHJ学长的心愿 QDUOJ 数论
FHJ学长的心愿 原题链接,点我进去 题意 给你一个数N,让你求在\[C^{0}_{n} \ C^{1}_{n}\ C^{2}_{n}\ \dots \ C^{n}_{n}\]中有几个组合数是奇数. ...
- P5020货币系统
这个题是2018提高组真题,是一道看不出是背包的背包题. 题干特别长,甚至有些没看懂.题意为给出一组货币面值,然后从这里面用最少的面值数量取代原先的面值.比如3,6直接用3表示.一开始想到了小凯的疑惑 ...
- 【vuejs面试题】务必熟知的vuejs面试题「务必收藏」
如果能帮到你,点个赞吧,务必熟知的vuejs面试题「务必收藏」 vuejs 基础必备 1.active-class 是哪个组件的属性?嵌套路由怎么定义 (1).active-class 是 vue-r ...
- struts2_对Map进行双层迭代
转自:struts2_对Map进行双层迭代 //后台数据 public String execute() throws Exception { Map<String, List<Produ ...
- vue 项目报错，提示：Cannot read property '$createElement' of undefined at render ...
vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ...
- Java 关于SpringbootJPA分页及排序
创建Pageable对象 看了网上很多博客,都是在用 new PageRequest的方法创建Pageable对象.可是估计很多同学写了之后才发现原来这个方法作者已经标记为过时了: 替代的方法是不要n ...
- php 多维数组转一维数组
1.巧用 RecursiveIteratorIterator $k_arrays_arrays_tmp = iterator_to_array(new RecursiveIteratorIterato ...
- python2和3的一些区别，编码方式
python2与python3的区别: #python2 print() print'abc' #range() xrange()生成器 #raw_input()#python3 #print('ab ...
- VB TreeView控件使用详解(有趣的示例)
第一小时:学习直接用代码将数据填充到树控件中. 为什么要先学习直接用代码将数据填充到树控件中?因为这种方法是最简单的,代码也最容易理解,学习树控件,先将这个学会,已经掌握了一半,所以先不要急着想怎么将 ...