首先我想说下我在写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离线基础总结】Hue的简单介绍和安装部署

    目录 Hue的简单介绍 概述 核心功能 安装部署 下载Hue的压缩包并上传到linux解压 编译安装启动 启动Hue进程 hue与其他框架的集成 Hue与Hadoop集成 Hue与Hive集成 Hue ...

  2. Ubuntu 1804 安装xmind8详细过程

    安装比较简单, 折腾了很久,一启动就报错,切换了JDK版本就能用了: 安装 登陆官网,下载xmind8: 下载得到文件xmind-8-update9-linux.zip: 将文件解压至路径xmind下 ...

  3. IDC预测2020云服务逆势增长!云服务器已成上云首选

    IDC预测2020云服务逆势增长!云服务器已成上云首选 据IDC最新预测指出,2020年IT基础设施支出今年将增长约4%,达到2370亿美元,驱动力主要来源于云服务. 受疫情的影响,不少企业开源节流, ...

  4. Vue中跨域问题解决方案1

    我们需要配置代理.代理可以解决的原因:因为客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务器没有设置禁止跨域的权限问题),也就是说,我们可以配置 ...

  5. Dubbo对Spring Cloud说:来老弟,我要拥抱你

    项目地址 https://github.com/yinjihuan/kitty-cloud 前言 Kitty Cloud 开源后有以为朋友在 GitHub 上给我提了一个 issues,问为什么项目中 ...

  6. es 报错cannot allocate because allocation is not permitted to any of the nodes

    0.现象 es 集群报red ,有unassigned shared , 用命令 curl localhost:9200/_cat/shards |grep UNASSIGNED 可以查看. 即使你马 ...

  7. 【比较】遗传算法GA和遗传编程GP有什么不同?

    遗传算法GA 本质上有一个固定的长度,这意味着所产生的功能有限的复杂性 通常会产生无效状态,因此需要以非破坏性方式处理这些状态 通常依赖于运算符优先级(例如,在我们的例子中,乘法发生在减法之前),这可 ...

  8. LinkedList详解-源码分析

    LinkedList详解-源码分析 LinkedList是List接口的第二个具体的实现类,第一个是ArrayList,前面一篇文章已经总结过了,下面我们来结合源码,学习LinkedList. 基于双 ...

  9. centos7安装后不能连接外网

    测试外网: 1,测访问外网能力:curl -l http://www.baidu.com 2,测访问外网能力:wget http://www.baidu.com 注:ping命令不一定能正确反映系统的 ...

  10. stm32实现DMX512协议发送与接收(非标)

    最近把玩了一下485,期间也接触了dmx512通信协议,该协议主要用于各种舞台灯光的控制当中,进而实现各种光效以及色彩变化.根据标准的512协议,其物理连接与传统上的RS485是完全一致的,并没有什么 ...