Seajs使用体验

1、页面只需引用seajs即可，可取去github上获取最新的seajs:https://github.com/seajs/seajs

<script src="js/sea-debug.js"></script>

2、使用define定义模块,下面定义一个常用的一些方法，js命名为util.js，

　  define中传递的函数含有两个参数，require：获取依赖的模块；exports：暴露给外部的接口。

     其中require 不能修改成别的名称，exports可以修改，还可以不使用exports，直接使用return直接返回对象

     这个文件里面暴露给外部的是一个对象，其中包含了$选择器函数。class样式相关的函数！！  代码如下：     

define(function(require,exports){
    //如果有依赖的模块，则通过require导入依赖
    //var test = require('./js/core.js');
    exports.tool = {
        $:function (arg, context) {
            var tagAll, n, eles = [], i, sub = arg.substring(1);
            context = context || document;
            if (typeof arg == 'string') {
                switch (arg.charAt(0)) {
                    case '#':
                        return document.getElementById(sub);
                        break;
                    case '.':
                        if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                        tagAll = $('*', context);
                        n = tagAll.length;
                        for (i = 0; i < n; i++) {
                            if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                        }
                        return eles;
                        break;
                    default:
                        return context.getElementsByTagName(arg);
                        break;
                }
            }
        },
        /* 添加样式名 */
        addClass:function (c, node) {
            if (!node)return;
            node.className = this.hasClass(c, node) ? node.className : node.className + ' ' + c;
        },

        /* 移除样式名 */
        removeClass:function (c, node) {
            var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
            if (!this.hasClass(c, node))return;
            node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
        },

        /* 是否含有CLASS */
        hasClass:function (c, node) {
            if (!node || !node.className)return false;
            return node.className.indexOf(c) > -1;
        }
    }
});

 

3、 SeaJS的加载是通过seajs.use来加载已有的模块；

 seajs.use有两个参数，第一个是要加载的模块，只能是字符串格式，调用‘util.js’；可以省去后缀名。

 第二个参数是模块加载完毕后的回调函数，其参数为util.js中暴露的expores对象，可以自由命名，一般与文件名相同；

seajs.use('util',function(util){
    var btn = util.tool.$('#btn');
    btn.onclick = function(){
        util.tool.addClass('red',util.tool.$('#test'));
    }
});

大致使用就是如此了！接口很少，使用很简单，模块化开发的时候就不用在HTML里面修改文件的先后顺序，也不用调用一大堆的js文件，通过seajs就可以向php中的（require/include）一样引用依赖文件了。

4、查看一下http请求数，模块化的粒度越小，http请求数越多，还好seajs提供了spm打包工具，使用说明请查看github地址：https://github.com/spmjs/spm/wiki