requirejs初步了解

来源：互联网发布：网络主播招聘文案编辑：程序博客网时间：2024/06/05 13:33

代码:

html:

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Requirejs</title></head><body><div id="test" style="width:300px;height:300px;background-color:pink;"></div></body></html><script data-main="js/main" src="js/require.min.js" ></script>

解释:

当使用了requirejs,那么网页上的脚本文件将由requirejs去动态加载所以只需要引入requirejs即可,并创建一个入口(程序),main.js,并通过data-main告诉requirejs入口在哪里.

main.js

require.config({baseUrl: "js/lib",paths:{"jquery" : "jquery-1.12.0.min","application":"application"},//deps:["application"],urlArgs:"v="+new Date().getTime()}); require(['application'],function(app){app.sayHello();});

解释:require.config定义了加载脚本时的一系列参数,baseUrl指定了所有js文件的根目录,paths指定了要被加载的模块的路径和名称(模块名称:文件名称(路径)),urlArgs指定了加载时,请求的参数(这个感觉主要用来防止缓存的),require函数的第一个参数表示要加载的模块数组(里面的元素为模块的名称,要和config中定义的模块名称相对应),回调函数的参数表示加载的模块的返回值如application模块加载后的返回值将赋值个app,回调函数表示模块加载完要执行的动作.(类似初始化什么的).

application.js

define(['jquery'],function ($){　　var app = new Object();app.sayHello = function(){alert('Hello World!');}$("#test").css("background-color","red");return app;});

解释:define函数定义一个模块,第一个参数表示这个模块依赖的模块的数组(里面的元素名字与config对应),回调函数则为模块的功能部分,这个模块可以返回一个对象(也可不返回- -类似jquery)

1 0