我们之前呢写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的初步认识的更多相关文章

  1. 初步理解require.js模块化编程

    初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...

  2. 初学require.js

    引入require.js,可以解决的问题: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模板之间的依赖性,便于代码的编写和维护. 它的模块管理遵循AMD规范(Asynchronous ...

  3. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  4. javascript模块化编程(三):require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

  5. require.js工作原理(初始)

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  6. Javascript模块化编程(三):require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  7. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...

  8. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  9. require.js

    日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...

随机推荐

  1. redis持久化快速回忆手册

    Redis提供的持久化机制: 1). RDB持久化:该机制是指在指定的时间间隔内将内存中的数据集快照写入磁盘. 2). AOF持久化:该机制将以日志的形式记录服务器所处理的每一个写操作,在Redis服 ...

  2. (详细)php实现留言板---会话控制-----------2017-05-08

    要实现留言功能,发送者和接受者必不可少,其次就是留言时间留言内容. 要实现的功能: 1.登录者只能查看自己和所有人的信息,并能够给好友留言 2.留言板页面,好友采取下拉列表,当留言信息为空时,显示提示 ...

  3. OC中的copy

    copy的概念 Copy的字面意思是"复制"."拷贝",是一个产生副本的过程 对象拷贝的目的:要使用某个对象的数据,但是在修改对象的时候不影响原来的对象内容,常 ...

  4. 用户交互式命令:read

    read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开. 语法 read [option]... [name . ...

  5. Android开发之布局--RelativeLayout布局

    RelativeLayout 相对布局 true或false属性 Layout_centerHorizontal   当控件位于父控件的横向中间位置 Layout_centerVertical   当 ...

  6. HDU4686——Arc of Dream矩阵快速幂

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4686 题目大意: 已知a0=A0, ai=Ax*ai-1+Ay; b0=B0, bi=Bx*bi-1 ...

  7. [刷题]算法竞赛入门经典(第2版) 6-9/UVa127 - "Accordian" Patience

    题意:52张牌排一行,一旦出现任何一张牌与它左边的第一张或第三张"匹配",即花色或点数相同,则须立即将其移动到那张牌上面,将其覆盖.能执行以上移动的只有压在最上面的牌.直到最后没有 ...

  8. 通过一步步创建sharded cluster来认识mongodb

    mongodb是目前使用非常广泛的nosql(not only sql)之一,在db engines上排名非常靠前,下图是5月份的排名: 可以看到前面四个都是传统的关系型数据库,而mongodb在no ...

  9. Linux防火墙的关闭和开启

    1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...

  10. ZED 相机 && ORB-SLAM2安装环境配置与ROS下的调试

    注:1. 对某些地方进行了更新(红色标注),以方便进行配置. 2. ZED ROS Wrapper官方github已经更新,根据描述新的Wrapper可能已经不适用与Ros Indigo了,如果大家想 ...