前端笔记本

requirejs 基本知识

2016-10-20  本文已影响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']
    }
  }
})
上一篇 下一篇

猜你喜欢

热点阅读