requirejs——基础
一、requirejs存在的意义:
我们引用外部JS文件通常是这样引用的:
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
这种方式的弊端在于
- 1、加载文件是同步加载,即加载完 1.js,再去加载2.js;导致加载时间过长;
- 2、有些文件不一定需要加载;要根据内容具体内容决定加载哪些文件,传统方式会导致加载无用文件;
而requirejs则可以解决这些问题。requirejs对外开放的接口:
- 1、requirejs/require: requirejs=== require ,用来配置requirejs;在入口模块中加载其他模块。
- 2、define: 定义一个非入口模块。
requirejs的使用流程:
- 1、利用define函数定义模块;
- 2、引用requirejs文件;并通过 data-main 属性指定入口模块,requirejs自动加载入口模块;
- 2、在入口模块(主模块)中利用require函数加载其他模块。
二、requirejs文件的引用:
1、在html中引用的方式如下:
<script data-main="js/main" src="js/require.min.js"></script>
如上, 在<script>标签中不仅指定加载的 require.min.js 文件,还指定了 data-main 属性;
2、data-main
data-main 不是<script> 标签的属性,是 requirejs 要求提供的属性;其用于指定入口模块文件,模块文件实际就是一个js文件,只是按照requirejs要求的格式来写。
在这里表示在加载完 require.min.js 文件后马上加载 JS 目录下的 main.js 文件。 因为在requirejs 就是用于管理JS文件的,所以默认模块后缀名就是 ".js",因此data-main="js/main" 等价于 data-main="js/main.js" 但是我们最好不要加上后缀名,这个后续会说。
三、定义入口模块:
1、关于入口模块:
入口模块就是引用外部js的入口,一个模块可以依赖其他模块;例如上面的 main.js 入口模块文件书写格式为:
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code
});
整个文件内容就是一个 require 函数,参数如下:
- 第一个参数为数组,表示依赖的模块,如 'moduleA' 表示 模块名,在此也表示 moduleA.js 文件。
- 第二个参数为方法,表示加载完依赖模块之后所执行的方法。每一个依赖的模块都可以传递一个任意类型的参数给当前模块的回调函数;
require函数的作用就是载入其他的模块,并且根据模块返回值作为回调函数的参数;require函数在执行加载依赖模块时,采用异步加载。不会阻塞当前页面的执行。
四、定义其他模块:
使用requirejs时,除了入口模块,还有很多被入口模块所依赖的其他模块,所不同的是入口模块采用require函数定义,其他模块采用define函数定义:
例如 moduleA.js 文件格式如下:
define(["cart"], function(cart) {
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
普通模块的定义方式通常是采用 define 函数定义的,其参数如下:
- 1、数组参数:依赖的其他模块;
- 2、方法,方法内返回一个object,作为一个参数传给入口模块。
五、requirejs配置信息:
通常 require.config()就写在主模块(main.js)的头部,其作用域是全局的,对所有模块都有影响。格式 如下:
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
}); requirejs(['jquery', 'canvas', 'app/sub'],function ($,canvas,sub) {
//some code
});
由于requirejs===require 所以上述代码可以改成如下:
require.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
}); require(['jquery', 'canvas', 'app/sub'],function ($,canvas,sub) {
//some code
});
requirejs是通过使用 require.config() 方法来定义配置信息的。以一个对象为参数,对象主要包括以下信息:
1、baseUrl:所有模块的查找根路径
如:require(['jquery','canvas','app/sub'],function($,canvas,sub) {//some code});中jquery表示的是 js/lib 目录下的jquery模块,即 jquery.js文件。
2、paths:就是一个对象,这个对象的paths属性指定各个模块的加载路径。该路径如果不是以 "/"或者"http"、"https" 开头则其路径是相对于baseUrl而言的,如果没有baseUrl,则是相对于data-main 指定路径而言。
比如 require 函数中的 'app/sub'。表示的是 js/app/sub.js.
用于模块名的path不应含有.js后缀,因为一个path有可能映射到一个目录。路径解析机制会自动在映射模块名到path时添加上.js后缀。
框架比较:http://www.zhihu.com/question/21170137
学习资料:
http://www.3lian.com/edu/2014/02-10/128044.html
http://www.tuicool.com/articles/J3INv2Z
http://www.tiecou.com/2165.html
http://www.cnblogs.com/xing901022/category/658522.html;
http://www.runoob.com/w3cnote/requirejs-tutorial-1.html;
http://www.runoob.com/w3cnote/requirejs-tutorial-2.html
http://requirejs.org/docs/optimization.html;
http://www.ruanyifeng.com/blog/2012/11/require_js.html;
http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html;
http://www.tuicool.com/articles/jam2Anv;
requirejs——基础的更多相关文章
- RequireJS基础(三)
这篇来写一个具有依赖的事件模块event. event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.d ...
- RequireJS基础(二)
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- requirejs基础教程
一.初识requirejs 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用. ...
- RequireJS 基础(一)
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript,你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS基础知识
RequireJS解决代码依赖问题,异步加载js,避免页面失去相应 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代 ...
- requireJS基础使用
index.html <body class="requireBODY" id="body"><div id="vuebox&quo ...
- 前端JS框架系列之requireJS基础学习
1 背景 伴随着项目功能的不断扩充,客户体验的不断完善,实现交互逻辑的JS代码变得越来越多.起初,为了管理JS代码,我们把JS从页面中解放出来独立成文件,接着又把相似的交互代码提取到公共的JS页面中. ...
- requireJS入门基础
参考 require.js详解 1.引用requireJS的html文件 <!DOCTYPE html> <head> <title>requireJS</ ...
随机推荐
- Django和pymysql搭建学员管理系统
学员管理系统 项目规划阶段 项目背景 近年来老男孩教育的入学学员数量稳步快速增长,传统的excel统计管理学员信息的方式已经无法满足日渐增长的业务需求.因此公司急需一套方便易用的“学员管理系统”,来提 ...
- [Git]Git指南一 查看创建删除标签
1. 查看标签 列出现有标签,使用如下命令: xiaosi@yoona:~/code/learningnotes$ git tag r-000000-000000-cm.cm v1.0.0 v1.0. ...
- 开发Wordpress主题时没有特色图片的功能
在自己开发Wordpress主题的时候,发现右下方没有了之前见到的特色图片(Featured Image)功能模块 1.找到后台右上方的显示选项模块,下拉之后启用即可 2.如果以上步骤找不到该选项,那 ...
- windows 下多线程
unsigned uiThread2ID; HANDLE handle = (HANDLE)_beginthreadex(NULL, , ThreadUploadFun, NULL, CREATE_S ...
- python之Beautiful Soup库
1.简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索 ...
- LibreOJ β Round #2 题解
LibreOJ β Round #2 题解 模拟只会猜题意 题目: 给定一个长为 \(n\) 的序列,有 \(m\) 次询问,每次问所有长度大于 \(x\) 的区间的元素和的最大值. \(1 \leq ...
- noip积木大赛
先要覆盖一号位置的高度,(现在你的目的只是想要覆盖一号位置). 每次你可以选区间[l,r]高度+1,这个作为一个操作. 为什么不选的范围大一点,让更多的区间增加高度呢. 所以红色的地方是,在我的目的是 ...
- 笔记:C 编译过程
笔记:C 编译过程 参考了 编译器的工作过程 1 C 编译过程 配置 确定标准库和头文件位置 确定依赖关系 头文件的预编译 预处理 编译 连接 F4NNIU 2018-06-12 编译器的工作过程 h ...
- dpkg安装工具
dpkg --info "软件包名" --列出软件包解包后的包名称. dpkg -l --列出当前系统中所有的包.可以和参数less一起使用在分屏查看. (类似于rpm -qa) ...
- MySQL连接查询、联合查询、子查询
参考地址:http://blog.csdn.net/u011277123/article/details/54863371 1.MySQL连接查询 连接查询:将多张表(>=2)进行记录的连接(按 ...