前端模块化——seaJS

Posted 2020-09-17 明留

1、seaJS手记　　

一：Bower获取 要安装bower
    Npm install -g bower
    Bower install seajs


二：Use方法是整个项目的入口方法，通常一个项目中只调用一次即可
方法接受两个参数
第一个参数表示引入模块的路径
    可以是一个字符串，此时引入一个文件
    也可以是一个数组，每个成员表示一个文件地址
第二个参数是一个回调函数
    作用是全局作用域
    回调中的参数个数与前面加载的模块一一对应

三：Seajs中根目录就是seajs所在的目录；
    在使用seajs时候，要将seajs放在最外面，这样方便我们加载模块。
    Seajs的use方法返回值就是seajs对象，因此可以链式调用。


四：创建一个文件就是定义了一个模块，文件中我们必须通过define方法定义模块，如果写在define方法外面就不是模块的内容;因此属性，方法，变量等等要写在define里面，这样就是一个模块文件。
Define使用很灵活，有多种使用方法。
传递一个参数
    是一个值类型的数据，这个数据就作为接口暴漏出来，如；字符串，数字，布尔值，null;
    是一个对象，此时这个对象就是暴漏的接口，属性就是暴漏的属性，方法就是暴漏的方法，如（{}）;
    是一个函数（很重要，90%以上都是这种方式），这种方式跟符合commonjs规范，此时有是三个参数，require[加载外部模块]，exports[暴露接口]，module[返回模块信息]。
    作用域是全局作用域，因此不要通过this（它指向window）定义变量，会污染作用域
传递两个参数
    第一个参数
        是一个字符串，表示模块的名称id;或是一个数组，表示模块依赖的集合。
    第二个参数是一个回调函数，跟上面的函数是一致的。
传递三个参数
    第一个参数是个字符串，表示模块的id;[下次use的时候，就可以直接使用这个id，引入该模块]。
    第二个参数是个数组，表示模块依赖的集合。
    第三个参数是一个回调函数，跟上面的函数式一致的。
    写在依赖集合中的依赖模块，无论你有没有使用它，它都会被加载。
    
    
五：require注意点：
    第一点 定义模块的模块函数中参数require不能简写;
    第二点 require不能修改[不能赋值给其他的变量、require不能赋值、require不能作为内部函数的参数、在子函数的内部，不能再修改require];
    第三点 require的参数不能是表达式;
    在一个文件中如果define定义了多个模块时候，若没指定id，此时后面的模块会覆盖前面的;若指定了id，这些模块是兼容的，此时想使用哪个模块，require这个id即可。
    Require是同步加载模块，加载就可以使用[均会加载];Require.async是异步的加载模块，只能在加载完成的回调函数中使用[条件成立才会加载]


六：exports定义接口的6种方式：
    1.exports.接口
    2.module.exports.接口
        第一种方式和第二种方式是可以继续添加接口的
    3.module.exports = {}
        定义了所有的接口，不能在使用其他方式定义接口
    4.module.exports = function(){}
        定义的接口是函数接口，这个函数可以直接执行
        定义的接口只一个就是函数，不能在添加其他接口属性了（不能在使用前面两种方式了）
    5.return {} 这个对象就是暴漏的接口
        定义的对象表示全部的接口，不能再用其他方式定义接口了，并且它的优先级大于前面四种方式
    6.return function(){} 将方法作为一个接口
    ||----------------------------------------------------------------------------------------||
    7.return 值类型
        这个中方式跟module.exports = 值类型是一样的， 跟define传递值类型数据是一致的
    8.module.exports = 值类型数据
    9.define 一个参数时候，这个参数如果是值类型数据可以作为接口
    10.define 如果是一个对象，这个对象可以作为一个暴漏的接口
    ||----------------------------------------------------------------------------------------||
    定义接口的优先级
        return > module.exports={} > module.exports.或者exports。
    注意:
    第三种和第四种方式使用时一定要注意前面是否使用了前两种定义接口的方式;
    所以使用return要注意前面是否使用了其他方式，否则会覆盖掉;
    想逐一定义接口，只能使用前两种方式。

    
七：module：
    此对象里包含模块所有的属性信息，我们在模块内部可以通过这个模块来查看它的相关属性信息。
    对象的一些属性
    Id 表示模块的真实id，如果没有设置，他的值就是uri
    Uri 表示模块所在文件的地址。
        若模块没有定义id，那么这个uri就是真实的地址;
        若模块定义了id，那么uri的文件名就是id的名称。
    Dependencies 依赖的模块，是一个数据，根据依赖集合构建的
    Deps 依赖模块对象，每一个属性对应一个模块的id，属性值模块的对象
    Exports表示模块暴漏的接口
    Status 表示模块的状态

    
八：对于非seajs模块化的类库，我们需要手动定义它，通过define的CMD规范定义就可以正常使用了。


九：配置config
    seajs.config({
      alias: {
          ‘jquery‘: ‘lib/jquery-1.12.2.js‘
      },
      // 简化路径书写的
      paths: {
          lib: ‘lib‘
      },
      // 如果我们压缩文件，如果我们将文件名称加上.min后缀，此时如果去模块内部修改写着模块成本很高，此时我们通过map来配置
      map :[
          [‘main.js‘, ‘main.min.js‘]
          // [‘.js‘, ‘.min.js‘]
      ],
      // 定义路径模板变量
      vars: {
          d: ‘dom‘
      },
      base: ‘js‘,
      debug: true,
      charset: ‘gbk‘
    });

seaJS手记

2、js经验手记

1、我们习惯使用
setTimeout(function(){
    alert(1111111)
},1000);
 
这样使用也可以,后面是是回调参数
setTimeout(function(num){
    alert(num);
},1000,111111);

2、拼接字符串
window.onload = function(){
    document.body.innerhtml = "<div>div</div><span>span</span><p>p</p>";
};
  
window.onload = function(){
    document.body.innerHTML = "<div>div</div>"+
                            "<span>span</span>"+
                            "<p>p</p>"+
                            "55555555555";
};
  
window.onload = function(){
    document.body.innerHTML = "<div>div</div>                            <span>span</span>                            <p>p</p>                        55555555555";
};

3、typeof使用
var arr = [];
console.log( typeof arr);
arr.num = 10;【可以这样加任何行为或是属性，这样length还是0】
console.log( typeof arr);
console.log( typeof(arr));【1-3:object】
console.log(arr instanceof Object);
console.log(arr instanceof(Object));
console.log( ‘num‘ in arr);
console.log( ‘num‘ in(arr)); 【4-7:true】

4、停止嵌套循环
for(var i=0;i<5;i++){
    for(var j=0;j<1;j++){
        if ( i== 3) {
            break;  
        }
        alert(i);
    }
}
【只是3不弹出最外面没有停止】
 
有时候有需求把所有的循环都跳出
a : for(var i=0;i<5;i++){
        for(var j=0;j<1;j++){
            if ( i== 3) {
                break a;
            }
 
            alert(i);
        }
}

for循环其他写法
var i = 0;
for(;;){
    alert(i);
    if (++i>5) {
        break;
    }
}

5、匿名函数自执行
(function(){
     alert(1111);
})()；
 
//在函数前面不加小括号，加上位运算符都可以解决这个问题 ~ +
+function(){
    alert(111);
}();

6、创建对象可以省略括号 系统对象也有类似的形式
function Aaa(){
}
var a1 = new Aaa;
alert(a1);
var arr = new Array;
alert( arr.length);

js经验手记