Bootstrap 소스 분석

1. Bootstrap의 역할 영역
2. Bootstrap의 클래스 정의
3. Bootstrap의 플러그인 정의
4.Bootstrap의 이벤트 에이전트
5.Bootstrap의 개체 데이터 캐시
6.Bootstrap의 충돌 방지
7. 역할 영역 밖에서 Button 클래스를 어떻게 사용하는지
8.Bootstrap의 단원 테스트
 
 
Bootstrap 역할 영역
Bootstrap 각 플러그인은 다음 역할 도메인 코드에 정의됩니다.

+function ($) {

    ...

}(window.jQuery)

《IIFE》와 《엄격한 패턴》의 번역 환경을 보십시오.
 
플러그인의 역할 영역 외에 전역 실행 코드의 첫 번째 줄에서 jQuery가 정의되었는지 검사합니다.Grunt의 concat 작업에서 모든 플러그인을 병합할 때, 테스트 코드는 대상 파일의 반너 설명 뒤에 추가됩니다.Grunt.js 관련 코드:

jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }

',



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'

      }

    }

Bootstrap의 클래스 정의

  var Button = function (element, options) {

    this.$element = $(element)

    this.options  = $.extend({}, Button.DEFAULTS, options)

  }



  Button.DEFAULTS = {

    loadingText: 'loading...'

  }



  Button.prototype.setState = function (state) {

    ...

  }



  Button.prototype.toggle = function () {

    ...  

  }

Bootstrap이 이런 종류의 정의 방식을 채택한 장점과Javascript의 다른 몇 가지 정의 방식은 을 참조하십시오.
Javascript는 모든 구조 함수에prototype 속성이 있고 다른 대상을 가리킨다.이 대상의 모든 속성과 방법은 구조 함수의 실례에 의해 계승된다.이것은 우리가 변하지 않는 속성과 방법을 프로토타입 대상에 직접 정의할 수 있다는 것을 의미한다.Button 함수체 내부에서 정의된 속성과 방법은 클래스의 사유 속성과 방법으로 볼 수 있으며 Button이다.prototype 대상이 정의한 속성과 방법은 모두 유형의 공공 속성과 방법으로 볼 수 있다.이 클래스는 플러그인 대상을 초기화하는 데 필요한 방법과 속성을 봉인합니다.
 
Bootstrap 플러그인 정의
《Javascript 객체 프로그래밍(一): 캡슐화》를 참고하여 두 this가 가리키는 것은 서로 다른 대상임을 주의하십시오.

  $.fn.button = function (option) {

    return this.each(function () {

      var $this   = $(this)

      ...

    })

  }

Bootstrap의 이벤트 에이전트
Bootstrap Button 플러그인 정의의 마지막 부분입니다. 이벤트 귀속은 이렇게 적혀 있습니다.

$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {

    ...    

})

이 JavaScript 코드는 클릭 의뢰 이벤트 감청기를 문서 요소에 연결하고 클릭 이벤트에 이름 공간을 부여합니다.bs.button.데이터-api, jQuery 플러그인 개발 빠른 시작 일치하는 것은 속성 데이터-toggle의 값이 "button"으로 시작하는 탭입니다.
jQuery가 이벤트를 문서 대상에 연결하는 장점은 js 이벤트 에이전트의 장점과 성능선택기이다.
jQuery 네임스페이스의 이점에 대해서는 테스트 비교 참조
 
Bootstrap의 충돌 방지
jQuery는 전역 대상이기 때문에 jQuery의 플러그인 정의$.fn.button은 역할 영역의 제한을 받지 않습니다.다른 플러그인에 button 플러그인이 정의되어 있으면, 다음에 불러오는 button 플러그인은 먼저 불러온 button 플러그인을 덮어씁니다. jQuery .on() and .off () 네임스페이스

// Old button

+function($){

  $.fn.button = function() {

    alert('Old button')

  }

}(window.jQuery)  



// Bootstrap button

+function($){

  $.fn.button = function() {

    alert('Bootstrap button')

  }

}(window.jQuery)



$('a').button() // alert('Bootstrap button')

Bootstrap은 플러그인 충돌 처리jsbin 예:

// Old button

+function($) {

  $.fn.button = function() {

    alert('Old button')

  } 

}(window.jQuery)



// Bootstrap button

+function($){

  //     button             old

  var old =  $.fn.button



  $.fn.button = function() {

      alert('Bootstrap button')

  }



  //      ，     button  ，   Bootstrap   button  

  $.fn.button.noConflict = function () {

    $.fn.button = old

    return this

  }



}(window.jQuery)



// <span style="font-family: Helvetica, Tahoma, Arial, sans-serif; white-space: normal; background-color: #ffffff;">   </span>           button  

$.fn.button = $.fn.button.noConflict()

$('a').button() // alert('Bootstrap button')



$.fn.button.noConflict()

$('a').button() // alert('Old button')

Bootstrap 역할 영역 외부에서 Button 클래스를 사용하는 방법

$.fn.button.Constructor = Button

Bootstrap의 button 플러그인에는 플러그인의 정확한 실행에 영향을 주지 않는 위쪽 자구 코드가 있습니다. 
이것은 자바스크립트의 클래스 구조기와 매우 비슷하다.

var Cat = function(name) {

   this.name = name

}

var cat1 = new Cat('Hello Kitty')

var cat2 = new Cat('Doramon')



cat1.constructor == Cat.prototype.constructor

그러나 자바스크립트는 대소문자를 구분한다. 즉, 여기 대문자로 시작하는 Constructor와 자바스크립트로 시작하는 constructor는 아무런 관계가 없다.
찾기 jQuery 소스에는 대문자로 시작하는 Constructor에 대한 정의가 없습니다.그래서 이곳의 Constructor는 일반적인 속성일 뿐입니다. 우리는 다른 이름으로 $을 쓸 수도 있습니다.fn.button.Something = Button, Bootstrap은 이 속성의 의미를 나타내기 위해 구조기 "Constructor"로 명명하는 것이 더 합리적입니다.
이렇게 되면 이 코드는 잘 이해된다. $.fn.button.Constructor = Button은 역할 영역 내의 Button 클래스에 jQuery의 Button 객체에 값을 부여하는 Constructor 속성을 통해 IIFE 역할 영역 밖에서도 Button 클래스를 사용할 수 있습니다.호출 방법:

+function($){

  //    

  var Button = function() {}

  //     

  $.fn.button = function() {

      alert('Bootstrap button')

  }

  //     jQuery button   Constructor  

  $.fn.button.Constructor = Button



}(window.jQuery) 



var Button = $.fn.button.Constructor

Bootstrap 개체 데이터 캐시

//      Button  ，          data   undefined

var data    = $this.data('bs.button')

var options = typeof option == 'object' && option



//   Button  : new Button(this, options)，

//       data: data = new Button(this, options)

//       jQuery    ‘bs.button’     $this.data('bs.button', data)

if (!data) $this.data('bs.button', (data = new Button(this, options)))



// data   Button  ，    Button     

if (option == 'toggle') data.toggle()

else if (option) data.setState(option)

jQuery를 이용한.데이터(key,value) 저장소 Button 객체
Bootstrap의 셀 테스트
QUnit + PhantomJS 
우수한 프로그래머는 우수한 코드를 읽는 공통된 비결이 있다.
http://suqing.iteye.com/blog/1984131