文档章节

requireJS详解

n
 nodeJ
发布于 2016/05/26 15:50
字数 603
阅读 10
收藏 0

1、引入文件

必须要引入requireJS包,下载地址:http://requirejs.org/

<script src="js/require.js" data-main="js/main"></script>

data-main表示要加载的第一个JS文件,放到网页底部。不放入底部可以这样实现:

 <script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

2、模块的加载

require.js假定这这个模块与main.js在同一个目录,文件名为jquery.js然后自动加载。

require.config({
  baseUrl: "js/lib",
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] ,
    "underscore": "underscore.min"  = = ("underscore": "lib/underscore.min")
    }
})

require.config主要是配置加载文件,如果这些模块在其他目录,比如js/lib目录,则有两种写法。一种是逐一指定路径。还有一种就是设置baseUrl改变文件基目录。

3、AMD模块的写法

define(function (){

    var add = function (x,y){

      return x+y;

    };

    return {

      add: add
    };

  });

该文件是私有的匿名函数,必须return才能被外部调用。

4、加载非规范的模块

require.config({

    shim: {

      'underscore':{
        exports: '_'
      },

      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }

    }

  });

如果是非规范的模块,比如没有该模块没有使用AMD模块的写法(define),如果要加载它的话必须要先定义它的特征。

5、主模块的写法

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

    // some code here

  });

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
写的不够详细,有待完善。

 

本文转载自:http://www.ruanyifeng.com/blog/2012/11/require_js.html

n
粉丝 0
博文 1
码字总数 0
作品 0
温州
私信 提问
RequireJS极简入门教程

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular s......

程序员诗人
2017/03/30
0
0
RequireJS 入门指南

简介 如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础...

oschina
2013/08/15
71.4K
37
使用 RequireJS 来优化你的 JavaScript 代码

RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。 在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至...

oschina
2013/02/12
5K
11
教你5分钟学会用requirejs(必看篇)

转来:教你5分钟学会用requirejs(必看篇) requirejs是干啥的啊? 曾经,我们将一些js组件放到不同的文件,然后通过script标签引入,如果几个组件有依赖,那么要小心了,你必须将被依赖的放到...

spinachgit
2018/10/31
61
0
使用 RequireJS 优化 Web 应用前端

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文...

IBMdW
2012/09/11
8.6K
16

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
17
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.5K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部