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 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过 ...
随机推荐
- python 3.5.2 install pillow
1. 首先尝试从官网下载, pip install pillow, 结果网络不行,总是连不上或者下载中就失败, C:\Windows\system32>pip install pillowCol ...
- WPF三大模板简介(Z)
WPF三大模板简介 WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了 ...
- ios推送-B/S架构-socket
B/S架构项目,某一用户登录后执行了某些动作需要向在手机登录的对应的用户推送消息 通过socket实现 1.socket服务器:使用C#的window服务(该服务监听两个端口:比如平台8889,手机8 ...
- iOS之自定义控件
一.使用纯代码方式 initWithFrame:中添加子控件 layoutSubViews中设置子控件的fame 对外设置数据接口,重写setter方法给子控件设置数据显示 在的viewControl ...
- php面试题2
php面试题及答案(原创)收藏 基础题: 1.表单中 get与post提交方法的区别? 答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据,可以通过表单提交大量信息. 2 ...
- VNC安装与使用
查看是否安装VNC:rpm -qa | grep vnc 安装VNC:rpm -ivh vnc-4.1.2-14.el5_3.1.i386.rpm ,rpm -ivh vnc-server-4.1.2 ...
- MyBatis - MyBatis Generator 生成的example 如何使用 and or 简单混合查询
简单介绍: Criteria,包含一个Cretiron的集合,每一个Criteria对象内包含的Cretiron之间是由AND连接的,是逻辑与的关系. oredCriteria,Example内有一个 ...
- oracle存储过程截取字符串
declare CURSOR l_c IS select classid from cjt_class; Begin FOR i IN l_c LOOP update cjt_class t set ...
- Slate中绑定动态数据
https://answers.unrealengine.com/questions/232322/slate-blurred-border-shadow.html
- node.js安装
Node.js是一个基于Chrome JavaScript运行时建立的一个平台,用来方便地搭建快速的,易于扩展的网络应用Node.js借助事件驱动,非阻塞I/O模型变得轻量和高效,非常适合run ac ...