require js 动态按条件自动加载依赖, 或根据参数加载依赖,类似css!

require js 动态按条件自动加载依赖, 类似css!

• 在开发时经常<!--[if lt IE 9]> 来自动加载相关JS,缺点是,如果加载的JS非常多, 并非所有页面都要用到,造成资源浪费
• 使用requirejs时,可能要为每个模块进行判断,循环,依次,加载,很麻烦,且经常遇到context丢失的情况,至于动态多重加载,这里就不多写了,有时连自已都糊涂.
• 本例参考require-css, 使用一个简单的方式,动态按条件加载依赖,很方便:

先上代码:

shim:{
    'art-template': { // 只有<IE9时才加载3个JS
        deps:['ie9!../libs/json3.min', 'ie9!../libs/es5-shim', 'ie9!../libs/es5-sham']
    },
    'bootstrap': [ // 如果<ie9,则自动加载依赖responsive.min.js
        'jquery', 'ie9!../libs/responsive.min',
        'css!../css/bootstrap.min'
    ]
}
// 或:
require('chat', ['ie9!../libs/canvars.min']);
define('someEveyOldModule', ['ie9!path/myjs']);

• 代码简单,如果使用多,如果项目没用到此些组件,则不会加载, 如果用到,才判断IE并加载依赖.
• 需要定义一个ie9模块:

// 模块定义[核心就两行搞定]: (放在config.js页面内)
define('ie9', {
    load: function(name, require, callback, config){
         // 判断版本,这里懒得写UA判断了.在每个页面置入一个<!--[if lt IE 9]><meta name="ltie9"><![endif]-->
        var ltIE9 = document.querySelector('meta[name="ltie9"]');
        // 异步加载依赖(name为叹号后面的路径),成功后,谁请求的,返给谁
        return !ltIE9  ? callback() : require([name], callback);
    }
});

其实利用!符号,可以更改路径以及自定义加载,非常方便

比如加个时间戳:
define('dyload', function(){
    return {
        normalize : function(name, normalize) {
            // 收到 name= abc/def,
                return normalize('/path/' +name + '.js?time=some'); 
        },
        load:function(name, require, callback){
            // name=/path/abc/def.js?time=some, 
            // you can: require, 异步返回
            return require([name], function(module){
                callback(module);
            }); 
            // or return a object, 同步返回
            return callback({my-object});
        }
    }
});

// 执行以下时,会调用上述的normalize('abc/def'), name变成 /path/abc/def, 再调用 load('/path/abc/def', .), 至于怎么返回,完全看你的了.
require(['dyload!abc/def'], function(result){

});

大组件变通:

• 遇到下面组件(DataTables),是不是有种要死的感觉:
• 此插件需要加载主程序css,核心JS, 主题css,主题 JS,
• 然后还要加载插件核心JS,插件核心CSS, 插件主题JS,插件主师CSS
• 关键是,还要根据各种需求,达到最小加载,按需加载,无责任全部加载的话,反正整个目录十多M

D:\WEB\WWW\CMSWORK\CDN\ASSETS\LIBS\DATATABLES-1.10.15
├─examples
│  ├─advanced_init
│  ├─ajax
│  │  └─data
│  ├─api
│  ├─basic_init
│  ├─data_sources
│  ├─plug-ins
│  ├─resources
│  │  └─syntax
│  ├─server_side
│  │  └─scripts
│  └─styling
├─extensions
│  ├─AutoFill
│  │  ├─css
│  │  ├─examples
│  │  │  ├─initialisation
│  │  │  └─styling
│  │  └─js
│  ├─Buttons
│  │  ├─css
│  │  ├─examples
│  │  │  ├─api
│  │  │  ├─column_visibility
│  │  │  ├─flash
│  │  │  ├─html5
│  │  │  ├─initialisation
│  │  │  ├─print
│  │  │  └─styling
│  │  ├─js
│  │  └─swf
│  ├─ColReorder
│  │  ├─css
│  │  ├─examples
│  │  │  ├─initialisation
│  │  │  ├─integration
│  │  │  └─styling
│  │  └─js
│  ├─FixedColumns
│  │  ├─css
│  │  ├─examples
│  │  │  ├─initialisation
│  │  │  ├─integration
│  │  │  └─styling
│  │  └─js
│  ├─FixedHeader
│  │  ├─css
│  │  ├─examples
│  │  │  ├─integration
│  │  │  ├─options
│  │  │  └─styling
│  │  └─js
│  ├─KeyTable
│  │  ├─css
│  │  ├─examples
│  │  │  ├─initialisation
│  │  │  └─styling
│  │  └─js
│  ├─Responsive
│  │  ├─css
│  │  ├─examples
│  │  │  ├─child-rows
│  │  │  ├─column-control
│  │  │  ├─display-types
│  │  │  ├─initialisation
│  │  │  └─styling
│  │  └─js
│  ├─RowGroup
│  │  ├─css
│  │  ├─examples
│  │  │  ├─initialisation
│  │  │  └─styling
│  │  └─js
│  ├─RowReorder
│  │  ├─css
│  │  ├─examples
│  │  │  ├─initialisation
│  │  │  └─styling
│  │  └─js
│  ├─Scroller
│  │  ├─css
│  │  ├─examples
│  │  │  ├─data
│  │  │  ├─initialisation
│  │  │  └─styling
│  │  └─js
│  └─Select
│      ├─css
│      ├─examples
│      │  ├─api
│      │  ├─initialisation
│      │  └─styling
│      └─js
└─media
    ├─css
    ├─images
    └─js

• 按上述方法,可以做个dyload table,通过normal函数转换为实际路径,再进行动态加载,就方便多了:
• 代码不上了.

table!main/js/main.js   对应path/media/js目录
table!main/cs/main.css  对应path/media/css目录
table!main/cs/main-theme1.js 主题
table!main/js/main-theme1.js 主题鸡翅
table!css!ext/btn/some  对应Button插件样式 path/extensions/Button/
table!ext/select/some   对应插件select JS