requirejs初體驗

一、引入requirejs
<script type="text/javascript" src="/js/common/require2.3.5.js" ></script>
二、配置requirejs
require.config({
        urlArgs: "r=" + (new Date()).getTime(), // 加載的js路徑後面加上隨機參數,防止瀏覽器緩存
        baseUrl: '/js/common',// 指定js目錄,requirejs動態加載js的根目錄
        paths: {
            jquery : 'jquery-1.12.4.min', //  /js/common目錄下引入jquery-1.12.4.min.js注意這裏js文件名送沒有後綴的
            layer  : 'layer/layer' //  /js/common/layer/layer.js
        },
       // 惟遵照AMD規則的js文件設定方式
        shim:{
            layer:{
                deps: ['jquery', 'css!/js/common/layer/theme/default/layer.css'], //依賴jquery.js,並指定這個組件依賴的css文件注意寫法,若是有css依賴那麼必須用到css.min.js
                exports: 'layer'
            }
        },
        map: {
            '*': {
                // js組件依賴的css,須要用css.min.js來引入
                css: '/js/common/css.min.js'
            }
        }
    });

三、使用外部自定義的js
建立test.js
function tester() {
    console.log('------------------------');
}

使用
require(["test"],function(){
        tester();
    });


使用layer.js的例子
    require(["jquery", "layer"], function($, layer) {
//        layer.config({
//            path: '/js/common/layer/'
//        });
        layer.msg('驗證中,請稍後...', {
            icon: 16
            ,shade: 0.01,
            time:0
        });
layer.alert('dddd')
    });
相關文章
相關標籤/搜索