Bootstrap Source Parsing (EXT)

1, the scope of bootstrap

2. class definition of Bootstrap

3, bootstrap plug-in definition

4, Bootstrap event agent

5. Bootstrap Object Data cache

6. Bootstrap Conflict prevention

7. How to use the button class outside the scope

8, Bootstrap Unit test

Scope of Bootstrap

Bootstrap each plug-in is defined in the following scope code:

+function  ($) {    ...} (window.jquery)

Please see "iife" and "strict Mode" compilation environment.

Outside the scope of the plug-in, the global scope executes the first line of code and detects if jquery is defined. In the Grunt concat task, when all plugins are merged, the instrumentation code is added after the banner description of the target file. Grunt.js Related code:

Jquerycheck: ' if (typeof jquery = = = "undefined") {throw new Error ("Bootstrap requires jquery")}\n\n ', concat: {options: {banner:' <%= banner%><%= jquerycheck%> ', Stripbanners:false}, Bootstrap: {src: [' Js/transition.js ',          ' Js/alert.js ',          ' Js/button.js ',          ' Js/carousel.js ',          ' Js/collapse.js ',          ' Js/dropdown.js ',          ' Js/modal.js ',          ' Js/tooltip.js ',          ' Js/popover.js ',          ' Js/scrollspy.js ',          ' Js/tab.js ',          ' Js/affix.js '], dest:' Dist/js/<%= pkg.name%>.js '      }    }

Class definitions for Bootstrap

  var function (element, options) {    this. $element = $ (Element)    the This. Options  = $.extend ({}, Button.defaults, Options)  }   = {    ' loading ... '  }  function  (state) {    ...  }   function  () {    ...    }

Bootstrap the benefits of using this kind of definition, and the way JavaScript defines it, refer to JavaScript Object-oriented programming (i): encapsulation

JavaScript specifies that each constructor has a prototype property that points to another object. All properties and methods of this object are inherited by an instance of the constructor. This means that we can define the invariant properties and methods directly on the prototype object. The properties and methods defined inside the button function body can be considered as private properties and methods of the class, and the properties and methods defined for the Button.prototype object can be considered as public properties and methods of the class. This class encapsulates the methods and properties required for the initialization of a plug-in object.

Bootstrap plug-in definition

See "Quick Start for jquery plugin development", note that two this is a different object

  function (option) {    returnthis. each (function  () {      var $  This   = $ (this)      ...    })  }

Event proxy for Bootstrap

Bootstrap button Plug-in defines the last part, event bindings are written like this

function (e) {    ...    })

This JavaScript code binds the Click Delegate Event listener to the document element and assigns the click event to the namespace Click.bs.button.data-api, and the selector matches the value of the property Data-toggle " Button "At the beginning of the label.

The benefit of jquery in binding events to document objects is the advantage of the JS event broker, which performs a test comparison on performance.

For the benefits of the jquery namespace, see jquery. On () and. Off () namespaces

Conflict prevention in Bootstrap

jquery is a global object, so jquery's plug-in definition $.fn.button is not limited by scope. If the button plugin is also defined in another plug-in, the button plug-in that is loaded will overwrite the button plug-in that was loaded first, jsbin example:

// Old button+function($) {  function() {    alert (' old button ')  }} (window.jquery)   // Bootstrap button+function($) {  function() {    alert ( ' Bootstrap button ')  }} (Window.jquery) $ (//  alert (' Bootstrap button ')

Bootstrap has done plugin conflict handling, jsbin example:

//Old Button+function($) {$.fn.button=function() {alert (' Old button ')}} (Window.jquery)//Bootstrap Button+function($){  //assigns the original button plug-in object to a temporary variable old  varOld =$.fn.button $.fn.button=function() {alert (' Bootstrap button ')  }  //executes the function, restores the previous button definition, and returns the button plug-in defined by the bootstrap$.fn.button.noconflict =function() {$.fn.button= Oldreturn  This}} (Window.jquery)//<span style= "Font-family:helvetica, Tahoma, Arial, Sans-serif; white-space:normal; Background-color: #ffffff;" > Scope </span> Outside we have the flexibility to use two button plugins$.fn.button =$.fn.button.noconflict () $ (' A '). Button ()//alert (' Bootstrap button ')$.fn.button.noconflict () $ (' A '). Button ()//alert (' Old button ')

Bootstrap How to use the button class outside the scope

$.fn.button.constructor = button

In the bootstrap button plugin also has the above code, remove it does not affect the correct execution of the plug-in.

It's like a class constructor in javascript:

var function (name) {   this. Name = name}varnew Cat (' Hello Kitty')  varNew Cat (' Doramon '= = Cat.prototype.constructor

But JavaScript is case-sensitive, which means that the constructor beginning with the uppercase and the constructor at the beginning of the JavaScript lowercase have no relation.

There is also no definition of constructor in the jquery source code for uppercase starts. So the Constructor here is just a normal property, and we can write other names $.fn.button.something = Button,bootstrap It is more reasonable to name the constructor "Constructor" in order to indicate the meaning of this property.

In this way, the code is well understood: $.fn.button.constructor = button assigns the button class within the scope to the Constructor property of the jquery button object, The button class can also be used outside of the iife role. Call Mode:

+function($) {  //  class definition  varfunction() {}   //  plugin definition  function() {      alert (' Bootstrap button ')  }   // class assigns a value to the constructor property of the JQuery button object  $.fn.button.constructor =var button = $.fn.button.constructor

Object data caching for bootstrap

//Gets the Stored button object, if the value of the first execution variable data is undefinedvarData = $ This. Data (' Bs.button ')varOptions =typeofoption = = ' object ' &&option//Create button object: New button (this, options),//and assigns a value to the variable data:data = new Button (this, options)//The ' Bs.button ' data field that is stored on the element's jquery object $this. The. Data (' Bs.button ', data)if(!data) $ This. Data (' Bs.button ', (data =NewButton ( This, Options)))//data is a button object that can invoke the native method of the buttonif(option = ' Toggle ')) Data.toggle ()Else if(option) data.setstate (option)

Use jquery's. Data (key, value) to store the button object

Unit Tests for Bootstrap

Qunit + PHANTOMJS

Excellent program apes have a common secret: reading excellent code.

http://suqing.iteye.com/blog/1984131

Bootstrap Source Parsing (EXT)