摘要：介绍一款模块加载工具的入门，并且重点介绍其优化工具。发布目录项目源代码工具目录，例如构建工具等。另外，前端代码发布前都会进行压缩，使文件足够小。原来是因为里了，所以优化工具把也合并进来了。而优化工具要用好，要多尝试他们的配置选项。
前端变化太快，如今RequireJS已经无法吸引眼球了。
介绍一款模块加载工具：RequireJS的入门，并且重点介绍其优化工具。
RequireJS是一个代码模块加载器。
最古老的时候，前端在开发页面的时候，一般情况下，都是在Html文件里一次把所有会用到的JavaScript文件通过
随着前端项目越来越复杂，这种方式带来了很多问题：
命名冲突。在以前的项目里，经常为了命名冲突，出现很多类似 comm.utils.dialog的对象名。
文件依赖。例如上述代码，如果某开发人员要调用dialog.js，那么必须在此之前知道它依赖于util.js，并在dialog.js之前引用util.js，否则会报错。
更详细的请看文章前端模块化开发的价值（https://github.com/seajs/seajs/issues/54...）
所以很多人去研究模块化开发，成果也不错。出现了许多模块化方案和标准，目前有以下：
符合AMD规范，如RequireJS
符合CMD 规范，如SeaJS
NodeJS规范 CommonJS
ECMAScript 6的模块化
RequireJS就是符合AMD规范一种实现。
二、使用官网下载RequireJS，并在页面中引用，即可享用RequireJS的所有特性。
从一个DEMO开始，此Demo没有很多逻辑，当加载某模块时在控制台打印该模块的名称。
以上是Demo的代码结构。
release：发布目录
src：项目源代码
tools：工具目录，例如构建工具等。
点击查看完整代码
DEMO代码分析
入口文件，main.html
暂忽略release和tools目录，只关注src目录。
先看main.html
先引入了require.js，再引入配置信息config.js，最后是一段引导启动代码。此Demo的启动代码，在require函数的第一个参数里传入它所需要的模块，one和two，而不需要关心它们分别依赖于什么
配置文件config.js
引入require.js后，需要先进行配置，例如baseUrl是指加载资源时，是相对此路径的资源。
定义模块
require函数的加载对象是模块，对于requireJS来说，一个文件定义一个模块。那么怎么定义模块呢？
使用define函数定义，例如two.js里的代码是：
其中return的对象是该模块对外曝露的接口，调用方require此模块后，可使用此对象所定义的所有方法和属性。
运行DEMO
使用Chrome运行src/main.html，先后初始化了three，one，two等三个模块。如下图
网络请求是这样的
main.html通过script标签加载require.js和config.js，然后启动代码通过require函数加载 one.js和two.js，two.js通过require函数加载它所依赖的three.js。
requireJs的入门要关注四样东西
页面引用 require.js
在使用require函数前，使用require.config方法配置路径等信息
使用require函数加载模块
使用define函数定义模块
三、优化工具以上是RequireJS最基本的使用方法。然而，它还提供了优化工具，用于提升性能，此优化工具为 r.js（http://requirejs.org/docs/optimization.h...）
requireJS认为一个文件只能定义一个模块。然而，有些模块很小，分开文件来开发虽然有利于源代码的维护和可读性，但却不利于浏览器环境下的加载，因此会有一些合并代码的需求，即将几个模块合并到一个文件里，例如如果一个工程里使用到了jquery和backbone等第三方代码库，而且又是常常一起使用的，那么在发布之前就可以把它们合并成一个文件。
另外，前端代码发布前都会进行压缩，使文件足够小。因此，现在介绍一下如何使用r.js的优化工具实现此两点述求。
安装与使用
下载r.js。
安装NodeJS和NPM，官网去下载安装包即可
同样是上一节的Demo，我们要合并one.js和two.js，同时压缩所有的代码。
以下文件目录中
tools里面的r.js是优化工具的代码库；而build.js是配置文件
src/js目录下多了一个combine.js文件。此文件用于存放合并后的代码。
配置文件
优化工具根据配置文件进行优化，即tools里面的build.js。
配置选项有很多，详情请看
https://github.com/jrburke/r.js/blob/mas...
优化一：合并文件
在src/js下新建combine.js，内容为空都可以。
tools/build.js里配置要合并的config.modules。
命令行cd到tools目录
执行 node r.js –o build.js
从输出的信息看来，combine.js合并了one.js，three.js和two.js。
但我们在tools/build.js里明明配置的是合并one和two。原来是因为two.js里require了three.js，所以优化工具把three.js也合并进来了。那么如果我本意其实并不想把three.js合并进来呢？
Rjs的合并策略：传入define，require的模块参数如果是直接量就会合并，如果是变量那么不合并，例如
Two.js里require(‘three’)这样加载，three.js是会被合并到combine.js的，而如果是var mod=”three”; require(mod)，那么three.js是不会被合并的。
优化二：代码压缩
默认情况下，优化工具是会压缩代码，但是如果某些情况下不想压缩可以，在tools/build.js里关掉，即optimize选项设置为none。
运行结果
编译后的release目录文件：
运行release/main.html，同样在控制台打印了加载的模块名称，即实现了跟之前src/main.html一样的功能。
但是，不再多带带加载 one.js、two.js和three.js了，而是只加载 combine.js
至此结束，只会用requireJS是不够的，优化工具会使你的程序性能得到提升。
而优化工具要用好，要多尝试他们的配置选项。http://requirejs.org/docs/api.html#confi...
我在深圳，欢迎关注我的公众号
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79054.html
摘要：前端工程化的演化。前端较为流行的单元测试，等自动化测试自动化测试是软件通过模拟浏览器，对页面进行操作，判断是否产生预想的效果。 前端工程化 前端工程化的概念在近些年来逐渐成为主流构建大型web应用不可或缺的一部分，在此我通过以下这三方面总结一下自己的理解。 为什么需要前端工程化。 前端工程化的演化。 怎么实现前端工程化。 为什么需要工程化 随着近些年来前端技术的不断发展，越...
摘要：以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。强大的设计使得它更像是一个构建平台，而不只是一个打包工具。 以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。 如今，网页不再...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：后来换了一家公司，没有前端开发这个职位，是从转过去的，因为项目需要，渐渐的也就坐实了这个岗位。假如我们以前的代码是这样的放到全局作用域。此时的代码，其实已经具备了进入现代期的要求，那就是规范模块化。 我是14年入的程序员大军，当时主java兼具前端开发的活儿，在现在看来的一些流开发框架和新兴思想，早在node.js开始进入大家视野的时候就流行起来了，只是在那时博主并没有关注前端的生态圈...
摘要：并减少对样式的请求。缺点暴露了模块成员，外部可以修改模块内部状态。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。 HTML&&CSS基础知识点整理 一、WEB标准：一系列标准的集合 1. 结构（Structure）：html 语言：XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. 表现（Preasentation）:css...
阅读 1859·2021-11-19 09:40
阅读 2110·2021-10-09 09:43
阅读 3165·2021-09-06 15:00
阅读 2795·2019-08-29 13:04
阅读 2740·2019-08-26 11:53
阅读 3466·2019-08-26 11:46
阅读 2304·2019-08-26 11:38
阅读 372·2019-08-26 11:27
