两种加载方式 加载方式 规范 命令 特点 运行时加载 CommonJS/AMD require 社区方案,提供了服务器/浏览器的模块加载方案 非语言层面的标准 只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化. 编译时加载 ESMAScript6+ import 语言规格层面支持模块功能 支持编译时静态分析,便于JS引入宏和类型检验 动态绑定 export命令 定义 export命令用于规定模块的对外接口 输出变量 1.       单个输出 // profile.js exp…

1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: Ruby 的require Python 的import 甚至就连 CSS 都有@import 但是 JavaScript 任何这方面的支持都没有,这对开发大型的.复杂的项目形成了巨大障碍 在 ES6 之前,社区制定了一些模块加载方案,最主要的有: CommonJS     用于服务器 AMD …

运行和编译的概念 编译包括编译和链接两步. 编译,把源代码翻译成机器能识别的代码或者某个中间状态的语言. 比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.还简单的作一些比如检查有没有粗心写错啥关键字了啊.有啥词法分析,语法分析之类的过程. 链接,是把编译生成的二进制文件,组合成为一个系统可以执行的可执行文件. 运行: 把编译出来的可执行文件代码在系统中执行的过程,此时被装载到内存中. (代码保存在磁盘上没装入内存之前是个死家伙.只有跑到内存中才变成活的). 运行时类型检查就…

1.如何在浏览器中import模块 在使用模块加载时不同浏览器有不同的行为 使用 import 加载模块时,需要把script标签的type属性改为module.此时Firefox浏览器支持import,但Chrome浏览器仍然不支持. <script type="module" src="src/importDemo.js"></script> //export.js里面的代码,export.js文件无需在html中引入 let a = 1…

目的: 了解AMD规范与CMD规范,写一个模块加载器雏形. 基本概念: AMD是异步模块定义规范,而CMD是通用模块定义规范.其他的还有CommonJS Modules规范. 对于具体的规范,可以参考: https://github.com/amdjs/amdjs-api/wiki/AMD AMD规范 https://github.com/seajs/seajs/issues/242 CMD规范 http://www.zhihu.com/question/20351507/answer/1485…

一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块来使用和处理. 作为一个模块打包工具,主要功能是打包资源文件并整合到一个包中,我们在开发时,只需要引用一个包文件,就能加载预先设计好的模块功能. 二.安装 不同文件类型的资源,Webpack有对应的模块loader,ES6语法转换用的是babel-loader,dataUrl用的是url-loade…

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<…

最近在看许多React的资料,发现了大部分的项目都是用webpack行模块化管理的工具.这次也是借着写了一个React-Todos的小应用,对webPack最基本实用的功能体验了一番,顺带做个小记录. #为什么用webpack CommonJs与AMD 在一开始,我们先讲一下它和以往我们所用的模块管理工具有什么不一样.在最开始的阶段,Js并没有这些模块机制,各种Js到处飞,得不到有效妥善的管理.后来前端圈开始制定规范,最耳熟能详的是CommonJs和AMD. CommonJs是应用在NodeJs…

叨叨一会CommonJS Common这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢?很明显不是,这个常识一点都不常识.我最初认为commonJS是一个开源的JS库,就是那种非常方便用的库,里面都是一些常用的前端方法,然而我错得离谱,CommonJS不仅不是一个库,还是一个看不见摸不着的东西,他只是一个规范!就像校纪校规一样,用来规范JS编程,束缚住前端们.就和Promise一样是…

前言 主要学习一下四种模块加载规范: AMD CMD CommonJS ES6 模块 历史 前端模块化开发那点历史 require.js requirejs 为全局添加了 define 函数,你只要按照这种约定的方式书写这个模块即可. define(function () { //Do setup work here return { color: "black", size: "unisize" } }); //my/shirt.js now has some d…