jQuery教程 bootstrap源码分析之下拉菜单-职坐标

jQuery教程 bootstrap源码分析之下拉菜单

沉沙 2018-10-19 来源：阅读 1014 评论 0

摘要：本篇教程介绍了jQuery教程 bootstrap源码分析之下拉菜单，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 bootstrap源码分析之下拉菜单，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<div class="dropdown">
  <a id="dLabel" data-target="#" href="//example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

两个API①data-toggle属性②javascript---$(‘.dropdown-toggle‘).dropdown()

bootstrap.js中可以找到dropdown.js的内容如下

  1 /* ========================================================================
  2  * Bootstrap: dropdown.js v3.3.5
  3  * //getbootstrap.com/javascript/#dropdowns
  4  * ========================================================================
  5  * Copyright 2011-2015 Twitter, Inc.
  6  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  7  * ======================================================================== */
  8
  9
10 +function ($) {
11   ‘use strict‘;
12
13   // DROPDOWN CLASS DEFINITION
14   // =========================
15
16   var backdrop = ‘.dropdown-backdrop‘
17   var toggle   = ‘[data-toggle="dropdown"]‘
18   var Dropdown = function (element) {
19     $(element).on(‘click.bs.dropdown‘, this.toggle)
20   }
21
22   Dropdown.VERSION = ‘3.3.5‘
23
24   function getParent($this) {
25     var selector = $this.attr(‘data-target‘)
26
27     if (!selector) {
28       selector = $this.attr(‘href‘)
29       selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, ‘‘) // strip for ie7
30     }
31
32     var $parent = selector && $(selector)
33
34     return $parent && $parent.length ? $parent : $this.parent()
35   }
36
37   function clearMenus(e) {
38     if (e && e.which === 3) return
39     $(backdrop).remove()
40     $(toggle).each(function () {
41       var $this         = $(this)
42       var $parent       = getParent($this)
43       var relatedTarget = { relatedTarget: this }
44
45       if (!$parent.hasClass(‘open‘)) return
46
47       if (e && e.type == ‘click‘ && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
48
49       $parent.trigger(e = $.Event(‘hide.bs.dropdown‘, relatedTarget))
50
51       if (e.isDefaultPrevented()) return
52
53       $this.attr(‘aria-expanded‘, ‘false‘)
54       $parent.removeClass(‘open‘).trigger(‘hidden.bs.dropdown‘, relatedTarget)
55     })
56   }
57
58   Dropdown.prototype.toggle = function (e) {
59     var $this = $(this)
60
61     if ($this.is(‘.disabled, :disabled‘)) return
62
63     var $parent  = getParent($this)
64     var isActive = $parent.hasClass(‘open‘)
65
66     clearMenus()
67
68     if (!isActive) {
69       if (‘ontouchstart‘ in document.documentElement && !$parent.closest(‘.navbar-nav‘).length) {
70         // if mobile we use a backdrop because click events don‘t delegate
71         $(document.createElement(‘div‘))
72           .addClass(‘dropdown-backdrop‘)
73           .insertAfter($(this))
74           .on(‘click‘, clearMenus)
75       }
76
77       var relatedTarget = { relatedTarget: this }
78       $parent.trigger(e = $.Event(‘show.bs.dropdown‘, relatedTarget))
79
80       if (e.isDefaultPrevented()) return
81
82       $this
83         .trigger(‘focus‘)
84         .attr(‘aria-expanded‘, ‘true‘)
85
86       $parent
87         .toggleClass(‘open‘)
88         .trigger(‘shown.bs.dropdown‘, relatedTarget)
89     }
90
91     return false
92   }
93
94   Dropdown.prototype.keydown = function (e) {
95     if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
96
97     var $this = $(this)
98
99     e.preventDefault()
100     e.stopPropagation()
101
102     if ($this.is(‘.disabled, :disabled‘)) return
103
104     var $parent  = getParent($this)
105     var isActive = $parent.hasClass(‘open‘)
106
107     if (!isActive && e.which != 27 || isActive && e.which == 27) {
108       if (e.which == 27) $parent.find(toggle).trigger(‘focus‘)
109       return $this.trigger(‘click‘)
110     }
111
112     var desc = ‘ li:not(.disabled):visible a‘
113     var $items = $parent.find(‘.dropdown-menu‘ + desc)
114
115     if (!$items.length) return
116
117     var index = $items.index(e.target)
118
119     if (e.which == 38 && index > 0)                 index--         // up
120     if (e.which == 40 && index < $items.length - 1) index++         // down
121     if (!~index)                                    index = 0
122
123     $items.eq(index).trigger(‘focus‘)
124   }
125
126
127   // DROPDOWN PLUGIN DEFINITION
128   // ==========================
129
130   function Plugin(option) {
131     return this.each(function () {
132       var $this = $(this)
133       var data  = $this.data(‘bs.dropdown‘)
134
135       if (!data) $this.data(‘bs.dropdown‘, (data = new Dropdown(this)))
136       if (typeof option == ‘string‘) data[option].call($this)
137     })
138   }
139
140   var old = $.fn.dropdown
141
142   $.fn.dropdown             = Plugin
143   $.fn.dropdown.Constructor = Dropdown
144
145
146   // DROPDOWN NO CONFLICT
147   // ====================
148
149   $.fn.dropdown.noConflict = function () {
150     $.fn.dropdown = old
151     return this
152   }
153
154
155   // APPLY TO STANDARD DROPDOWN ELEMENTS
156   // ===================================
157
158   $(document)
159     .on(‘click.bs.dropdown.data-api‘, clearMenus)
160     .on(‘click.bs.dropdown.data-api‘, ‘.dropdown form‘, function (e) { e.stopPropagation() })
161     .on(‘click.bs.dropdown.data-api‘, toggle, Dropdown.prototype.toggle)
162     .on(‘keydown.bs.dropdown.data-api‘, toggle, Dropdown.prototype.keydown)
163     .on(‘keydown.bs.dropdown.data-api‘, ‘.dropdown-menu‘, Dropdown.prototype.keydown)
164
165 }(jQuery);

