亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Js中的模塊化

ytwman / 2943人閱讀

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

JS的模塊化開發(fā) 了解模塊化 1、概念

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

2、為什么要引入模塊化

降低復雜度，提高解耦性

部署方便

避免命名沖突

更好的分離，按需加載

更高的維護性

3、隨著而來的問題

請求過多

依賴模糊

難以維護

模塊化規(guī)范 1、CommonJS 規(guī)范說明

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

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

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

模塊的暴露

暴露的本質(zhì)：對象（exports對象）

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

需要注意的是：

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

2、當模塊內(nèi)部全部是 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，中文名是異步模塊。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范，由于不是js原生支持，使用AMD規(guī)范進行頁面開發(fā)需要用到對應(yīng)的函數(shù)庫，也就是大名鼎鼎的RequireJS，實際上AMD是RequireJS在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出。

解決的問題

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

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

異步前置加載

4、CMD的seaJS 
define(id, deps, factory)

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

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

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

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

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

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

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

});

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105298.html

相關(guān)文章

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

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

    walterrwu 評論0 收藏0

  • 探索 JS 中的模塊化

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

    SoapEye 評論0 收藏0

  • JavaScript模塊化發(fā)展

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

    mengbo 評論0 收藏0

  • webpack + gulp 在前端中的應(yīng)用

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

    remcarpediem 評論0 收藏0

  • js中的模塊化——commonjs,AMD,CMD,UMD,ES6

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

    qpal 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<