模塊化

?xiaoxiao, 發布于2019-08-20 17:45 / 2864人閱讀

摘要：模塊化總結最近重新復習的模塊化的相關知識，總結一下，僅供自己理解和大家參考。模塊化的優點可維護性根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立對其進行改進和維護。

模塊化總結

最近重新復習的模塊化的相關知識，總結一下，僅供自己理解和大家參考。

模塊化的優點

可維護性：根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立對其進行改進和維護。維護一個獨立的模塊比起一團凌亂的代碼來說要輕松很多。

命名空間：在JavaScript中，最高級別的函數外定義的變量都是全局變量（這意味著所有人都可以訪問到它們）。也正因如此，當一些無關的代碼碰巧使用到同名變量的時候，我們就會遇到“命名空間污染”的問題。

模塊化規范

現在比較流行的模塊化規范主要有commomJS,AMD, CMD ,ES6 ，現在逐一說明一下.

commonJS

commonJS 是服務器端的模塊化規范，node.js就是參照commonJS規范實現的。commonJS中有一個全局的方法require() 用來加載模塊。

function myModule(){
    this.hello = function(){
        return "hello";
    }
    this.goodbye = function(){
        return "gooodbye!";
    }
}
module.exports = myModile;

其實module變量代表當前模塊.

這樣就可以在其他模塊中使用這個模塊

var myModule = require("myModule");

var myModuleInstance = new myModule();
myModuleInstance.hello();
myModuleInstance.goodbye();

關于commonJS的更多，見CommonJS規范

AMD

commonJS 定義模塊的方式和引入模塊的方式還是比較簡單的，但不適合瀏覽器端，因為commonJS是同步加載的。而AMD是異步加載的，下面我們來說說AMD的書寫規范。

通過define()來定義模塊

//main.js
define(["mylib"],function(mylib){
    function foo(){
        mylib.doSomething();
    }
    return {
        foo:foo;
    }
})

define的第一個參數是依賴的模塊，必須是一個數組。通過return來暴露接口。

通過require()來加載模塊，模塊的名字默認為模塊加載器請求的指定腳本的名字。

require(["main"],function(main){
    alert(main.foo());
})

require.js就是根據AMD規范實現的，優點為：

實現js文件的異步加載，避免網頁失去響應；

管理模塊之間的依賴性，便于代碼的編寫和維護。

CMD

CMD是國內玉伯大神在開發SeaJS的時候提出來的，也是異步模塊定義。
CMD和AMD的區別:
CMD相當于按需加載，定義一個模塊的時候不需要立即制定依賴模塊，在需要的時候require就可以了，比較方便；而AMD則相反，定義模塊的時候需要制定依賴模塊，并以形參的方式引入回調函數中。

// 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()
...
})

關于 require.js 和 sea.js 的區別詳見SeaJS與RequireJS最大的區別

ES6

ES6在語言規格的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代現有的CommonJS和AMD規范，成為瀏覽器和服務器通用的模塊解決方案。

ES6模塊主要有兩個功能：export和import

export用于對外輸出本模塊（一個文件可以理解為一個模塊）變量的接口

import用于在一個模塊中加載另一個含有export接口的模塊。

// a.js 

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}

// b.js
//通過import獲取a.js文件的內部變量，{}括號內的變量來自于a.js文件export出的變量標識符。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

各種模塊化方案優缺點對比：

模塊化方案	優點	缺點
commonJS	復用性強，使用簡單，實現簡單有不少可以拿來即用的模塊，生態不錯	同步加載不適合瀏覽器瀏覽器的請求都是異步加載不能并行加載多個模塊。
AMD	異步加載適合瀏覽器可并行加載多個模塊	模塊定義方式不優雅，不符合標準模塊化
ES6	可靜態分析，提前編譯面向未來的標準	瀏覽器原生兼容性差，所以一般都編譯成ES5 目前可以拿來即用的模塊少，生態差

對比學習，效果更好哦~~~

