require.js 学习基础
RequireJS 是一个JavaScript模块加载器,他的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。
先看下面示例:
大家都知道js阻塞浏览器渲染,就是在加载页面内容时,遇到JS,在加载JS时,会停止对页面的加载,等JS加载完了,才会继续对页面进行加载,这样就会导致页面加载时间过长,使用RequireJS,就可以解决这个问题
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/require.js" data-main='js/main.js' type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="">
fdfdfdfdfd
</div>
</body>
</html>
a.js:
alert('');
main.js:
require.config({
paths:{
a:'a'
}
});
require(['a']);
在执行alert的时候页面内容已经加载出来了
require.js 可以防止js加载阻塞页面渲染
基本API
require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短
- define 从名字就可以看出这个api是用来定义一个模块
- require 加载依赖模块,并执行加载完后的回调函数
大家可以看见页面顶层<script>标签含有一个特殊的属性data-main,这里就是入口JS,require.js使用它来启动脚本加载过程
main.js
require.config({//配置模块加载位置-也就是要加载JS的路劲,不用后缀.js
paths:{//通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:
'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
'base':'g-ZFbase'
}
});
require(['jquery'], function() {
//这样jquery 不是全局的,你要使用的时候通过require调用,如下
$('div').click(function(){
alert($(this).html());
});
});
require(['jquery','base'], function($,base) {
//在比如我自己封装了一个g-ZFbase.js,要用里面的ajax,ajax在ajax()方法里,但是他依赖于jquery,
//可以2个一起调用
ajax();
});
define: 定义一个模块,然后再页面中使用:
例如:在a.js里定义一个define
a.js:
define(['jquery','base'],function($,base){
//如上,我要用g-ZFbase.js里的ajax()方法,他依赖于jquery,所以2个一起调用
ajax();
});
在main.js里:
require.config({//配置模块加载位置-也就是要加载JS的路劲,不用后缀.js
paths:{//通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:
'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
'base':'g-ZFbase',
a:'a'
}
});
//require(['jquery','base'], function($,base) {
// //在比如我自己封装了一个g-ZFbase.js,要用里面的ajax,但是他依赖于jquery,
// //可以2可一起调用
// ajax();
//}); require(['a']);
就相当于原来在main.js里写的内容单独写到一个JS文件里把他看成一个模块,然后调用,这里把他放在了a.js里面了
一个JS文件里只能放一个define,一个define只能有一个返回值/对象
调用define 中的方法:
main.js:
require.config({//配置模块加载位置-也就是要加载JS的路劲,不用后缀.js
paths:{//通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:
'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
'base':'g-ZFbase',
a:'a'
}
});
require(['a'],function(obj){//obj-接收返回值,名字可不和返回值同名
obj.t1();
});
a.js:
define(function(){
function test(){
alert('test');
}
function t(){
alert('t');
}
var obj = {
t1:test,
t2:t
}
return obj;
})
只有一个调用函数,可直接返回函数名 return t;
require.js 学习基础的更多相关文章
- js模块化开发——require.js学习总结
1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...
- 【转】require.js学习笔记(二)
require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...
- require.js学习笔记(内容属于转载总结)
<script data-main="src/app" src="src/lib/require.js"></script> backb ...
- require.js学习笔记
使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织 官方网站http ...
- 【转】require.js学习笔记(一)
一.立即执行函数 立即执行函数可以有效避免临时变量污染全局空间.可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用. for (var i = 0; i < elems.lengt ...
- Vue.JS学习基础
= 导航 顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件 顶部 vue.js介绍 vue.js实例 模板语法 计 ...
- js学习——基础知识
数据类型 函数.方法 变量作用域 运算符 条件语句 break和continue typeof 错误(异常) 变量提升 严格模式 JSON void(0) JavaScript ...
- JS学习-基础运动
多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...
- 5月学习总结(Ant-Design,mustache,require.js,grunt)
一.Ant-Design学习 因为Ant-Design是基于React实现的,之前自己也学过一段时间的React,对React还是相对比较熟悉的,在学习Ant-Design也还不算吃力. 最开始是从源 ...
随机推荐
- Hadoop storm大数据分析 知识体系结构
最近工作工作有用到hadoop 和storm,最近看到一个网站上例句的hadoop 和storm的知识体系.所以列出来供大家了解和学习.来自哪个网站就不写了以免以为我做广告额. 目录结构知识点还是挺全 ...
- 各JAVA开发框架版本及对应信息
日期:2017.05.22 当前最新 release 版本情况: 框架 最新GA(General Availability)版本 spring 4.3.8 spring boot 1.5.3 myba ...
- golang 多个routine之间的同步
本文以一个例子的方式介绍channel在同步中的使用. 下面的例子中,主task首先阻塞,直到两个task完成后,再继续执行. package main import ( "log" ...
- RPC终结点映射
“没有更多的终结点可用”错误消息表示 RPC 终结点映射程序无法对基于 RPC 运行的服务使用大于 1024 的端口.注意:RPC 终结点映射程序在端口 135 上运行. http://support ...
- 异步Socket服务器与客户端
本文灵感来自Andre Azevedo 在CodeProject上面的一片文章,An Asynchronous Socket Server and Client,讲的是异步的Socket通信. S ...
- Letterbox,Pillarbox和Pan&Scan
Auto 不改变窗口设置16:9 PillarBox: 4:3的图像,在16:9的显示屏上显示时,上下到顶,左右会添加黑边. 16:9 Pan&Scan 4:3的图像,在16:9的显示屏上显示 ...
- bzoj2263: Pku3889 Fractal Streets
给出两点编号,求如图所示的图中两点间欧氏距离*10取整 递归处理由编号求出坐标 #include<cstdio> #include<cmath> int T,n,s,t; vo ...
- java获取随机密码
import java.util.Random; public class tests { /** * * author LiuQiang * date 2013-10-14 下午01:13:54 * ...
- Spring Cloud构建微服务架构(七)消息总线
先回顾一下,在之前的Spring Cloud Config的介绍中,我们还留了一个悬念:如何实现对配置信息的实时更新.虽然,我们已经能够通过/refresh接口和Git仓库的Web Hook来实现Gi ...
- [转]Windows 注册自定义的协议
[转自] http://blog.sina.com.cn/s/blog_86e4a51c01010nik.html 1.注册应用程序来处理自定义协议 你必须添加一个新的key以及相关的value到HK ...