文档章节

初学require.js-javascript模块化编程

webphp
 webphp
发布于 2017/07/26 11:28
字数 1934
阅读 11
收藏 0
点赞 0
评论 0
    前几天在imooc网上学习一个侧边栏开发的课程,在视频课程中发现了require.js和scss的开发,感觉很方便 ,尤其在多人开发的项目中,可以提高效率及减少开发中重命名的错误,所以今天作为一个初学者就学习一下require.js
一、学习目的
    在最早的时候。所的javascript代码都是写在一个文件里面,只加载一个文件就够,但随着项目的扩展会越来越大,就会有多个js文件,这样要依次加载多个文件,这样的写法有很大的缺点:首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越久,其次,js文件之间存在依赖关系,因此必须保证加载顺序。当依赖关系很复杂的时候,代码的编写和维护就会变的困难。
    require.js的出现就可以解决以上的两个问题,
    1、实现js文件的异步加载,避免网页的响应时间太长
    2、管理模块之间的依赖性,便于代码的编写和维护
二、reqiure.js开始学习-加载
    1、使用require.js的第一步,是去官方网站下载最新版本http://www.requirejs.cn/
    2、将require.js文件存放到项目目录下,然后引入
<script src="js/require.js"></script>
如果只写这样一句是无法缩短网页的响应时间,我们应习惯性的将js文件放到网页的最底部,第二就是在上段js文件的代码中加上 defer  async="true"
<script src="js/require.js" defer async="true"></script>
async属性表明这个文件需要异步加载,避免网页失去响应,但万恶IE不支持这个属性,只支持defer,所以为了兼容要加上defer.加载完require.js以后,要加载require的主模块,就是在这个主模块中定义的其它模块js,下一步就要加载我们自己写的代码了,假定我们自己写的代码文件为main.js,放在了项目js的目录下,
<script src="js/require.js" defer async="true" data-main="js/main"></script>
data-main属性的作用是,指定网页程序的主模块,这个文件会被require.js第一个加载,由于require.js默认主文件名后缀为js,所以可以的.js省去不写。
三、主模块的写法
    在上一段的main.js被我们定义为主模块,意思是整个网页的JS入口代码,所有的代码都从这里开始运行,如果我们的主入口文件的js不依赖任何其它模块,我们在main.js里直接写js代码,回想一下如果这样就没有必要使用require.js了,真正在我们多人开发项目中,主模块会依赖其它模块,这里我们就要使用AMD规范定义的require函数了。
    main.js
    语法为:   
//main.js
require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
//write code here
})
    在这里解释一下require函数的使用,require()接收两个参数,第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA','moduleB','moduleC'],即主模块依赖这三个模块,第二个参数是一个回调函数,当前指定的模块都加载成功后,它将被调用。加载的模块会以参数的形式传入到函数中,从而在回调函数内部就可以使用这些模块。
    require()异步加载moduleA,moduleB,moduleC,浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载完成后,才会运行也解决了依赖的问题。
    下面以实际例子进行,
    假如主模块依赖jquery,那么main.js就要这样写    
require(['jquery'],function($){
$('body').css('backgroud-color','red');
})
    require.js会加载jquery,然后再运行回调函数,主模块代码写在回调函数中
四、模块的加载
    上面的main.js实例中,主模块依赖于jquery, 默认情况下,require.js假如这个模块与main.js在同一目录下,文件名分别为jquery.js, 然后自动加载,
    使用require.config()方法,我们可以对模块的加载进行自定义,require.config()就写在主模块main.js的头部,参数就是一个对象,这个对象的paths属性指定各个模块的路径
require.config({
 
paths:{
"jquery":"jquery",
"validate":"validate",
}
})
    上面的代码给出了二个模块的文件名,路径默认与main.js在同一目录下,如果这些模块不其它目录下,比如js/validate/目录,则写法就要改变,会产生两种写法,
    1、逐一指定路径
require.config({
paths:{
"jquery":"jquery.min",//此文件与main.js在同一目录
"validate":"validate/validate",
}
 
})
    2、另一种是直接改变目录(baseUrl)
require.config({
 
baseUrl :"js/validate",
paths:{
"jquery":"jquery.min",
"validate":"validate",
}
 
})
    如果模块在另一台服务器主机上,也可以直接指定url网址,如
require.config({
 
paths :{
"jquery":"https//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
}
});
     require.js要求每一个模块是一个单独的js文件,这样的话如果多个模块,就会发起多次HTTP请求,还是会影响网页的加载速度,因此require.js提供一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,可以减少http请求,优化模块地址:http://www.requirejs.cn/docs/optimization.html
五、AMD(异步加载响应)模块的写法
    require.js加载的模块,是采用的AMD模块规范,也就是说模块必须按照AMD的规定来写,模块必须采用特定的defin()函数来定义,如果一个模块不依赖其它模块,那就直接定义在defind()函数之中
    假定现在有一个validate.js 它定义了一个validate模块,那么validate.js就要这样写
//validate.js
 
define(function(){
return{
add =function(x,y){
return x+y;
}
}
})
    在主入口文件里加载方法如下:
//main.js
 
require(['validate'],function(validate){
console.log( validate.add(1,3));
 
})
    如果validate.js模块还依赖其它模块,那么define()函数的第一个参数,必须是一个数组,指明依赖模块名称,如
//validate.js
 
define(['jquery'],function($){
return{
ajaxpost =function(){
var url = $("#elm").prop('href');
$.post(...)
}
}
 
})
     当require()函数加载上面这个模块,就会先加载jquery.min.js文件。
