Javascript模块编程&jQuery插件开发学习笔记

 

【例1】cnblogs博客弹窗功能

定义(声明)部分

1.在一个function模块内再用一个function声明一个自定义插件成员;第2行

2.对tagPopWin原型链(prototype)进行编程,为这个对象设计功能; 第3行

3.用全局变量指向插件对象,作用是让外部可以调用此对象

 

function (_win, _document, jQuery) {
  var tagPopWin = function () {
    //TODO
  };
  tagPopWin.prototype._closeTag = function () {};
  tagPopWin.prototype.initPopUp = function () {};
  //TODO
  _win.WzPopup = tagPopWin
}(window, document, $);

 

调用(使用)部分,无输入参数

$(function () {
  var n = new WzPopup;
  n.initPopUp()
})

【例2】twbsPagination jQuery插件 官网

定义(声明)部分

1.在一个function模块内,再定义成员模块,第2行

2.对TwbsPagination原型链进行编程,第5行;  设置constructor: TwbsPagination;  再设计一些function

3.插件定义部分$.fn.twbsPagination = function (option){} 第12行

3.1 $.fn.twbsPagination.Constructor = TwbsPagination; 将这个插件指向1中所定义的对象 第16行

(function ($, window, document, undefined) {
  var TwbsPagination = function(){
    //TODO
  };
  TwbsPagination.prototype = {
    constructor: TwbsPagination,
    destroy: function () {},
    show: function (page) { 
      //TODO
    },
  };
  $.fn.twbsPagination = function (option) {
    //TODO
  };
  //TODO
  $.fn.twbsPagination.Constructor = TwbsPagination;//挂载点
})(window.jQuery, window, document);

调用(使用)部分

$(function () {
  window.pagObj = $('#pagination').twbsPagination(
    //option object
  )
})