require.js工作原理(初始)
详情:请见阮一峰老师的日志: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工作原理(初始)的更多相关文章
- Node.js的require()的工作原理
大多数人都知道Node.js中require()函数做什么的,但是有多少人知道它的工作原理呢?我们每天使用它加载库包和模块,但是它的内部行为原理很神秘. 我们追寻Node模块系统的核心: module ...
- 图解WebGL&Three.js工作原理
“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...
- WebGL&Three.js工作原理
一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或 ...
- 技术分享:JS工作原理
一 浏览器组成可分两部分:Shell+内核. 浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎. 渲染引擎功能作用 渲染引擎,负责对 ...
- javascript基础修炼(12)——手把手教你造一个简易的require.js
目录 一. 概述 二. require.js 2.1 基本用法 2.2 细说API设计 三. 造轮子 3.1 模块加载执行的步骤 3.2 代码框架 3.3 关键函数的代码实现 示例代码托管在我的代码仓 ...
- require.js 源码解读——配置默认上下文
首先,我们先来简单说一下,require.js的原理: 1.载入模块 2.通过模块名解析出模块信息,以及计算出URL 3.通过创建SCRIPT的形式把模块加载到页面中. 4.判断被加载的脚本,如 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- node.js基本工作原理及流程
概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...
- js:我们应该如何去了解JavaScript引擎的工作原理(转)
http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过 ...
随机推荐
- ASM:《X86汇编语言-从实模式到保护模式》第16章:Intel处理器的分页机制和动态页面分配
第16章讲的是分页机制和动态页面分配的问题,说实话这个一开始接触是会把人绕晕的,但是这个的确太重要了,有了分页机制内存管理就变得很简单,而且能直接实现平坦模式. ★PART1:Intel X86基础分 ...
- dateset添加一列
ds.Tables[].Columns.Add("short_name", System.Type.GetType("System.String"));//直接 ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- UTC与GMT时间
整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated).UTC与格 ...
- 【转】如何使用VS 2013发布一个可以在Windows XP中独立运行的可执行文件
问题描述: 用VS2013写好一个程序,在本机上运行一切正常.但是如果直接把exe文件放到另一台机器上用,则会出现: Windows XP:不是一个正常的win32程序 Window 7:缺少msvc ...
- 【Android】命令行jarsigner签字和解决找不到证书链错误
1.签名失败 $jarsigner -verbose -keystore /Volumes/Study/resourcesLib/Qunero-achivements/AndroidApp/QuLor ...
- Java基础学习(一)
常见的dos命令 盘符: 进入指定的盘符下. dir : 列出当前目录下的文件以及文件夹 md : 创建目录 rd : 删除目录 注意:rd不能删除非空的文件夹,而且只能用于删除文件夹. cd ...
- Win10 UI介绍之Titlebar
活动状态 非活动状态 var titleBar = ApplicationView.GetForCurrentView().TitleBar; titleBar.BackgroundColor = C ...
- Jmeter之Web端HTTP性能测试(九)
之前有跟大家讲过通过Badboy来录制脚本,这里就不多说了,需要的可以参考 Jmeter之Badboy录制脚本及简化脚本http请求(三) 这边就不用项目的链接了,直接采用http://www.cnb ...
- win10中将默认输入法设置为英文
开始 设置 时间和语言 区域和语言 语言--中文--选项 微软拼音输入法--选项 IME默认模式--英语