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

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

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 删除节点后是否需要将手动将事件解绑?
最新文章
又拍云(Upyun)CDN、云存储刷新链接缓存,API实例讲解 9
Linux Centos 使用 Redis service 启动,Redis service 脚本编写 38
恭喜SOJSON获得阿里云618“上云接力赛”第一名,获得代金券6.18万 202
Springboot 集成Freemarker 自定义标签解决方案 523
七牛云到底有多垃圾?用七牛云需要知道的事,不然不小心就一套房没了 28235
JavaScript怎么识别360浏览器?JS识别360急速模式方案,360流氓浏览器 1092
关于本站所有JavaScript 加密、混淆、解密、美化等安全说明 1839
Jsoup 提交参数乱码,解决思路,解决过程及解决方案 840
生成新浪短网址、百度短网址,t.cn / dwz.cn 的生成方式,短链还原 859
ICP怎么操作取消备案,企业、个人怎么自己申请取消备案? 635
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 179997
Elasticsearch教程(四) elasticsearch head 插件安装和使用 140504
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 138250
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 89404
Elasticsearch教程(六) elasticsearch Client创建 82568
Elasticsearch教程(一),全程直播(小白级别) 78877
Elasticsearch教程(二),IK分词器安装 77726
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 77180
Elasticsearch教程(五) elasticsearch Mapping的创建 70753
免费天气API,天气JSON API,不限次数获取十五天的天气预报 60871

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

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

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

支付扫码

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

正在加载... ...