来自http://www.tuicool.com/articles/v6b6R3 的学习笔记
下载require.js和jquery.js的文件,放入文件夹。在文件夹中再见main.js和index.html的文件
方式一
index.html内容如下
<!doctype html> <html> <head> <title>requirejs入门(一)</title> <meta charset="utf-8"> <script data-main="main.js" src="require.js"></script> </head> <body> </body> </html>
其中data-main是主入口js的文件,src是加载的js文件
main.js的内容如下
require.config({ paths:{ jquery: ‘jquery‘ } }); require([‘jquery‘],function($){ alert($().jquery); })
这里的main设置了require的路径paths,还有require了一个jquery.js文件,在这上面做了alert的动作
浏览器查看index.html的文件,会alert出一个jquery的版本号,再看网络那里,加载出来了index.html,main.js,require.js,jquery.js四个文件
方式二
其实也不一定要设data-main的路径,可以直接在index.html里面配置路径和require文件
index.html
<!doctype html> <html> <head> <title>requirejs入门(一)</title> <meta charset="utf-8"> <script type="text/javascript" src="require.js"></script> </head> <body> <script type="text/javascript"> require.config(function(){ paths:{ main:‘main‘ } }); require([‘main‘],function( fn ){ fn.init(); }); </script> </body> </html>
这里我们把paths设置为main,然后就可以require main这个js模块了。
从这也可以看出,一个require。js只有一个paths路径,一次require,剩下的要加载的模块可以在main那个js模块里面加载
main.js
define( function( require ){ var exports = {}; var jquery = require(‘jquery‘); function init(){ alert(jquery().jquery); } exports.init = init; return exports; });
模块文件中要以define(function(){});才能被引用
这里var了一个exports的对象,然后让整个function返回expotrs,在index.html里的fn.init其实就是这里的exports.init了。
其实,fn就是define里面这个匿名函数!
如果我们还有别的模块要增加,可以都从main里面require,想require jquery那样做就好了。
require.js初识