require.js的初步认识
我们之前呢写Javascript代码时都会写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多必须分成多个文件,依次加载。就如下面的代码:
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
<script src="e.js"></script>
<script src="f.js"></script>
这段代码依次加载多个js文件。
这样写有两大缺点:
1.加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;
2.由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。
解决requirejs的两大缺点:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
require.js的加载
<script src="js/require.js" defer async="true" ></script>
使用require.js的第一步,是先去官方网站下载最新版本。
下载后,假定把它放在js子目录下面,就可以加载了。
<script src="js/require.js"></script>
为了不造成网页失去响应,你可以把它放在网页底部加载,或者这样来写:
<script src="js/require.js" defer async="true" ></script>
async属性呢是表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。
加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是a.js,也放在js目录下面。那么,只需要写成下面这样就行了:
<script src="js/require.js" data-main="js/a"></script>
data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的a.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把a.js简写成a。
a.js呢我们可以把它称为"主模块",意思是整个网页的入口代码。
这些呢是我对require.js的初步认识。
require.js的初步认识的更多相关文章
- 初步理解require.js模块化编程
初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...
- 初学require.js
引入require.js,可以解决的问题: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模板之间的依赖性,便于代码的编写和维护. 它的模块管理遵循AMD规范(Asynchronous ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- javascript模块化编程(三):require.js用法
本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...
- require.js工作原理(初始)
详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...
- Javascript模块化编程(三):require.js的用法(转)
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
- require.js源码分析
写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- require.js
日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...
随机推荐
- 【算法系列学习】线段树vs树状数组 单点修改,区间查询 [kuangbin带你飞]专题七 线段树 A - 敌兵布阵
https://vjudge.net/contest/66989#problem/A 单点修改,区间查询 方法一:线段树 http://www.cnblogs.com/kuangbin/archive ...
- 今天打补丁出问题了,害得我组长被扣了1k奖金。
今天是第三次给mxdw打补丁和打包,外加公司高管说有一个东西必须要今天之内搞定外放. 我当时问策划为什么这么着急?策划说大佬决定的(这种做事方式真的很不习惯).我等屁民加班加点的搞事情,把功能搞出去了 ...
- String类理解
1.首先应该知道的是:String是一个类,不属于基本类型,而是引用类型. 2.创建String对象的三种方式的比较: 第一种是先去String pool检查是否存在"abc"常量 ...
- Tp5.0 PHPMailer邮件发送
今天突然想起来邮件发送,就看了一下PHPmailer,其实这个用起来很简单,都是封装好的 https://github.com/PHPMailer/PHPMailer,直接下载下来之后,把他放入TP5 ...
- html页面顶部出现一段空白,检查控制台发现body 下出现字符,原因及解决办法
html页面顶部出现一段空白,检查控制台发现body 下出现字符,原因及解决办法 分析: 原来是页面编码时增加了BOM,此页面后端数据主要是PHP语言,对PHP来讲PHP在设计时 ...
- 《快学Scala》——控制结构和函数
条件表达式 在Scala中if/else表达式有值,这个值就是跟在if或else之后的表达式的值.例如: if (x > 0) 1 else -1 上述表达式的值是1或-1,具体是哪一个取决于x ...
- hdu1312 Red and Black 简单BFS
简单BFS模版题 不多说了..... 直接晒代码哦.... #include<cstdlib> #include<iostream> #include<cstdio> ...
- linux服务器对外打包处理
案例描述 服务器遇到大流量攻击的处理过程.早上接到 IDC 的电话,说我们的一个网段 IP 不停的向外发包,应该是被攻击了,具体哪个 IP不知道,让我们检查一下. 按理分析及解决办法 首先我们要先确定 ...
- 由"永恒之蓝"病毒而来的电脑科普知识
永恒之蓝病毒事件: 继英国医院被攻击,随后在刚刚过去的5月12日晚上20点左右肆虐中国高校的WannaCry勒索事件,全国各地的高校学生纷纷反映,自己的电脑遭到病毒的攻击,文档被加密,壁纸遭到篡改,并 ...
- 关于关系型数据库(MySQL)的一些概念
主键:关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录, 该属性组就可以成为一个主键,主键不允许为空,主键只能有同一个 外键:如果一个表的某个属性是另一个表的主 ...