使用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函数

 
posted @ 2016-10-13 18:23  小猪冒泡  阅读(1328)  评论(0编辑  收藏  举报