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 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过 ...
随机推荐
- vs2010 在64bits系统下编译
vs只有32bits的没有64bits. 本来程序没问题,后面一直报错 LIBCMTD.lib(close.obj) : error LNK2001 LNK2019 换了各种 MD/MT/MTD 都没 ...
- hdfs的读写数据流
hdfs的读: 首先客户端通过调用fileSystem对象中的open()函数读取他需要的的数据,fileSystem是DistributedFileSystem的一个实例, Distrib ...
- hbase集群的启动,注意几个问题
1.hbase的改的会影响器他的组件的使用, 故而, 在修改 hadoop的任何组件后, 一定要记得其它的组件也能受到影响, 一下是我在将hadoop的集群改了之后 , 再次运行hbase的时候, 就 ...
- 打开APK里的AndroidManifest.xml乱码
直接解压apk,打开AndroidManifest.xml显示乱码,因为这里面是二进制字符,和打开文件的编辑器无关.(也可以用ultraedit打开查看,有明文显示.只是看起来搜起来不是很方便而已) ...
- POJ 3294 Life Forms 后缀数组+二分 求至少k个字符串中包含的最长子串
Life Forms Description You may have wondered why most extraterrestrial life forms resemble humans, ...
- Bestcoder Round #84
A题 Aaronson http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=718&pid=1001 感觉一 ...
- 2015ACM/ICPC亚洲区沈阳站
5510 Bazinga 题意:给出n个字符串,求满足条件的最大下标值或层数 条件:该字符串之前存在不是 它的子串 的字符串 求解si是不是sj的子串,可以用kmp算法之类的. strstr是黑科技, ...
- Nginx二级域名及多Server反向代理配置
Nginx强大的正则表达式支持,可以使server_name的配置变得很灵活,如果你要做多用户博客,那么每个用户拥有自己的二级域名也就很容易实现了. 注:nginx反向代理同一ip多个域名,给head ...
- git stash和git stash pop
git stash 可用来暂存当前正在进行的工作, 比如想pull 最新代码, 又不想加新commit, 或者另外一种情况,为了fix 一个紧急的bug, 先stash, 使返回到自己上一个comm ...
- Leetcode Anagrams
Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...