Javascript模块化编程,本站使用 require.js 优化JS加载, require.js下载

soゝso 2017-05-22 10:04:16 1968

require.js  是非常优秀、流行的异步并且有顺序(依赖)加载的一个组件。对于站点使用很多 Javascript  的站长来说,无疑是福音。

首先这个站是个工具类型站点,每个页面加载的 Javascript  非常多,虽然本站用了 CDN  加速,但是每次打开页面都需要做同步的加载N多JS,导致速度减慢,影响用户体验,其实还影响 SEO  ,因为爬虫来爬取内容的时候,很多超时的现象。

前段时间和群里的一个 SEO  大牛交流,一针见血的指出了这个问题,我下决心要改,但是由于各种设计,再加上防止别人拔站,所以JS里做了很多验证,导致难度系数大大提升。

选型 require.js  ,保证JS 异步加载,并且模块化使用,这对于本站是JS 几乎是重构。但是坚持下去就能完美解决。那么下面来说下 require.js  吧。

一、我为什么要用require.js

这只是一部分,这么多?页面一加载全部得加载,要不然页面就一直等着响应。而且不同的页面需要引入的JS ,有相同的,有不同的,从管理上来说,乱的很。

二、require.js 加载。

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

data-main="js/main":是加载完毕 require.js  后,调用的js js/main.js  ,认定js/main.js 为主模块,因为require.js 默认结尾就是js ,所以main 不用写.js 的后缀。

async:异步加载

defer: IE  浏览器不支持async ,但是支持defer

三、主模块main.js代码。

console.log("init main");

require.js  加载完毕后,会在控制台输出“init main” ,这表示加载是成功的 。但是我们想要的不只是那么一点,我们要的很多,要依次加载N js

那我们来看下我们需要的。首先要输出一个模块定义,其实就是需要加载的js 用别名表示一下,定义一下。

使用require.config() 方法,我们可以对模块的加载行为进行自定义。require.config() 就写在主模块(main.js )的最上面。参数就是一个对象,这个对象的paths 属性指定各个模块的加载路径。

require.config({
	paths: {
		"a": "a",
		"b": "b"
		}
});

paths:是配置js文件和别名指定,如 "a":"a" 表示配置了一个a.js ,并且别名指定为a 。同理b 也是。

key 表示别名,value 表示js 文件,可以不用写“.js” ,默认结尾就是“.js” ,如果有路径带上路径。如:

require.config({
	paths: {
		"a": "/js/common/a",
		"b": "/js/common/b"
		}
});

如果路径一致:也就是a.js b.js 是在相同文件下,那么可以这样写:

require.config({
	baseUrl: "js/common",
	paths: {
		"a": "a",
		"b": "b"
		}
});

都是一个意思。就是减少了代码量。

如果是远程地址,直接写上远程地址即可:

require.config({
	paths: {
	"a": "http://open.sojson.com/common/js/a",
	"b": "b"
	}
});

配置已经定义好映射关系了,这时就要使用AMD规范定义的的require() 函数加载 Javascript  文件了。

require(['a', 'b'], function (a, b){

	console.log(a,b )

});

这个时候我是先记载a.js  ,然后再加载b.js ,然后输出。

require() 函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['a', 'b'] ,即主模块依赖这二个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require() 异步加载a,b,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

下面来一个真实的栗子:

require.config({
	baseUrl: "js/common",
	paths: {
		"jquery": "jquery/jquery1.8.3.min",
		"cookie": "jquery.cookies.min"
		}
});

require(['jquery', 'cookie'], function ($, c){

	//do something

});

这个定义了一个baseUrl ,而 jquery  还是写了路径,表示在这个baseUrl 下,再衍生路径,而jquery.cookie 没有前面加路径,因为他就在js/common 下。

那么jquery.cookie 依赖 jquery  ,所以 jquery  要放到前面,依次加载成功后,调用回调方法,返回2个参数,第一个是 jquery  ,第二个是jquery.cookie

