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 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过 ...
随机推荐
- HTTPS Web配置举例
http://www.h3c.com.cn/Products___Technology/Technology/Security_Encrypt/Other_technology/Representat ...
- EL操作 web 对象的常用方法
11个常见的web对象 pageScope :获得pageContext对象中存的数据 requestScope :获得request对象中存的数据 sessionScope :获得session对象 ...
- 彻底卸载MySQL数据库教程
有时候MySQL不能完全卸载,这时候必须通过一些途径删除掉注册表和一些残余的文件,然后才能重新安装才可以成功! 1.控制面板-->所有控制面板项-->程序和功能,卸载mysql serve ...
- Java实现JDBC连接数据库实例
import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...
- poj 2955 Brackets
题目链接:http://poj.org/problem?id=2955 思路:括号匹配问题,求出所给序列中最长的可以匹配的长度(中间可以存在不匹配的)例如[(])]有[()]符合条件,长度为4 dp[ ...
- c语言中(*p)[n]和*p[n]的区别
写于2016年12月5日. c语言中(*p)[n]表示的数组指针,在该表达式中按照运算的优先级,首先计算()的中*p,在和[n]计算.含义为指向含有n个元素的一维数组. *p[n]表示的是指针数组,在 ...
- 如何用C#+WinRAR 实现压缩 分类:
前提:必须安装 WinRAR 1. 工具类 using System; using System.Diagnostics; using System.IO; using Microsoft.Win32 ...
- HTTP TCP UDP Socket 关系的几个经典图
从上图可以看到,TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输层中有TCP协议与UDP协议. ...
- mysql在linux下修改存储路径
通过下面几步即可修改路径,这里的路径都是测试的路径,一般默认安装路径在/var/lib/mysql下,真正配置按照真实路径配置. 1.修改/etc/sysconfig/selinux文件:#SELIN ...
- android 教程实例系列
用户界面部分学起来还真是无处下手哇,总不能一个控件发一篇文吧,略有点费时间啊...这个难道不是边用边学才给力吗..所以我打算从最实用的Button开始下手. 先贴几个链接,好东西: android用户 ...