RequireJS

<script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>
首页index.html只需要引入requireJs库文件,并且指明入口函数main.js(data-main),它一般用来对requirejs进行配置,
main.js内容如下:main.js这个文件做的事情就是:由requirejs异步载入所有文件

require.config({
    paths:{
        //一些库文件
        'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',
        'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',
        'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
        //js文件
        'bootstrap': "../scripts/bootstrap",
        'app': "../scripts/app",
        'router': "../scripts/router"
        .....以及其他的js文件,这里省略
    },
    shim:{
        'angular':{
            exports:'angular'
        },
        'angular-route':{
            deps:['angular'],
            exports: 'angular-route'
        }
    },
    deps:['bootstrap'],
    urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存,调试用
});

requirejs一共提供了两个全局变量:
1. requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了,我们可以用另一个
声明模块及js文件地址

2. define: requirejs的方式来定义模块:
define([], function() {
  return {
    hello: function() {
      alert("hello, app~");
    }
  }
});

普通的方式定义了一个函数,我们能在requirejs里使用它吗?

暴露单个变量exports:

可以把某个非requirejs方式的代码中的某一个全局变量暴露出去,当作该模块以引用。
shim: {
    hello: { exports: 'hello' }
}

暴露多个变量:init

这时就不能再用 exports 了,必须换成 init 函数:

shim: {
    hello: {
      init: function() {
        return {
          hello1: hello1,
          hello2: hello2
        }
      }
    }
  }

当exports与init同时存在的时候, exports将被忽略。

有主的模块(不能重新起模块名)
它们声明为有主的,那么所有的模块只能使用同一个名字引用它们,这样系统就只会载入它们一次。
声明了一个确定的模块名。define('jquery', [], function() { ... });

无主的模块
define([...], function() {
  ...
});

我们可以在 requirejs.config 里,使用任意一个模块名来引用它

时间: 2024-10-31 12:31:17

RequireJS的相关文章

利用browserify与requirejs构建ng项目

随着业务的增长,利用ng来构建项目时候,文件数量就会显著的上升,从而上线部署的时候就要考虑压缩合并问题,随着前端工程化的发展,现在已经有很多种第三方工具来实现开发与部署的便捷性,browserify与requirejs就是其中的两个比较好多的工具. browserify以commonjs模块开发规范来约束前端模块开发,最后上线时提供命令行生成合并文件,详情请 点击这里 requirejs以amd模块开发规范来约束前端模块开发,最后上线的时候提供r.js命令行工具来生成合并压缩文件,详情请 点击这

LABjs、RequireJS、SeaJS 哪个最好用?为什么?

LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行.LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化.LABjs 是一个文件加载器. RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然. 模块加载器一般可降级为文件加载器用,因此使用 RequireJS 和 SeaJS,也可

RequireJS、SeaJS的区别

引用自知乎(卢勃) 1. RequireJS的异步模块加载迎合了浏览器端JS程序员固有的异步思维,学习成本低 -------------------------------- Sea.js的主页中写到: Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码 依赖的自动加载.配置的简洁清晰,可以让我们更多地享受编码的乐趣 两年前,我看到Sea.js这样的自我描述,第一感觉是:为什么浏览器的JS编程和NodeJS相仿就是优雅呢? 那么,来讨论RequireJS和Sea.js的学

Javascript文件加载:LABjs和RequireJS简介

传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,

JavaScript的RequireJS库入门指南

  这篇文章主要介绍了JavaScript的RequireJS库入门指南,RequireJS库的人气近来攀升很快,需要的朋友可以参考下 简介 如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS.在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景. 异步模块定义(AMD) 谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么. JavaScrip

优化RequireJS项目的相关技巧总结

  本文将演示如何合并与压缩一个基于RequireJS的项目.本文中将用到苦干个工具,这其中就包括Node.js. 因此,如果你手头上还没有Node.js可以点击此处下载一个. 动机 关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系的JavaScript文件.仅仅需要在你的HTML文档中引用一个基于RequireJS的脚本文件,所有必须的文件都将会被自

使用RequireJS优化JavaScript引用代码的方法

  这篇文章主要介绍了使用RequireJS优化JavaScript引用代码的方法,RequireJS是一款人气JS库,需要的朋友可以参考下 RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护. 在本文中,我会为你介绍RequireJS和应该如何使用它.我们讨论引入文件和定义模块,甚至还会接触优化方面的知识. 简单的说,require.js是一个脚本载入程序,允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依

在JavaScript应用中使用RequireJS来实现延迟加载

  这篇文章主要介绍了在JavaScript应用中使用RequireJS来实现延迟加载,JavaScript是一款人气JS库,需要的朋友可以参考下 无论简单还是复杂的Web应用,都由一些HTML.JavaScript.CSS文件组成.通常开发者会通过JQuery.Knockout.Underscore等等这样的第三方JavaScript框架来提高开发速度.由于这些JavaScript框架都针对特定的用途开发而且已经得到了"验证",所以直接使用它们就比自己从头实现所需要的功能显得更为合适

LABjs、RequireJS、SeaJS的区别

这篇文章主要介绍了LABjs.RequireJS.SeaJS的区别.JS文件加载器.JS块加载器等知识,需要的朋友可以参考下 一.LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行.LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化.LABjs 是一个文件加载器. 二.RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 Ja

requirejs:性能优化-及早并行加载

为了提高页面的性能,通常情况下,我们希望资源尽可能地早地并行加载.这里有两个要点,首先是尽早,其次是并行. 通过data-main方式加载要尽可能地避免,因为它让requirejs.业务代码不必要地串行起来.下面就讲下如何尽可能地利用浏览器并行加载的能力来提高性能. 低效串行:想爱但却无力 最简单的优化,下面的例子中,通过两个并排的script标签加载require.js.main.js,这就达到了require.js.main.js并行加载的目的. 但这会有个问题,假设main.js依赖了jq