前端模块化开发 ES5时代和ES6时代

ES5及之前是如何实现模块化的

通过RequireJS实现:

一提到模块化,常说到CommonJS和AMD。这俩主要是个什么东西呢,记住是模块化的标准规范即可。而RequireJS就是AMD规范的最好实现。就像ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。我们只需要知道,实现CommonJS规范的API是同步加载模块的,而实现AMD规范的API是则是异步加载模块,异步加载即非阻塞加载,更加适合浏览器端。官方文档对RequireJS的描述:

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node.使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

RequireJS优点:

  1. 异步“加载”。我们知道,通常网站都会把script脚本的放在html的最后,这样就可以避免浏览器执行js带来的页面阻塞。使用RequireJS,会在相关的js加载后执行回调函数,这个过程是异步的,所以它不会阻塞页面。

  2. 按需加载。通过RequireJS,你可以在需要加载js逻辑的时候再加载对应 的js模块,这样避免了在初始化网页的时候发生大量的请求和数据传输,或许对于一些人来说,某些模块可能他根本就不需要,那就显得没有必要。

  3. 更加方便的模块依赖管理。相信你曾经一定遇到过因为script标签顺序问题而导致依赖关系发生错误,这个函数未定义,那个变量undefine之类的。通过RequireJS的机制,你能确保在所有的依赖模块都加载以后再执行相关的文件,所以可以起到依赖管理的作用。

  4. 更加高效的版本管理。想一想,如果你还是用的script脚本引入的方式来引入一个jQuery2.x的文件,然后你有200个页面都是这么引用的,那当你想换成jQuery3.x,那你就不得不去改这200个页面。但是如果你的requireJS有在config中做jQuery的path映射,那你只需要改一处地方即可。

RequireJS 使用

需要在页面中引入的文件

 <script data-main="js/main" src="xxx/xxx/require.js"></script>

使用RequireJS,你只需要引入一个require.js即可。你的页面上只需要通过\<script\>标签引入这一个js即可。然后这个页面的所有业务逻辑只需要在main.js里面写.

ps:标签中有一个data-main属性,你现在只需要了解require.js会在加载完成以后通过回调方法去加载这个data-main里面的js文件,所以这个js文件被加载的时候,RequireJS已经加载执行完毕。

整个RequireJS2000来行源码,暴露出来供我们使用的就那么几个,主要有导入模块,定义模块。(requirejs,require,define),其中:requirejs和require的关系如同:jQuery和$的关系。说道这里:前端的人想必都懂了。

ES6是如何实现模块化的

通过自带的实现:

es6原生支持模块化了,通过import导入模块,export导出模块。这两个单词一直作为保留字,如今赋予它应有的身份出现了,丰富了js语言功能。传统的模块模式基于闭包,返回的“公有API”。这个“公有API”带有对内部变量和功能拥有闭包的方法。

扫描二维码关注公众号,回复: 11563075 查看本文章

ES6兼容性

虽然现在ES6可以很方便的实现模块化,浏览器对ES6新特性开始渐渐支持,但是这还需要很长一段时间,我们不能百分百依赖浏览器本身对ES6的支持度来开发。

虽然出现了各种转换工具,但是到目前为止,还没有一款工具能百分百将ES6的新特性完美地转换成ES5,因为在ES6新增的内容中,存在一些无法在ES5中找到与之匹配的语法,所以不建议在生产环境中使用支持度较低的新特性,后续的教程章节中介绍的新特性前端君也会特意提醒它的兼容性。

ES6的兼容方法

但是,这并不影响我们学习ES6的热情,因为ES6是未来的标准,浏览器支持只是迟早的事。

即使使用了转换工具,我们还是不建议在生产环境大量地使用ES6的特性。

babel就是目前对 ES6 的支持程度较高。

查看ES6对浏览器的兼容  https://github.com/huanhuanuncle/compat-table
 

猜你喜欢

转载自blog.csdn.net/zhanghuanhuan1/article/details/81699725