require.js
RequireJS的目标是鼓励代码的模块化，它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。
baseUrl亦可通过RequireJS config手动设置。如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。
页面顶层script标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。
RequireJS入门
project.html
<script data-main="scripts/main" src="./require.js"></script> |
main.js
require(['helper/util'],function(util){ util.sayhello(); alert(util.name); }); |
util.js
define(function(){ return { sayhello:function(){ alert('我是一个方法') }, name:'我是一个属性' } }); |
requirejs config配置
index.html
<head> <meta charset="UTF-8"> <title>Title</title> <script data-main="main" src="./require.js"></script> </head> <body> <div id="demo">这是一个简单的demo</div> </body> |
main.js
require.config({ baseUrl:'js/lib', paths:{ helper:'../helper' } }); require(['jquery','helper/util'],function($,util){ console.log($.getEl('#demo')); console.log($.getEl('#demo').innerHTML); util.sayhello(); }); |
util.js
define(function(){ return { sayhello:function(){ console.log('hello requirejs') } } }); |
jquery.js
//函数式定义模块
define(function(){ return { getEl:function(elId){ return document.querySelector(elId) } } }); |