JavaScript-如何在js代码中引用一个js模

JavaScript-如何在js代码中引用一个js模块？

S6 Modules (Browsers)

浏览器从Safari 10.1、Chrome 61、Firefox 60和Edge 16开始支持直接加载ECMAScript模块（不需要Webpack等工具）。

不需要使用Node.js的扩展名；浏览器完全无视模块/脚本的文件扩展名。

<script type="module">
  import { hello } from './hello.js'; 
  hello('world');
</script>

export function hello(text) {
  const div=document.createElement('div');
  div.textContent=`Hello ${text}`;
  document.body.appendChild(div);
}

ES6 Modules (Browsers+Dynamic)

脚本根据需要动态加载其他的js文件。

<script type="module">
  import('hello.js').then(module=> {
      module.hello('world');
    });
</script>

ES6 Modules (Node.js)

module.exports={
   hello: function() {
      return "Hello";
   }
}

const myModule=require('./mymodule');
let val=myModule.hello(); // val is "Hello"

Fetch

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(()=> {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Script标签加载

HTML中添加一个带有脚本URL的脚本标签。

脚本甚至可以在不同的服务器上()，<script>标签注入到网页的<head>中，或者插入到关闭的</body>标签之前。

avaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaScript实现”。

Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行数据管理。

作为全球领先的软件开发技术和低代码平台提供商，葡萄城专注开发技术和工具已经长达四十余年，一直以来引领着国内控件技术和数据分析工具的发展。SpreadJS表格控件作为葡萄城的核心产品，能够完美兼容 Excel 的功能和使用体验并高度匹配在线办公场景的需求。

SpreadJS可以为我们的Web应用提供更好的交互体验，以及更灵活的权限控制、数据整合、数据可视化、战略绩效测量 (SPM)、复杂的统计分析等。多年来，Excel 兼容性一直是SpreadJS最重要的功能之一。

SpreadJS 提供了熟悉的 Excel 电子表格界面。用户可以通过SpreadJS直接在页面端导入和导出 Excel 文件——这一切无需依赖 Excel。

在本博客中，我们将介绍如何按照以下步骤在 JavaScript 中，实现页面端电子表格导入/导出到 Excel：

1. 设置 JavaScript 电子表格项目

2. 添加 Excel 导入代码

3. 将数据添加到导入的 Excel 文件

4. 添加迷你图

5. 添加 Excel 导出代码

设置 JavaScript 电子表格项目

首先，我们可以使用托管在 NPM 上的 SpreadJS 文件。为此，我们可以使用命令行参数进行安装。打开命令提示符并导航到应用程序的位置。在那里，您可以使用一个命令安装所需的文件。

在这种情况下，我们需要基本的 Spread-Sheets 库、Spread-ExcelIO 和 jQuery：

npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery

SpreadJS 不依赖于 jQuery，但在这种情况下，我们使用它来提供简单的跨域请求支持，稍后我们将对其进行回顾。

一旦安装了这些，我们就可以在我们的代码中添加对这些脚本和 CSS 文件的引用：

<!DOCTYPE html>
<html>
<head>
<title>SpreadJS ExcelIO</title>
<script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

<link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>

</head>
<body>
<div id="ss" style="height:600px; width :100%; "></div>
</body>
</html>

除了 SpreadJS 和 jQuery 文件之外，我们还需要导入 FileSaver 库，为了便于后续程序处理，SpreadJS默认提供完整的文件流，FileSaver库可以用来把文件流转成文件下载到本地。

然后我们可以在页面中添加一个脚本来初始化 Spread.Sheets 组件和一个 div 元素来包含它（因为 SpreadJS 电子表格组件使用了一个画布，这是初始化组件所必需的）：

<script type="text/javascript">
$(document).ready(function () {
var workbook=new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
});
</script>
</head>
<body>
<div id="ss" style="height:600px ; width :100%; "></div>
</body>

添加 Excel 导入代码

我们需要创建一个客户端 ExcelIO 组件的实例，我们可以使用它来打开文件：

var excelIO=new GC.Spread.Excel.IO();

然后我们需要添加一个函数来导入文件。在此示例中，我们导入了一个本地文件，但您可以对服务器上的文件执行相同的操作。如果从服务器导入文件，您需要引用该位置。下面是一个输入元素的示例，用户可以在其中输入文件的位置：

<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />

一旦你有了它，你可以直接在脚本代码中访问该值：

var excelUrl=$("#importUrl").val();

导入函数的以下代码使用“excelUrl”变量的本地文件：

function ImportFile() {
var excelUrl="./test.xlsx";

var oReq=new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType='blob';
oReq.onload=function () {
var blob=oReq.response;
excelIO.open(blob, LoadSpread, function (message) {
console.log(message);
});
};
oReq.send(null);
}
function LoadSpread(json) {
jsonData=json;
workbook.fromJSON(json);

workbook.setActiveSheet("Revenues (Sales)");
}

无论您是在服务器上还是在本地引用文件，都需要在 $(document).ready 函数内的脚本中添加以下内容：

$(document).ready(function () {
$.support.cors=true;
workbook=new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
//...
});

在这种情况下，我们需要启用 Cross-Origin-Request-Support，因为我们可能会从 URL 加载文件。因此 $.support.cors=true;行，否则尝试加载它会导致 CORS 错误。

将数据添加到导入的 Excel 文件

我们使用本教程的“损益表”Excel 模板导入本地文件。

现在我们可以使用 Spread.Sheets 脚本在这个文件中添加另一个收入行。让我们在页面上添加一个按钮来执行此操作：

<button id="addRevenue">Add Revenue</button>

我们可以为该按钮的单击事件处理程序编写一个函数来添加一行并从前一行复制样式以准备添加一些数据。要复制样式，我们需要使用 copyTo 函数并传入：

1. 原始和目标行和列索引

2. 行数和列数

3. 样式的 CopyToOptions 值

document.getElementById("addRevenue").onclick=function () {
var sheet=workbook.getActiveSheet();
sheet.addRows(newRowIndex, 1);
sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);
}

以下用于添加数据和 Sparkline 的脚本代码将包含在此按钮单击事件处理程序中。对于大部分数据，我们可以使用 setValue 函数。这允许我们通过传入行索引、列索引和值来在 Spread 中的工作表中设置值：

sheet.setValue(newRowIndex, 1, "Revenue 8");
for (var c=3; c < 15; c++) {
sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}

在 P 列中设置 SUM 公式以匹配其他行并为 Q 列设置百分比：

sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])")
sheet.setValue(newRowIndex, 16, 0.15);

