js模块化总结小白知识_模块化零基础入门

从前端打包的历史谈起在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加了。

js模块化总结小白知识

从前端打包的历史谈起

js模块化总结小白知识_模块化零基础入门

在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加了。JSMin、YUI Compressor、Closure Compiler、UglifyJS 等 js 文件压缩合并工具陆陆续续诞生了。压缩工具是有了,但我们得要执行它,最简单的办法呢,就是 windows 上搞个 bat 脚本,mac / linux 上搞个 bash 脚本,哪几个文件要合并在一块的,哪几个要压缩的,发布的时候运行一下脚本,生成压缩后的文件。

这时候commonJS出现了,如果想在a.js引入b.js和c.js,大概语法是

var b = require(./b.js);
var c = require(./c.js);

b.js和c.js导出方式是大概这样的

exports.add = function(a, b) {
  return a+b;        
}

然后再a.js中可以使用b模块的add方法

var n = b.add(5, 8);
// b.js
module.exports = {
  add(a, b){
    return a+b;
  }    
}

// or
exports.add = function(a,b) {
   return a+b; 
}

// a.js
var b = require('./b.js');
var n = b.add(5,8);

上述代码中, module.exports 和 exports 很容易混淆,下面看下大致的内部实现

var module = require('./b.js');
module.add 
// 包装了一层立即执行函数,防止全局变量污染,重要的是module,module是node独有的一个变量
module.exports = {
  add: function(a,b) {
    return a+b;      
  }    
}

// 基本实现
var module = {
  exports: {}  // exports是个空对象  
}
var exports = module.exports
var load = function(module) {
  // 需要导出的东西
  var add = function(a, b) {
    return a+b;  
  }    
  module.exports = add;
  return module.exports;    
}

module.exports和exports用法一模一样,但是不能对exports直接赋值,没有任何效果。

但是commonJS是node独有的规范,浏览器中并不适用,因为require()的返回是同步的,服务器加载资源的时候并不能异步的读取。在浏览器中如果使用这种方式就会堵塞js脚本的执行,所以浏览器中只能使用Browserify解析。Browserify和webpack几乎同时出现,简单介绍下Browserify: 其目的是让前端也能使用commonJS的语法来加载js,它会从入口js开始,把所有的require()调用文件打包并合并到一个文件,这样就解决了异步加载的问题。但是对比webpack,他的缺点也是明显的: 

所以webpack一统了天下。

于是,在commonJS的基础上,2011又出现了 Asynchronous Module Definition,也是就是AMD规范,AMD规范使用异步回调的语法来并行下载多个依赖项,基本语法如下

require(['./b.js', './c.js'], function(b,c){
   var n = b.add(5,8);  
  console.log(c) })

同时,导出的时候也需要使用异步回调的方式,比如,c模块又依赖了d.js

defined(['./d'], function(d){
   return d.PI
})

总结下AMD: 定义模块使用defined()函数,引入使用reqire()函数,两者的区别是,前者必须要在回调函数中返回一个值作为导出的东西,后者确不需要任何导出,同时也无法作为被依赖项被其他文件导入,因此一般用于入口文件。

AMD是由RequireJS提出的。如果想了解可以查看其文档。但是现在基本已经被淘汰了。

js的模块化问题解决后,css模块化也被各种各样的css预处理器所处理: less、sass、stylus、scss等等。

后来有了ES6规范,提出了模块化的概念,配合babel可以直接使用 ES6模块化

// b.js 
export function a() {}
export function b() {}

// c.js
export default function() {}

// a.js
import {a, b} from './b.js'
import ModuleC from './c.js'

对于commonJS和ES6 module 的区别简单总结如下:

海计划公众号
(0)
上一篇 2020/03/30 07:19
下一篇 2020/03/30 07:19

