requirejs基础整理

Myth丶恋晨 2022-05-26 00:17 247阅读 0赞

# 一、介绍 #

## 1．使用用途 ##

有效的防止文件冲突

声明不同js文件之间的依赖

可以让代码以模块化的方式组织

## 2．下载及引入 ##

路径：[http://www.requirejs.cn/docs/download.html][http_www.requirejs.cn_docs_download.html]

中文API: [http://www.requirejs.cn/home.html][http_www.requirejs.cn_home.html]

<table> 
 <tbody> 
 <tr> 
 <td>/** *data-main入口文件 */ &lt;script data-main="scripts/main" src="scripts/require.js"&gt;&lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

## 3．常用方法 ##

requirejs.config() //定义别名

requirejs //引入模块

define //定义模块

## 4．简单案例 ##

构建项目结构如下：

|--requireJsTest

|--scripts

|--common

|--util.js

|--main.js

|--require.js

|--index.html

文件：index.html

<table> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp;&nbsp;&nbsp; &lt;head&gt; &nbsp;&nbsp;&nbsp; &lt;/head&gt; &nbsp;&nbsp;&nbsp; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script data-main="scripts/main" src="scripts/require.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp; &lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

文件：main.js

<table> 
 <tbody> 
 <tr> 
 <td>//别名 requirejs.config({ &nbsp;&nbsp;&nbsp; paths:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tool:"common/util" &nbsp;&nbsp;&nbsp; } }); //使用别名，引入util.js里面定义的模块 require(["tool"], function(tool) { &nbsp;&nbsp;&nbsp; tool.test(); });</td> 
 </tr> 
 </tbody> 
</table>

文件：util.js

<table> 
 <tbody> 
 <tr> 
 <td>// 定义模块 define([],function(){ &nbsp;&nbsp;&nbsp; return { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; test:function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; } });</td> 
 </tr> 
 </tbody> 
</table>

附视频学习地址：[http://haokan.baidu.com/v?pd=wisenatural&vid=14960822007606944695][http_haokan.baidu.com_v_pd_wisenatural_vid_14960822007606944695]

扩展：插件形式的非AMD规范采用如下形式，”垫”成可用模块。

<table> 
 <tbody> 
 <tr> 
 <td> 
 <div style="background:#FBFBFB;"> 
 require.config({ 
 &nbsp;&nbsp;&nbsp; shim:{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "underscore":{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; exports :"_"; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } 
 &nbsp;&nbsp;&nbsp; } 
 }) 
 </div></td> 
 </tr> 
 </tbody> 
</table>

[http_www.requirejs.cn_docs_download.html]: http://www.requirejs.cn/docs/download.html
[http_www.requirejs.cn_home.html]: http://www.requirejs.cn/home.html
[http_haokan.baidu.com_v_pd_wisenatural_vid_14960822007606944695]: http://haokan.baidu.com/v?pd=wisenatural&vid=14960822007606944695