【前端編碼】模塊化編程

時間 2019-11-19

標籤前端編碼模塊化編程欄目字符編碼简体版

原文原文鏈接

摘要：javascript

慢慢開始使用模塊化編程，學着使用define，require這類的東西。一開始使用只是單純以爲頁面加載時會馬上請求加載全部文件會影響速度，後面慢慢使用發現，還能解決文件之間的相互依賴關係，解決文件上線版本問題。html

再繼續發現本身學的還很淺，網上看了這篇文章http://blog.chinaunix.net/uid-26672038-id-4112229.html 深刻了解下。前端

1、爲何要使用模塊化編程java

1）解耦軟件系統的複雜性，使維護「有理可循」node

2）定義封裝，遵循低耦合高內聚git

3）解決文件之間依賴關係github

4）解決文件加載版本緩存問題編程

備註：api

依賴分爲兩種，「強依賴」 —— 確定須要和「弱依賴」 —— 可能須要。
對於強依賴，若是要性能優先，則考慮參照依賴前置的思想設計，我的更推崇，可以清晰明瞭文件依賴關係；若是考慮開發成本優先，則考慮按照依賴就近的思想。
對於弱依賴，只須要將弱依賴的部分改寫到回調函數內便可。瀏覽器

2、規範

區別

表明

AMD

異步模塊定義，預加載，在使用模塊以前加載依賴的模塊。

格式：define( id, dependencies, factory );

requirejs

requirejs2.0+也能夠支持延遲加載

CMD

模塊使用時才加載，須要的異步加載模塊可使用 require.async 來進行加載。

格式：define( id, deps, factory );

require 是 factory 的第一個參數。

seajs

3、requirejs 與 seajs

requirejs 提早執行，推崇依賴前置，RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區採納（目前就我使用的庫echart，hightchart等都能支持requirejs2.0）

seajs　　延遲執行，推崇就近依賴，很是關注代碼的開發調試，有 nocache、debug 等用於調試的插件。Sea.js 不強推，採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。

用法

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此處略去 100 行
    var b = require('./b') // 依賴能夠就近書寫
    b.doSomething()
    // ...
})

// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    // ...
})