随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化是如何一步一步地发展起来的,并且也会主要对这些模块化方式做一个简单的比较。
模块化的目的:
1、代码复杂度随着项目的扩大而增加
2、减少模块之间的耦合
3、希望减少http请求
最原始的js写法,将所有的函数变量都定义在全局变量下,这种写法污染全局空间,很可能会导致变量命名冲突。
接着出现模块模式的写法,模块模式使用了立即执行函数,并通过函数参数传递需要的模块变量。模块模式勉强满足了封装的需求。
然而只有封装是不够的,还需要加载。html中的js文件加载,难以维护,依赖过多,同时请求也过多。
接下来出现了commonJS模块规范,让js跳出了浏览器环境,定义了module 、 exports 、 require 、 global 实现模块的定义和引用。通过CommonJS,每个JS文件独立地存储它模块的内容(就像一个被括起来的闭包一样)。在这种作用域中,我们通过 module.exports 语句来导出对象为模块,再通过 require 语句来引入。
CommonJS以服务器优先的方式来同步载入模块,假使我们引入三个模块的话,他们会一个个地被载入。它在服务器端用起来很爽,可是在浏览器里就不会那么高效了。
CommonJS已经挺不错了,但假使我们想要实现异步加载模块该怎么办?答案就是Asynchronous Module Definition(异步模块定义规范),简称AMD.
AMD是并行加载所有依赖的模块, 并完成执行后, 再开始执行其他代码。
在一些同时需要AMD和CommonJS功能的项目中,你需要使用另一种规范:Universal Module Definition(通用模块定义规范)。
UMD创造了一种同时使用两种规范的方法,并且也支持全局变量定义。所以UMD的模块可以同时在客户端和服务端使用。
最后再ES6中定义了模块,使用import和export来导出引入模块。
现在出现了webpack模块打包器,使用webpack在打包模块的同时进行优化,通过使用loaders可以将把源模块转换成通用模块,使用plugins将模块。webpack 本身维护了一套模块系统,这套模块系统兼容了所有前端历史进程下的模块规范,包括 amd commonjs es6 等。babel 能提前将 es6 的 import 等模块关键字转换成 commonjs 的规范。这样 webpack 就无需再做处理,直接使用 webpack 运行时定义的 webpack_require 处理。
webpack的核心是用于现代JavaScript应用程序的静态模块捆绑器。 当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多个包。
React Element是React的virtual DOM,本质上就是一个普通的对象,相较于浏览器的DOM更加轻量,它是Component的组成部分,是构建React应用的最小单元。
React Element通常由render函数返回的JSX创建,但其本质上只是React.createElement(component, props, …children)的语法糖。
React Element有类型之分,比如JSX的标签名就决定了React Element的类型,不同的JSX标签,就是不同类型的React Element。
React Element有内容(children)和属性(attribute),但是一旦React Element被创建之后,是无法改变其内容或属性的。即,React Element都是immutable不可变的。
更新界面的唯一办法是创建一个新的React Element,会由React DOM对比(diff)新旧React Element之后,只把改变了的部分更新到浏览器DOM上。
GET方法是安全方法,安全是指因为GET方法只是执行获取资源的动作,而POST方法被用于请求服务器接受请求中的实体,作为请求资源的一个新的从属物,所以可能会执行不安全动作。
GET方法有幂等性,幂等的意思是相同的请求请求结果一样,所以GET是幂等性
如果请求消息包含If-Modified-Since,If-Unmodified-Since,If-Match,If-None-Match或者 If-Range头域, GET的语义将
变成“条件(conditionall) GET”。一个条件GET方法会请求满足条件头域的实体。条件 GET 方法的目的是为了减少不必要的网络使用,
这通过允许利用缓存里仍然保鲜的实体而不用多次请求或传输客户端已经拥有的实体来实现的。
POST里的响应是不可缓存的。