require.js的基本用法

来源：互联网发布：java actionperformed 编辑：程序博客网时间：2024/05/29 09:19

推荐阮一峰老师写的require.js的用法：http://www.ruanyifeng.com/blog/2012/11/require_js.html

我学习require.js是借鉴的阮一峰老师的JavaScript模块化编程（三）：require.js的用法；这篇文章也是根据阮一峰老师的教程写出的demo。

require.js的使用可以避免alert()造成的js阻塞，可以优化js的加载。

1、避免alert()造成的js阻塞：

<!--index.html    原始写法必须alert事件执行完以后才能加载body部分的内容-->

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">alert(1)</script></head><body><h1>body</h1></body></html>

<!--用require加载js,避免alert事件阻塞页面加载问题--><!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="js/require.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">require.config({paths:{"al":"js/al"}})require(['al'],function(al){alert('require');});</script></head><body><span class="oSpan">body</span></body></html>

2、优化js加载：

<!--避免下面这种加载js的情况--><script src="a.js" type="text/javascript" charset="utf-8"></script><script src="b.js" type="text/javascript" charset="utf-8"></script><script src="c.js" type="text/javascript" charset="utf-8"></script><script src="d.js" type="text/javascript" charset="utf-8"></script><script src="e.js" type="text/javascript" charset="utf-8"></script>

改成这种写法

require(['a','b','c','d','e'],function(a,b,c,d,e){//some code here});

--------------------------------------------------------------分割线-----------------------------------------------------------------------------

写一下require.js简单的使用：

加载require.js文件造成网页失去响应的两个解决方法：
1、把js文件放在网页底部加载；
2、<script src="js/require.js" defer async="true" type="text/javascript" charset="utf-8" ></script>
注：async="true" 为异步加载，IE不支持async，只支持defer

<!--index.html--><!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><!--data-main   指定网页的主模块，入口js文件--><script data-main="js/main" src="js/require.js" type="text/javascript" charset="utf-8"></script></head><body><h1>body</h1></body></html>

//add.js//define定义模块define(function(){    function add(x,y){      return x+y;    }    return {    add:add    }})

//sum.jsdefine(function(){function sum(x,y){return x*y;};return {sum:sum}})

//red.jsdefine(function(){function red(x,y){return x-y;};return {red:red}})

//main.js//require.config()方法，我们可以对模块的加载行为进行自定义。//require.config()就写在主模块（main.js）的头部。参数就是一个对象require.config({//require 第一个参数为数组，载入每一个依赖的js文件，第二个参数为callback回调函数//paths为指定js路径，且.js可省去。(定义各个模块的加载路径)paths:{"add":"add","sum":"sum","red":"red"}})require(['add','sum','red'],function(add,sum,red){alert(add.add(1,2));//3alert(sum.sum(1,2));//2alert(red.red(2,1));//1});

更多内容，请参考阮一峰老师写的require.js的用法：http://www.ruanyifeng.com/blog/2012/11/require_js.html

阅读全文

0 0