美文网首页前端笔记本
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 基本知识

    define 定义了一个模块 require 加载依赖模块,并执行加载完后的回调函数。require中的依赖是一个...

  • Requirejs常用配置和应用

    requirejs、require方法冲突 如果加载了多个requirejs脚本,每个requirejs会判断是否...

  • 模块化

    RequireJS官网:www.requirejs.org 为什么使用RequireJS 1、有效的防止变量冲突2...

  • RequireJS模块化

    RequireJS官网:www.requirejs.org 为什么使用RequireJS1、有效的防止变量冲突2、...

  • requireJS实践

    开始使用requireJS 文件引入直接在页面上引入requireJS文件。requireJS改变了传统scrip...

  • vue之requireJs中引入vue-router的方法

    requireJs简介参数配置requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单...

  • requirejs

    1.要使用requirejs必须先下载requirejs到工作目录下2.通过script载入requirejs,其...

  • requirejs

    requirejs组成 requirejs主要是有require、require.config和define组成。...

  • requireJs

    requirejs模块化开发 -- AMD配置短名称 config.js引入requirejs

  • requirejs的使用(AMD规范实现的库)

    什么是requirejs 要说requirejs就要先说一下AMD。AMD是”Asynchronous Modul...

网友评论

    本文标题:requirejs 基本知识

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