六、加载非规范性模块
    从理论上来讲,require.js加载的模块,必须是按照AMD规范,用define()函数定义模块,但是实际上,虽然已经有一部分流行的函数库比如jquery符合AMD规范,但是也一些不符合,但是require还是可以加载非规范模块的
    这样的模块在用require()加载之前,要先用require.config()方法,来定义他们的一些特征,就要用到config()函数中的shim属性,config()函数除了有paths属性外,还有一个shim属性
    如,
require.config({
 
shim :{
'math':{
exports :'_'
},
'validate':{
deps:['math','jquery'],
exports :'validate'
}
 
}
 
 
});
    require.config()接受了一个配置对象,这里用到的是shim,专门用来配置不兼容的模块,每个模块要定义
        ⑴、exports值:输出的变量名,表明这个模块名部调用时的名称;
        ⑵、deps数组,表明该模块的依赖性,都依赖了那些模块。
    比如:jquery的插件可以这样定义:
reqiure.config({
 
shim :{
 
'jquery.scroll':{
deps:['jquery'],
exports:'jQuery.fn.scroll'
}
 
}
 
})
七、require.js插件
    require.js还提供了一系列插件,实现一些特定功能
    domready插件,可以让回调函数在页面DOM结构加载完成后在运行
require(['domready!'],function(doc){
 
//DOM加载完以后运行的代码段
 
})
    text和image插件,则是允许require.js加载文本和图片文件。
define(['text!review.txt','image!cat.jpg'],function(review,cat){
 
console.log(review);
document.body.appendChild(cat)
 
})
    类似的插件还有json和mdown,用于加载json文件和markdown文件。

© 著作权归作者所有

共有 人打赏支持
webphp
粉丝 1
博文 91
码字总数 91650
作品 0
海淀
程序员
NODE高级编程阅读笔记系列(一)

本篇涉及以下主题 node简单介绍 事件驱动编程 模块化 缓冲区处理 Node简单介绍 直接用官方的那句话: Node.js 是一种建立在Google Chrome's V8 引擎上的non-blocking(非阻塞),event-driven(...

可爱的圣诞老人 ⋅ 05/23 ⋅ 0

javascript模块化编程

Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):require.js的用法 Require.js <== AMD <== Common.js 原来。JS想一统天下。所以...

cyper ⋅ 2015/12/03 ⋅ 1

js笔记三十之单例模式和工厂模式

单例模式 对象数据类型的作用: 把描述同一个实物(同一个对象)的属性和方法放在一个内存空间下,起到了分组的作用,这样不同事物之间的属性即使属性名相同, 相互也不会发生冲突 --- 这种分组编写...

uplyw ⋅ 05/26 ⋅ 0

JavaScript模块化编程规范

当一个网站复杂度较高需要多人协作开发时,传统的非模块化编程模式容易导致代码冲突和依赖等问题,而模块化编程的诞生正是为了解决此类问题。然而,在ES6之前,原生JavaScript是不支持模块化...

璿而不华 ⋅ 2017/10/30 ⋅ 0

nodejs开发——express框架学习

在我们实际开发项目时,总是会用一些框架,而不是自己从头开始开发。而在nodejs中,express框架就是一个使用频率最高的一个框架。本篇主要来讲解express的使用。 加载express框架 snippetid=...

chenyufeng1991 ⋅ 2017/01/31 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

javascript模块化编程库require.js

随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的。更是为了能更加容易的维护日后的代码,因为现在 的随着人们对交互效果的越来越强烈的需求,我...

WolfX ⋅ 2016/02/19 ⋅ 0

JavaScript 编程精解 中文第三版 零、前言

零、前言 原文:Introduction 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 We think we are creating the system for our own purp...

ApacheCN_飞龙 ⋅ 06/01 ⋅ 0

关于CommonJS、AMD、CMD、UMD规范,JavaScript模块化编程和浏览器端的规范和实现

一、Javascript模块化编程 1.1、Javascript模块化介绍 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、...

AAASSSSddd ⋅ 2016/10/18 ⋅ 0

【javascript激增的思考01】模块化编程

前言 之前我做过一个web app(原来可以这么叫啦),在一个页面上有很多小窗口,每个小窗口都是独立的应用,比如: ① 我们一个小窗口数据来源是腾讯微博,需要形成腾讯微博app小窗口 ② 我们...

范大脚脚 ⋅ 2017/12/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具

压缩打包介绍 使用压缩工具的好处: 使用压缩文件,不仅可以节省磁盘空间,而且在传输时还能节省网络宽带。 我们通常讲的家用宽带和机房宽带100M是有区别的: 机房宽带的上行和下行都是100M,...

Linux_老吴 ⋅ 27分钟前 ⋅ 0

SpringBoot热部署加持

概述 进行SpringBoot的Web开发过程中,我们很多时候经常需要重启Web服务器才能保证修改的 源代码文件、或者一些诸如xml的配置文件、以及一些静态文件生效,这样耗时又低效。所谓的热部署指的...

CodeSheep ⋅ 34分钟前 ⋅ 0

OSChina 周六乱弹 —— 假如你被熊困到树上

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》 《如果写不出好的和弦就该在洒满阳光的钢琴前一起吃布丁》- 谢...

小小编辑 ⋅ 今天 ⋅ 5

vbs 取文件大小 字节

dim namedim fs, s'name = Inputbox("姓名")'msgbox(name)set fs = wscript.createobject("scripting.filesystemobject") 'fs为FSO实例if (fs.folderexists("c:\temp"))......

vga ⋅ 今天 ⋅ 1

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部