AMD CMD之requireJS
- 格式:pptx
- 大小:438.17 KB
- 文档页数:24


requireJS使⽤教程⼀:为什么要使⽤requireJS?很久之前,我们所有的JS⽂件写到⼀个js⽂件⾥⾯去进⾏加载,但是当业务越来越复杂的时候,需要分成多个JS⽂件进⾏加载,⽐如在页⾯中head内分别引⼊a.js,b.js,c.js等,如下所⽰:<script src="js/app/a.js"></script><script src="js/app/b.js"></script><script src="js/app/c.js"></script>我们现在先在浏览器下看看这些请求,如下所⽰:这样的写法有如下缺点:1. 页⾯在加载的时候,是从页⾯⾃上往下加载及渲染的,当页⾯上有多个分散的js⽂件时候,页⾯会先加载及解析头部的JS⽂件(同步加载),页⾯被堵塞了,其次分散的js请求数多了,⽹页失去响应的时间就会变长。
2. 由于JS⽂件存在依赖关系,⽐如上⾯的b.js要依赖于a.js,所以务必保证a.js优先引⼊到页⾯上来且先加载,要严格保证加载顺序,依赖性最⼤的⽂件⼀定要放到最后加载。
但是当依赖关系很复杂的时候,代码的编写和维护就会变得困难了。
当然上⾯引⼊JS时候,对于第1点:⾸先:我们可以放在底部去加载,把所有JS放在</body>之前去,这样就会解决了游览器堵塞的问题,其次我们可以把所有的JS⽂件打包成⼀个JS⽂件,但是依赖性(也就是顺序)我们还是没有办法解决掉,所以我们引⼊了requireJS。
⼆:使⽤requireJS的优点有哪些?1. 实现JS⽂件的异步加载,避免⽹页被堵塞。
2. 管理模块之间的依赖性,便于代码的编写和维护。
requireJS基本语法及使⽤.1. ⾸先我们需要到官⽹下载最新版本的requireJS源码包。
,在页⾯头部head标签内引⼊requireJS,如下:<script src="js/require.js"></script>,但是加载这个⽂件也会造成⽹页失去响应,我们可以加上 defer 和 async这个属性。
Require.js的基本⽤法详解⼀:什么是require.js①:require.js是⼀个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页⾯的渲染和其后的脚本的执⾏,并提供了在加载完成之后的执⾏相应回调函数的功能;②:require.js要求js脚本必须要实现模块化,即⽂件化;⽽require.js的作⽤之⼀就是加载js模块,也就是js⽂件。
③:require.js可以管理js模块/⽂件之间的依赖;即不同的框架例如Jquery,AngularJs等采⽤了不同的语法,⽽使⽤这些语法的js⽂件在导⼊时必须排在Jquery.js或Angular.js之后才能顺利执⾏,require.js则能够解决排序依赖问题。
⼆:为什么要使⽤require.js①:加载的时候,浏览器会停⽌⽹页渲染,原因如下:在不使⽤require.js时,⽂件编写⽅式如下:<!DOCTYPE html><html><head><script type="text/javascript" src="a.js"></script></head><body><span>Hellow World</span></body></html>在导⼊的a.js⽂件中:(function(){function fun1(){alert("JS⽂件已⽣效");}fun1();})()在运⾏以上代码时我们可以注意到在alert弹出的提⽰框出现的时候,⽹页html的部分仍然是空⽩的,没有显⽰出任何内容,当我们点击确定之后"Hellow World"才会显⽰在⽹页中,这就是JS阻塞浏览器渲染导致的结果。
JavaScript初衷:实现简单的页面交互逻辑,寥寥数语即可;随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀问题:这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码模块化:是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。
在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。
无模块优点:相比于使用一个js文件,这种多个js文件实现最简单的模块化的思想是进步的。
缺点:污染全局作用域。
因为每一个模块都是暴露在全局的,简单的使用,会导致全局变量命名冲突,当然,我们也可以使用命名空间的方式来解决。
对于大型项目,各种js很多,开发人员必须手动解决模块和代码库的依赖关系,后期维护成本较高。
依赖关系不明显,不利于维护。
比如main.js需要使用jquery,但是,从上面的文件中,我们是看不出来的,如果jquery忘记了,那么就会报错。
CommonJs 是服务器端模块的规范,Node.js采用了这个规范。
根据CommonJS规范,一个单独的文件就是一个模块。
加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。
第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。
也就是说,如果加载时间很长,整个应用就会停在那里等。
您会注意到是同步的。
CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。
像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。