Ⅰ 軟體開發中,「模塊化開發」是什麼意思
軟體產品可以被看作是由一系列具有特定功能的組件組成,作為一個完整的系統也可以被分解成一系列功能模塊,這些模塊之間的相互作用就形成了系統的所有功能。
所謂模塊是指可組成系統的、具有某種確定獨立功能的半自律性的子系統,可以通過標準的界面和其他同樣的子系統按照一定的規則相互聯系而構成的更加復雜的系統。每個模塊的研發和改進都獨立於其他模塊的研發和改進,每個模塊所特有的信息處理過程都被包含在模塊的內部,如同一個「黑箱」,但是有一個或數個通用的標准界面與系統或其他模塊相互連接。
在軟體的模塊化開發過程中,把一個源代碼的結構分割成一個元系統和一系列的模塊。
元系統指的是一個能夠保持系統運轉的最小的系統。
模塊是一個較大系統的獨特的部件,它能夠由設計者獨立設計出來,同時又可以作為一個整體在系統中運轉。
把一個大系統切割成互相獨立的不同的小系統,可以使一些並不是經常見面的開發者減少必要的交流次數。
另外,一個舊版本的模塊可以被新版的模塊所替換,同時卻又不影響整個系統的運轉。
這樣,在新模塊中所增加的功能就可以及時在現存的系統中體現出來,同時也不需要更改系統中的其他模塊。
高度模塊化的源代碼結構給軟體開發者和使用者均帶來了極大的好處。
開發者可以對具有某種特定功能的模塊進行獨立開發而不需要花時間去協調與其他模塊之間的關系。
並且模塊化開發不僅允許模塊之間的水平開發,而且可以通過對類似模塊之間的創新和競爭(開發新的模塊或者對原有的模塊進行改進)充分改善系統的功能。
另外,作為最終的用戶來說,在安裝系統的時候可以就個人的需求與偏好選擇適合自己的模塊。
模塊化是復雜系統的一個共同特徵,模塊化的代碼結構是由鬆散的組件構成的,是對一個系統完全意義上的分割,而不像完全集成的代碼,各個組件之間存在很強的依賴關系,並不是完全通過界面來交換信息。
總結:
第一, 把一個系統分解成各個不同的子模塊,不同的開發者專注於對其中某一模塊的開發,一方面實現了勞動的分工,另一方面也提高了自由軟體開發的效率。基於模塊化的性質,每個模塊在開發出來以後都可以通過一個被稱作是內核的原系統進行信息交流,發揮整個模塊的功能,同時也並不會影響其他模塊功能的發揮。而且在各個不同的模塊整合在一起後,由於外部性的存在,會使整個系統增加的功能要超過該模塊本身的功能。在此過程中實現了價值的分割與整合。
第二, 對於開發者而言,基於模塊化的自由軟體開發具有更大的吸引力,其在參與開發過程中可以得到更高的期望收益。
第三, 在非模塊化的軟體開發過程中,存在著嚴重的「搭便車」現象,當一個開發者選擇參與開發,其餘的開發者就會選擇「搭便車」,最終會導致軟體的供給不足;在基於模塊化的開發過程中,所有的開發者都更傾向於參與開發不同的模塊,從而實現整個系統的開發。
MIS軟體開發中的組件模式開發比較復雜,主要的阻力不在代碼的實現過程中,因為這個工作通常只應該占據軟體開發工作量的30%,而對業務需求的深度剖析、業務子系統的劃分和業務組件的規劃會占據約40-50%的工作量。
這些工作體現在設計階段主要是對業務的廣度、深度分析,把業務領域的對象元素進行細化,將業務操作劃分為原子性功能,以此為基礎構成業務組件,進而形成模塊和子系統,同時業務操作之間的約束則需要邏輯化(代碼系統可識別的邏輯);在此過程中,原系統也就形成了,它便是在業務領域中必須的組件、模塊和子系統的集合;外延的組件在原系統上通過組合或熱差拔即能夠滿足不同規模、深度、特性的業務模式運轉。
Ⅱ 如何理解前端模塊化
前端模塊化
在javaScript發展初期就是為了實現簡單的頁面交互邏輯,寥寥數語即可;如今CPU、瀏覽器性能得到了極大的提升,很多頁面邏輯遷移到了客戶端(表單驗證等),隨著web2.0時代的到來,Ajax技術得到廣泛應用,jQuery等前端庫層出不窮,前端代碼日益膨脹
這時候JavaScript作為嵌入式的腳本語言的定位動搖了,JavaScript卻沒有為組織代碼提供任何明顯幫助,甚至沒有類的概念,更不用說模塊(mole)了,JavaScript極其簡單的代碼組織規范不足以駕馭如此龐大規模的代碼
模塊
既然JavaScript不能handle如此大規模的代碼,我們可以借鑒一下其它語言是怎麼處理大規模程序設計的,在Java中有一個重要帶概念——package,邏輯上相關的代碼組織到同一個包內,包內是一個相對獨立的王國,不用擔心命名沖突什麼的,那麼外部如果使用呢?直接import對應的package即可
import java.util.ArrayList;
遺憾的是JavaScript在設計時定位原因,沒有提供類似的功能,開發者需要模擬出類似的功能,來隔離、組織復雜的JavaScript代碼,我們稱為模塊化。
一個模塊就是實現特定功能的文件,有了模塊,我們就可以更方便地使用別人的代碼,想要什麼功能,就載入什麼模塊。模塊開發需要遵循一定的規范,各行其是就都亂套了
規范形成的過程是痛苦的,前端的先驅在刀耕火種、茹毛飲血的階段開始,發展到現在初具規模,簡單了解一下這段不凡的歷程
函數封裝
我們在講函數的時候提到,函數一個功能就是實現特定邏輯的一組語句打包,而且JavaScript的作用域就是基於函數的,所以把函數作為模塊化的第一步是很自然的事情,在一個文件裡面編寫幾個相關函數就是最開始的模塊了
function fn1(){
statement
}
function fn2(){
statement
}
這樣在需要的以後夾在函數所在文件,調用函數就可以了
這種做法的缺點很明顯:污染了全局變數,無法保證不與其他模塊發生變數名沖突,而且模塊成員之間沒什麼關系。
對象
為了解決上面問題,對象的寫法應運而生,可以把所有的模塊成員封裝在一個對象中
var myMole = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
這樣我們在希望調用模塊的時候引用對應文件,然後
myMole.fn2();
這樣避免了變數污染,只要保證模塊名唯一即可,同時同一模塊內的成員也有了關系
看似不錯的解決方案,但是也有缺陷,外部可以隨意修改內部成員
myModel.var1 = 100;
這樣就會產生意外的安全問題
立即執行函數
可以通過立即執行函數,來達到隱藏細節的目的
var myMole = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
這樣在模塊外部無法修改我們沒有暴露出來的變數、函數
上述做法就是我們模塊化的基礎,目前,通行的JavaScript模塊規范主要有兩種:CommonJS和AMD
CommonJS
我們先從CommonJS談起,因為在網頁端沒有模塊化編程只是頁面JavaScript邏輯復雜,但也可以工作下去,在伺服器端卻一定要有模塊,所以雖然JavaScript在web端發展這么多年,第一個流行的模塊化規范卻由伺服器端的JavaScript應用帶來,CommonJS規范是由NodeJS發揚光大,這標志著JavaScript模塊化編程正式登上舞台。
定義模塊
根據CommonJS規范,一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域,也就是說,在該模塊內部定義的變數,無法被其他模塊讀取,除非定義為global對象的屬性
模塊輸出:
模塊只有一個出口,mole.exports對象,我們需要把模塊希望輸出的內容放入該對象
載入模塊:
載入模塊使用require方法,該方法讀取一個文件並執行,返迴文件內部的mole.exports對象
Ⅲ echarts2.0圖表切換需要引入哪些js
1、AMD規范的載入器——esl.js,這是什麼?
答:關於AMD規范可以參考阮一峰的這篇文章Javascript模塊化編程(二):AMD規范 簡單來說,AMD規范就是非同步方式載入模塊的一種方式,避免因為模塊載入過慢而導致瀏覽器「假死」。
2、我們先來看一下echart的大概的包:
echarts.js : 經過壓縮,包含除地圖外的全部圖表
echarts-original.js : 未壓縮,可用於調試,包含除地圖外的全部圖表
echarts-map.js : 經過壓縮,全圖表,包含world,china以及34個省市級地圖數據
echarts-original-map.js : 未壓縮,可用於調試,全圖表,包含world,china以及34個省市級地圖數據
看得出,這種分類非常有意義。
3、echarts更規范的一點,那就是模塊化載入,需要哪個部分就是用哪個部分。
關於Echarts的那個入門圖表,我想很多新手跟我一樣的迷惑,require和require.config這個兩個公共方法到底什麼來的?
答:AMD規范的載入器——esl.js的公共方法。(如有錯誤,請指正。)
4、require.config的作用是什麼?
答:為模塊載入器配置echarts的路徑,從當前頁面鏈接到echarts.js,定義所需的圖表路徑。一切盡在echarts-2.0.4文件夾下的src文件夾中。
5、解釋一下require方法?
答:require方法有2個參數。
第一個參數為一個數組,數組元素是需要載入的echarts模塊,需要哪個就載入哪個。(經本人測試,這個數組傳入一個空數組都是可以的 !- -)莫非,傳入不正確,會載入全部文件到內存,傳入正確就載入部分模塊到內存?求大神解答!
第二個參數為一個帶一個參數的方法:function (ec){}, 這個ec對象就是echarts對象了。
OK,基本解釋完了。可能初學者看了Eharts入門實例還是不太理解那Echarts3種導入方式的用法。(入門示例只有2種——標簽式單文件引入和模塊化單文件引入)
因為入門實例里,js文件指向的是網路伺服器上的資源,而我們一般開發,js資源都是放在本地的。
6、來看一下,本地創建3種Echarts導入的例子,下面是那3個示例文件的源碼(官網Demo粗略修改而成):
(1)、標簽式單文件引入.html:
View Code
需要注意的是,可以直接引入的單文件只有:
echarts-plain.js : 經過壓縮,包含除地圖外的全部圖表
echarts-plain-original.js : 未壓縮,可用於調試,包含除地圖外的全部圖表
echarts-plain-map.js : 經過壓縮,全圖表,包含world,china以及34個省市級地圖數據
echarts-plain-original-map.js : 未壓縮,可用於調試,全圖表,包含world,china以及34個省市級地圖數據
而除了這些帶「plain」字眼的庫,其他庫都是含echarts這個變數的。導入其他庫,會出現問題:echarts未定義。