require.js学习记录

2018-10-11 admin

1、简介

官方对requirejs的描述: RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code. 即在浏览器中,require.js可以作为文件的模块加载器,可以用在Node和Rhino环境中。 工作方式为:requireJS使用head.appendChild()将每一个依赖加载为一个script标签。然后等待所有的依赖加载完毕,计算出模块定义函数正确调用顺序,再依次调用它们。

2、优点

(1)防止js加载阻塞页面渲染 (2)管理模块之间的依赖,便于管理和维护

3、使用介绍

(1)引入:

<script data-main="js/main" src="js/require.js"></script>

加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理。把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名。 data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径

<script src="js/require.js"></script><script src="js/app.js"></script>

(2)require.config配置

在main.js中进行require.config的配置。如如下主要的配置参数:

  • baseUrl: 设置根目录
  • paths:配置模块的加载位置。可以给模块定义一个更好记的名字。还可以配置多个路径,如果远程CDN没有加载成功,则加载本地的文件。
require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "user" : "js/user"   
    }
})
  • shim: 通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim。
require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

除了可以在require.js加载完毕后,通过require.config进行配置之外,在require.js加载之前,定义一个全局的对象变量 require 来事先定义配置参数。然后在require.js被浏览器加载完毕后,便会自动继承之前配置的参数。

<script>

    var require = {

        baseUrl: 'js/',

        paths: {

            'jquery': 'http://xxx.xxxx.com/js/jquery.min',

            'index': 'index'

        },

        deps:[index]

    };

</script>

<script src="js/require.js"></script>

除了上面3个常用的配置项,还有其他的: urlArgs:解决版本控制问题。urlArgs: 'ver=0.1.2’ waitSeconds: 设置加载脚本的超时时间 deps: 声明require.js加载完成后便会自动加载的模块 callback: 当deps中自动加载模块加载完成时,处罚的回调

(3)require和define

这两个是最常用的命名。define用于定义模块。require用于加载模块及配置文件。在requirejs中一个文件就是一个模块,文件名就是该模块的ID。

  • define:可以单独定义键值队数据,作为配置文件来使用;
define({

    'name':'zhangsan',

    'age':'20'

});

还可以定义依赖的关系:

4、压缩

(1) r.js

使用r.js来进行压缩时,需要指定build.js文件。build.js主要配置如下:

({
    appDir: '../js', //打包的根路径
    baseUrl: './', //依赖的根路径,以打包路径为前提
    dir: '../build', //打包后生成的文件路基
    mainConfigFile: './config.js', //打包依赖配置文件
    name: 'app' //需要打包的主要模块,以baseUrl路径为基础
})

执行r.js -o build.js 即可实现压缩。 在链接https://www.chenliqiang.cn/po…,可以参考看看。

(2) 使用gulp

安装好gulp和gulp-requirejs-optimize gulpfile的配置如下:

var gulp = require('gulp');
var requirejsOptimize = require('gulp-requirejs-optimize');
gulp.task('rjs', function(){
    return gulp.src('src/js/*.js')
    .pipe(
        requirejsOptimize({
            optimize: 'none',
            mainConfigFile: 'src/config.js'
        }))
    .pipe(gulp.dest('dist/js/'));
});

5、加载其他的文件

(1) 加载css 加载css需要使用require-css插件(https://github.com/guybedford…) 首先需要设置

map: {
  '*': {
    'css': 'require-css/css' // or whatever the path to require-css is
  }
}

在define中使用就可以了

define(['css!styles/main'], function() {
  //code that requires the stylesheet: styles/main.css
});

(2) 加载其他

define([
    'text!review.txt',
    'image!cat.jpg'
    ],
    function(review,cat){
      console.log(review);
      document.body.appendChild(cat);
    }
  );

使用text和image插件,则是允许require.js加载文本和图片文件。类似的插件还有json和mdown,用于加载json文件和markdown文件。

原文链接:https://segmentfault.com/a/1190000016647540

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42407.html

文章标题:require.js学习记录

相关文章
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
回到顶部