【js基礎】前端模模塊化知識點整理

IamDLY 發布于2019-08-21 17:49 / 1737人閱讀

摘要：其中命令用于輸入其他模塊提供的功能，命令用于規定模塊的對外接口。

簡單記錄下自己對前端模塊化的一些淺薄理解，不對之處歡迎指正

在介紹前端模打包工具之前，我們先簡單說一下瀏覽器、v8和nodejs，因為我們現在用到的大部分前端模打包工具，都是需要nodejs環境運行的，同時他們都能通過npm進行下載

1. 瀏覽器：

瀏覽器組成可分兩部分：Shell+內核。瀏覽器內核又可以分成兩部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。
渲染引擎，負責對網頁語法的解釋（如HTML、JavaScript）并渲染網頁。我們平時說的“瀏覽器內核”就是指“瀏覽器所采用的渲染引擎”。
渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解釋也有不同，因此同一網頁在不同的內核的瀏覽器里的渲染（顯示）效果也可能不同，所以過去需要測試人員人肉測試頁面在不同瀏覽器中的效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。JS引擎負責對JavaScript進行解釋、編譯和執行，以使網頁達到一些動態的效果。

2. V8引擎：

Chrome的JS引擎，使用C/C++編寫的一款非常優秀的開源JS引擎

3. node.js

Nodejs對V8引擎進行了封裝，使V8可以運行在非瀏覽器環境，這使得我們的JavaScript代碼可以在非瀏覽器環境運行

4. npm

NPM是隨同NodeJS一起安裝的包管理工具，簡單來講，是一個代碼共享倉庫
npm包下都有package.json配置文件，注明了包的版本號，依賴，作者等信息，下載包時，會一起下載package.json中注明依賴的包

npm install 包名    //安裝最新版本的包到當前文件夾
npm i 包名      //npm install 包名簡寫
npm i包名@版本號   //安裝制定版本
npm i 包名 –-save   //--save兩個減號，安裝包到當前文件夾，并將包名及版本號添加到package.json的dependencies
npm i 包名 –-save-dev  //并將包名及版本號添加到package.json的devDependencies，下載包時，不會下載devDependencies中的包
npm i 包名 –D   //npm i 包名 –save-dev縮寫
npm i 包名 –g   //全局安裝包

5. javascript模塊化

簡單來講，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。這樣做有一個前提，那就是大家必須以同樣的方式編寫模塊，否則你有你的寫法，我有我的寫法，豈不是亂了套！
正是有了統一的規范，我們才能方便的在npm上下載別人的代碼/包/類庫，并在我們自己的工程中引用

CommonJS

CommonJS（nodejs, webpack等實現了該規范）
node.js的模塊系統，就是參照CommonJS規范實現的。，webpack 也是以CommonJS的形式來書寫。在CommonJS中，有一個全局性方法require，用于加載模塊。假定有一個數學模塊math.js，就可以像下面這樣加載。

var math = require("math");

然后，就可以調用模塊提供的方法：

math.add(2,3); // 5

AMD

AMD（Asynchronous Module Definition）（RequireJS實現了該規范）
基于commonJS規范的nodeJS出來以后，服務端的模塊概念已經形成，很自然地，大家就想要客戶端模塊。而且最好兩者能夠兼容，一個模塊不用修改，在服務器和瀏覽器都可以運行。但是，由于一個重大的局限，使得CommonJS規范不適用于瀏覽器環境。還是上面的代碼，如果在瀏覽器中運行，會有一個很大的問題，因為require 是同步的，所以如果加載時間很長，整個應用就會停在那里等。因此，瀏覽器端的模塊，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）。這就是AMD規范誕生的背景。
AMD也采用require()語句加載模塊，但是不同于CommonJS，它要求兩個參數：
require([module], callback);
第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數。如果將前面的代碼改寫成AMD形式，就是下面這樣：

require(["math"], function (math) {
    math.add(2, 3);
});

es6

通過import、export實現模塊的輸入輸出。其中import命令用于輸入其他模塊提供的功能，export命令用于規定模塊的對外接口。（個人觀點，雖然import和export在瀏覽器端實現有著巨大的技術難點，但是標準就是標準，早晚會被瀏覽器端實現或有更優的標準，早晚一統天下，干掉commonjs、cmd、amd）
然而像import和export這兩個命令現在在任何瀏覽器中都是不支持的, 同時babel也無法將其轉換為瀏覽器支持的ES5, 原因在于babel只是個翻譯，假設a.js 里 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，并不會把b.js的內容給讀取合并進來, 如果想在最終的某一個js里，包含 a.js，b.js 的代碼，那就需要用到打包工具，例如webpack。

6. 打包工具

目前常用的前端打包工具有很多，grunt、Gulp、webpack、rollup等，這些工具可以多帶帶使用，也可以互相配合使用
這些打包工具可以幫助前端工程師們完成預處理語言編譯、es6代碼轉es5、代碼壓縮混淆等工作

云服務器 GPU云服務器前端開發基礎知識 js算法與數據結構基礎知識前端基礎js筆試前端基礎js筆試題

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

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

JavaScript系列（四） - 收藏集 - 掘金

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
庫，組件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架構就是骨架，如下圖所示譯年月個有趣的和庫前端掘金我們創辦的使命是讓你及時的了解開發中最新最酷的趨勢。翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發工程師）本文原創，轉載請注明作者及出處。原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...

tommego 2019-08-20 16:33 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 評論0 收藏0