关于RequireJS的简单介绍即使用方法
2016-10-20 08:56
627 查看
RequireJS介绍
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
兼容性
浏览器(browser) | 是否兼容 |
---|---|
IE 6+ | 兼容 ✔ |
Firefox 2+ | 兼容 ✔ |
Safari 3.2+ | 兼容 ✔ |
Chrome 3+ | 兼容 ✔ |
Opera 10+ | 兼容 ✔ |
优点
实现js文件的异步加载,避免网页失去响应
管理模块之间的依赖性,便于代码的编写和维护
快速上手
step 1
引入require.js
require()中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义
第二个参数是回调函数(callback),可以用来解决模块之间的依赖性
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["js/a"], function(){ alert("load finished"); }); </script> </head> <body> body </body> </html>
step 2
require.config是用来配置模块加载位置
如果固定的位置比较长,可以使用 baseUrl : "js",则paths中就不用写js了
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require.config({ paths : { "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"], "a" : "js/a" } }); require(["jquery", "a"], function(){ alert("load finished"); }); </script> </head> <body> body </body> </html>
step 3
step 2中重复出现了require.config配置,如果每个页面中都加入配置,就显得不大好了,requirejs提供了一种叫"主数据"的功能
创建一个main.js把step 2中require.config放到main.js中
<script data-main="js/main" src="js/require.js"></script>
step 4
通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] } }); require(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); }) });
以上就是小编为大家带来的关于RequireJS的简单介绍即使用方法全部内容了,希望大家多多支持脚本之家~
您可能感兴趣的文章:
相关文章推荐
- 关于ios的autoLayout的一些简单介绍以及使用方法
- 关于ios的autoLayout的一些简单介绍以及使用方法
- 关于ios的autoLayout的一些简单介绍以及使用方法
- CProgressCtrl 进度条控件的使用方法简单介绍
- 关于使用ETL工具Kettle的简单介绍(三)
- QT-Linguist使用方法简单介绍
- Android MediaPlayer使用方法简单介绍
- AJAX学习基础:简单介绍数据岛使用方法
- QT-Linguist使用方法简单介绍
- MediaPlayer使用方法简单介绍
- 关于Zipalign的介绍和使用方法
- C#关于log4net(Log For Net)的使用 简单说明以及介绍
- Android MediaPlayer使用方法简单介绍
- 关于存储过程中一个参数表示多个查询条件使用方法的简单处理
- 关于进度条的简单的使用方法
- topCoder上一则关于正则表达式的文章-简要介绍了其语法和使用方法
- 优化防火墙得力助手ipset介绍及简单使用方法
- 关于treeView1_AfterSelect方法中节点的使用(代码介绍)
- Android MediaPlayer使用方法简单介绍
- Document对象的使用:hasChildNodes()方法,nodeName、nodeValue、nodeType的简单介绍