美文网首页前端笔记本
requirejs 基本知识

requirejs 基本知识

作者: 春困秋乏冬眠夏打盹 | 来源:发表于2016-10-20 14:02 被阅读17次

    define 定义了一个模块

    define(function(){
      function(){
        alert('');
      }
    });
    

    require 加载依赖模块,并执行加载完后的回调函数。require中的依赖是一个数组。

    // 加载本地js文件
    require(["js/a"], function(){
      alert('load a model');
    });
    
    // 加载非本地文件
    // require.config 是用来配置模块加载位置,给模块起一个更短更好记的名字
    
    require.config({
      paths: {
        'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        'a': 'js/a'
      }
    })
    

    上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:

    require(["jquery", "a"], function($){
      $(function(){
        alert('load');
      })
    })
    // 多个参数
    require(['jquery', 'underscore'],function($,_){
      $(function(){
        _.each([1,2,3], alert)
      })
    })
    

    每个页面中都加入配置。这样十分繁琐。
    requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:

    // main.js
    require.config({
      paths: {
        'jquery': ["http://cdn/", "js/jquery"],  // 可以配置多个路径,第一个加载不成功再加载第二个
        'a': 'js/a'
      }
    })
    // html
    <script data-main="js/main" src="js/requier.js"></script>
    

    data-main属性,这个属性制定的js将在加载完require.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都是用这个配置,然后页面中就可以直接使用require来加载所有的短模块名。
    data-main 还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径

    // 引用非AMD规范的js文件,是不能用require([''])的。要用到shim。
    require.config({
      shim: {
        'underscore': {
          exports: '_'
        }
      }
    })
    //应用
    require(['underscore'], function(_){
      _.each();
    })
    
    //插件形式的非AMD模块。也要用到shim。
    require.config({
      shim: {
        'jquery.form': {
          deps: ['jquery']
        }
      }
    })
    

    相关文章

      网友评论

        本文标题:requirejs 基本知识

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