reqiure.js使用笔记 | 易学教程

为什么需要使用require.js

1、防止命名冲突；

2、声明不同JS文件之间的依赖；

3、可以让我们的代码以模块化的方式组织；

4、多个JS文件一次性加载，减少http请求次数。

....

使用方法

先去require.js官网下载，下载地址：http://requirejs.org/

require.js常用的三个方法

1、requirejs.config

2、requirejs

3、define

案例使用

test.html如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>require test</title>      
    </head>
<body>
<div>
test...
</div>
<span>click me</span>
<script src="js/require.js" data-main="js/main"></script>
</body>
</html>

require.js引用建议放在网页底部，也可以像下面这样，<script src="js/require.js" defer async="true" ></script>，表明异步加载reqire.js

主文件main.js如下：

requirejs.config({
	baseUrl: '/jquery/js',
	paths: {
		jquery: 'jquery.2.1.4'
	}
});
requirejs(['jquery','validate'], function($,validate) {
	console.log(validate.isEqual(1,2));
	console.log(validate.check());
	validate.myClick();
});

其中main.js对应test.html中的data-main属性。

模块验证文件validate.js如下：

define(['jquery'], function($) {
  return {
        isEqual: function(str1,str2) {
            return str1 === str2;
        },
        check: function() {
             return "this is a check function test ...";
        },
        myClick:function(){
            $("span").click(function(){
                 $("div").html('this is a require testaaa...');
            });
        }
  }
});

validate.js对应主文件main.js中的validte模块。

结果如下：

来源：oschina

链接：https://my.oschina.net/u/780509/blog/549032

标签

require.js