JavaScript之模塊化開發

MartinHan 發布于2019-08-23 12:21 / 3018人閱讀

摘要：實現了按需加載與的區別對于依賴的模塊提前執行，而是延遲執行推崇依賴就近推崇依賴前置之前之后模塊化方案是最規范的方案未來也是主流對于我們來說也是經常使用與熟悉的不過現在的瀏覽器還不兼容使用需要轉碼使用導出模塊使用導入模塊參考原文

javaScript 的模塊化

為什么需要模塊化開發？

隨著代碼復雜程度的提高, 項目也變得越來越難維護, JavaScript模塊化 也因此油然而生, 這應該是大家最熟悉的一種加載方式, 但是缺點也比較明顯

所有的模塊都處于全局作用域下, 容易造成命名沖突

依賴關系不明顯, 比如 main.js 中有使用 jquery, 那么 jquery 就一定要先加載,
但是從引入方式中我們無法直觀的察覺依賴關系, 不利于維護

CommonJs

一個文件就是一個模塊, 其內部定義的變量, 方法都處于該模塊內, 不會對外暴露.

主要語法:

使用 require 來加載模塊

使用 exports 或者 module.exports 暴露模塊中的內容

demo

新建 a.js, 導出 name 和 sayHello

// a.js
const name = "Bob"
function sayHello(name) {
  console.log(`Hello ${name}`)
}
module.exports.name = name
module.exports.sayHello = sayHello

在 b.js 中引入 a 并調用

// b.js
const a = require("./a")
const name = a.name
console.log(name) // Bob
a.sayHello(name) // Hello Bob

由于 CommonJs 是同步加載的模塊的, 在服務端(node), 文件都在硬盤上, 所以同步加載也無所謂, 但是在瀏覽器端, 同步加載就體驗不好了. 所以 CommonJs 主要使用于 node 環境下.

AMD

AMD 全稱為 Asynchromous Module Definition(異步模塊定義), 實現了異步加載模塊. require.js 實現了 AMD 規范

主要語法:

require([module], callback) // 導入

define(id, [depends], callback) // 導出模塊

demo

新建 a.js, 輸入以下內容

define(function() {
  let alertName = function(str) {
    alert("I am " + str)
  }
  let alertAge = function(num) {
    alert("I am " + num + " years old")
  }
  return {
    alertName: alertName,
    alertAge: alertAge
  }
})

在 test.html 中調用 a 模塊





    
    
    
    Document

能夠異步加載模塊, 適合在瀏覽器中運行, 但是不能夠按需加載, 必須提前加載模塊

CMD

CMD規范是阿里的玉伯提出, sea.js 實現。實現了按需加載

與 AMD 的區別:

對于依賴的模塊 AMD 提前執行，而 CMD 是延遲執行

CMD 推崇依賴就近, AMD 推崇依賴前置

    //AMD2.0之前
    require(["./a", "./b"], function(a, b) {
         a.doSomething();
         b.doSomething();
    })
   // AMD2.0之后
   define(["./a", "./b"], function(a, b) {
         a.doSomething();
         b.doSomething();
   })
   
   // CMD
   define(function(require, exports, module) {
         var a = require("./a");
         a.doSomething();
         var b = require("./b");
         b.doSomething();
   })

ES6

ES6 模塊化方案是最規范的方案, 未來也是主流, 對于我們來說也是經常使用與熟悉的. 不過現在的瀏覽器還不兼容, 使用需要 babel 轉碼

使用 export 導出模塊

使用 import 導入模塊

import Vue from "vue"
import axios from "axios"
import { mapState, mapMutations, mapActions } from "vuex"

export default {
  created() {
    console.log("Hello World")
  }
}

參考
http://www.hangge.com/blog/ca...
https://www.imooc.com/article...
原文
https://github.com/chenyinkai...

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

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

Javascript模塊化編程之【模塊的寫法】

摘要：模塊化編程，已經成為一個迫切的需求。但是，不是一種模塊化編程語言，它不支持類，更遑論模塊了。本文總結了當前模塊化編程的最佳實踐，說明如何投入實用。就是模塊的基本寫法。這樣做除了保證模塊的獨立性，還使得模塊之間的依賴關系變得明顯。隨著WEB的快速崛起，網頁越來越像桌面程序，需要一個團隊分工協作、進度管理、單元測試等等......開發者不得不使用軟件工程的方法，管理網頁的業務邏輯。 Ja...

Riddler 2019-08-20 10:28 評論0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同學去面試，做了兩道面試題全部做錯了，發過來給道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。排序算法 -- JavaScript 標準參考教程（alpha） - 前端 - 掘金來自《JavaScript 標準參考教程（alpha）》，by 阮一峰目錄冒泡排序簡介算法實現選擇排序簡介算法實現 ... 圖例詳解那道 setTimeout 與循環閉包的經典面...

enali 2019-08-20 16:36 評論0 收藏0
2017 前端面試準備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個人博客已上線，歡迎前去訪問評論無媛無故的個人博客以下內容非本人原創，是整理后覺得更容易理解的版本，歡迎補充。一道面試題引發的對 javascript 類型轉換的思考 - 前端 - 掘金最近群里有人發了下面這題：實現一個函數，運算結果可以滿足如下預期結果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移...

王晗 2019-08-29 12:30 評論0 收藏0
2017 前端面試準備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個人博客已上線，歡迎前去訪問評論無媛無故的個人博客以下內容非本人原創，是整理后覺得更容易理解的版本，歡迎補充。一道面試題引發的對 javascript 類型轉換的思考 - 前端 - 掘金最近群里有人發了下面這題：實現一個函數，運算結果可以滿足如下預期結果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移...

xiaochao 2019-08-22 11:03 評論0 收藏0
2017 前端面試準備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個人博客已上線，歡迎前去訪問評論無媛無故的個人博客以下內容非本人原創，是整理后覺得更容易理解的版本，歡迎補充。一道面試題引發的對 javascript 類型轉換的思考 - 前端 - 掘金最近群里有人發了下面這題：實現一個函數，運算結果可以滿足如下預期結果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移過來...

KitorinZero 2019-08-20 16:40 評論0 收藏0