requirejs

requirejs作用

当你运行多个js的时候页面会造成堵塞,如下。

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

使用requirejs可以异步加载不同的js文件, 可以把每一个js文件当成一个模块,

  • requirejs写法

当然首先要到requirejs的网站去下载js -> requirejs.org
index.html:

  <!DOCTYPE html>
 <html>
 <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
        require(["a"]);
    </script>
 </head>
 <body>
  <span>body</span>
 </body>
 </html>
  • requirejs基本api

    • define 从名字就可以看出这个api是用来定义一个模块

    • require 加载依赖模块,并执行加载完后的回调函数.

 define(function(){
    function fun1(){
     alert("it works");
    }

     fun1();
   })

通过define定义一个模块, 在通过require加载这个模块;

    require(["js/a"]);

来加载该模块(注意require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义),require API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑,如:

 require(["js/a"],function(){
      alert("load finished");
   });
  • 加载文件

大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库为例:

require.config({
paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
      }
    })
require(["jquery","js/a"],function($){
   $(function(){
     alert("load finished");  
   })
  })

image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 导语: 之前一直有听说RequireJS,但是一直都没机会去了解,只知道它是一个给js做模块化的API。最近在做R...
    wuqke阅读 40,967评论 11 78
  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 704评论 3 1
  • requirejs、require方法冲突 如果加载了多个requirejs脚本,每个requirejs会判断是否...
    Howie223阅读 1,705评论 1 2
  • 英文原文:https://www.codeproject.com/articles/625262/getting-...
    光剑书架上的书阅读 2,384评论 1 9
  • 好的三个方面: 1)尽管想偷懒,还是晨跑了; 2)用15分钟排程计划分轻重缓急,感觉不错 3)发现物品管理可以让人...
    SabrinaFang方兴阅读 150评论 0 1