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大神的博文和文档,边看边学习边总结~~ 对网站页面进行信息提取,需要进行页面解析,解析的方法有以下 ...
随机推荐
- 提高CUI测试稳定性技术
GUI自动化测试稳定性,最典型的表现形式就是,同样的测试用例在同样的环境上,时而测试通 过,时而测试失败. 这也是影响GUI测试健康发展的一个重要障碍,严重降低了GUI测试的可信性. 五种造成GUI测 ...
- C++------流星雨
用C++实现模拟数字.字母流星雨,其主要用到链表.win32编程基础. demo实例: // DataRainDemo.cpp : 定义应用程序的入口点. // #include "stda ...
- vue项目引入外部字体
1.UI设计图有"华文黑体",担心客户端没有该字体,将"huawen.ttf"字体文件,放入项目中: 2.创建一个font.scss(或font.css)文件: ...
- SEM和SEO的区别？
https://www.zhihu.com/question/20307058 SEM在营销中扮演的角色:进攻 搜索引擎营销,即SEM(Search Engine Marketing),是基于搜索引擎 ...
- 008-kvm虚拟化管理平台WebVirtMgr部署-完整记录(1)
公司机房有一台2U的服务器(64G内存,32核),由于近期新增业务比较多,测试机也要新增,服务器资源十分有限.所以打算在这台2U服务器上部署kvm虚拟化,虚出多台VM出来,以应对新的测试需求. 当KV ...
- js 动态时间
<script type="text/javascript"> function show_cur_times(){ //获取当前日期 var date_time = ...
- canvas合并两张图片
解析: 原理是一样的 画多张图需要一张一张画 也就是等图片onload成功后处理 这里代码写的比较随意 实际用的时候可以小粉转一下 也非常简单.我懒~~ 么么.. newImage(text) { / ...
- [USACO2009 OPEN] 滑雪课 Ski Lessons
洛谷P2948 看到题目就觉得这是动规但一直没想到如何状态转移……看了别人的题解之后才有一些想法 f[i][j]:前i单位时间能力值为j可以滑的最多次数 lessons[i][j]:结束时间为i,获得 ...
- v-if 和 v-show
关于条件渲染 所谓条件渲染,就是根据不同的条件,使用不同的模板来生成 html. 在 Vue.js 中,使用 v-if 和 v-show 指令来控制条件渲染. 区别 v-show 会在app初始化的时 ...
- 【NOIP2012模拟8.20】Memory
题目 话说某一天,CD在爬树的时候发现了树干上有一大串奇怪的符文,于是好奇的CD就从头到尾看了一遍.看完一遍以后CD觉得,最后一段文字好像很眼熟,好像在前面见过.对于CD来说,一开始看到的符文会印象特 ...