详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html

导入:<script data-main="js/main" src='require.js'></script>

配置:requirejs.config({

baseUrl:'js'       //根目录,所有js存在的文件名

paths:''            //以下文档中,我们称为配置路径

});

依赖:requirejs(['a'],function(b){            //a为依赖文件的路径,b为a的模块名,以下文档中,像b一样的参数,称为模块名;

});

1.为什么要有require.js?

此前,所有网页都会加载很多js文件,这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

2.require.js的主要作用?

(1)实现js文件的异步加载,避免网页失去响应;

  (2)管理模块之间的依赖性,便于代码的编写和维护。

3.其工作原理:

简单描述一下,比如

(function(){
var jack=function(){
console.log('jack');
};
hello=function(){
console.log('hello');
}
})();
jack();//undefined
hello();//hello
这就是每个模块的类似意思,在模块里必须定义自己的变量,否则会成为全局变量,造成污染,在require.js中加载路径为什么还要定义模块名,是因为全局变量无法调用局部变量;
    var pp=(function (){
var jack=function(){
console.log('jack');
};
hello=function(){
console.log('hello');
};
return jack;
})();
pp();
所以需要这种形式将局部变量通过返回值赋给全局变量,所以在需要return进行返回值操作;
刚开始自己有些疑问:在加载jquery.js的一些库时,并没有什么返回值,当习惯return时,突然遇到没有return的js文件有点不习惯,加载此类js文件,其实就是把代码全部放置到住模块中,文件里的全局会成为主模块里的全局函数或全局变量;所以并不需要在设置模块名,但这里需要注意条件:
(1):次js文件必须是最后一个加载进来的文件,因为模块名会一一对应,后面还有要导入进来的文件时,就会出错;
(2):模块名是全局变量,不能有冲突,且没什么要求,可以自由书写;
在加载jquery文件时发现一个问题,也许这点就证明了配置路径的重要性与存在性,如果不配置路径的话,不能使用模块名,只能用$表示,如果配置了路径,才能使用模块名可以取代$使用;
4.初入require.js主要记下理解,防止遗忘,一时兴起,想多写一些见解,给自己留下疑问,深入以后再一一验证;
代码讲究高内聚,低耦合,在require.js中除了主模块与分模块的依赖关系,各个模块间也可以建立联系;
var contact=require('基于baseUrl下的路径,并非相对路径');
各个模块之间的联系尽量减少,维护起来更加的方便;

require.js工作原理(初始)的更多相关文章

  1. Node.js的require()的工作原理

    大多数人都知道Node.js中require()函数做什么的,但是有多少人知道它的工作原理呢?我们每天使用它加载库包和模块,但是它的内部行为原理很神秘. 我们追寻Node模块系统的核心: module ...

  2. 图解WebGL&Three.js工作原理

    “哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...

  3. WebGL&Three.js工作原理

    一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或 ...

  4. 技术分享:JS工作原理

    一 浏览器组成可分两部分:Shell+内核. 浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎. 渲染引擎功能作用 渲染引擎,负责对 ...

  5. javascript基础修炼(12)——手把手教你造一个简易的require.js

    目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...

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

    首先,我们先来简单说一下,require.js的原理: 1.载入模块
 2.通过模块名解析出模块信息,以及计算出URL
 3.通过创建SCRIPT的形式把模块加载到页面中.
 4.判断被加载的脚本,如 ...

  7. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  8. node.js基本工作原理及流程

    概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...

  9. js:我们应该如何去了解JavaScript引擎的工作原理(转)

    http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过 ...

随机推荐

  1. C# 异步编程小结

    APM 异步编程模型,Asynchronous Programming Model EAP 基于事件的异步编程模式,Event-based Asynchronous Pattern TAP 基于任务的 ...

  2. jsp实验一

    1.熟悉MyEclipse开发环境,熟悉菜单,修改代码的字体和显示行号. 2.动手做第一个输出hello World的实例. 3.定义一个jsp页面,在其中定义个变量,该变量随机产生,数据范围是[0- ...

  3. jquery 键盘回车事件

    <input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...

  4. 51. N-Queens

    题目: The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two que ...

  5. bzoj3439 trie+可持久化线段树

    挺好想的 trie建树后,按dfn序建可持久化 注意:计数变量多的题目一定要注意检查会不会用的时候搞混了 #include <cstdio> #include <cstdlib> ...

  6. error-unable-to-access-the-iis-metabase或者无法加载VS项目中的网站

    参考:http://stackoverflow.com/questions/12859891/error-unable-to-access-the-iis-metabase 1.确定IIS是否安装完整 ...

  7. 【转载】scribe、chukwa、kafka、flume日志系统对比

    原文地址:http://www.ttlsa.com/log-system/scribe-chukwa-kafka-flume-log-system-contrast/ 1. 背景介绍许多公司的平台每天 ...

  8. T-SQL 基础学习 01

    --新建数据库 create database Studentdb go --使用数据库 use Studentdb go --新建表 create table Username ( StudentN ...

  9. ubuntu更新软件源

    更新源方法: 1. 打开终端.单击主菜单中的“应用程序 - 附件 - 终端”. 2. 修改更新服务器列表.请在终端中执行下面的两条命令: sudo cp /etc/apt/sources.list / ...

  10. C#中的Lambda表达式的演化过程

    原文:http://www.cnblogs.com/zhaopei/p/5767631.html