模块化的学习和理解

2019-05-17 admin

最近在看vue源码,然后看到了rollup,然后又看到了模块化的概念,所以对模块化的概念进行一个学习和总结。以下就是我的学习成果,如果有什么不对的欢迎指教。

模块化概念

模块化存在的意义:开发者希望在开发过程中只需要关注自己的核心业务逻辑,其他的可以直接加载别人写好的模块。但是Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也就没有”模块”(module)了(借鉴而来)

nodejs一个应用于服务器端编程被提出时,Javascript模块化也因此诞生,CommonJS模块规范被提出。在es6模块之前,CommonJS统一了模块化编程。

下面我要简述一下CommonJS、AMDCMD和ES6 Module

同步加载 CommonJS

在CommonJS中有一个全局的方法require(),可以用于加载模块。但是这个方法在浏览器端具有一定的局限性,因为JavaScript是解释性语言,从上而下直接执行。此时的困惑是

图片描述

后来我得到的答案: 图片描述

最后我的笔记: CommonJS是一种同步加载的方式,在服务器端模块是存在本地的,这样读取时间很快,需要等待时间很短,可以是同步加载,但是在浏览器端,依赖的模块是存放在服务器端的,读取的时间依赖网速,如果网速不好的话,需要等待很久。javascript就会报错了,所以在浏览器端需要异步加载的方式

module.exports和exports 模块导出

let num = 0
function add (a, b) {
  return a + b
}
module.exports = {
  num: num,
  add: add
}

exports 和 module.exports的区别:Node为每一个模块都提供了一个exports变量,指向module.exports。

以上的写法module.export尝试写成:

// 结果报错
let num = 0
function add (a, b) {
  return a + b
}
exports = {
  num: num,
  add: add
}

第二种写法:

// 结果成功
let num = 0
function add (a, b) {
  return a + b
}
exports.num = num
exports.add = add

node中,exports指向module.exports。如果直接将一个对象赋值给exports,那么exports原先指向module.exports会被破坏,这样这两种之间就没有联系了,就会报错。如果非要想用exports的话,可以直接给exports添加属性。

require 模块导入

let math = require('./math')

异步加载

  • AMD/RequireJS 异步加载 依赖前置、提前执行
  • CMD/sea.js 异步加载 依赖就近、延迟加载

ES6 Module

import 导入

常见用法:

// 全部加载
import * as util from 'xxx'
import AA from 'yyy'
// 按需加载
import { A, B } from 'xxx'

import * as aa from 'xxx’的语法,会将xxx文件内export的函数整合成一个对象。 import AA from ‘yyy’,引入的是export default的函数

import 在编辑时就执行的,所以:

foo()
import { foo } from 'xxx'

不会报错,因为import { foo } from 'xxx’在编辑时就执行了,foo()是在运行时才执行。

import()

import命令是在编辑时就会执行的,所以无法做到放到if代码中或者函数中,

if (a) {
    import { foo } from 'xxx'
}
// 会报句法错误

import export只能在模块的顶层,不可以在代码块中,这样就无法实现运行时动态加载模块(条件加载)。 => import()的出现 使用import()可以类似node里的require(),可以动态加载且import()是异步加载。import()加载模块成功以后,这个模块会作为一个对象当then方法的参数。

import('xxx').then(module => {
    ...
})

export 暴露模块

export 规定的时对外的接口,必须模块内部的变量建立一一对应关系。看到阮一峰大佬的内容里有这么一段:

图片描述

目前还是不很理解:为什么export var m = 1 或者export function aa (){}就可以建立一一对应的关系。

CommonJS和ES6 Module的区别

之前一直没有考虑过他们之前的区别,今天又仔细研读了一下阮一峰的es6关于模块的讲解,觉得说的很好。 ES6的设计思想是尽量的静态化,在编译时就可以确定模块之间的依赖关系,以及输出和输入的变量 CommonJS、AMD、CMD只能在运行时才可以确定模块之间的加载关系

// CommonJS
let { stat, exists, readFile } = require('fs');
// ES6
import { stat, exists, readFile } from 'fs';

第一个和第二的区别: CommonJS是将fs模块整体加载出来生成一个对象,然后在这个对象读取里找stat, exists, readFile方法,这种就是运行时加载 ES6模块会只在fs中加载stat, exists, readFile这三个方法,不会加载其他方法,这种就是编辑时加载

[转载]原文链接:https://segmentfault.com/a/1190000019216621

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65212.html

文章标题:模块化的学习和理解

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部