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

在a.网页特效中直接使用 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文件
// 根据相对路径获取绝对路径

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'});
}
}

时间: 2024-10-01 22:46:57

JS 实现完美include载入实现代码的相关文章

JS实现完美include加载功能代码_实用技巧

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需要解决

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

 HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列  本文给大家分享的是使用HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列的方法和示例,非常的实用,特别是在BS架构的企业级应用,有需要的小伙伴可以参考下.     BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使

JS实现随机化快速排序的实例代码

这篇文章介绍了JS实现随机化快速排序的实例代码,有需要的朋友可以参考一下   算法的平均时间复杂度为O(nlogn).但是当输入是已经排序的数组或几乎排好序的输入,时间复杂度却为O(n^2).为解决这一问题并保证平均时间复 杂度为O(nlogn)的方法是引入预处理步骤,它惟一的目的是改变元素的顺序使之随机排序.这种预处理步骤可在O(n)时间内运行.能够起到同样作用的 另一种简单方法是在算法中引入一个随机元素,这可以通过随机地选择拆分元素的主元来实现.随机选择主元的结果放宽了关于输入元素的所有排列

js中switch case循环实例代码

 这篇文章主要介绍了js中switch case循环实例代码,有需要的朋友可以参考一下 代码如下: switch (objNameType) {   case 'PD':   valueUD = obj.id;   id = objName;   var loadVUD = UserData.load(exam, id);   if (loadVUD == null || loadVUD == undefined || loadVUD == '') {   var tmpTGId = obj.i

js表格字段排序的实例代码介绍

 本篇文章只要是对js表格字段排序的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1.比较函数生成器:    代码如下: /**  * 比较函数生成器  *   * @param iCol  *            数据行数  * @param sDataType  *            该行的数据类型  * @return  */ function  generateCompareTRs(iCol, sDataType) {      return   functio

js获取当前地址 JS获取当前URL的示例代码

 本篇文章主要是对js获取当前地址 JS获取当前URL的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <table width=100% cellpadding=0 cellspacing=0 border=0 >  <script language="javascript"> thisURL = document.URL;  thisHREF = document.location.href;  thisSLoc = self

JS 打印界面的CSS居中代码适用所有浏览器

 这篇文章主要介绍了JS 打印界面的CSS居中代码,需要的朋友可以参考下  代码如下: function preview(oper) {  if (oper < 10) {  bdhtml = window.document.body.innerHTML;//获取当前页的html代码  sprnstr = "<!--startprint" + oper + "-->";//设置打印开始区域  eprnstr = "<!--endpr

用js实现简单算法的实例代码_javascript技巧

一.冒泡排序 var arr1=[3,9,2,7,0,8,4]; for(var i=0;i<arr1.length;i++){ for(var j=i+1;j<arr1.length;j++){ var temp=0; if(arr1[i]>arr1[j]){ temp=arr1[i]; arr1[i]=arr1[j]; arr1[j]=temp; } } } alert(arr1); 二.快速排序 var a=[3,5,0,9,2,7,5]; function quickSort(a

JS类的封装及实现代码

JS类的封装及实现代码 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.  复制代码代码如下: function ShapeBase() {  this.show