一、RequireJS的主要作用与优点
主要作用:js模块化、编写复用js代码
优点:
1、防止命名冲突
2、声明不同js文件之间的依赖
3、代码模块化
(1)一个文件一个模块:每个js文件应该只定义一个模块
(2)define()中注意相对模块名
二、常用方法
1、require.config 为模块指定别名
2、require 引入写好的模块
3、define 编写模块
三、使用方法+一个小例子
模块js写在html外面,由一个js进行模块加载
例如我的工程目录结构
| src
| |—— js
|—— main.js
|—— test.js
| vender
| |—— js
|—— require.min.js
|—— jquery.min.js
|
| test.html
一个 Demo test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个Require Test</title> <style> #myTest{ height: 50px;; width: 50px; background-color: #28a4c9; text-align: center; } </style> </head> <body> <div id="myTest">Test</div> <script src="vender/js/require.min.js" data-main="src/js/main"></script> </body> </html>
|—— main.js
require.config({ paths:{ jquery: '../../vender/js/jquery.min' } }); require(['jquery','test'],function($,test){ test.fun1(); $('#myTest').click(function(){ console.log('myTest click2'); }); });
|—— test.js
define(['jquery'],function($){ return { fun1:function(){ $('#myTest').click(function(){ console.log('myTest click'); }); } } })