require.js結合jQuery的多頁面多模塊使用小結

小結:使用require.js的好處在於一個頁面一個js文件,很是條理,且可以按需加載html

使用說明:jquery

1. 目錄結構app

QQ圖片20150430113907

2. 在html頁面的最後加載require.js。這樣就能夠少加載一個domready(require.js的一個等待dom加載完成的插件)dom

<script src="js/lib/require.js" data-main="js/index"></script>

其中data-main內容就是當前頁面按需加載,js觸發等等的設置,實際的加載文件是./js/index.jsjquery插件

3. 看一下index.jsrequirejs

requirejs.config({
    baseUrl:'./js/lib',
    paths:{
        app:'../app'
    },
    shim:{
        'fullpage':['jquery'],
        'vticker':['jquery']
    }
});

define(['jquery', 'fullpage', 'vticker'], function($){
    require(['app/nav', 'app/navline', 'app/banner']);
    $('#news .container').vTicker({showItems:1, pause:3000});
});

其中requirejs.config爲初始化設置,shim是設置非標準amd的jquery插件的加載方式ui

define內的內容即爲當前頁的實際js效果spa

所謂多模塊即爲define內require內的部分插件

相關文章
相關標籤/搜索