當前位置:首頁 » 網頁前端 » 前端模塊化是什麼
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端模塊化是什麼

發布時間: 2023-01-19 14:29:18

1. 如何實現前端模塊化開發

SeaJS 是一個適用於 Web 瀏覽器端的模塊載入器。
使用 SeaJS,可以更好地組織 JavaScript 代碼。

2. 前端的mvc和模塊化有什麼關系

mvc核心就是雙向數據綁定,起到數據變(js),聯動視圖變(css),view change =>data change。
模塊化簡單來說,就是代碼適應多個應用場景,起到復用代碼作用。

3. 如何理解前端模塊化

前端模塊化
在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對象

4. 如何學習前端模塊化知識

學習前端模塊化知識主要集中精力學好以下知識點:
1、學好三駕馬車:HTML5 + CSS3 + JavaScrip

2、推薦學習過程:
1)CSS
(1)入門:
Codeademy上的html&css課程——在線互動式編程平台,弄清楚基本概念和基本語法
w3school上的HTML/CSS教程——技術手冊式的教程,比較全面,照著實例敲一遍
(2)進階:
《精通CSS·高級Web標准解決方案》——對CSS有一個比較深入的學習,對核心技術了解。
《HTML5權威指南》——非常全面的書,內容也很新,包含了HTML5+CSS3+JS DOM
(3)實戰:
bootstrap框架: bootstrap中文網/《bootstrap實戰》——流行的前端框架,注重實用即可
Codeademy上的Web Developer Skills+Projects——通過自己做小頁面/小網站來運用所學
(4)提高:
《CSS禪意花園》——提高自己的藝術設計能力,通過實例來學習如何用CSS設計出漂亮的頁面
2).Javascript:
(1)入門:
Codeademy上的javascript教程——實例比較多,比較淺,算是基本了解JS
w3school上的JS教程——比較詳細的了解下JS的特性
《JavaScript DOM編程藝術》——講js和DOM的基本知識和運用,了解JS和DOM可以做什麼
(2)進階:
《JavaScript高級程序設計》——JS聖經,比較全面,非常好的一本書,比犀牛書可閱讀性強
《JavaScript權威指南》——傳說中的犀牛書,好厚好厚的一本書,不適合入門,適合當工具書看
《JavaScript語言精粹》——很薄的一本書,但是可以幫助你快速了解JS的精華部分
(3)實戰:
jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery
《jQuery基礎教程》——流行的前端框架,注重實用
(4)提高:
《高性能JavaScript》——講如何提高js性能,以及構建和部署文件到生產環境的最佳實踐
《Secrets of the JavaScript Ninja》——jQuery作者寫的書,如果你覺得精通JS了再看這本書

5. 前端為什麼要使用模塊化

當嚴謹古板的德國工程師用「積木游戲」來形容未來的造車理念時,全球汽車製造業的天空徹底「變色」了。在全世界范圍內品牌和車型的設計、采購、製造的靈活度都在不斷提升的今天,一套類似於樂高積木的高集成度模塊化生產方式出現了。沒有統一著裝、埋頭苦乾的工人師傅,也沒有煙塵漫天、氣味刺鼻的車間環境,取而代之的是科技含量愈來愈高的流水線,過程愈來愈簡單的操作和愈來愈少的人力成本,這些都是模塊化生產的優勢所在。
「當今,模塊化的概念不僅是經濟學、經營學專家之間最熱門的話題之一,而且它還有可能徹底改變現存產業、企業的結構,具有十分強大的沖擊力。」國際經濟學會主席、斯坦福大學經濟學教授青木昌彥如是說。
從19世紀末的福特T型車的流水線生產,到近代以日系企業豐田為代表的精益生產方式,再到最近被媒體炒得火熱但實際推進阻力重重的大眾MQB平台,汽車的生產模式一直圍繞著兩個根本目標:降低生產成本和使用成本。進入新世紀,隨著數字化技術在生產中的應用,汽車的生產製造模式開始向集約化和標准化發展,由此帶來的生產模式的變革讓汽車「生產結構」開始趨向於電腦生產一樣簡單。
模塊化簡單來說就是「數線並產」,每條生產線產出不同的模塊,最後將所有模塊拼裝整合,工作效率以數量級方式提升。比如大眾採用的MQB平台就是將發動機、變速箱加上前軸和前懸掛放在同一模塊內,再和車身等模塊總裝。通過模塊化平台應用的加深,大量的汽車零部件實現標准化,在不同品牌和不同級別的車型中達到共享,從而實現生產從A00、A0、A到B四個級別的車型的共通生產。
隨著模塊化生產概念的不斷深入,現今的分級采購模式將不復存在,取而代之的是模塊化整體采購。現在各大主機廠的采購的是一個個零部件。日常接觸和交易對象可能是大零部件供應商,也可能是小零部件企業,而模塊化采購的交易品是高集成度的各種模塊,對象是模塊集成供應商。因此,模塊化采購使得與主機廠發生直接關系的的供應商數量大為削減,並由此改變模塊供應商與其他零部件生產企業的關系。毫不誇張的說,模塊化生產會將許多規模小、產品類型單一的供應商企業沖擊的七零八落,市場上航母級的零件供應商可以趁機重新劃定市場版圖,吞並無力支撐的中小型供應商,重組企業關系,最終完成「模塊」帝國的最後一塊拼圖。