您可能感兴趣的内容

  • 前端模块化:CommonJS,AMD,CMD,ES6小白常识_模块化入门教程

    模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 module-loader 。一、CommonJSNode.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的

    2020/03/20
  • 寂寞交友约会 快速约起来,只分享给有需要的朋友使用教程_福利教程视频

    很多人确实不知道怎么谈恋爱,总说着怕麻烦。有个朋友就曾经提过一个设想,说有没有那么一种合约式的恋爱关系,比如两个人给谈恋爱的时间规定一个期限,比如一周、一个月、三个月,时间一到自动分手,或者再商量一下要不要续约。 听起来挺酷,核心还是因为:怕自己没那么喜欢。好了之后没多久就提分手,很容易被扣上渣的帽子,倒不如大家先约法三章,好聚好散。 要我说,恋爱其实是一种

    2020/03/22
  • HTML5全局属性汇总小白教程_html5小白攻略

    局部属性和全局属性 局部属性:有些元素能规定自己的属性,这种属性称为局部属性。比如link元素,它具有的局部属性有href、 rel、 hreflang、 media、 type、 sizes这六个。全局属性:可以用来配置所有元素共有的行为,这种属性称为全局属性,可以用在任何一个元素身上。1、accesskey属性使用accesskey属性可以设定一个或几

    2020/04/06
  • Redis 的底层数据结构(整数集合)小白教程_结构使用教程

    当一个集合中只包含整数,并且元素的个数不是很多的话,redis 会用整数集合作为底层存储,它的一个优点就是可以节省很多内存,虽然字典结构的效率很高,但是它的实现结构相对复杂并且会分配较多的内存空间。而我们的整数集合(intset)可以做到使用较少的内存空间却达到和字典一样效率的实现,但也是前提的,集合中只能包含整型数据并且数量不能太多。整数集合最多能存多少个

    2020/03/24
  • vue history模式刷新出现404菜鸟教程下载_vue入门指南

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑。用history模式就不会存在这样的问题。但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示了(404)。对于这个问题,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。
    我这里是针对nginx的配置,总结如下

    2020/04/03
  • github-markdown-css指南攻略_GitHub Markdown 样式的一个简洁 CSS

    github-markdown-css指南攻略 官方网址:https://sindresorhus.com/github-markdown-css/ GitHub:https://…

    2020/03/06
  • JS封装getScroll函数 & 案例:固定导航栏小白常识_封装攻略教程

    封装getScroll函数1. 获取页面向上或者向左卷曲出去的距离的值2. 浏览器的滚动事件 function getScroll() {return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,top: wi

    2020/03/23
  • 程序员请掌握这些核心生存技能入门知识_技能入门基础

    大咖你好,作为一个编程初学者,有什么需要注意的?以上是一个读者流年似水的提问。我把他的问题置顶了,但一直没想好怎么回答,因为问题太过笼统了。后来,他也可能意识到了这一点,就又给我发了一条微信:在吗?老师。我们作为新人应该在编写代码的过程中注意哪些问题呢?这个问题其实也不太好回答,因为要注意的问题蛮多的,多得就像雾霾中的颗粒。不过,有趣的是,流年似水这两次的提

    2020/03/22
  • js实现1万的阶乘菜鸟攻略_算法入门攻略

    前言最近面试的时候遇到一道面试题,就是实现10000!,当时的第一反应是直接用递归实现:function factorial_recursion(n){if(n <= 1) return 1;return n * factorial_recursion(n-1)
    }
    但是这样就会存在问题,Js中最大的安全整数为2^53- 1,10000!结果溢出该范围,代码

    2020/03/24
  • CSRF绕过后端Referer校验入门教程_csrf小白常识

    CSRF绕过后端Referer校验分正常情况和不正常的情况,我们这里主要讨论开发在写校验referer程序时,不正常的情况下怎么进行绕过。正常情况正常的情况指服务器端校验Referer的代码没毛病,那么意味着前端是无法绕过的。我之前考虑过的方案:JS修改Referer,失败;请求恶意网页后,后端重新送包,问题是你怎么跨域拿Cookie,失败;不正常的情况不正

    2020/03/20
  • 使用vue实现一个电子签名组件攻略教程_组件小白帮助

    在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件想必不会被吐槽了吧~canvas 标签是 HTML 5 中的新标签。

    2020/03/22
  • react如何通过shouldComponentUpdate来减少重复渲染入门基础教程_react入门基础知识

    在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化render什么时候会触发首先,先上一张react生命周期图:这张图将react的生命周期分为了三个阶段:生成期、存在期、销毁期,这样在create、props、state、unMount状态变化

    2020/03/29
  • js之切换全屏和退出全屏实现入门教程_效果入门教程

    应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等。核心代码://控制全屏
    function enterfullscreen() { //进入全屏$(“#fullscreen”).html(“退出全屏”);var docElm = document.documentElement;//W3Cif(docElm.requestFullscreen) {d

    2020/03/26
  • js中offset、scroll、event、client的区别和使用菜鸟教程网_js知识菜鸟教程下载

    用一句话概述:offset用于获取元素的实际显示尺寸, scroll用于获取滚动后全部尺寸, client用于获取不包括滚动条的实际显示尺寸,event用于获取鼠标的坐标位置。下面就详细介绍它们之间的使用和区别
    一、offset (1)offsetWidth:检测盒子的高度,offsetWidth=width+padding+border (2)offs

    2020/04/03
  • vue watch监听对象的使用小白入门实现首次不触发、深度监听_vue基础知识教程

    vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数:就是当你监控的数据变化时需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。 值也可以是函数名:不过这个函数名要用单引号来包裹。 值也可以是包括选

    2020/04/05
  • font-awesome图标转为图片入门知识_图标菜鸟攻略

    一、图标的本质font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。二、绘制图片理解了图标的本质,那图标转成文本就有了一个

    2020/03/26