ruquireJS入门
由于近期找工作需要,这两天通过requireJS官网的学习,本人对其有了基本的了解,下面说说这两天学习所得,讲的不好请大家谅解,我也是菜鸟现在。
相信大家在接触模块化JS前,对于javascript文件的应用都是通过很多个script标签来添加引用的,例如:
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
这样的写法存在着很大的弊端。其一,在加载页面的时候,如果需要加载的javascript文件很多时,会造成浏览器停止页面渲染(即页面堵塞),页面的响应时间延长,引起十分不友好的用户体验;其二,javascript文件之间会存在依赖关系,这就需要我们必须严格保证其加载的顺序(例如jquery.js的加载必须在基于jquery开发的模块之前),被依赖模块必须在依赖模块之前加载,所以随着加载模块(这里的一般将一个js文件当成一个模块)的增多,其依赖关系就会越来越复杂,这大大的增加了项目开发、升级及维护的难度。
RequireJS是一个Javascript的模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然。而通过模块化加载不仅能使上述的两个弊端迎刃而解,还可以以文件为单位将功能模块化并实现功能复用。
下面我们一起来学习requireJS的使用:
以实现图片轮播为例,目录结构如下:
requierJs
----css
---style.css
----imgs
----js
---jquery-1.8.3.min.js
---lb.js
---mian.js
----index.html
----require.js
(1)先使用<script data-main="js/main" src="require.js"></script>加载模块化。data-main属性的作用是,指定网页程序的主模块。在项目中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
在data-main指定的主文件中,可以通过require.config来配置
//配置
require.config({
baseUrl: 'js',
paths:{
jquery:"jquery-1.8.3.min"
}
});
其中通过baseUrl来设置文件的路径,jquery: "query-1.8.3.min"前是定义的别名,后跟的是引用的js。这个例子是假设这些js文件都在同级目录下。
(2)模块定义,require.js加载的模块,采用AMD(基于模块的异步加载 JavaScript 代码的机制)规范。也就是说,模块必须按照AMD的规定来写。如果模块存在依赖,那么可以直接定义在define()函数之中。如果模块间存在依赖关系那么定义方法如下:
//lb模块定义,依赖jquery模块
define(['jquery'], function($) {
var imgs=$(".lb img");//获取图片
var txt=$(".tm span");//文字
var sel=$(".bn li");//小圆点
var len=imgs.length;
var timer = null;
//延时切换图片
function startTime(){
timer = setInterval(function(){
tplb(index);
index++;
if(index==len)
{
index=0;
}
},3000);
}
//停止延时切换
function stopTime(){
if(timer){
clearInterval(timer);
}
}
function tplb(n){
txt.eq(n).fadeIn(10).siblings("span").fadeOut(10);
imgs.eq(n).fadeIn(20).siblings("img").fadeOut(20);
sel.eq(n).css("list-style-image","url('imgs/b.jpg')").siblings("li").css("list-style-image","url('imgs/a.jpg')");
}
txt.eq(0).fadeIn(10).siblings("span").fadeOut(10);//初始化
imgs.eq(0).fadeIn(10).siblings("img").fadeOut(10);
sel.eq(0).css("list-style-image","url('imgs/b.jpg')").siblings("li").css("list-style-image","url('imgs/a.jpg')");
//鼠标一上小圆点切换
function mouseSwitch(){
sel.mouseover(function(){
index=$(this).index("li");
tplb(index);
});
}
//当鼠标移动到图片上是,停止切换
function up(){
imgs.mouseover(function(){
stopTime();
});
}
//当鼠标离开时,开启切换
function leave() {
imgs.mouseleave(function(){
startTime();
});
}
return{
startTime:startTime,
mouseSwitch:mouseSwitch,
up:up,
leave:leave
}
});
(3)在main模块中使用requireJS加载使用的模块方法,如项目调用图片轮播实现的方法:
//加载require(['lb'], function(lb) { lb.startTime(); lb.mouseSwitch(); lb.up(); lb.leave();});
require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['lb'],即主模块依赖这一个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
项目下载地址:http://pan.baidu.com/s/1ntEDKAd
转载于:https://www.cnblogs.com/hcw136156133/p/4553543.html
ruquireJS入门相关推荐
- 用Construct 2制作入门小游戏~
今天在软导课上了解到了Construct 2这个神器,本零基础菜鸟决定尝试做一个简单的小游戏(实际上是入门的教程啊= = 首先呢,肯定是到官网下载软件啊,点击我下载~ 等安装完毕后我便按照新手教程开始 ...
- Docker入门六部曲——Swarm
原文链接:http://www.dubby.cn/detail.html?id=8738 准备工作 安装Docker(版本最低1.13). 安装好Docker Compose,上一篇文章介绍过的. 安 ...
- Docker入门六部曲——Stack
原文链接:http://www.dubby.cn/detail.html?id=8739 准备知识 安装Docker(版本最低1.13). 阅读完Docker入门六部曲--Swarm,并且完成其中介绍 ...
- Docker入门六部曲——服务
原文链接:http://www.dubby.cn/detail.html?id=8735 准备 已经安装好Docker 1.13或者以上的版本. 安装好Docker Compose.如果你是用的是Do ...
- 【springboot】入门
简介: springBoot是spring团队为了整合spring全家桶中的系列框架做研究出来的一个轻量级框架.随着spring4.0推出而推出,springBoot可以説是J2SEE的一站式解决方案 ...
- SpringBoot (一) :入门篇 Hello World
什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
- 入门指南目录页 -PaddlePaddle 飞桨 入门指南 FAQ合集-深度学习问题
入门指南目录页 -PaddlePaddle 飞桨 入门指南 FAQ合集 GT_Zhang关注 0.1012019.08.01 18:43:34字数 1,874阅读 795 Hi,欢迎各位来自Paddl ...
- 5 分钟入门 Google 最强NLP模型:BERT
BERT (Bidirectional Encoder Representations from Transformers) 10月11日,Google AI Language 发布了论文 BERT: ...
- 命名实体识别入门教程(必看)
关于开发自己的命名实体识别先期思路: 虽然网上有很多相关代码,但实际如何入门材料较少,故整理下: CRF:先期可以用人民日报语料库去做,步骤如下: https://blog.csdn.net/hude ...
最新文章
- shell逐行读取文件
- MYSQL 索引相关
- WinMain中的Console与main中的Window
- Mysql大数据中表分区的应用
- [算法练习]Excel Sheet Column Title
- 机器学习SVD【二】
- java7 文件_Java SE 7新特性之文件操作(9) - 遍历目录树
- 关于:程序兼容多种数据库
- python中get和getall_Scrapy框架get() 、getall() 、extract() 、extract_first()的区别
- ffmpeg filter 实现画面旋转
- 盘点购物分享系统,有兴趣的来看看哦
- DL/T 645-2007多功能电表通信规约
- sre和devops_什么是SRE,它与DevOps有什么关系?
- [HAOI2008]糖果传递
- Pytorch CPU Tensor与GPU Tensor的运算速度对比测试
- 【转】excel音标乱码
- 温度传感器LM35实验
- java springboot + nginx 自建 文件集群服务器
- 启用FM模块后VA01创建销售订单报错,消息号 FI311 “未在项目00001 11AA 中输入承诺项目”
- 毕设-基于SpringBoot后勤报修系统
热门文章
- 网络推广专员如何稳定搜索引擎首页排名全力以赴致力于网络推广
- 网站设计怎样让搜索引擎对其另眼相待?
- python word排版_使用Python通过win32 COM实现Word文档的写入与保存方法
- c语言习题与实验doc,[教材]C语言程序设计习题与上机实验(全部答案).doc
- pythongps聚类_python实现K聚类算法
- 16年寒假随笔(2)
- js中使用template.js插件
- 【Java_多线程并发编程】JUC原子类——4种原子类
- Java Spring Boot VS .NetCore (七) 配置文件
- idea从git上拉取并管理项目