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需要解决的比较重要的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)

时间: 2010-08-03

静态页面实现 include 引入公用代码的示例

一直以来,我司的前端都是用 php 的 include 函数来实现引入 header .footer 这些公用代码的,就像下面这样: <!-- index.php --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

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

JS实现图片预加载之无序预加载功能代码

图片预加载之无序预加载的效果图如下所示,如果大家感觉不错,请参考实现代码. 具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>PreLoading</title> <style> *{margin:0; padding:0; border:none; outline:0

纯JS图片批量预加载技术代码

图片批量加载 function $id(id){ return document.getElementById(id);} function $c(tagName){ return document.createElement(tagName);} window.onload = function(){ imageLoad( { url:function(v){ v = []; for(var i=1; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

JS中使用gulp实现压缩文件及浏览器热加载功能

gulp类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载.  先再命令行里输入   npm install gulp -g   下载gulp 二.创建gulp项目 创建一个你需要项目文件夹,然后在根目录输入  npm init  (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息.比如你用到的各种依赖) 三.使用npm install 安

MUI 上拉刷新/下拉加载功能实例代码

新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldown/ <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> &l

jQuery实现下拉加载功能实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = ''; if(page=="") page=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll( function(event){ //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 10 >= $(docum

用js判断页面是否加载完成实现代码

用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 代码如下: 复制代码 代码如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if(document.readyState == "complete") //当页

mui上拉加载功能实例详解

最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="com

JavaScript模仿Pinterest实现图片预加载功能

前言 对于Pinterest网站,从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局.但是今天,给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节. 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果. 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会