最后，我们可以再次使用 copyTo 函数将先前行中的公式复制到 R 到 AD 列的新行，这次使用 CopyToOptions.formula：

sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);

添加迷你图

现在，我们可以添加迷你图来匹配其他数据行。为此，我们需要提供一系列单元格以从中获取数据以及迷你图的一些设置。在这种情况下，我们可以指定：

1. 单元格的范围，我们只是将数据添加到

2. 使迷你图看起来像同一列中的其他迷你图的设置

var data=new GC.Spread.Sheets.Range(11, 3, 1, 12);
var setting=new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor="Text 2";
setting.options.lineWeight=1;
setting.options.showLow=true;
setting.options.showHigh=true;
setting.options.lowMarkerColor="Text 2";
setting.options.highMarkerColor="Text 1";

之后，我们调用 setSparkline 方法并指定：

1. 迷你图的位置

2. 数据的位置

3. 迷你图的方向

4. 迷你图的类型

5. 我们创建的设置

sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);

如果您现在尝试运行代码，它可能看起来有点慢，因为每次更改数据和添加样式时工作簿都会重新绘制。为了显着加快速度并提高性能，Spread.Sheets 提供了暂停绘画和计算服务的能力。让我们在添加一行及其数据之前添加代码以暂停两者，然后在之后恢复两者：

workbook.suspendPaint();
workbook.suspendCalcService();
//...
workbook.resumeCalcService();
workbook.resumePaint();

添加该代码后，我们可以在 Web 浏览器中打开该页面，并查看 Excel 文件加载到 Spread.Sheets 中并添加了收入行。重要提示：请记住，出于安全考虑，Chrome 不允许您打开本地文件，因此您需要使用 Firefox 等网络浏览器才能成功运行此代码。或者，从网站 URL 加载文件应该可以在任何浏览器中正常打开。

添加 Excel 导出代码

最后，我们可以添加一个按钮来导出包含添加行的文件。为此，我们可以使用 Spread.Sheets 中内置的客户端 ExcelIO 代码：

function ExportFile() {
var fileName=$("#exportFileName").val();
if (fileName.substr(-5, 5) !=='.xlsx') {
fileName +='.xlsx';
}
var json=JSON.stringify(workbook.toJSON());

excelIO.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
if (e.errorCode===1) {
alert(e.errorMessage);
}
});
}

该代码从 exportFileName 输入元素获取导出文件名。我们可以定义它并让用户像这样命名文件：

<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />

然后我们可以添加一个按钮来调用这个函数：

