Js中的模塊化

ytwman 發布于2019-08-23 18:29 / 2885人閱讀

摘要：的模塊化開發了解模塊化概念將一個復雜的程序依據一定的規則或者說是規范封裝成幾個塊，或者是文件，并進行組合在一起，塊的內部數據與實現是私有的，只是向外暴露一些接口或者是方法與其他的模塊進行通信。

JS的模塊化開發 了解模塊化 1、概念

將一個復雜的程序依據一定的規則或者說是規范封裝成幾個塊，或者是文件，并進行組合在一起，塊的內部數據與實現是私有的，只是向外暴露一些接口或者是方法與其他的模塊進行通信。

2、為什么要引入模塊化

降低復雜度，提高解耦性

部署方便

避免命名沖突

更好的分離，按需加載

更高的維護性

3、隨著而來的問題

請求過多

依賴模糊

難以維護

模塊化規范 1、CommonJS 規范說明

每個文件都可以當做一個模塊

在服務器端：模塊的加載運行時同步的

在瀏覽器端：模塊需要提前編譯

模塊的暴露

暴露的本質：對象（exports對象）

module.exports =  一個值
exports.xxx =  一個值

需要注意的是：

1、當 exports 和 module.exports 同時存在的時候，module.exports 會蓋過 exports

2、當模塊內部全部是 exports 的時候，就等同于 module.exports

3、最后我們就可以認定為 exports 其實就是 module.exports 的子集。

2、ES6 ES6的導出

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

需要留心的是：export 可以導出的是一個對象中包含的多個屬性，方法。 export default 只能導出一個可以不具名的對象。

ES6的 import

當我們需要引入某個模塊的時候，可以通過ES6的import

3、AMD的RequireJS 異步模塊AMD

Asynchronous Module Definition，中文名是異步模塊。它是一個在瀏覽器端模塊化開發的規范，由于不是js原生支持，使用AMD規范進行頁面開發需要用到對應的函數庫，也就是大名鼎鼎的RequireJS，實際上AMD是RequireJS在推廣過程中對模塊定義的規范化的產出。

解決的問題

多個JS文件可能有依賴的關系，被依賴的文件需要早于依賴它的文件加載到瀏覽器

JS加載的時候瀏覽器會停止頁面的渲染，加載的文件越多，頁面失去響應的時間越長

異步前置加載

4、CMD的seaJS

define(id, deps, factory)

因為CMD推崇一個文件一個模塊，所以經常就用文件名作為模塊id；
CMD推崇依賴就近，所以一般不在define的參數中寫依賴，而是在factory中寫。

factory有三個參數：
function(require, exports, module){}

一，require
require 是 factory 函數的第一個參數，require 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口；

二，exports
exports 是一個對象，用來向外提供模塊接口；

三，module
module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

demo
// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require("jquery.js")
  $("div").addClass("active");
});

// 加載模塊
seajs.use(["myModule.js"], function(my){

});

GPU云服務器云服務器中的模塊 webrtc中的aec模塊 js模塊化 js模塊化視頻教程

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

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

JS常見模塊化規范(CommonJS/AMD/CMD/UMD/ES6 Module)

摘要：常見模塊化方案是由社區提出的模塊化方案中的一種，遵循了這套方案。是模塊化規范中的一種，遵循了這套規范。中的模塊化能力由兩個命令構成和，命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能。為什么需要模塊化在ES6出現之前，JS語言本身并沒有提供模塊化能力，這為開發帶來了一些問題，其中最重要的兩個問題應當是全局污染和依賴管理混亂。 // file a.js var name =...

walterrwu 2019-08-23 12:32 評論0 收藏0
探索 JS 中的模塊化

摘要：的主要思想是異步模塊，主邏輯在回調函數中執行，這和瀏覽器前端所習慣的開發方式不謀而合，應運而生。是目前開發中使用率最高的模塊化標準。原文鏈接: http://yanjiie.me 偶然的一個周末復習了一下 JS 的模塊標準，刷新了一下對 JS 模塊化的理解。從開始 Coding 以來，總會周期性地突發奇想進行 Code Review。既是對一段時期的代碼進行總結，也是對那一段時光的...

SoapEye 2019-08-22 18:21 評論0 收藏0
JavaScript模塊化發展

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到所有依賴加載完成之后前置依賴，這個回調函數才會運行。如果將前面的代碼改寫成形式，就是下面這樣定義了一個文件，該文件依賴模塊，當模塊加載完畢之后執行回調函數，這里并沒有暴露任何變量。模塊化是我們日常開發都要用到的基本技能，使用簡單且方便，但是很少人能說出來但是的原因及發展過程。現在通過對比不同時期的js的發展，將JavaScript模...

mengbo 2019-08-22 18:05 評論0 收藏0
webpack + gulp 在前端中的應用

摘要：概述從去年短時間內對現有系統的改造到如今穩定實施，已經好幾個月，這套流程滿足了日常前端開發的流程。在講這之前簡單說下前端模塊化歷程。模塊化以上是在規范出來之前的編碼方式，大家應該非常熟悉。只要在代碼中用來異步加載模塊即可。概述從去年短時間內對現有系統的改造到如今穩定實施，已經好幾個月，這套流程滿足了日常前端開發的流程。由于之前項目組的模塊化本身做的不是很好，基本算是推到一半重來，雖...

remcarpediem 2019-08-19 18:19 評論0 收藏0
js中的模塊化——commonjs,AMD,CMD,UMD,ES6

摘要：若不存在則模塊標識應該默認定義為在加載器中被請求腳本的標識。這也是目前很多插件頭部的寫法，就是用來兼容各種不同模塊化的寫法。語句輸出的值是動態綁定的，綁定其所在的模塊。前言歷史上，js沒有模塊化的概念，不能把一個大工程分解成很多小模塊。這對于多人開發大型，復雜的項目形成了巨大的障礙，明顯降低了開發效率，java，Python有import，甚至連css都有@import,但是令人費...

qpal 2019-08-23 13:49 評論0 收藏0