四、AMD模块写法。

require.js  加载的模块,采用AMD 规范。也就是说,模块必须按照AMD 的规定来写。

具体来说,就是模块必须采用特定的define() 函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

假定现在有一个math.js 文件,它定义了一个math模块。那么,math.js 就要这样写:

define(function (){
  var add = function (x,y){
    return x+y;
  };
  return {
    add: add
  };
});

记载调用的方法如下:

require(['math'], function (math){

  console.log(math.add(1,1));

});

这个时候,控制台会输出“2”。如果有多个,在第一个参数里写多个就可以了,第一个参数刚刚上面说了是个数组,支持多个。

五、加载非规范的模块

理论上, require.js  加载的模块,必须是按照AMD规范、用define() 函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如 jQuery  )符合AMD规范,更多的库并不符合。那么, require.js  是否能够加载非规范的模块呢?那必须是可以的。

这样的模块在用require() 加载之前,要先用require.config() 方法,定义它们的一些特征。

require.config() 接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim 属性,专门用来配置不兼容的模块。具 体来说,每个模块要定义

(1)exports值(输出的变量名),表明这个模块外部调用时的名称;

(2)deps数组,表明该模块的依赖性。

require.config({
	shim: {
	  'jquery.scroll': {
	    deps: ['jquery'],
	    exports: 'jQuery.fn.scroll'
	  },
	  	'jquery.cookie': {
	    deps: ['jquery'],
	    exports: 'jquery.cookie'
	  }
	 //多个往后面添加。
	}
});

require.js  提供了很多插件,具体请看这里:https://github.com/requirejs/requirejs/wiki/Plugins

require.js 下载请看附件;


版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/175.html

转载时必须以链接形式注明原始出处及本声明。


附件下载:

备注:点击文件名下载,附件源来自云端,只能在本站下载。复制下载链接无效。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

相关文章
Javascript模块化编程本站使用 require.js 优化JS加载require.js下载
JavaScript function 类型的使用说明
怎么合理管理、提高Javascript的性能
Javascript 生成UUID,Java生成UUID
JSON.stringify 函数 (JavaScript)讲解
js html5 canvas制作多个小球碰撞的动画效果
JS中 “is not defined” 如何判断defined,defined和undefined 的区别
一些Node.js开发工具、开发包、框架等总结
详解JavaScript中splice()方法,有Demo详细介绍
Javascript 删除节点后是否需要将手动将事件解绑?
最新文章
Macbook teamviewer 突破5分钟,苹果电脑重置 Mac 地址,100%解决限制 220
腾讯云代金券 10000 元/ 30000 代金券领取技巧 324
SEO 换友情链接的主意事项,友情链接断链、友情链接套路说明 229
Springboot + Mybatis,数据库多数据源配置项目Demo【源码下载】 1903
Mac mtr 安装并使用,mrt: command not found 299
Java 集成阿里云消息队列,日志消息存储 497
域名备案注意事项,网站域名ICP备案快速通过攻略【干货分享】 472
Springboot 集成Aliyun MQ消息队列,Aliyun 消息队列配置及代码实现 837
SpringBoot 集成Spring-data-redis,redis对象序列化存储 2029
天气API,全国天气 JSON API接口,可以获取十五天的天气预报 604
最热文章
Elasticsearch教程(四) elasticsearch head 插件安装和使用 126781
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 108004
Elasticsearch教程(六) elasticsearch Client创建 78810
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 74434
Elasticsearch教程(二),IK分词器安装 73217
Elasticsearch教程(一),全程直播(小白级别) 65782
Elasticsearch教程(五) elasticsearch Mapping的创建 61877
Elasticsearch教程(三),IK分词器安装 (极速版) 56361
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 53539
Java 解析JSON,JSON-LIB jar包下载和使用。 48973

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

正在加载... ...