require.js的简单使用

<script src="js/require.js"></script>

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

require([‘jquery‘, ‘underscore‘, ‘backbone‘], function ($, _, Backbone){

    // some code here

  });

使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

  require.config({

    paths: {

      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"

    }

  });

 require.config({

    baseUrl: "js/lib",

    paths: {

      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"

    }

  });

require.config({

    paths: {

      "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

    }

  });

假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:

  // math.js

  define(function (){

    var add = function (x,y){

      return x+y;

    };

    return {

      add: add
    };

  });

加载方法如下:

  // main.js

  require([‘math‘], function (math){

    alert(math.add(1,1));

  });

如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。

  define([‘myLib‘], function(myLib){

    function foo(){

      myLib.doSomething();

    }

    return {

      foo : foo

    };

  });

当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。

时间: 2024-12-17 20:42:29

require.js的简单使用的相关文章

require.js 的简单运用 --兰

功能描述: 1.简单的require.js的运用 2.BaseUrl运用(加载不同文件夹下的路径) 3.shim运用(依赖:比如jquery-ui 需要依赖jquery) 4.require方法调用(包括回调方法使用) 1.文件的目录结构 main.js代码 require.config({ baseUrl:"js", paths: { jquery: 'jquery-1.7.2', bootstrap_alert:'bootstrap-alert', model1:'model1/m

require.js简单入门

推荐文章:http://www.ruanyifeng.com/blog/2012/11/require_js.html 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, 2)实现并引用去空格工具类trim, 3)最后获取文本并去掉空格后输出, 4)打包js(将所有js文件打包成main.min.js) 1.下载require文件 require.js require主文件 r.js require优化器文件 2.文件结构 index.html --js文件夹 jquery.js

require.js简单介绍和使用

官网:http://www.requirejs.org/ RequireJS是一个JavaScript文件和模块载入器. 还原一下需求的来源:一个网页开始的时候,所有js代码都写在一个文件里面,只要加载这一个就够了.随着应用越来越复杂,代码越来越多,一个文件不够了,由于各种原因必须分成多个文件,还有用到其他的一些框架,这样就必须加载多个js文件.有个问题就是加载的时候,浏览器会停止网页渲染,加载越多而失去响应的时间就越长:另外,js文件之间存在依赖关系,因此要保证加载顺序,当依赖关系很复杂的时候

Require.js、Angular.js整合

Require.js 详见: 初识Require.js 解密Require.js Angular.js 详见: 初识Angular.js之爱恨情仇 整合Require.js.Angular.js 配置 在Requirejs中配置angular.js. require-main.js // 配置 requirejs.config({ ... paths: { 'jquery': 'libs/jquery-2.1.3/jquery.min', 'angular': 'libs/angular-1.3

require.js的用法

关于拖延症的话题我在Hacker News上不断的看到有人提出来(你也读了,不是吗?),感觉有必要将我是如何跟拖延症做斗争的方法分享给大家.然而,我这里说的主要是针对程序员/美工,但其实任何人都可以使用.首先最重要的-. 它不是那些老套陈旧的动机心理学扯谈. 我并不是说那些传统的应对拖延症的方法理论不对,只是对我无效.当正经历极度消沉的时候,我通常听到的理论的最后一句话是"You just DO IT!".我有很多的事情要去做.但我不会去阅读你那400页的治疗拖延症手册,也不会执行你那

require.js 源码解读——配置默认上下文

首先,我们先来简单说一下,require.js的原理: 1.载入模块? 2.通过模块名解析出模块信息,以及计算出URL? 3.通过创建SCRIPT的形式把模块加载到页面中.? 4.判断被加载的脚本,如果发现它有依赖就去加载依赖模块.如果不依赖其它模块,就直接执行factory方法 ?5.等所有脚本都被加载完毕就执行加载完成之后的回调函数. 从今天起,我们跟着我们简单的例子,通过跟踪代码,来了解require.js的源码. 1 <!DOCTYPE html> 2 <html lang=&q

sea.js与require.js的区别

随着ES6标准的module出台渐渐会退出历史舞台 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁清晰.说白了就是懒加载. require.js遵循AMD规范,CMD和AMD基本相同,最大的区别是就CMD是懒加载,AMD是预加载. 简单来说,就是sea.js属于懒加载,require.js属于预加载. 在这里,顺便扩展一下预加载和懒加载的优缺点 预加载:当第一次访问时将所有的文件加载出来 优点:第一次访问完成以后, 再次访问的速

advanced JavaScript Skills ——Require.js(二)

咱们在上一篇博客中写道,使用RequireJS的好处,以及一些简单的介绍.还有使用它的好处: 1.防止js加载阻塞页面渲染 2.可以通过程序调用的方式加载js文件.就不用写辣么多的JavaScript的引用了.界面整洁美观了更加.如果你的界面像下面一样,可以考虑一下,使用Require.js模块化加载的方式来改造提高你的前台代码的质量! 今天,咱们来看看RequireJS真正的看家本领.她是如何解决模块之间的依赖性的问题的. 一.RequireJs的加载 使用require.js的第一步,是先去

node.js搭建简单的websocket

1.首先在官网http://www.nodejs.org/下载NODE.JS 2.打开命令行CMD,进入NODEJS\node_modules\的目录,输入npm install socket.io  安装socket.io模块.别急着关掉此CMD窗口,后面有用 3.搭建服务端代码server.js 1 var http = require('http'); 2 var io = require('socket.io'); 3 var cisserver = http.createServer(