<button id="export">Export File</button>
document.getElementById("export").onclick=function () {
ExportFile();
}

添加收入行后，您可以使用“导出文件”按钮导出文件。确保添加 FileSaver 外部库以允许用户将文件保存在他们想要的位置：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

成功导出文件后，您可以在 Excel 中打开它，并查看文件与导入时的外观相同，只是现在我们添加了额外的收入行。

这只是一个示例，说明如何使用 SpreadJS JavaScript 电子表格将数据添加到 Excel 文件，然后使用简单的 JavaScript 代码将它们导出回 Excel。

时候，我们会碰到这样一种情况：我们的wordpress网站主题模板已经定型了，但是，我们后期又想向wordpress网站添加一些新功能，这时候，我们该怎么办？是继续修改wordpress网站主题模板吗？当然，修改主题模板肯定可以。但是时间久了，对当前的主题模板可能会有些生疏，修改起来可能会有点吃力。还有没有其它方式向wordpress网站添加新功能？当然是有的了。在部分功能应用上，我们可以使用wp_head()这个函数 + 插件的形式来完成一些功能。下面一起来看看wp_head()函数是如何来将插件数据插件前台页面的。

一、给wordpress网站创建插件。

进入到wordpress网站的插件目录/wp-content/plugins/，在这个插件目录下创建一个app目录，也就是要创建一个名为app的插件。如下图：

然后，在这个app插件目录下创建2个文件，一个bbb.css文件和index.php文件，如下图：

这里的bbb.css文件是这个插件的样式文件，index.php是这个app插件的主页文件。我们这里要实现的功能，只是一个演示功能，就是要修改前台页面字体的大小和颜色。

index.php文件代码如下：

<?php/*plugin name: app //这个是必须的，否则后台插件列表中就找不到这个插件plugin uri: http://wanlimm.comauthor: 马不停蹄version: 1.0description: 这是一个使用wp-head()函数的插件*/function my_head(){ //向wordpress网站头部添加一个样式文件echo '<link rel="stylesheet" href="'.WP_PLUGIN_URL.'/app/bbb.css">';}if(!is_admin()){ //如果不是后台，就把my_head函数添加到wordpress的动作勾子wp_head勾子里。add_action("wp_head","my_head");}

bbb.css文件的代码如下：

body{color:red; font-size:40px;}

把wordpress网站前台页面的文字颜色变成红色，字体大小变成40像素。

二、wordpress网站后台插件列表中启用插件。

通过第一步的添加后，我们就可以在wordpress网站的后台插件列表中看到这个app插件了，如下图：

我们点击“启用”按钮，启用这个app插件。插件只有被启用了，它的功能才会被应用到wordpress网站的前台页面当中去。当然，虽然我们现在启用了，我们wordpress网站的前台的文字字体依然没有变化。如下图（我们上节课添加的内容）。

三、在wordpress网站主题前台添加调用代码。

通过上面两步，我们已经准备好了功能，就等着我们的wordpress网站前台调用呢。这时，我们需要使用到wp_head()这个头部函数，这个头部函数的功能还是非常强大的，它可以把我们向wordpress的wp_head勾子里添加的所有动作函数添加到wordpress网站的前台页面中。不过，这个wp_head()函数必须添加在wordpress网站前台页面的< head>标签之内才有效，如下图：

这时，我们看一下wordpress网站的前台页面，看看页面字体有没有变化。这时，字体变大了，也变成了红色。如下图：

之所以旁边的“返回首页”是蓝色，因为它是链接，想要修改它的颜色，必须单独为它设置颜色。我们再来看一下源代码，如下图，wp_head()函数在wordpress网站的前台的< head>标签中插入了我们创建的插件app的样式文件bbb.css。

?当然，wp_head()函数在插件bbb.css样式文件的同时，会向< head>标签插入很多其它的代码，有些代码对我们根本没什么用处，我们是可以通过一些手段来处理掉了，这个在我们后期的文章中会有相关的介绍。

好了，到这里，本节就接近尾声。本节课的目的，主要是介绍“如何通过wp_head()函数向wordpress网站的前台页面的头部添加数据代码”，这个应用非常广泛，很多wordpress插件都要使用到wp_head()这个函数，如果不使用这个函数，这些插件就无法使用。

以上就是我的观点，如有不同观点，欢迎发表评论。同时，欢迎【点赞、分享、收藏】和【关注】我。

在线咨询

上一篇：「年报」市场监管局手把手教您公示“年报信息”和“即时
下一篇：CSS篇-自适应垂直居中

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商