我的理解:
requirejs可以解决页面渲染过程中由于js加载而导致页面渲染被阻塞,也就是加载js过程中页面出现空白的问题;
管理js的加载和依赖;
网上说法:
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。
平常我们的页面是这样的:
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>requirejs</div> </body> <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> <script src="d.js"></script> <script src="e.js"></script> <script src="f.js"></script> <script src="g.js"></script> </html>
|
js
1 2 3 4 5 6 7
| //a.js (() { alert("a.js没完成,你只能看到空白页面"); } fun1(); })()
|
1 2 3 4 5 6 7
| //b.js (() { function fun1() { alert("it works"); } fun1(); })()
|
结果是:
使用requirejs我们是这样的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://github.com/oleics/require.js/blob/master/require.js"></script> <script> require.config({ paths: { "jquery": ["https://code.jquery.com/jquery-2.2.4.min"] } }) require(["jquery", "a"], function($) { $(() { alert("loading ok") }) }); </script> </head> <body> <div>js加载的时候,你可以看着我</div> </body> </html>
|
结果是: