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'));
});
   
 
 
原文地址:https://www.cnblogs.com/sanqianjin/p/9229251.html