6. 前端模塊化和 js 模塊化的區別

兩者是包含與被包含的關系,前端模塊化泛指JS、CSS、HTML等資源的模塊化,而JS模塊化單指JS資源模塊化。

7. 北大青鳥設計培訓:web前端編程模塊化開發的好處

模塊化編程開發模式相信大家在學習前端編程開發技術的時候應該有接觸和了解過。
今天南昌北大青鳥http://www.kmbdqn.cn/就一起來分析一下,web前端模塊化編程的好處都有哪些。
一、模塊化的理解1.什麼是模塊?將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件),並進行組合在一起;塊的內部數據與實現是私有的,只是向外部暴露一些介面(方法)與外部其它模塊通信。
2.模塊化的進化過程全局function模式:將不同的功能封裝成不同的全局函數;編碼:將不同的功能封裝成不同的全局函數;問題:污染全局命名空間,容易引起命名沖突或數據不安全,而且模塊成員之間看不出直接關系。
3.模塊化的好處避免命名沖突(減少命名空間污染)更好的分離,按需載入更高復用性高可維護性4.引入多個script後出現出現問題請求過多先我們要依賴多個模塊,那樣就會發送多個請求,導致請求過多。
依賴模糊我們不知道他們的具體依賴關系是什麼,也就是說很容易因為不了解他們之間的依賴關系導致載入先後順序出錯。
難以維護以上兩種原因就導致了很難維護,很可能出現牽一發而動全身的情況導致項目出現嚴重的問題。

8. 做了這么久的前端開發,怎麼理解CSS模塊化開發

所謂的模塊化就是把常用的css放在一個文件,然後重復使用這個css對應到對應的html組件中進行調用使用。
像現在你可以參考的最好例子就是bootstrap,像它這樣的css組件寫的就很整潔,唯一不好就是雜糅在一個文件,導致不用的css也放進去了。個人覺得可以自己也弄一個這樣的。
希望我的回答對樓主有幫助,不懂可以繼續追問。

9. javascript模塊化是什麼及其優缺點介紹

如今backbone、emberjs、spinejs、batmanjs
等MVC框架侵襲而來。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模塊化的JavaScript撲面而
來。web前端已經演變成大前端,web前端的發展速度之快。

1)我們來看看什麼是模塊化?
模塊化是一種將系統分離成獨立功能部分的方法,可將系統分割成獨立的功能部分,嚴格定義模塊介面、模塊間具有透明性。javascript中的模塊在一些C、PHP、java中比較常見:

c中使用include 包含.h文件;php中使用require_once包含.php文件
java使用import導入包
此中都有模塊化的思想。

2)模塊化的優缺點:

a>優點:
可維護性
1.靈活架構,焦點分離
2.方便模塊間組合、分解
3.方便單個模塊功能調試、升級
4.多人協作互不幹擾
可測試性
1.可分單元測試

b>缺點:
性能損耗
1.系統分層,調用鏈會很長
2.模塊間通信,模塊間發送消息會很耗性能

3)最近的項目中也有用到模塊化,
使用的是seajs,但是當引用到jquery,jquery easyui/或者jquery
UI組件時,有可能會用到很多jquery插件,那這樣要是實現一個很復雜的交互時,模塊間的依賴會很多,使用define()方法引入模塊會很多,不知
有么有什麼好的方法?

4)附:
內聚度
內聚度指模塊內部實現,它是信息隱藏和局部化概念的自然擴展,它標志著一個模塊內部各成分彼此結合的緊密程度。好處也很明顯,當把相關的任務分組後去閱讀就容易多了。 設計時應該盡可能的提高模塊內聚度,從而獲得較高的模塊獨立性。

耦合度
耦合度則是指模塊之間的關聯程度的度量。耦合度取決於模塊之間介面的復雜性,進入或調用模塊的位置等。與內聚度相反,在設計時應盡量追求鬆散耦合的系統。