美文网首页
requireJs学习笔记(一)

requireJs学习笔记(一)

作者: ysy32020 | 来源:发表于2016-08-30 16:06 被阅读0次

    概念

    是一个模块载入框架,AMD规范的实现
    

    优势

    • 防止js加载阻塞页面渲染
    • 使用程序调用方式加载js

    API

    • define 定义模块
    • require 加载模块

    示例

    define(function(){ 
        function fun1(){ 
           alert("it works"); } 
         fun1();
    })
    
    require(["js/a"],function(){ 
      alert("load finished");
    })
    

    加载文件

    //config:给模块起一个更短更好记的名字
    require.config({ 
      paths : { 
        //cdn库没有加载成功时,加载本地库
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],  
        "a" : "js/a" 
      }
    })
    //不需写后缀.js,$为jquery的输出变量
    require(["jquery","a"],function($, a){ 
      $(function(){ 
        alert("load finished"); 
      })
    })
    

    使用

    • 上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:
      require.config({
      paths : {
      "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
      "a" : "js/a"
      }
      })
    • 然后再页面中使用下面的方式来使用requirejs:
      <script data-main="js/main" src="js/require.js"></script>

    相关文章

      网友评论

          本文标题:requireJs学习笔记(一)

          本文链接:https://www.haomeiwen.com/subject/erafettx.html