JS 实现完美include载入实现代码


Posted in Javascript onAugust 05, 2010

js为什么需要include?让我们想想这样1个场景,a.js 需要用到1个公用的common.js,当然你可以在用到a.js的页面使用<script src="common.js">,但假设有5个页面用到了a.js,你是不是要写5遍<script。而且要是以后a.js 又需要引用common2.js,你是不是又的修改5个页面了?
已有js include的一些问题

在写这个之前在网上搜索了些资料,发现以前写的include都存在2个问题,这也是include需要解决的比较重要的2个问题。

1、相对路径的问题: 在a.js中使用include("../js/common.js"); include 函数中肯定是使用相对路径,是相对a.js的路径。而a.js在html中使用<script>嵌入有可能是相对路径,有可能是绝对路径。 include函数如何才能真正确定common.js的绝对路径,或者是相对html的相对路径。网上一些为了解决这个问题,还需要加一些js变量,不方便。

2、引用的问题。 网上include函数的实现几乎都是使用下面2种方式插入common.js

document.write("<script src='" + .. + "></script>")

或者

var s = document.createElement("script");

s.src = ...;

head.insertAfter(s,...);

document.write 输出的脚本会在a.js后面加载,而createElement("script")创建的脚本是非阻塞加载。 所以如果在common.js加载完毕之前,a.js中调用了common.js的函数就会报错。
实现

解决上面2个问题,就可以实现js include。

第1个问题,我的方法是先获取到a.js在html中的绝对路径(如果是相对路径,就转为绝对路径),然后再把common.js的路径转为绝对路径。

第2个问题,采用同步的ajax来请求common.js,这样就不会出现引用问题。

实现代码如下:

// 根据相对路径获取绝对路径 
function getPath(relativePath,absolutePath){ 
var reg = new RegExp("\\.\\./","g"); 
var uplayCount = 0; // 相对路径中返回上层的次数。 
var m = relativePath.match(reg); 
if(m) uplayCount = m.length; 
var lastIndex = absolutePath.length-1; 
for(var i=0;i<=uplayCount;i++){ 
lastIndex = absolutePath.lastIndexOf("/",lastIndex); 
} 
return absolutePath.substr(0,lastIndex+1) + relativePath.replace(reg,""); 
} 
function include(jssrc){ 
// 先获取当前a.js的src。a.js中调用include,直接获取最后1个script标签就是a.js的引用。 
var scripts = document.getElementsByTagName("script"); 
var lastScript = scripts[scripts.length-1]; 
var src = lastScript.src; 
if(src.indexOf("http://")!=0 && src.indexOf("/") !=0){ 
// a.js使用相对路径,先替换成绝对路径 
var url = location.href; 
var index = url.indexOf("?"); 
if(index != -1){ 
url = url.substring(0, index-1); 
} 
src = getPath(src,url); 
} 
var jssrcs = jssrc.split("|"); // 可以include多个js,用|隔开 
for(var i=0;i<jssrcs.length;i++){ 
// 使用juqery的同步ajax加载js. 
// 使用document.write 动态添加的js会在当前js的后面,可能会有js引用问题 
// 动态创建script脚本,是非阻塞下载,也会出现引用问题 
$.ajax({type:'GET',url:getPath(jssrc,src),async:false,dataType:'script'}); 
} 
}

在a.js中直接使用 include("../js/common.js");

多请求的问题

使用上面的include看上去挺爽的,不过却带来另外1个严重的问题,就是多发送了1个ajax的请求。

我们常常为了WEB性能,而合并js,减少请求。但使用include后却偏偏多了请求。如果这个问题不解决,相信很多人都不会在正式产品中使用include的了,除非是局域网产品。

如何解决这个多请求的问题,我也思考很久,最后觉的单单使用客户端js是没办法解决了。所以就想到了使用服务端代码来解决

还记的我之前有文章介绍 "js、css的合并、压缩、缓存管理"的时候,就通过服务器端代码在程序启动时候去合并js。

所以我把include多请求的解决方案也加到里面去。就是在程序启动的时候去查找所有的js,发现有使用include的就把include中common.js的源代码替换该include函数。这样a.js中在运行的时候就没有include函数,而是真真包含了common.js的内容的js文件

后语

丫的。说到最后,怎么又把所有的include都替换掉了,哪之前说的那么多不白说了。

个人觉得,每个产品都应该要区分开发环境和产品环境(一般通过配置文件进行区分),在开发环境应该以开发效率为首要,而产品环境则以性能为首。所以这里的inlcude就应该要区分对待,在开发环境中使用js include来提高开发和维护效率,而在产品环境中则自动把所有include替换成真真的js文件的内容。
[作者]:BearRui(AK-47)

Javascript 相关文章推荐
javascript弹出页面回传值的方法
Jan 28 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 #Javascript
JavaScript 获取当前时间戳的代码
Aug 05 #Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 #Javascript
Js获取事件对象代码
Aug 05 #Javascript
zeroclipboard复制到剪切板的flash
Aug 04 #Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 #Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 #Javascript
You might like
php 设计模式之 工厂模式
2008/12/19 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
浅析javascript的return语句
2015/12/15 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
Python实现的扫码工具居然这么好用!
2021/06/07 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python