https://stackoverflow.com/questions/22156664/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"]
这个不就是跟对象字面量一个意思，在jquery的对象上定义一个属性或方法，后面你可以直接用。let obj = {name:'aaa'}，后面你就可以直接用obj.name。$.ajax就是这样的

实例

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?的更多相关文章

  1. Fedora 24中的日志管理

    Introduction Log files are files that contain messages about the system, including the kernel, servi ...

  2. Markdown使用指南（2）—— 键盘符号说明

    符号 中文名 英文名 ! 叹号 exclamation mark/bang ? 问号 question mark , 逗号 comma . 点号 dot/period/point : 冒号 colon ...

  3. HTML转义字符大全

    ISO Latin-1字符集:  — 制表符Horizontal tab  — 换行Line feed  — 回车Carriage Return  — Space ! ! — 惊叹号Exclamati ...

  4. 【转】HTML转义字符大全

    ISO Latin-1字符集:  — 制表符Horizontal tab  — 换行Line feed  — 回车Carriage Return  — Space ! ! — 惊叹号Exclamati ...

  5. Linux命令中特殊符号

    转自:http://blog.chinaunix.net/uid-16946891-id-5088144.html   在shell中常用的特殊符号罗列如下:# ; ;; . , / \ 'strin ...

  6. (转载)Bash 中的特殊字符大全

    转自:https://linux.cn/article-5657-1.html Linux下无论如何都是要用到shell命令的,在Shell的实际使用中,有编程经验的很容易上手,但稍微有难度的是she ...

  7. linux特殊符号大全

    #   ;   ;;      .      ,       /       \       'string'|       !   $   ${}   $?      $$   $*  " ...

  8. HTML语言特殊字符对照表(ISO Latin-1字符集)

    HTML字符实体(Character Entities) 有些字符在HTML里有特别的含义,比如小于号<就表示HTML Tag的开始,这个小于号是不显示在我们最终看到的网页里的.那如果我们希望在 ...

  9. 爬虫技术 -- 基础学习（一）HTML规范化（附特殊字符编码表）

    最近在做网页信息提取这方面的,由于没接触过这系列的知识点,所以逛博客,看文档~~看着finallyly大神的博文和文档,边看边学习边总结~~ 对网站页面进行信息提取,需要进行页面解析,解析的方法有以下 ...

随机推荐

  1. 搜索专题: HDU1501Zipper

    Zipper Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  2. jQuery之样式的类操作

    方法:添加类addClass    .删除类removeClass. 切换类toggleClass <style> div { width: 150px; height: 150px; b ...

  3. vue 项目报错，提示：Cannot read property '$createElement' of undefined at render ...

    vue 项目报错,提示:Cannot read property '$createElement' of undefined at render ...

  4. Cross-Origin-Resource-Sharing-Solutions

    from:https://github.com/hijiangtao/hijiangtao.github.io/blob/master/_posts/2017-06-13-Cross-Origin-R ...

  5. WithEvents的一些用法

    WithEvents的一些用法说明:1.WithEvents是指定一个或多个已声明成员变量引用可引发事件的类的实例.2.当某个变量是使用 WithEvents 定义时,可以用声明方式指定某个方法使用 ...

  6. 【学习】018 Spring框架

    Spring的概述 Spring框架,可以解决对象创建以及对象之间依赖关系的一种框架. 且可以和其他框架一起使用:Spring与Struts,  Spring与hibernate (起到整合(粘合)作 ...

  7. [效率神技]Intellij 的快捷键和效率技巧|系列一|常用快捷键

    Intellij 是个功能强大的IDE,这里只讲window下社区版的Intellij. 1. 常用快捷: Alt+回车 导入包,自动修正Ctrl+N   查找类Ctrl+Shift+N 查找文件Ct ...

  8. sshfs 挂载远程文件夹

    1 安装 # yum install sshfs # dnf + releases] $ sudo apt-get install sshfs [On Debian/Ubuntu based syst ...

  9. 动态SQL的注意

    MyBatis的动态SQL元素. 元素 说明 <if> 判断语句,用于单条件分支判断 <choose>(<when>.<otherwise>) 相当于j ...

  10. Netty学习--第二章 BIO的模型详解

    一.什么是阻塞.非阻塞.同步.异步 我们以A线程调用B线程的过程例子来讲解这四个概念 在一个程序里,A调用B了,此时如果是 同步: A必须等待B返回结果后,才能继续执行,但是在这期间A会一直监控B的返 ...