问题一:
+function ($) { "use strict";

}(window.jQuery); 怎么理解？
解释：
匿名函数闭包
我们先来理一理函数表达式和函数声明的区别
函数表达式：The function can be anonymous function, also can have the function name, but in fact this function cannot be used directly, only through the expression on the left side of the variable a to call.  函数可以是米名函数，也可以有函数名，但是这种函数无法直接使用，只有通过表达式左侧的变量来调用。
var a = function(){
  alert(‘Function expression‘);
}
var b = new a();
函数声明Must have the function name. 必需要有函数名
function a(){
  alert(‘Function declaration‘);
}
a();
This is a An anonymous function 下面是一个匿名函数
function () {

}
The unary operator + into function expression.一元操作符+和函数表达式
Can also use the - ~! Other unary operators or brackets, the purpose is to guide the parser, near the specified operator is an expression.也可以使用如-,~,!这种其它的一元操作符或者括号，目的是告诉解析器在这些特定操作符附近的是一个表达式（注意，JS将function当作一个函数声明的开始，而函数声明后面不能跟圆括号直接进行调用，所以有的时候想办法将函数声明转化为函数表达式）
The following are three classical methods 三种典型方式进行上述转换
+function () {

};

(function () {

});

void function() {

};

The efficiency of these three kinds of
Operators addition and subtraction counter, operator "~" (bit reverse) the definition in the EMCAScript5: according to operator binding statement; the old value into a 32 bit integer; execution operator after the statement; conversion of the line for 32 bit and returns the result.
"()"Group operators: returns the expression results in the execution of the.

void: According to operator binding statement execution, return undefined. The group operator also needs to perform the statement and returns the value returned by the contrast statement block, void multiple access block operation, thus the performance of void in this case is better than the group of operators.
吧拉粑粑拉粑粑拉吧拉吧拉吧没看明白不好意思！

Through the end of the () to call and run 通过在表达式末尾加()运行
+function () {

}();

