RequireJs使用

来源：互联网发布：javascript字符串拼接编辑：程序博客网时间：2024/05/22 04:28

使用requireJs：

原代码：

demo.html

<html><head><meta charset="en"><style>#content{width: 200px;height: 200px;margin:20px auto;border: 1px solid #ddd}</style></head><body><div id="content"></div></body><script src="src/jquery-1.9.0.min.js"></script><script src="src/color.js"></script><script src="src/a.js"></script></html>

color.js

function changeBkColor (ele) {var colors=["#99B898","#FECEAB","#FF847C","#E84A5F","#2A363B"];var colorIntervel=setInterval(function(){var idx=Math.floor(Math.random()*5);$(ele).css("background-color",colors[idx]);},1000)}

a.js

changeBkColor("#content");

运行效果就是定时切换content的背景色：

a.js里调用了color.js里的方法，所以a依赖color。color里使用了jquery选择器，color依赖了jquery

修改使用require.js

demo.html

<html><head><meta charset="en"><style>#content{width: 200px;height: 200px;margin:20px auto;border: 1px solid #ddd}</style></head><body><div id="content"></div></body><script src="src/require.min.js" data-main="src/main"></script></html>

color.js

define(['jquery'],function($){var changeBkColor=function(ele){var colors=["#99B898","#FECEAB","#FF847C","#E84A5F","#2A363B"];var colorIntervel=setInterval(function(){var idx=Math.floor(Math.random()*5);$(ele).css("background-color",colors[idx]);},1000);};return{changeBkColor:changeBkColor}})

a.js

define(['color'],function(color){color.changeBkColor("#content");})

main.js

require.config({　　　　baseUrl: "src/",　　　　paths: {　　　　　　"jquery": "jquery-1.9.0.min",　　　　　　"a": "a",　　　　　　"color": "color",　　　　}　　});require(['a'])

AMD模块的写法

define(function (){　　　　var add = function (x,y){　　　　　　return x+y;　　　　};　　　　return {　　　　　　add: add　　　　};　　});

加载方法

require(['math'], function (math){　　　　alert(math.add(1,1));　　});

加载非规范的模块

require.config({　　　　shim: {　　　　　　'underscore':{　　　　　　　　exports: '_'　　　　　　},　　　　　　'backbone': {　　　　　　　　deps: ['underscore', 'jquery'],　　　　　　　　exports: 'Backbone'　　　　　　}　　　　}　　});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性

比如，jQuery的插件可以这样定义：

<span style="font-size:12px;">shim: {　　　　'jquery.scroll': {　　　　　　deps: ['jquery'],　　　　　　exports: 'jQuery.fn.scroll'　　　　}　　}</span>

参考文章：http://www.ruanyifeng.com/blog/2012/11/require_js.html

0 0