如何实现Javascript的include功能?

发布网友发布时间：2022-04-28 16:34

共3个回答

懂视网时间：2022-05-15 13:43

一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的，本文主要为大家带来一篇静态页面实现 include 引入公用代码的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

就像下面这样：

<!-- index.php -->
 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <?php include('header.php'); ?>
 <p>页面主体部分</p>
 <?php include('footer.php'); ?>
</body>
</html>

<!-- header.php -->
<header>这是头部</header>

<!-- footer.php -->
<footer>这是底部</footer>

直到最近某个项目需要做一个 webapp，是通过 HBuilder 将静态页面打包成 APP，这就让我碰到难题了。

如果是小项目，那就直接手动多复制粘贴几遍，但如果页面较多，复制粘贴的方案明显不靠谱，维护成本也高。

在查了很多资料后，最终确定用 gulp 来解决，具体操作如下：

1、安装 gulp 和 gulp-file-include

首先新建个文件夹，在终端里定位到文件夹的位置，然后进行 npm 初始化

npm init

然后安装 gulp

npm install gulp --save-dev

接着安装 gulp-file-include

npm install gulp-file-include --save-dev

2、新建并配置 gulpfile.js

接着我们手动新建一个 js 文件取名为 gulpfile，并在里面写入如下代码：

var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
 
gulp.task('fileinclude', function () {
 // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
 gulp.src(['page/**/*.html', '!page/include/**.html'])
 .pipe(fileinclude({
 prefix: '@@',
 basepath: '@file'
 }))
 .pipe(gulp.dest('dist'));
});

3、创建项目目录结构，并添加测试代码

项目的整体目录结构应该是这样

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

然后我们添加测试代码，header.html 和 footer.html 没太多好说的，主要是 index.html 要特别注意引入的方式，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 @@include('include/header.html')
 <p>页面主体部分</p>
 @@include('include/footer.html')
</body>
</html>

4、运行

在终端里敲入以下代码，看执行效果

gulp fileinclude

会发现，多了个 dist 文件夹，里面有一个 index.html 文件，gulp-file-include 已经帮我们把最终编译好的 index.html 文件生成好了。

可能你已经能举一反三了，在 gulpfile.js 里，我们可以手动设置最终生成文件的位置，就是这句话

gulp.dest('dist')

5、自动编译

静态页面引入公用代码的问题已经解决了，但每次编写源 html 后，都要去终端里手动执行下编译操作还是很麻烦，那能不能让文件自动编译呢？答案一定是可以的。

gulp 有个 watch 方法，就是监听文件是否有变动的，我们只需稍微修改下 gulpfile.js 文件，增加一段监听代码，如下：

var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
 
gulp.task('fileinclude', function () {
 // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
 gulp.src(['page/**/*.html', '!page/include/**.html'])
 .pipe(fileinclude({
 prefix: '@@',
 basepath: '@file'
 }))
 .pipe(gulp.dest('dist'));
});
 
gulp.task('watch', function () {
 gulp.watch('page/**/*.html', ['fileinclude']);
});

写好之后，我们只需在终端里执行

gulp watch

我们每次保存源 html 后，gulp 就会自动帮我们编译一遍。

至此，静态页面如何实现 include 引入公用代码的问题，顺利解决，最后附上相关资料。

热心网友时间：2022-05-15 10:51

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");

热心网友时间：2022-05-15 12:09

如果依赖关系复杂点的话，简单的加载方式可能会导致重复加载。长久之计是使用模块化js库，比如require.js。
简单的话，直接在1.js文件内引用另外一个js文件即可。