requireJS的初步掌握

前一段时间,因为一些事吧这个习惯落下了,现在争取重新捡起来。

最近开始自学requireJS,为了更好的掌握,所以写出一个自我理解的博客供参考。

分割线-------------------------



首先,学习requireJS,要知道什么是requireJS.

requireJS是一个可在js和node环境下运行的一个非常小巧的一个AMD规范下的js模块载入框架,通俗的理解为模块加载器。

相信开始学习requireJS的一定对JS代码的模块化有一个初步的了解了。而requireJS主要解决了两大问题

第一。在传统的模块化封装中一定对那难堪入目的引入方式和引入的先后顺序有很大的排斥和烦恼。

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

而requireJS很好的解决了这个问题,(在之后的讲述中会讲到解决方式)

第二。相信大家应该也遇到过JS阻塞浏览器渲染这个问题。

<!DOCTYPE html>
<html>
    <head>
          <title></title>
    </head>
    <body>
      <span>hello world</span>
      <script type="text/javascript">
            alert(‘1‘);
       </script>
    </body>
</html>
   

你会发现,浏览器运行后会先执行alert,这时候页面应该是一片空白,点击确定后在加载body中的内容。

这就是JS阻塞浏览器渲染导致的。

有写同学就会说,可以增加async和defer什么的,也可以避免出现阻塞!

其实这个想法很好,我之前也是这么想的。但是我没考虑到的是,当引入外部js过多的情况下,这种方式不好控制异步加载的顺序,导致出现错误。

而如何控制加载顺序,那么就有回到了第一个问题了。requireJS会有好的帮我们处理好这些顾虑。

这也就是我们下一章要讲的依赖的问题。

这里顺便给同学们简单的描述下AMD和CMD的概述和区别

AMD:是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

CMD:是"Common Module Definition"的缩写,意思就是“常用模块定义”。它采用的是延迟加载模块,使用的时候加载所需要的模块,定义在唯一的参数里面边封装,边加载,边依赖。

AMD和CMD的本质区别就是:amd采用的是依赖前置,而cmd采用的是延迟依赖。



requireJS的初步了解先讲到这里,相信大家应该和我一样,有了一定的了解。

下一章节描述,requireJS的依赖和常用的API。也希望和大家能共同进步

时间: 2024-10-08 09:48:42

requireJS的初步掌握的相关文章

requireJS的初步掌握(二)

前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描述的是requireJS的一些常用的API: 一.HTML页下 1.data-main属性 首先我们知道requireJS可以有效的解决JS阻塞浏览器渲染这个问题, 那么它实现的方式是什么样子的呢? <script src="js/require.js" data-main="js/main">

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

初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程,这标志”Javascript模块化编程”正式诞生. 在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限:但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.j

使用requireJs的方法

在你们对requireJs初步了解后,快来看看他们是怎么使用的吧. 在你下载完成require.js插件后,在页面里引入,在require.js 加载完之后,会查找页面上script标签的data-main属性的值,然后加载,data-main指定的js文件, 定义一个a.js: define(function (){ var add = function (x,y){ return x+y; }; return { add: add }; }); 加载方法: require(['math'],

AngularJS+requireJS项目的目录结构设想

准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default    放页面,不过对于one page 项目,可能里面需要建一个partials文件夹: /develop   放测试及web server相关的东西,这个是不需要部署到正式环境的,所以从static中分离出来了 /static      css+img+js+partials+r.js+build.js,后面两个是require.js打包压缩合并部署需要用的,  css+

基于angularJS和requireJS的前端架构

1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HTML标记等,最受欢迎的莫过于它的双向数据绑定. 1.2.requireJS描述:requireJS是来解决传统的页面加载script标记操作,通过其初始化配

requireJS

1.用于ADM(基于模块的异步加载JavaScript代码的机制)js模块开发 2.下载requireJS 3.好处: 1)有效防止命名冲突(js多时可能很多全局变量容易重复) 2)声明不同的js文件之间的依赖 3)模块化的开发 4.常用方法: requirejs.config:为模块指定别名 requirejs:将写好的模块引入并编写主代码 define:编写模块,在相应地方来引用 5.例子: 1)引入模块入口data-main是入口;<script data-main="js/main

初步了解CPU

了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. 一.总述 先从计算机的结构说起,在现代计算机中,CPU是核心,常常被比喻为人的大脑.现在的计算机都为“冯·诺依曼机”,“冯诺依曼机”的一个显著的特点就是由运算器.存储器.控制器.输入设备和输出设备组成.CPU是运算器和控制器合起来的统称,因为运算器和控制器在逻辑关系和电路结构上联系十分紧密,尤其在大

requireJS(一)

一:为什么要使用requireJS? 很久之前,我们所有的JS文件写到一个js文件里面去进行加载,但是当业务越来越复杂的时候,需要分成多个JS文件进行加载,比如在页面中head内分别引入a.js,b.js,c.js等,如下所示: <script src="js/app/a.js"></script> <script src="js/app/b.js"></script> <script src="js/

JS模块化工具requirejs教程02

基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: define(function(){ function fun1(){ alert("it works"); } fun1(); }) 通过define函数定义了一个模块,然后再页面