seajs简易使用说明


一、引用


    < script src="public/js/sea.js" data-main="./main/main">< /script>


    在html页面使用script标签引入seajs文件,
    设置属性data-main=‘’指定你写的功能js代码文件,避免了在html页面上写seajs.use代码,
    当然也可以在html页面写你的代码,但是前者可以使html页面简洁得只有html代码。
            
二、配置(seajs.config)


    使用seajs.config可以配置文件的别名,路径别名等,方便其他文件使用的时候调用,避免重复及冗长的代码


        方法:
            1).与seajs.use写在同一个文件里面(.js或者.html),seajs.config在seajs.use的上面
            2).独立的一个配置.js文件,使用script标签在html页面中引入,位置在引入seajs的下面


        常用参数(更多参数配置请百度):
            base:Sea.js 在解析顶级标识时,会相对 base 路径来解析。
            paths:文件夹路径配置。
            alias:文件别名配置,配置之后可在模块中使用require调用。
            示例:
                seajs.config({
                    paths: {
                       'js': './public/lib/js' // js文件夹路径配置
                    },
                    alias: {
                       'jquery': 'js/jquery1.9.1' // js文件夹下面的jquery文件
                    }
                });


                seajs.use使用:
                    seaJs.use(['jquery'],function($){
                        $(function(){
                            // jq 代码
                        })
                    })
                其他模块调用:
                    define(function(require, exports, module) {
                        require('jquery');
                        function fun(){
                            $(...)...
                        }
                    })
            
三、使用(seajs.use)




    使用seajs.use来引用你的seajs插件或者在里面写其他功能。


        seajs.use(['文件1','文件2',...],function(参数1,参数2,...){
            参数1.方法1()
            参数1.方法2()
            。。。
        })
            
四、seajs插件写法及用法




    假设插件文件为test.js.
        第一种:
            define(function(require, exports, module) {
                fun1 = function(){ alert('fun1') }
                fun2 = function(){ alert('fun2') }
                exports = fun1; // 可以不定义接口名称
                exports = fun2; // 可以不定义接口名称
            })
            seajs.use使用:
                seaJs.use(['test'],function(){ //不需要设置参数
                    fun1() //直接引用
                    fun2() //直接引用
                })


        第二种:
            define(function(require, exports, module) {
                function fun1(){ alert('fun1') }
                function fun2(){ alert('fun2') }
                exports.f1 = fun1; // 此时exports = fun1;无效,所以需要定义接口名称
                exports.f2 = fun2; // 此时exports = fun2;无效,所以需要定义接口名称
            })
            seajs.use使用:
                seaJs.use(['test'],function(getfun){ //对应文件设置参数 test ==> gettest
                    getfun.f1()  //由参数getfun带出f1接口内的方法fun1()
                    getfun.f2()  //由参数getfun带出f2接口内的方法fun2()
                })


        第三种:外部一般js插件改写seajs插件
                有一个dialog.js插件:
                    function dialog(){}
                    dialog.prototype.xxx = function(){}
                                .
                                .
                                .
                改写seajs插件(sea_dialog.js):
                    1.将dialog.js的代码全部拷贝到:
                        define(function(require, exports, module) {
                            //dialog.js插件的带代码
                            exports.open = dialog;
                        })
                    2.将dialog.js插件require到seajs插件里面去:
                        define(function(require, exports, module) {
                            require('dialog')
                            exports.open = dialog;
                        })


                    seaJs.use(['sea_dialog'],function(dialog){
                        dialog.open()
                    })


        第四种:jquery插件改写seajs插件
                有一个jq插件:tab.js
                    (function($){
                        $.fn.extend({
                            tab : function(option){
                                ...
                            }//tap:function()
                        });//$.fn.extend
                    }(jQuery));


                改写seajs插件:
                    (function (factory) {
                        if (typeof define === 'function') {
                        // 如果define已被定义,模块化代码
                        define('tab',['jquery'], function(require,exports,moudles){
                            factory(require('jquery')); // 初始化插件
                            return 'jQuery'; // 返回jQuery
                        });
                    } else {
                        // 如果define没有被定义,正常执行jQuery
                        factory(jQuery);
                    }
                    }(function ($) { // 原jQuery插件内容
                        $.fn.extend({
                            tab : function(option){
                                ...
                            }//tap:function()
                        });//$.fn.extend
                    }));


                seajs.use(['tab'],function(){
                                    el.tab({
                                        //参数设置
                                    })
                                });


            

猜你喜欢

转载自blog.csdn.net/skyblacktoday/article/details/79474783