雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

RequireJS模塊載入框架使用方法 V2.3.6

假裝紳士??9個月前499去下載A+A-

?? ? 軟件著作權歸作者所有;本站所有軟件均來源于網絡,僅供學習使用,請支持正版!

隨著雞西網站設計的功能逐漸豐富,網頁中的js也變得越來越復雜和臃腫。原有通過script標簽來導入一個個的js文件這種方式已經不能滿足現在互聯網開發模式,做網站時需要團隊協作、模塊復用、單元測試等等一系列復雜的需求。RequireJS是一個非常小巧的JavaScript模塊載入框架,是AMD規范最好的實現者之一。最新版本的RequireJS壓縮后只有10幾K,堪稱非常輕量。它還同時可以和其他的框架協同工作,使用RequireJS必將使您的前端代碼質量得以提升。
雞西網站開發時找了一下網絡上現有的Require教程,發現很多教程講的都不夠完善,現整理開發網站中能用到的實用RequireJS教程如下。講解思路直接按照雞西網站制作的Require文件進行分析。

首先下載Require主文件,將以下代碼復制到Require文件的最下方。

require.config({
    baseUrl: APP.STATIC + '/static/js',
    urlArgs: 'ver=' + APP.VERSION,
    paths: {
        'jquery' : 'libs/jquery.min',
        'fastclick' : 'libs/fastclick.min',
        'baguetteBox' : 'libs/jquery.baguetteBox.min',
        'iziModal' : 'libs/iziModal.min',

        'main' : 'main.min',
        'sign' : 'ajax-sign-script.min',
        'user' : 'user.min'
    }
})
require(['main']);

以上代碼中APP.STATICAPP.VERSION分別調用了RequireJS文件的路徑和版本號的JS變量,可充分用CDN靜態緩存進行存儲調用。以下代碼可放在html中,RequireJS文件調用的script之前,用于調用。

<script type='text/javascript'>
/* <![CDATA[ */
    var APP = {"STATIC":"URL",//URL可以替換成你的CDN存儲路徑
    "VERSION":"V1.0"};//V1.0可隨時修改用于更新CDN上的文件
/* ]]> */
</script>

path中的數組是所有.js文件的列表,相當于給你網站所有js文件做了一個列表。雞西做網站是將所有的js插件庫,包括jquery、fastclick等都放在了js/libs子文件夾內。自己編寫的main、sign等文件都放在了js文件夾內。libs里專門存放各種js庫,用以區分管理。

用RequireJS最大的好處就是可以按需調用,而不是把所有用的到和用不到的js都調用在頁面上。例如path中有個owl文件,這是一個幻燈片插件。可以做一個判斷,當前頁面如果存在幻燈片的id或者class,才調用owl文件。判斷與調用代碼如下:

//滾動首頁廣告
if($('.banner').length){
    require(['owl'], function(){
        var ad1Owl = $('.gg1 .owl-carousel');
        ad1Owl.owlCarousel({
            items: 1,
            loop: true,
            smartSpeed: 500,
            autoplay: true,
            dots:false
        });
    })
}

以上的if判斷,就是判斷頁面中是否存在banner這個標簽,如果存在,則用require調用owl文件。require函數可以放兩個參數,第一個是需要調用的js文件名,第二個是調用完這個js后需要執行的函數。
通過這篇文章的例子,相信你也可以用RequireJS為網站的js文件優化歸類了。

資源下載

恭喜,此資源為免費資源,請先

文件版本:V2.3.6

文件大小:18K

文件語言:JS

更新日期:2019-04-16

系統要求:無

技術交流:QQ群 7717114

全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