SeaJs笔记

el：一个简单的班级管理，竟然要加载这么多脚本文件？

1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

 

一、为什么前端模块化？

1. 避免变量污染，命名冲突
2. 脚本的异步并行加载
3. 依赖关系的管理

 

二、使用方法：

    1、定义模块

        

1. define(function(){  

2.     alert('1111');  

3. });  

 

    2、输出模块

        

1. define(function(require, exports){  

2.     exports.getStr = function(ss){  

3.         if(ss == '1'){  

4.             return '111';  

5.         }else{  

6.             return '222';  

7.         }  

8.     };  

9. });  

 

    3、引用模块

 

1. define(function(require, exports){  

2.     var demo = require('./demo.js');  

3.     var str = demo.getStr('test');  

4.       

5.     exports.msg = 'the res is:' + str;  

6. });  

    

    4、使用模块

 

1. seajs.use('../demo03.js', function(aa){  

2.     alert(aa.msg);  

3. });  

 

三、与gulp的联合使用：

  gulp-seajs-combine

//=====================压缩SeaJs文件========================//

gulp.task('jscombine', function () {

    return gulp.src('./Scripts/Class/ClassSettingNew.js')

      .pipe(seajs(null, {

            except: ['jquery'] //强行排除

        }))

      .pipe(uglify({

            mangle: {

                reserved: ['require', 'exports', 'module', '$', 'jQuery', 'seajs']

            }//排除混淆关键字

        }).on('error', function (err) {

            gutil.log("Error:" + err);

            this.emit('end');

        }))

    .pipe(concat('ClassSettingNewSea.js'))

    .pipe(gulp.dest('./Scripts/Class'));

});