云服務器 GPU云服務器模塊化模塊化機柜模塊化機房網站模塊化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83843.html

精讀《js 模塊化發展》

摘要：我是這一期的主持人黃子毅本期精讀的文章是。模塊化需要保證全局變量盡量干凈，目前為止的模塊化方案都沒有很好的做到這一點。精讀本次提出獨到觀點的同學有流形，黃子毅，蘇里約，，楊森，淡蒼，留影，精讀由此歸納。這次是前端精讀期刊與大家第一次正式碰面，我們每周會精讀并分析若干篇精品好文，試圖討論出結論性觀點。沒錯，我們試圖通過觀點的碰撞，爭做無主觀精品好文的意見領袖。我是這一期的主持人 ——...

Freelander 2019-08-22 17:00 評論0 收藏0
《Java應用架構設計:模塊化模式與OSGi》讀書筆記

摘要：本書概括以軟件系統為例，重點講解了應用架構中的物理設計問題，即如何將軟件系統拆分為模塊化系統。容器獨立模塊不依賴于具體容器，采用輕量級容器，如獨立部署模塊可獨立部署可用性模式發布接口暴露外部配置使用獨立的配置文件用于不同的上下文。本文為讀書筆記，對書中內容進行重點概括，并將書中的模塊化結合微服務、Java9 Jigsaw談談理解。本書概括以Java軟件系統為例，重點講解了應用架構...

seanHai 2019-08-16 10:56 評論0 收藏0
前端模塊化開發

摘要：來源于阿賢博客模塊化今天給大家寫一篇關于前端模塊化開發知識點。前端模塊化開發那點歷史模塊化是指在解決某個復雜混雜問題時，依照一種分類的思維把問題進行系統性的分解以之處理。來源于：阿賢博客 javascript模塊化今天給大家寫一篇關于前端模塊化開發知識點。前端模塊化開發那點歷史模塊化：是指在解決某個復雜、混雜問題時，依照一種分類的思維把問題進行系統性的分解以之處理。模塊...

tianhang 2019-08-23 16:44 評論0 收藏0
低成本易管理 模塊化數據中心的好處竟然這么多

摘要：模塊化數據中心供應商聲稱他們的預制可重復的解決方案解決了這個問題，因為他們可以迅速支持增加負載和業務需求。施耐德電氣日前為他們的模塊化數據中心產品線發布了款不同的參考設計。對于IT技術的發展，或許有很多技術帶來的是管理模式上的改變，有些帶來的是直接效率的提升，模塊化這個概念就是如此，模塊化近幾年不光被應用在了很多硬件產品上，對于數據中心來說，模塊化的應用所帶來的是數據中心產業質的飛躍。其實模...

tigerZH 2019-04-28 19:38 評論0 收藏0
探索模塊化數據中心之路

摘要：一類是集裝箱數據中心，這個模塊化數據中心是將所有的風火水電布線全在一個標準貨柜內部完成，形成一個可以移動的數據中心，本來集裝箱數據中心主要用于臨時搭建的環境，但正好符合模塊化設計理念，被數據中心引入進來，在一些大型數據中心里有部署。數據中心引入模塊化設計，目的也一樣，要實現數據中心業務快速部署、應用靈活，提供標準化接口，主要有三類應用。模塊化指的是解決一個復雜問題時，自頂向下逐層把系統劃分成...

Kross 2019-04-29 14:23 評論0 收藏0
前端工程師必備：前端的模塊化

摘要：規范則是非同步加載模塊，允許指定回調函數，可以實現異步加載依賴模塊，并且會提前加載由于主要用于服務器編程，模塊文件一般都已經存在于本地硬盤，所以加載起來比較快，不用考慮非同步加載的方式，所以規范比較適用。 JS模塊化模塊化的理解什么是模塊？將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件), 并進行組合在一起；塊的內部數據/實現是私有的, 只是向外部暴露一些接口(...

Render 2019-08-23 16:54 評論0 收藏0