首页 > 代码库 > 使用seajs封装js模块

使用seajs封装js模块

2024-08-16 13:08:07   220人阅读

//方法一：将函数绑定到原型上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模块


联系
我们