seajs---CMD规范javascript模块化开发

一、项目介绍：

本项目是用javascript语法CMD规范做一个小例子，效果如下

文件目录如下，sea和static两个文件，前者是放置引入的两个库文件（sea.js和jquery.js）后者是自定义JS模块。

static目录下的三个JS文件分别是模块changeColor.js、changeWidth.js 和main(引入分模块，配置seajs)

 

github源码地址：https://github.com/xiamids/seajs

二、具体功能介绍

main.js模块

/*
 * @Author: xiami qq1820983743 
 * @Date: 2018-11-15 10:44:39 
 * @Last Modified by: xiami qq1820983743
 * @Last Modified time: 2018-11-16 22:49:03
 */


//  配置seajs
 seajs.config({
     base:'./',
     paths:{
         'jquery':'sea/jquery'
     },
     alias:{
         'jquery':'jquery/jquery',
         'main':'static/main',
        'changeColor':'static/changeColor',
        'changeWidth':'static/changeWidth'
     }
 })

//  载入依赖模块并执行函数
    seajs.use(['jquery','changeColor','changeWidth'],function($,changeColor,changeWidth){
        console.log('我是main模块');

        $('.test').after('<button id="showBut">我是插入的按钮</button>');
        $('#showBut').on('click',function(){
            changeColor.showColor();
            changeWidth.newWidth();
            //console.log("aaaa");
            
        })
        
    })

base   为默认路径进行配置，本样例中默认路径配置为当前项目下的路径

paths  为具体引入模块的路径 ./为当前目录路径  ../为上一级目录路径  /为根目录路径，不写斜杠和点直接写文件名表示默认的base路径。

alias  为引入模块的别名，别名声明后整个项目中都可以调用，比如paths中的'jquery':'sea/jquery'  后面的jquery就是调用的别名，和前面的路径部分拼接成一个完整的地址。

seajs.use([]，function(){})

第一个参数为数组，引入所依赖的模块，第二个参数为回调函数，回调函数的参数和引入依赖模块的名字相对应。

changeColor.js模块

/*
 * @Author: xiami qq1820983743 
 * @Date: 2018-11-15 10:44:52 
 * @Last Modified by:   xiami qq1820983743 
 * @Last Modified time: 2018-11-15 10:44:52 
 */


define(function(require, exports) {
    console.log('我是changeColor模块');
    // 下面的写法只能第一次获取到色值，依赖模块属性只能加载一次
    // exports.randomColor ='#'+Math.floor(Math.random()*16777215).toString(16);
    var _randomColor = function(){
        return '#'+Math.floor(Math.random()*256*256*256).toString(16);
    }
    exports.showColor=function(){
        $('.test').css('background-color',_randomColor());
        console.log(_randomColor());
    };

});

模块都是在define() 中定义，其中require可以引入外部  exports可以暴露模块内方法和属性

我在这里把要暴露的方法和属性都写成是exports是属性，使需要暴露的方法和属性值以exports属性的形式暴露出去，暴露后外部就可以调用。

随机函数Math.random() 生产一个0--1（不包含）的随机数 ，RGB色值总个数为256的三次方，随机产生一个从0到256*256*256的值，转换为16进制，前面加上一个#号就是RGB色值。

changeWidth.js

/*
 * @Author: xiami qq1820983743 
 * @Date: 2018-11-15 10:44:46 
 * @Last Modified by: xiami qq1820983743
 * @Last Modified time: 2018-11-16 10:55:55
 */

define(function(require, exports) {
    var $=require('jquery');
    var oldWidth=$('.test').width();
    exports.newWidth=function(){
        if(oldWidth==100){
            $('.test').width('200');
            oldWidth=200
        }else{
        $('.test').width('100')
        oldWidth=100
         }
        console.log(oldWidth);
    }
    
});

获取元素元素宽度，并改变一下宽度。

其中引入其他模块用require（）函数，本例中引入了jquery，引入后就可以直接用$代替jquery

不知道我介绍清楚了没有，如有错误，请留言或是直接Q1820983743联系我。

期待与你一起学习共同进步。