[JS] JS子產品化開發之RequireJS

本節将簡述RequireJS常用的功能

RequireJS 實作了 Asynchronous Module API.

目錄:

• 為什麼使用RequireJS

• 加載RequireJS

• Hello World

• 自定義子產品

• 引入第三方插件

• 多版本js庫處理

• RequireJS插件

Nuget:Install-Package RequireJS(會包含2個檔案.r.js是用來通過nodejs壓縮js的)

為什麼使用RequireJS

• 加載script标簽會停止響應
• js檔案存在依賴性
• 子產品化開發

加載RequireJS

• 異步加載script

<script src="scripts/require.js" defer async="true"></script>

• 加載自定義js

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

RequireJS函數

• require.config({}):配置Require資訊

包括baseUrl,paths,shim,map,enforceDefine

• require([],funcLoad,funcErro):加載子產品後,執行方法

• define([],func):加載子產品,定義子產品

Hello World

• 加載requirejs

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

• 編寫main.js

require.config({
    baseUrl: 'Scripts',
    paths: {
        jquery: ['//cdn.bootcss.com/jquery/2.2.3/jquery', 'jquery-2.2.4']
    }
});

require(['jquery'], function (a) {
    alert(a.fn.jquery);
});
           

• • baseUrl預設與mainjs同一目錄
  • paths支援多個js源
  • paths預設為位址加上.js
  • require第一個參數為依賴的子產品
  • require第二個參數方法中的變量名依次與依賴子產品一一對應

自定義子產品

定義1個Cache子產品,緩存頁面中的js對象.

define(['jquery'], function ($) {
    var cache = {};
    return {
        set: function (key, val) {
            cache[key] = val;
        },
        get: function (key) {
            return cache[key];
        }
    }
});
           

main.js

require(['cache'], function (cache) {
    alert(jQuery.fn.jquery);
    cache.set('a', 'hello');
});

require(['cache'], function (cache) {
    alert(cache.get('a'));
});
           

引入第三方插件

很多js庫  并沒有支援AMD方式的子產品化開發.

本例子實作上面的cache功能

定義cached.js

var cache = {
    data: {},
    set: function (key, val) {
        this.data[key] = val;
    },
    get: function (key) {
        return this.data[key];
    }
};
           

main.js

require.config({
    baseUrl: 'Scripts',
    paths: {
        jquery: ['//cdn.bootcss.com/jquery/2.2.3/jquery', 'jquery-2.2.4']
    },
    shim: {
        cached: {
            exports: 'cache',
            deps: ['jquery']
        }
    }
});

require(['cached'], function (cache) {
    cache.set('a', 'hello');
});

require(['cached'], function (cache) {
    alert(cache.get('a'));
});
           

• shim解決依賴與非AMD載入方式.
• exports指定js中提供的對象或方法名.
• deps指定依賴的js庫

多版本js庫處理

我們的項目如果使用新版本js功能,但又不能直接替換老版本的js.多個版本共存的時候.

使用map函數

requirejs.config({
    map: {
        '*': {
            'jquery': 'scripts/jquery-2.2.4'
        },
        'scripts/cache': {
            'jquery': '//cdn.bootcss.com/jquery/2.2.3/jquery.js'
        }
    }
});

require(['scripts/cache'], function (a) {
    alert($.fn.jquery);
});
           

map定義了2種jquery版本

*表示預設情況下的jquery子產品使用本地2.2.4

scripts/cache表示子產品名為此的時候,jquery使用遠端庫.遠端庫需添加js擴充名.

RequireJS插件

https://github.com/requirejs/requirejs/wiki/Plugins

AMD(中文版):

https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

轉載于:https://www.cnblogs.com/neverc/p/5695440.html