【js基础】前端模模块化知识点整理

IamDLY 发布于2019-08-21 17:49 / 1673人阅读

摘要：其中命令用于输入其他模块提供的功能，命令用于规定模块的对外接口。

简单记录下自己对前端模块化的一些浅薄理解，不对之处欢迎指正

在介绍前端模打包工具之前，我们先简单说一下浏览器、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笔试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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