学校asp网站,教你如何用天翼云盘做网站,用凡科做的网站保存不了,wordpress换标题一个兜兜转转#xff0c;从“北深”回到三线城市的小码农#xff0c;热爱生活#xff0c;热爱技术#xff0c;在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号#xff1a;果冻想 前言 现代化的编程语言#xff0c;基本都支持模块化的开发#xff… 一个兜兜转转从“北深”回到三线城市的小码农热爱生活热爱技术在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号果冻想 前言 现代化的编程语言基本都支持模块化的开发咱不说别的就最原始的Shell我们公司都整了一套模块化开发的框架进行模块化开发。但是日常在编写JavaScript代码或者阅读别人的JavaScript代码时总是看到require、import、export等等关键字都说是JavaScript中的模块化的开发方式这直接就把我整懵逼了这怎么一个模块化的开发就搞出这么多的东西啊这么多的关键词啊入门即让人放弃 无论是我这样的新手还是一些老手都对这个JavaScript中的模块化开发懵懵懂懂的我就是这个样子的。那这里就通过一篇文章来把JavaScript模块化开发的前世今生给讲透了让大家以后不再对这个知识点感到迷茫。 为啥需要模块化 这就好比动物园里一堆动物是放在一个大院子里好管理呢还是说每种动物用单间进行好管理。 比如我们网页中引入JavaScript代码经常是这样的。 script src./a.js/script script src./b.js/script script src./c.js/script每个JS代码内容如下 // a.js var a 1;setTimeout(() console.log(a), 2000);// b.js var a 2;// c.js var a 3;执行后输出a 3。虽然每个代码块处在不同的文件中但是最终所有JS变量还是会处在同一个全局作用域下这时候就需要额外注意由于作用域变量提升所带来的问题。 这就是说虽然三段代码写在不同的文件中但是因为运行时声明变量都在全局下最终会产生冲突。同时如果代码块之间有依赖关系的话这将是一个非常棘手的问题谁先加载谁后加载直接影响程序的运行。这么不智能的东西在现代化的编程领域是绝对不允许存在的。所以大佬们想的 需要实现每个模块都要有自己单独的作用域每个模块之间的内部变量不会产生冲突需要实现每个模块之间能通过某种规范或机制实现通信需要实现每个模块需要能导入其它模块的功能也能导出自己的功能供其它模块调用。 好了大佬们都有想法纷争的时刻到了。 CommonJS规范 首先出厂的是CommonJS规范。其实我一开始是不知道这货的只是在学习Node.js的时候发现这货的。后来了解了下Node.js和CommonJS的关系。 即使你不会Node.js你也会知道Node.js这么大的一个生态体系那肯定是众人拾柴火焰高的肯定是不同的大神贡献了不同的包和模块的那这些包和模块给我们我们如何把他们组装在一起而且还不出问题呢这么头疼的问题你想到了我想到了那Node.js的大佬肯定也想到了。 但是Node.Js刚出来的时候没有官方的模块化规范所以它就选择使用社区提供的CommonJS作为模块化规范。这下你就明白了这里面的缘由了。 作为一个模块化的规范那肯定就要有导入和导出功能了。现在来看看CommonJS具体的规范内容 使用exports导出模块使用require导入模块如果JS文件中存在exports或者require关键字那这个JS文件就是一个模块模块内的全部代码均为模块内部代码包括全局变量、全局函数这些全局的内容均不会对全局变量造成污染。 话不多说上代码使用CommonJS实现一个小模块导出一些功能并在index.js中导入这些功能。 // 这里定义一个模块 // 定义两个变量 var age 0; var name 果冻想;// 定义一个函数 function getAge() {return age; }// 向外暴漏 exports.getAge getAge; exports.name name;在main.js中进行模块引入 // console.log(age); 抛出异常age未定义未导出的情况下只能在模块内部可见 // console.log(name); 抛出异常name未定义导出的情况下需要通过模块进行访问// 引入模块 var module require(./module.js);console.log(module.getAge()); // 输出0 console.log(module.name); // 输出果冻想通过上面的代码所有在模块内部的变量或函数如果没有导出外部就都无法访问这样就解决了全局变量被污染的问题了。同时我们也发现了CommonJS主要是在Node.js中使用但是在Node.js中为了让我们使用CommonJS时更舒服隐藏了很多实现细节下面我们来看看这些实现细节。 为了实现模块化Node.js在引入模块时它会将模块代码放到一个自执行函数中执行以实现模块化的效果从而保证不污染全局变量。就如下面这样 (function (){// 模块中的代码 })()为了保证高效的执行仅加载必要的模块Node.js只有执行到require函数时才会加载并执行模块会运行模块内部的代码并且默认开启了模块缓存如果模块加载过一次后会自动使用之前的导出结果 在模块开执行前会初始化一个值module.exports {}module.exports就是模块将要导出的内容同时为了方便开发者导出内容又声明了一个变量exports module.exports这一顿骚操作搞的很多兄弟们就傻傻分不清楚exports和module.exports有啥区别。所以Node.js上来就给我们的模块添加了这样的一坨代码 (function (){ module.exports {}; var exports module.exports; // module.exports 和 exports指向的是同一个地方 // 模块中的代码...... return module.exports; })()模块最后返回的是module.exports而不是exports。我们在开发时要么直接给module.exports赋值进行导出要么就给exports以添加字段的方式导出切勿将一个对象直接赋值给exports这样就会导致exports和module.exports不是指向同一片内存区域导致模块无法导出。 AMD规范 其实就这样来看使用CommonJS规范也没有多大问题但是由于CommonJS是同步的必须要等到加载完文件并执行完之后才能继续向后执行。每当一个模块require一个子模块的时候都会停止当前模块的解析直到子模块读取解析并加载。这就导致在浏览器上很影响性能很影响使用体验同时市面上的浏览器厂商五花八门他们觉得CommonJS不是官方的标准是社区的标准所以不愿意支持。 这就导致AMD规范横空出世了AMD规范专注于浏览器端。AMD全称是Asynchronous Module Definition即异步模块加载机制require.js实现了AMD规范。在AMD中导入和导出模块都必须放在define函数中。 define([要依赖的模块列表], function(导入的模块名称列表){ // 模块内部的代码 return 导出的内容 })至于require.js的使用这里就不展开细说了后续会专门写篇文章进行总结。这里咱只要知道为啥有了这么个AMD规范以及require.js实现了AMD规范即可。 CMD规范 CMDCommon Module Definition_ 通用模块定义。与 AMD 规范类似也是用于浏览器端异步加载模块一个文件就是一个模块当模块使用时才会加载执行。其语法与 AMD 规范很类似。这里不做赘述了如想了解详细内容可以参考这篇文章https://mp.weixin.qq.com/s/PysnsP3FnO4eCjXeUJruJw ES6模块化 江湖嘛总是会有统一的一天JavaScript标准委员会也注意到这个模块的混乱问题所以ES6 在语言标准的层面上实现了模块功能而且实现得相当简单完全可以取代 CommonJS 和 AMD 规范成为浏览器和服务器通用的模块解决方案。ES6模块化即是未来。至于这个ES6模块化语法后续专文总结。 技术的演进 根据上面的总结我们知道使用ES6模块化明显更符合JS的开发随着web的发展任何一个支持JS的环境最终都将会支持ES6的模块化的标准。但是web端受限于用户使用的浏览器版本并不能随时使用JS的最新特性。为了能让新代码也能运行在用户的低版本了浏览器上社区里也有很多工具它们能静态将高版本规范的代码编译为低版本的代码比较熟知的就是babel。 但是对于模块化相关的import和export关键字babel最终会将它编译为包含require和exports的CommonJs规范。 这就有了一个新的问题这样带有模块化关键词的模块编译折后还是没有办法直接运行在浏览器中因为浏览器端并不能运行CommonJS的模块。为了能在web端直接使用CommonJS规范的模块除了编译之外我们还需要一个步骤就是打包bundle。 总结 通过这篇文章旨在让大家对JavaScript的模块化演进有一个整体的认识不要在代码的语法海洋中迷失能更好的把握代码理解代码。简单归纳总结一下就是 (1) CommonJS NodeJS(服务器端实现)、Browserify(浏览器端实现) (2) AMD requireJS (3) CMD seaJS 最终我们都会在ES6模块化这里统一。适可而止浅尝辄止。 一个兜兜转转从“北深”回到三线城市的小码农热爱生活热爱技术在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号果冻想