使用seajs封装js模块

Posted 2020-08-14

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