首先我想说下我在写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)的更多相关文章

  1. (一)用less+gulp+requireJs 搭建项目(了解less)

    项目完结 做个总结: 公司网站重构,整站都需要重写,终于有机会接触下 less,gulp和requireJs,因为以前的工作就是写几个活动页,并没有机会用这些工具,废话不多说,先看下完成后的项目目录: ...

  2. (二)用less+gulp+requireJs 搭建项目(gulp)

    gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~ 首先去node官网下载安装包 1.新建项目文件夹 在目录下shift+右键 ...

  3. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  4. SSH项目搭建(三)——Maven多模块搭建项目

    多模块开发,大致的思想就是把一个项目按某种方式分成多个模块,再把模块们连接成一个整体,我们在开发的时候,可以很清晰的操作每一个模块,可以大大提高开发的效率. Java web项目,最常见的就是按代码的 ...

  5. gulp的使用(三)之把gulp运用到项目实战中

    在了解了上面的gulp(一)(二)以后,我们就可以开始在项目中具体使用了,具体使用流程如下: 1. 创建一个project文件夹,然后里面首先创建一个src文件夹,里面放置开发要用到的文件夹: 2. ...

  6. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  7. 使用gulp搭建项目

    项目源码地址 前期准备工作 首先确保本机安装了 node gulp中文文档 安装 gulp 命令行工具 npm install --global gulp-cli 在项目目录下创建 package.j ...

  8. gulp进阶构建项目由浅入深

    gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...

  9. 抛弃强大的TFS ,借助于BugTracker.NET + Visual Source Safe + SourceLink搭建项目开发环境

    微软公司的Team Foundation Server是个强大的项目管理工具,如果用.NET开发,它应该是首选的项目管理平台.TFS的成本比较高,而且和Visual Studio集成紧密.比如TSF有 ...

随机推荐

  1. 【Hadoop离线基础总结】MapReduce增强(下)

    MapReduce增强(下) MapTask运行机制详解以及MapTask的并行度 MapTask运行流程 第一步:读取数据组件InputFormat(默认TextInputFormat)会通过get ...

  2. 用Stream流轻易的收集数据

    前言 在日常使用集合时,我们通常使用迭代器来处理集合中的数据,假如有一个用户列表 List,我们想要将用户按照性别分组生成 Map<String, List>.需要遍历 List,然后判断 ...

  3. spring data jpa 多对多 ManyToMany

    环境搭建 源码地址:gitee:https://gitee.com/ytfs-dtx/JPA 导入依赖 <properties> <spring.version>5.2.5.R ...

  4. 关于redis,你需要了解的几点!

    一.关于 redis key: 1.是二进制安全的,也就是说,你可以使用任何形式的二进制序列来作为key,比如一个string,或者一个jpg图片的数据,需要说明的是,空字符串也是一个有效的key. ...

  5. SQL SERVER 的窗体函数OVER的使用:row_number/rank/dense_rank

    举个例子给大家加深印象,也方便理解: 1.目前有这几笔数据: Select as score into #studentSoure union all Select as score union al ...

  6. php_rce

    0x01 PHP_RCE RCE(remote command/code execute):远程命令/代码执行 此题为ThinkPHP V5远程代码执行漏洞 0x02 命令执行 http://124. ...

  7. Python基础语法day_04——操作列表

    day_04 遍历整个列表 我们创建列表时,需要输出整个列表,但是通常列表会很长,包含很多元素,当列表长度发生变化是,都必须修改代码.通过for循环,我们可以很轻易地输出整个列表. #遍历整个列表 创 ...

  8. 如何搭建一个WEB服务器项目(四)—— 实现安卓端图片加载

    使用Glide安卓图片加载库 观前提示:本系列文章有关服务器以及后端程序这些概念,我写的全是自己的理解,并不一定正确,希望不要误人子弟.欢迎各位大佬来评论区提出问题或者是指出错误,分享宝贵经验.先谢谢 ...

  9. React使用hook

    Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 为什么会有hook 在组件之间复用状态逻辑很难,需要重新组织你 ...

  10. Problem 2232 炉石传说

    Problem 2232 炉石传说 不知道fzu的账号在哪里弄,想要做题的可以到vj上面去做 https://vjudge.net/problem/FZU-2232 #include <iost ...