(三)用less+gulp+requireJs 搭建项目(requireJs)
首先我想说下我在写js时经常遇到的问题,尤其是很大的项目:
1.我一般会把各个功能分块写在各个js文件中:
比如弹出框:
dialog.js
$(document).ready(function(){
var dialog={
error_dialog:function(){
//.....
}
}
})
然后在需要的文件中调用
b.js
dialog.error_dialog();
此时会出现如下错误
2.我们经常会在页面上看到这种情况:
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script type="text/javascript" src="js/b.js"></script>
<script type="text/javascript" src="js/cjs"></script>
<script type="text/javascript" src="js/e.js"></script>
<script type="text/javascript" src="js/ds.js"></script>
<script type="text/javascript" src="js/gsdag.js"></script>
<script type="text/javascript" src="js/wer.js"></script>
<script type="text/javascript" src="js/fa.js"></script>
<script type="text/javascript" src="js/gsd.js"></script>
作为一个完美主义者,你受得了吗?而且这样写会极大降低加载速度
3.如果js加载过慢,会阻塞页面加载
对于以上问题,requireJs是个很好的帮手!!
1.requireJS异步加载模块,不会阻塞页面渲染
2.requireJs实现模块依赖,极大提升开发速度
下面就来试试吧:
1.去官网下载require.js
2.新建入口文件main.js
在页面引入:
<script src="js/require.js" data-main="js/main"></script>
main.js
require.config({
baseUrl:'js',
paths: {
"jquery": "jquery-1.11.3.min",
"dialog": "dialog",
"moduleB": "b"
} }); require(['dialog', 'moduleB', 'jquery'], function (dialog, moduleB, $){ });
require():requireJs基于AMD规范,所以要用require()来加载依赖。
require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
默认情况下,require.js假定这三个模块与main.js在同一个目录,文件名分别为jquery.js,underscore.js和backbone.js,然后自动加载。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
require.config():可以对模块进行配置。
define():require要求加载的模块必须按照AMD规范
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
:
dialog.js
define(function($_){
return {
error_dialog:function(){
//.....
console.log($("div").text());
}
} })
b.js
define(function(){
dialog.error_dialog();
}())
页面运行后会出现以下错误:
因为dialog.js是依赖jquery的,b.js依赖dialog.js;
所以修改整个文件为:
dialog.js
define(["jquery"],function($_){ return {
error_dialog:function(){
//.....
alert($("div").text());
}
} })
b.js
define(["jquery","dialog"],function($_,dialog){
console.log(dialog.error_dialog())
})
运行index.html,成功!!
补充:
如果加载非规范的模块
理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合
这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。
举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。
require.config({
shim: { 'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
另
require.js还提供一系列插件,实现一些特定的功能。
domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
require(['domready!'], function (doc){
// called once the DOM is ready
});
注:本文在介绍requireJs的require(),config(),define()功能时,由于语言组织能力较差,摘抄于阮一峰大神的博客!!!!
哈哈~~~见谅
(三)用less+gulp+requireJs 搭建项目(requireJs)的更多相关文章
- (一)用less+gulp+requireJs 搭建项目(了解less)
项目完结 做个总结: 公司网站重构,整站都需要重写,终于有机会接触下 less,gulp和requireJs,因为以前的工作就是写几个活动页,并没有机会用这些工具,废话不多说,先看下完成后的项目目录: ...
- (二)用less+gulp+requireJs 搭建项目(gulp)
gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~ 首先去node官网下载安装包 1.新建项目文件夹 在目录下shift+右键 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- SSH项目搭建(三)——Maven多模块搭建项目
多模块开发,大致的思想就是把一个项目按某种方式分成多个模块,再把模块们连接成一个整体,我们在开发的时候,可以很清晰的操作每一个模块,可以大大提高开发的效率. Java web项目,最常见的就是按代码的 ...
- gulp的使用(三)之把gulp运用到项目实战中
在了解了上面的gulp(一)(二)以后,我们就可以开始在项目中具体使用了,具体使用流程如下: 1. 创建一个project文件夹,然后里面首先创建一个src文件夹,里面放置开发要用到的文件夹: 2. ...
- requirejs + vue 项目搭建2
上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...
- 使用gulp搭建项目
项目源码地址 前期准备工作 首先确保本机安装了 node gulp中文文档 安装 gulp 命令行工具 npm install --global gulp-cli 在项目目录下创建 package.j ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- 抛弃强大的TFS ,借助于BugTracker.NET + Visual Source Safe + SourceLink搭建项目开发环境
微软公司的Team Foundation Server是个强大的项目管理工具,如果用.NET开发,它应该是首选的项目管理平台.TFS的成本比较高,而且和Visual Studio集成紧密.比如TSF有 ...
随机推荐
- 【Hadoop离线基础总结】MapReduce增强(下)
MapReduce增强(下) MapTask运行机制详解以及MapTask的并行度 MapTask运行流程 第一步:读取数据组件InputFormat(默认TextInputFormat)会通过get ...
- 用Stream流轻易的收集数据
前言 在日常使用集合时,我们通常使用迭代器来处理集合中的数据,假如有一个用户列表 List,我们想要将用户按照性别分组生成 Map<String, List>.需要遍历 List,然后判断 ...
- spring data jpa 多对多 ManyToMany
环境搭建 源码地址:gitee:https://gitee.com/ytfs-dtx/JPA 导入依赖 <properties> <spring.version>5.2.5.R ...
- 关于redis,你需要了解的几点!
一.关于 redis key: 1.是二进制安全的,也就是说,你可以使用任何形式的二进制序列来作为key,比如一个string,或者一个jpg图片的数据,需要说明的是,空字符串也是一个有效的key. ...
- SQL SERVER 的窗体函数OVER的使用:row_number/rank/dense_rank
举个例子给大家加深印象,也方便理解: 1.目前有这几笔数据: Select as score into #studentSoure union all Select as score union al ...
- php_rce
0x01 PHP_RCE RCE(remote command/code execute):远程命令/代码执行 此题为ThinkPHP V5远程代码执行漏洞 0x02 命令执行 http://124. ...
- Python基础语法day_04——操作列表
day_04 遍历整个列表 我们创建列表时,需要输出整个列表,但是通常列表会很长,包含很多元素,当列表长度发生变化是,都必须修改代码.通过for循环,我们可以很轻易地输出整个列表. #遍历整个列表 创 ...
- 如何搭建一个WEB服务器项目(四)—— 实现安卓端图片加载
使用Glide安卓图片加载库 观前提示:本系列文章有关服务器以及后端程序这些概念,我写的全是自己的理解,并不一定正确,希望不要误人子弟.欢迎各位大佬来评论区提出问题或者是指出错误,分享宝贵经验.先谢谢 ...
- React使用hook
Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 为什么会有hook 在组件之间复用状态逻辑很难,需要重新组织你 ...
- Problem 2232 炉石传说
Problem 2232 炉石传说 不知道fzu的账号在哪里弄,想要做题的可以到vj上面去做 https://vjudge.net/problem/FZU-2232 #include <iost ...