什么是前端模块化?前端模块化开发到底有无必要

所谓前端开发,就是前台,常见的包括几个端:PC、pad、手机、其他智能设备,可以跑浏览器的地方就是我们前端人大施拳脚的乐土。自从node的问世,现在不光可以在浏览上了,疆土可以扩展到服务端即后台。这样一来JavaScript又牛了一级有着前后台通吃的能力,当然操作太底层的东西还需要Java等传统后台语言。随着电脑手机等智能设备性能配置、网络带宽、技术等提升,我们可以把网页做的更炫酷,更复杂、交互更加人性化也不会卡顿。但是这么搞下去,大量的js脚本代码略显其不好管理维护及团队配合开发,有些杂牌军的感觉。于是模块化开发应运而生。

图片[1]-什么是前端模块化?前端模块化开发到底有无必要-JieYingAI捷鹰AI

模块化

ES5及之前是如何实现模块化的 通过RequireJS实现:

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

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

RequireJS优点:

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

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

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

更加高效的版本管理。想一想,如果你还是用的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即可。你的页面上只需要通过

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
来说点什么吧!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容