标签:
作为前端开发人员,模块化编程是其身边一个重要工具。它可以规范你的代码,解决由于多个js之间的可能存在的依赖关系,并且提升网页渲染速度。
首先来个简单的例子,实现一个简单的jia,jian,cheng,chu。
先看例子:<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script type="text/javascript" data-main="page.js" src="require.js"></script> </head> <body> </body>很简单,data-main设置主模块page.js。这个模块一开始就加载执行。
console.log("马上执行") require([‘math‘], function( _m ){ console.log(_m) console.log(_m.jia(1,2)) })
然后是math.js
define(function(){ var jia = function(a, b){ return a+b; } var jian = function(a, b){ return a-b; } var cheng = function(a, b){ return a*b; } var chu = function(a, b){ return a/b; } return { jia: jia, jian: jian, cheng: cheng, chu: chu } })
输出:
Object { jia=function(), jian=function(), cheng=function(), 更多...}
3
这个例子非常简单,所有文件都在同一个目录下。但是还有一些情况
情景一:如果我的js是在另外一台主机,如何使用require.js
还是上面的html,main.js改成
requirejs.config({ paths: { ‘jquery‘: ‘http://skin.huitu.com/js/jquery-1.8.3.min‘//注意,这里没有.js。在这里很容易出错 } }); require([‘jquery‘], function ($) { console.log($) });
情景二:我在维护一个稳定的项目,之前的开发没有用到require.js,新需求的开发我想用require.js。
require([‘old1‘, ‘old2‘, ‘old3‘]); requirejs.config({ paths: { ‘jquery‘: ‘http://skin.huitu.com/js/jquery-1.8.3.min‘ } }); require([‘jquery‘], function ($) { console.log($) });
标签:
原文地址:http://www.cnblogs.com/pfzeng/p/4184862.html