文档章节

RequireJS 基础学习

learn_more
 learn_more
发布于 2015/09/21 12:38
字数 1249
阅读 310
收藏 4


1、起步

2、基本配置

// Defaults. Do not set a default for map  config to speed up normalize(), which will run faster if there is no default.

// normalize 是一个对模块进行规范名称的函数,比如他会根据函数的名称进行取名标记! 

config = {

                waitSeconds: 7,

                baseUrl: './',

                paths: {},

                bundles: {},

                pkgs: {},

                shim: {},

                config: {}

            },

注意

1)baseUrl 如果没有手工配置那么就是当前路径,个人觉得baseUrl最好采用绝对路径,也就是 /project/

2)path 显示指定模块的路径,比如注册 jquery,那么必须知道jquery的路径才能运行jquery的文件,当然可以不配置这个路径,因为requireJS在组件定义define的时候,默认把文件名称作为组件名称,然后在调用组件的时候require根据依赖的组件名称在设置的目录下去寻找该js,所以,define、require 告诉我们命名规范很重要!

3)jQuery 默认支持AMD 规范,在jQuery源码里面可以看到,自己注册了AMD,但是这里注册有个问题,那就是默认为“jquery”,原因就是因为AMD默认使用文件名称作为JS的定义,刚好,jQuery的文件名称就是小写的形式,所以为了编码误会,采用这种小写的方式注册!

(注意虽然 jQuery 注册了AMD,但是jQuery同样注册了全局变量,所以在任何地方都可以使用$ )


3、函数介绍

1)requirejs.config , 这就是一个重写,覆盖默认配置选项,最常用的就是baseUrl 以及 path

2)define(name , deps ,callback),第一个是模块的名字,默认为文件名称,其实就是模块唯一的ID,第二个就是依赖项,第三个是会调函数,而且依赖项作为参数传入回调函数中。当通过require依赖需要哪个模块时,首先就是加载name的script标签,其次加载依赖项的标签,等所有js文件加载完成,那么就开始进行调用回调方法!内部是这样的,把所有依赖项都存储在一个数组中,每加载一个依赖项就把数组减少一个,直到所有都加载完成!

3)require(deps ,callback) ,  第一个是一个依赖数组,requireJS首先会根据数组的每一项依赖进行js文件加载,这个时候如果path中配置会从path 中查找,如果没有配置就会以此名称为路径名称在当前路径下查找,这些js的加载其实就是通过

创建script标签完成(所谓的异步加载),每加载的js文件都会注册一个事件onScriptLoad,加载之后立即调用define方法,同样也是加载JS标签,他们的加载顺序是根据注册的顺序,换句话如果A依赖B,那么先加载A后加载B,不用担心报错,因为他们的调用是在依赖完全加载之后才会回调函数,同样在添加标签时,还会为这个js加载完成注册一个事件:

node.addEventListener('load', context.onScriptLoad, false); 直到所有依赖项都加载完成,才会调用回调方法!

其中,getScriptData 首先是移除刚刚注册的事件,其二是返回script标签以及模块的id名称,也就是data.id;接着继续执行completeLoad ,这里才会真正去执行回调方法!

4 )根据模块名称返回路径 

url = context.nameToUrl(normalizedName);

5 )相对当前模块的相对路径,文件不一定存在

url = require.toUrl("./style.css");


4、加载机制

1)首先通过jsp定义的data-main 以及 src 的script加载require.js ,以及通用配置项和require函数

2)解析require函数时,为每个依赖项创建script标签,创建script标签时为该node定义加载事件

3)一旦标签写入html中,就会异步加载,加载过程中RequireJS会根据onreadystatechange监听状态

4)一旦load完成,那么就执行js里面的代码,因为是加载组件,所以首先执行的就是define

5)RequireJS解析define函数,只是把一些依赖项加入一个全局的队列当中

6)加载完成之后,同时define也解析完成之后,那么之前的onScriptLoad事件监听就会被执行,

7)onScriptLoad其一就是获取这script的模块getScriptData,其二就是遍历全局队列,运行每一个依赖项

8)依赖项如果又是一个模块,那么和之前加载依赖项的步骤完全相同(创建标签、注册事件),直到所有的依赖项都加载完成

9)以上调用就是一个递归的过程,所以一旦所有都调用完成,依赖都加载完毕,那么当前项的回调函数就会被执行!




© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
RequireJS极简入门教程

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular s......

程序员诗人
2017/03/30
0
0
优化 RequireJS 项目(合并与压缩)

本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多...

jinker
2013/05/01
33.4K
12
教你5分钟学会用requirejs(必看篇)

转来:教你5分钟学会用requirejs(必看篇) requirejs是干啥的啊? 曾经,我们将一些js组件放到不同的文件,然后通过script标签引入,如果几个组件有依赖,那么要小心了,你必须将被依赖的放到...

spinachgit
2018/10/31
79
0
使用 RequireJS 优化 Web 应用前端

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文...

IBMdW
2012/09/11
8.6K
16
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
4.2K
10

没有更多内容

加载失败,请刷新页面

加载更多

数据流中的中位数

吐出的较小的N/2 个,都在大根堆里,较大的 N/2 个,都在小根堆里。 此时 5、4,都在大根堆,小根堆没有数。 此时应该从大根堆的堆顶弹出来,扔到小根堆里。 比如:先把 5 拿出来,再把堆最后...

Garphy
11分钟前
3
0
微服务下配置管理中心 SCCA

SCCA 简介 SCCA 全称 spring-cloud-config-admin,微服务下 Spring Boot 应用(包含 Spring Cloud)统一的配置管理平台。 Github 地址:spring-cloud-config-admin 核心贡献者:程序员DD | ...

SpringForA
13分钟前
4
0
spring 是如何注入对象的和bean 创建过程分析

文章目录: beanFactory 及 bean 生命周期起步 BeanFactory refresh 全过程 BeanFactoryPostProcessor 和 BeanPostProcessor 解析 使用 BeanPostProcessor 实现 aop 和 springboot Cache 相关......

sanri1993
16分钟前
8
0
@PathVariable使用

public interface ProductInfoRepository extends JpaRepository<ProductInfo, String>{ List<ProductInfo> findByProductId(String productId);} ProductInfoController @Autowired ......

观海562
27分钟前
6
0
利用CSS禁止手机长按出现气泡: 复制、选择等功能

可以用 * ,也可作用于一个div div{  -webkit-touch-callout:none;  /*系统默认菜单被禁用*/  -webkit-user-select:none; /*webkit浏览器*/  -khtml-user-select:none; /*早期浏览...

蓝小驴
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部