Requirejs快速使用
Requirejs是一个简单,实用,强大的前端模块化js库,它遵循AMD这一客户端模块定义规范,使用它能够使我们前端代码更加清晰高效加载,摆脱了以前前端代码杂乱无序的状态。
使用步骤如下:
1.下载require.js文件,地址为http://www.requirejs.cn/docs/download.html#requirejs,并将其加入我们的项目中;
2.使用define方法定义模块
这里主要有两种形式,第一种是定义无依赖的js模块代码,即这个js模块是单独存在的,不依赖于其他模块或者js库,这里新建一个independent.js,代码如下
define(
function()
{
return{
test1:function()
{
console.log('i am test1');
},
test2:function()
{
console.log('i am test2');
} }
}
)
在这个js文件中定义了一个模块,返回了一个对象,其包含两个方法用以外部文件调用,这是定义一个独立的模块;
第二种方式是定义一个依赖于其他模块的模块,新建一个depend.js,代码如下:
define(['test'],function(test){
return{
showName:function(){
console.log( test.name);
},
showAge:function(){
console.log(test.age);
} } });
这里定义了一个模块,其依赖于test模块,需要注意的是,requirejs默认js文件名为模块名,test模块即对应于test.js文件,在这个模块中,第一个参数是需要依赖的外部模块名称,是一个数组,也可以依赖多个,第二个参数是一个function,其形参test对应着test模块,所以在showName,showAge方法中课直接调用test的属性或方法;
test.js
define(
function()
{
return {
name:'张三',
age:22
}
}
);
这里定义了一个test模块,返回了包含name和age的一个对象,供其他模块调用.
3.使用require调用模块
新建一个main.js,用来作为项目的主js文件,即在页面中只加载这个js文件,其他js文件都通过它以模块调用的形式存在,代码如下:
require(["depend"],function(de){
de.showAge();
de.showName(); });
表示调用depend模块,并调用其showAge和showName方法。
在html中加载requirejs,将其data-main属性指向我们的主js文件main.js
<script data-main="main.js" src="require.js"></script>
结果如下:
4.加载jQuery
平时开发中jQuery用的很多,最新版1.11以上的都遵循AMD规范,可以利用requirejs直接将其作为一个模块加载进来
在main.js中添加require.config,对jQuery进行配置,代码如下:
require.config(
{
paths:{
jquery:"http://code.jquery.com/jquery-1.11.1.min"
}
}
);
这里配置了一个jQuery模块,它的地址为一个CDN地址,也可以将其下载到本地,地址指向本地地址也可以,注意地址后面没有.js,
然后就可以使用require方法来调用了,main.js中调用代码如下:
require(["jquery","depend","independent"],function($,de,ind){
de.showAge();
de.showName();
console.log($("#span1").html());
ind.test1();
ind.test2(); });
这里调用了三个模块,我们之前自己定义的两个加上jQuery模块,并且使用了他们中的方法,其中jquery模块选择html页面上的一个span并将其内部文字输出到控制台
其余两个模块调用的都是在他们内部自定义的方法
最终结果如下:
Requirejs快速使用的更多相关文章
- RequireJS 快速入门
说明:本文只提供快速入门内容,方便快速进入实战状态.更高级的配置,请参考官网文档. 当初之所以使用 RequireJS 等工具,是因为想提高js的加载速度,避免不必要的堵塞.但通过一段时间的使用, ...
- RequireJS - 快速指南
原文: https://www.tutorialspoint.com/requirejs/requirejs_quick_guide.htm RequireJS - 概述 RequireJS是一个Ja ...
- reqiurejs学习
RequireJS 优化 Web 应用: http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/ 1.模块之间的依赖关系 2.如 ...
- web前端知识总结
前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...
- 快速理解RequireJs
原文地址:http://www.tuicool.com/articles/jam2Anv RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可 ...
- requirejs的使用和快速理解
样例来自https://www.jianshu.com/p/b8a6824c8e07 requirejs有以下功能 声明不同js文件之间的依赖 可以按需.并行.延时载入js库 可以让我们的代码以模块化 ...
- 快速理解RequireJs(转)
RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可以按需.并行.延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂. 在h ...
- RequireJs使用快速入门
前言:Requirejs作为一个ES5环境流行的模块加载器,在很多项目中使用它.而且这个开源库任然在更新,同类产品seajs已经不更新了. ES6之后引入import 或者使用Commonjs的方式引 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
随机推荐
- PowerDesigner逆向工程
再用PD建表完成后导成SQL脚本然后在SQL Server中运行后生成数据库后,就想到,可不可以将直接将数据库的内容生成PD文档?经过上网查,当然可以的. 要将SQL Server中的数据库导入到PD ...
- bzoj 1594: [Usaco2008 Jan]猜数游戏——二分+线段树
Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面摆N(1 <= N<= 1,000,00 ...
- HDU 1002 A + B Problem II (大数加法)
题目链接 Problem Description I have a very simple problem for you. Given two integers A and B, your job ...
- .net WebAPI返回xml、json格式
WebAPI返回xml.json格式简单示例 using System.Net.Http.Formatting; public class TestController : ApiController ...
- springcloud基于ribbon的canary路由方案
思路 根据eureka的metadata进行自定义元数据,然后使用ribbon对该元数据进行过滤和匹配,选择server. 实现 这里使用header来传递路由信息,改造ribbon-discover ...
- ie8下a标签中的图片出现边框
1.ie8下a标签中的图片出现边框 <a href="#"><img src="horse.jpg"></a> 效果如图所示 ...
- js函数定义方法
1.函数声明 其语法为 function functionName(){ //函数体 } 首先是function关键字,然后是函数名,其重要特征是函数声明提升,即在执行代码之前会先读取函数声明,使其在 ...
- 【Python学习】使用Pyinstaller将py文件导出为exe文件
PyInstaller其实就是把python解析器和你自己的脚本打包成一个可执行的文件,但是它不是跨编译的,也就是说在Windows下用PyInstaller生成的exe只能运行在Windows下,在 ...
- 包装类、基本数据类型及String类之间的相互转换
包装类:8种基本数据类型对应一个类,此类即为包装类 一.基本数据类型 包装类 及String之间的转换 1.基本数据类型转化为包装类:调用包装类的构造器 int i=10; Inte ...
- freemark基础知识
前言:使用freemarker对应生成一个html文件,保存到磁盘,访问文件就不一定使用tomcat,可以使用nginx(http服务器)访问.可以使用freemaker工具生成.只生成一次,html ...