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