RequireJS 是一个JavaScript模块加载器，他的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。

先看下面示例：

　　大家都知道js阻塞浏览器渲染，就是在加载页面内容时，遇到JS，在加载JS时，会停止对页面的加载，等JS加载完了，才会继续对页面进行加载，这样就会导致页面加载时间过长，使用RequireJS，就可以解决这个问题

html:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <script src="js/require.js" data-main='js/main.js' type="text/javascript" charset="utf-8"></script>
  7.     </head>
  8.     <body>
  9.         <div class="">
  10.             fdfdfdfdfd
  11.         </div>
  12.     </body>
  13. </html>

a.js:

  1. alert('');

main.js:

  1. require.config({
  2.     paths:{
  3.         a:'a'
  4.     }
  5. });
  6. require(['a']);

在执行alert的时候页面内容已经加载出来了

require.js 可以防止js加载阻塞页面渲染

基本API

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短

  • define 从名字就可以看出这个api是用来定义一个模块
  • require 加载依赖模块，并执行加载完后的回调函数

大家可以看见页面顶层<script>标签含有一个特殊的属性data-main，这里就是入口JS，require.js使用它来启动脚本加载过程

main.js

  1. require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
  2.     paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
  3.         'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
  4.         'base':'g-ZFbase'
  5.     }
  6. });
  7. require(['jquery'], function() {
  8.     //这样jquery 不是全局的，你要使用的时候通过require调用，如下
  9.    $('div').click(function(){
  10.            alert($(this).html());
  11.    });
  12. });
  13. require(['jquery','base'], function($,base) {
  14.     //在比如我自己封装了一个g-ZFbase.js，要用里面的ajax，ajax在ajax()方法里,但是他依赖于jquery,
  15.     //可以2个一起调用
  16.    ajax();
  17. });

define:  定义一个模块，然后再页面中使用：

　　例如：在a.js里定义一个define

a.js:

  1. define(['jquery','base'],function($,base){
  2.     //如上，我要用g-ZFbase.js里的ajax()方法，他依赖于jquery，所以2个一起调用
  3.     ajax();
  4. });

在main.js里：

  1. require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
  2.     paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
  3.         'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
  4.         'base':'g-ZFbase',
  5.         a:'a'
  6.     }
  7. });
  8. //require(['jquery','base'], function($,base) {
  9. //    //在比如我自己封装了一个g-ZFbase.js，要用里面的ajax,但是他依赖于jquery,
  10. //    //可以2可一起调用
  11. // ajax();
  12. //});
  13.  
  14. require(['a']);

就相当于原来在main.js里写的内容单独写到一个JS文件里把他看成一个模块，然后调用，这里把他放在了a.js里面了

一个JS文件里只能放一个define，一个define只能有一个返回值/对象

调用define 中的方法：

　main.js:

  1. require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
  2.     paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
  3.         'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
  4.         'base':'g-ZFbase',
  5.         a:'a'
  6.     }
  7. });
  8. require(['a'],function(obj){//obj-接收返回值,名字可不和返回值同名
  9.     obj.t1();
  10. });

a.js:

  1. define(function(){
  2.     function test(){
  3.         alert('test');
  4.     }
  5.     function t(){
  6.         alert('t');
  7.     }
  8.     var obj = {
  9.         t1:test,
  10.         t2:t
  11.     }
  12.     return obj;
  13. })

只有一个调用函数，可直接返回函数名 return t;

　　

require.js 学习基础的更多相关文章

  1. js模块化开发——require.js学习总结

    1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...

  2. 【转】require.js学习笔记(二)

    require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...

  3. require.js学习笔记（内容属于转载总结）

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

  4. require.js学习笔记

    使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织 官方网站http ...

  5. 【转】require.js学习笔记(一)

    一.立即执行函数 立即执行函数可以有效避免临时变量污染全局空间.可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用. for (var i = 0; i < elems.lengt ...

  6. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

  7. js学习——基础知识

    数据类型 函数.方法 变量作用域 运算符 条件语句 break和continue typeof 错误(异常) 变量提升 严格模式 JSON void(0) JavaScript            ...

  8. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

  9. 5月学习总结（Ant-Design，mustache，require.js，grunt）

    一.Ant-Design学习 因为Ant-Design是基于React实现的,之前自己也学过一段时间的React,对React还是相对比较熟悉的,在学习Ant-Design也还不算吃力. 最开始是从源 ...

随机推荐

  1. 剑指offer-矩形覆盖-斐波那契数列(递归，递推)

    class Solution { public: int rectCover(int number) { if(number==0 || number==1||number==2) return nu ...

  2. /proc/sys/vm/drop_caches 清理缓存

    1. 使用方法 /proc/sys/vm/drop_caches默认是0 # echo 1 > /proc/sys/vm/drop_caches; free pagecache, use# ec ...

  3. JS替换空格回车换行符

    JS替换空格回车换行符 str=str.replace(/\r/g," ") str=str.replace(/\n/g,"<br />")  或 ...

  4. 使用OPRT库来实现局域网视频实时传输

    转载,侵删 4.代码设计 目的:使用OPRT库来实现局域网视频实时传输 参考samle_venc.c进行ortp开发 4.1.程序流程如下 step1:定义变量,VPSS,VENC,零散变量 step ...

  5. hadoop入门篇-hadoop下载安装教程（附图文步骤）

    在前几篇的文章中分别就虚拟系统安装.LINUX系统安装以及hadoop运行服务器的设置等内容写了详细的操作教程,本篇分享的是hadoop的下载安装步骤. 在此之前有必要做一个简单的说明:分享的所有内容 ...

  6. GitHub10岁之际HanLP自然语言处理包用户量跃居榜首

    在本周,GitHub终于度过了属于它自己的十周岁生日.这个在2008年由3个来自旧金山的年轻人创建的基于Git的代码托管网站,先后超越了元老级的SourceForge和背景强大的Google Code ...

  7. Debug---Eclipse断点调试基础

    1.进入debug模式(基础知识列表)1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ========================= ...

  8. led的驱动及测试程序

    一.驱动源码 #include <linux/module.h> #include <linux/kernel.h> #include <linux/fs.h> # ...

  9. var abc = function(x){} 和 function abc(x){}的区别

    转自百度知道. 问:js里声明函数有几种方式? var abc = function(x){} 和 function abc(x){} 这两种声明方法有什么不同? 答:首先后者是指函数声明,前者是指函 ...

  10. Shell的for和select

    环境准备: [root@nodchen-db01-test day07]# mkdir -p /server/scripts/day07/test/{test.txt,oldboy.txt,oldgi ...