第一次使用require.js

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuzijiang1123/article/details/54948953


   由于项目中会用到require.js再加上这个确实很流行,以后模块化是必然的趋势,我们组下周也会有交流,所以我想好好的开始看看require.js。

             网上对于require.js介绍太多了:http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/

         我这里就不再过多赘述,直接先来写写代码,熟悉一下。

________________________________________________________________________________________________________________________________

         文件目录是

          require.html

          main.js

          require.js

          js/jquery.js

          js/test.js


require.js的API:

         config--配置requirejs依赖。
         define--创建模块,全局函数。
         require--读取依赖,全局函数。


         注:define和require用法相同,但define要有return返回,以供其他模块调用;require则没有返回接口。

         我想达到的效果就是在main.js中直接调用test.js中的函数API(require中每一个js文件其实就是一个模块,也就一个对象),也就是调用test模块中的API函数(我自己测试发现,如果在一个文件中定义2两个define的话,只有第一个有效,不知道我的方法对不对,define使用的时候我没有加id)


require.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>require</title>
</head>
<body>
<script src="require.js" type="text/javascript" data-main="main"></script>
</body>
</html>

data-main:指定了函数入口(省去了.js,其实就是加载main.js这个文件,源码中应该有处理,目前我不清楚原理,你打开网页的F12你可以发现它已经帮你写好了<script src="main.js" type="text/javascript" charset="utf-8" async="" data-requirecontext="_"  data-requiremodule="main">),相当于我们C语言中的main函数的作用。


这里先从其他模块说起:(前面说过每个js文件就是一个模块,所以每个js的文件名就是模块的名字,不要后缀.js)

test.js:


define(["jquery"],function ($) {
	function Func(){
		this.fun=function(){
			console.log("lzj");
		}
	}
    //Do setup work here
    return         Func
 
});


define(id,dependencies,factory);
第一个参数id,表示模块标识,可省略;
第二个参数dependencies,表示模块依赖,可省略;
第三个参数factory,模块的实现,或一个js对象。


我这里使用define去定义一个模块,第一个参数是依赖项,就拿我这里的jquery来说,我这个文件里面用到了jq,所以我最开始定义模块的时候声明了一下它的依赖项(这个在main.js 中去声明),如果还有其他模块的话同样以数组的形式写进去。然后就是定义了一个函数,函数的形参就是前面依赖项的对象的传递,方便我们去调用依赖项的函数。

在这个代码中我定义了一个构造器函数Func,其中定义了一个fun的方法,供其他模块使用,最后返回这个构造器函数Func。

我们这里还可以用另外一种返回的方式,就是直接返回一个对象,代码可以修改为:


define(["jquery"],function ($) {
	function fun(){
		console.log("lzj")
	}
    //Do setup work here
    return   { 
           fun:fun
     }
 
});


//当然,如果你返回了一个对象,那么你还可以在这个对象里面添加其他属性,和上面那种方法大同小异,只不过是对象的创建方式不一样罢了。


main.js:


如果我们用test.js中的第一种方式去定义对象,就使用下面的方法去调用。


require.config({
	baseUrl:"js",
});

require(["jquery","test"],function($,test){
	var t=new test();
	t.fun();
	console.log($().jquery);
});



require.conf去定义我们模块的路径,其实里面的参数还挺多,不过第一次使用的时候就只用到这些,其他的后面遇到再说。

baseUrl:"js"定义了用于加载模块的根路径。因为我的jquery.js和test.js都在js路径下,所以这样我们就不用再去指定这个路径下的文件了,还有两个参数是paths和shim,paths是用于映射不存在根路径下面的模块路径;shim是配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。



然后我们调用reuquire去调用我们的函数,其实它的参数和define类似,只不过一个是定义,一个是去调用。

如果我们用第二种定义对象的方法去调用函数的的话则是下面方法,其实刚才也说了就是对象定义的2种方式,对象文本标识法和构造器函数构建方法:

require.config({
	baseUrl:"js",
});

require(["jquery","test"],function($,test){
	test.fun();
	console.log($().jquery);
});

这里没有说jquery.js是因为它是很成熟的一个模块,并不是我们自己写的一个模块,所以我们只需要去依赖使用它就行。




阅读更多

没有更多推荐了,返回首页