使用seajs封裝js模組

標籤：

//方法一：將函數綁定到原型上define(function(require, exports, module) {     $.fn.tab = function(option, callback) {         function bootstrap() {           console.log(‘djsakhdkj‘);        }          bootstrap();    }    $(function(){        $().tab();//因為將tab綁定到$原型上，所以要使用$().tab()去調用    })})//方法一（2）：將函數綁定到jquery的原型上define(function(require, exports, module) {     $.tab = function(option, callback) {         function bootstrap() {           console.log(‘djsakhdkj‘);        }          bootstrap();    }    $(function(){        $.tab();//因為將tab綁定到$原型上，所以要使用$.tab()去調用    })})

上面兩個的區別是：$.calendar();不依賴與頁面中的元素，是獨立的，比如彈窗外掛程式，就是獨立於頁面的；

$.fn.calendar()；一般是依賴於頁面元素的額，比如這個日曆外掛程式，需要依賴於一個input標籤中，比如點擊該input則產生彈窗：$(‘input‘).calendar();這個彈窗位於該input的位置，等等；再例如tab切換外掛程式中：

<div id="demo-content" data-ui="u-tab">        <ul>            <li class="cur" data-ui="tab-nav"><a href="javascript:void(0);">青春</a>            </li>            <li class="" data-ui="tab-nav"><a href="javascript:void(0);">彩虹</a>            </li>            <li class="" data-ui="tab-nav"><a href="javascript:void(0);">歌唱</a>            </li>        </ul>        <div class="tab-content">            <div data-ui="tab-content">tab1</div>            <div data-ui="tab-content">tab2</div>            <div data-ui="tab-content">tab3</div>        </div>    </div>

調用該外掛程式的時候就是使用的：$(‘#demo-content‘).tab();

所以日曆外掛程式有兩種或思路：如果日曆一直存在，則$(‘傳入的是日曆的class‘)，日曆下所有的元素都是依賴於該class的；如果日曆需要點擊input中才能出現，則$(‘input‘).calendar();這時需要按照input產生點擊事件彈出日曆；日曆的相對input的位置；

//方法二：直接寫函數形式define(function(require, exports, module) {     var tab = function(option, callback) {         function bootstrap() {           console.log(‘545‘);        }          bootstrap();    }    $(function(){        tab();//因為將tab綁定到$原型上，所以要使用$().tab()去調用    })})

上面對應的html中調用：

seajs.use(‘./../../js/tab‘);

第三種方法：

//方法三：使用module.exports向外提供函數介面，html中代碼為：// seajs.use(‘./../js/calendar‘, function () {//         init();//     });define(function(require, exports, module) {     $.fn.tab = function(option, callback) {         function bootstrap() {           console.log(‘djsakhdkj‘);        }          bootstrap();    }    $(function(){        init=function(){            $().tab();//因為將tab綁定到$原型上，所以要使用$().tab()去調用         }        module.exports=init;    })})

對應的html檔案：

seajs.use(‘./../js/calendar‘, function (initBox) {        initBox();    });

 html檔案中使用seajs引入calendar模組，並且根據calendar模組可以看出將函數名init作為介面：

module.exports=init;即，calendar向外提供函數借口init，html檔案中的seajs.use接受該函數（此時兩個名字可以不一樣，init是js模組向外提供的借口函數；initBox是作為接收函數的參數名）
function(initBox){
　　initBox();
}
執行該函數initBox（）;相當於執行模組中的函數init();然後init()函數再去調用$().tab()函數
最後如果在其他的js檔案中藥日用seajs，則：

require(‘./calendar.js‘);initBox();

先使用require引入calendar.js 檔案，然後調用 initBox函數

使用seajs封裝js模組