requirejs初体验
来源:互联网 发布:安知玉如意txt网盘 编辑:程序博客网 时间:2024/06/05 01:02
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。
requirejs是一个非常小巧的javascript模块载入框架,是AMD规范最好的实现者之一。同时可以和其他框架协同工作。
AMD,异步模块定义,所有的模块将被异步加载,模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。
举个例子来说明requirejs的好处:
正常的写法:
index.html
<!DOCTYPE html><html> <head> <script type="text/javascript" src="a.js"></script> </head> <body> <span>body</span> </body></html>a.js
(function(){ function fun1(){ alert("it works"); } fun1();})()
使用了块作用域来申明function防止污染全局变量,本质还是一样的,当运行上面两种例子时,alert执行的时候,html内容是一片空白的,即
<span>body</span>
并未被显示,当点击确定后,才出现,这就是JS阻塞浏览器渲染导致的结果。requirejs的写法:
index.html:
<!DOCTYPE html><html> <head> <script type="text/javascript" src="require.js" defer async="true" ></script><!--让script异步加载--> <script type="text/javascript"> require(["a"]); </script> </head> <body> <span>body</span> </body></html>
a.js
define(function(){ function fun1(){ alert("it works"); } fun1();})浏览器提示了"it works",说明运行正确,但是有一点不一样,这次浏览器并不是一片空白,body已经出现在页面中。如果在fun1中查找dom节点操作属性的话,第一种方法无法获取,因为加载顺序由上而下,加载到js的时候body内元素未加载。使用requirejs,因为是异步加载,除了不会阻塞页面加载,获取到body的节点也不是问题。
0 0
- requirejs初体验
- requirejs初体验
- ProjectOne(04) - 番外篇02 requirejs初体验
- RequireJS
- RequireJS
- RequireJS
- requireJs
- requireJS
- requirejs
- requireJS
- requireJS
- RequireJS
- requirejs
- RequireJS
- RequireJS
- RequireJS
- requireJs
- RequireJs
- 论find_in_set(str,strlist) 参数单引号('')的重要性
- Java多线程之互斥
- 基于SpringBoot 开发
- java堆内存、栈内存、方法区
- 每N个数反转
- requirejs初体验
- Android提高后台服务进程优先级
- android studio使用过程中遇到的问题
- POJ P2442 Sequence
- Java代码优化技巧
- (UVA)1584
- expect的基本用法
- 抽象工厂--Java实现
- linux, kill掉占用60%多cpu的进程,几秒后换个pid 和 command 又出现?