前端模組化

2021-09-07 07:25:44 字數 1444 閱讀 8666

定義:具有相同屬性和行為的事物的集合

在前端中:將一些屬性比較類似和行為比較類似的內容放在同乙個js檔案裡面,把這個js檔案稱為模組

目的:為了每個js檔案只關注與自身有關的事情,讓每個js檔案各行其職

①模組化:指的就是遵守commonjs規範,解決不同js模組之間相互呼叫問題

②commonjs

a.js檔案中呼叫另乙個b.js檔案,一定要在a.js中引入b.js

require("b.js");另乙個被呼叫的js,也就是b.js一定要對外提供介面。

module.exports=b;

過程如下:

b.js

var b = "hello,i'm module b.";

module.exports = b;//暴露乙個介面,與b對接。這個介面既可以是函式,也可以是物件,甚至是陣列。

a.js
var _b = require("./b.js");//實際過程中應當是b.js相對於a.js的路徑,這比使用絕對路徑去獲取要規範得多 //此時_b獲得了b.js的介面,這個介面指向b.js中的變數b console.log( _b );//"hello,i'm module b.";

這就實現了乙個簡單的模組化工作方式,即:

模組間相互呼叫,協同工作,實現某特定功能。

④amd規範:async module define 非同步模組宣告

⑤cmd規範:common module define 公共模組宣告

⑥模組化的核心價值:模組化最核心的價值在於解決不同檔案之間的分工和呼叫問題,即依賴關係。

webpack

參考webpack的配置及使用

requirejs

使用步驟

配置config檔案和main.js

config.js

require.config(  } );

main.js
require(['jquery'], function($ ) );

在頁面中引入

 //main即是主邏輯入口檔案

seajs

**requirejs和seajs都是在前端實現模組化,相當於乙個前端的js模組化載入器,和webpack不一樣,webpack是通過nodejs將檔案打包的。

體現了一種分層的概念,讓每個層面只做自己該做的行為,減少**耦合和冗餘

前端模組化

前端模組化解決什麼問題?有了模組,我就可以很方便的使用別人的 想要什麼功能,就用載入什麼模組。但是,這樣做需要有乙個前提,那就是大家必須以同樣的方式編寫模組,否則就亂套了。所以組內需要有一套統一的模組規範。如何實現模組?1 物件字面量的變體 2 js設計模式的模組模式 3 採用成熟的庫檔案。前兩種方...

前端模組化

當多人開發同一專案時,很容易就會產生命名衝突的問題,尤其是js檔案,任何的js引入順序的打亂都可能導致專案執行失敗,為了解決命名衝突的問題,在es6之前,可以使用函式閉包來解決這個問題。即可能像這樣 function 這樣雖然可以解決命名衝突的問題,但也使得 的復用性變得極差,因為其它的檔案將無法再...

前端模組化

1.前端模組化的必需性 原先只需要寫在標籤中即可 隨著 量的增多,同一程式需要有多個人來寫 我們將 組織在多個js檔案中,但會存在 全域性變數同名問題 和 js檔案的順序依賴問題 我們希望在幾個檔案中的變數可以相互關聯使用而不衝突 因此,使用模組作為出口 a.建立匿名函式 function b.在匿...