(funtion () {

})();
Parameter passing, in order to avoid the $and other library or template that conflict, window.jQuery passed as parameters.
参数传递，为了避免$和其他库或模板发生冲突，jquery用这种方式起作用
+function (x) {
    console.log(x);
}(3);

+function ($) {

}(window.jQuery);
Another advantage is that, within the scope of the JS interpreter, can quickly find $object than this method.
其它优势在于，在JS解释器中，这种方式下的效率更高
$(function(){

});
There is a way, to avoid naming conflicts.
避免冲突的另一种方式
var j = jQuery.noConflict();
j(‘#someDiv‘).hide();
$(‘someDiv‘).style.display = ‘none‘;// Other libraries$
A look of writing something like the code. This code initializes the jQuery code in the DOM loading is complete.
这种写法，代码将在DOM加载完毕时初始化Jquery代码
$(function(){

});
This is equivalent to the
和下面这种写法作用相同
$(document).ready(function(){
// Initialize the jQuery code in the DOM loading is complete.
});
Different from 和这种不同
$(window).load(function(){
// In the picture, the media file is loaded, the initialization of jQuery code.
});

In strict mode 严格模式下的情况我暂时先不研究了，等日后水平上来再进一步学习

The establishment of "strict mode", mainly in the following: norms, efficiency, safety, facing the future
　　Remove the Javascript grammar some unreasonable, not rigorous, reduce some strange behavior;
　　- remove some safety code operation code, ensure operation safety,
　　- to improve the compiler efficiency, increase running speed,
　　- in order to pave the way for future versions of Javascript.

Enter "sign in strict mode", is the following statement: 　　
"use strict";

The old version of the browser will send it as an ordinary string, ignore them.

The "use strict" in the first line of the script file, the script will be "strictly" mode of operation.
If this statement is not in the first row, is invalid, the script is run in "normal mode".
If the code files of different patterns was merged into one document, this requires special attention.
(strictly speaking, as long as the front is not to produce practical results of the sentence, "use strict" may not be in the first line, such as direct as in an empty semicolon. )
<script>
  "use strict";
  console.log("This is strict mode. ");
</script>
<script>
　console.log("This is the normal mode. ");
</script>

The "use strict" in the first line of the function body, the entire function to "strict" mode of operation.
function strict(){
  "use strict";
  return "This is strict mode. ";
}
function notStrict() {
  return "This is the normal mode. ";
}

Because calling the method above is not conducive to the files, so it is better, the following method, the script file in an anonymous function is executed immediately.
+function (){  "use strict";

}();

The scope of strict mode constraint
Var declare variables. In strict mode, variable must use the VaR command to display the statement, and then use the.
"use strict";
v = 1; // Error, V is not a statement
for(i = 0; i <2; i++) { // Error, I is not a statement

}

Numbers don‘t add 0. Disable the octal algorithm because... Because the octal is not included in the ECMAScript, the digital front 0 will change the meaning of numbers, JS will think is an octal number, thus error.
"use strict";
var sum = 015 + // Error! syntax error
          197 +
          142;

Do not allow the function non top, it is not allowed to function nesting. ECMAScript5 (or ECMAScript3) are not allowed.
"use strict";
if (true){
  function f() { } // Error! syntax error
  f();
}

for (var i = 0; i <5; i++){
  function f2() { } // Error! syntax error
  f2();
}

function baz(){ // kosher
  function eit() { } // also kosher
}

Don‘t use these words do variables or parameters implements, interface, let, package, private, protected, public, static, yield. In strict mode as the reserved keywords. Future ECMAScript seems to cut into the pre.
function package(protected){ // Error!
  "use strict";
  var implements; // Error!

  interface: // Error!
  while (true){
    break interface; // Error!
  }

  function private() { } // Error!
}
function fun(static) { ‘use strict‘; } // Error!

Console implementation of strict mode returns undefined

(function(){ return this; })() Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}(function(){ ‘use strict‘; return this; })()undefined

There are other examples
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FFunctions_and_function_scope%2FStrict_mode

Document ready immediately
!function ($) {

  $(function(){

  })

}(window.jQuery)