文章10
标签21
分类3
通过 Javascript 随机调用 Javascript

通过 Javascript 随机调用 Javascript

通过一段简短的Javascript代码来随机调用外部Javascript文件。

🌈 代码实例

本教程拿我的一个开源项目“『书摘。』”来举例。

以下为『书摘。』v2.0.0 haoju.js中代码的一部分:

function gethaojudata() {  

    var haojudata = ["src/haoju/1.js","src/haoju/2.js"]; // 枚举好句数据源

    var js = document.createElement("script"); 
     js.src = haojudata[Math.floor(Math.random()*2)]; // 生成随机数、枚举对象并填充标签参数
     js.type = "text/javascript";   // 引入的文件类型
     document.getElementsByTagName("body")[0].appendChild(js)  // 引入到HTML文档

}

setTimeout("gethaojudata()","0"); // 调用函数

📕 原理说明

莫做伸手党,知其然,更要知其所以然,实现原理究竟是什么呢?

让我们拆解以上代码,逐层分析:

先看函数gethaojudata()中的第一个变量haojudata(为了便于说明,文件名做了适当调整):

var data = ["1.js","2.js"]; 

这是一个简单的数组,存储了两个值,也就是我们需要随机调用的两个外部JS文件。此处是Javascript的基础知识,不做过多解释,可在w3school详细了解。

var js = document.createElement("script"); 
     js.src = haojudata[Math.floor(Math.random()*2)]; 
     js.type = "text/javascript";
     document.getElementsByTagName("body")[0].appendChild(js)  // 引入到HTML文档

再看函数gethaojudata()中的第二个变量js,此变量中的内容相较于上一个变量中的内容稍微复杂了一些,现在我们来拆解分析它:

document.createElement("script");

上面是一个典型的Document.createElement方法。

MDN是这样描述它的:在 HTML 文档中,Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。

根据MDN的描述以及HTML的相关知识,我们可以得知,以上代码代表的是创建一个HTML元素script

 js.src = haojudata[Math.floor(Math.random()*2)]; 
 js.type = "text/javascript";

以上两组变量声明了HTML标签script的参数:srctype。变量的值即为参数的值。

其中,变量js.src的值使用了Math.floor()Math.random()两种Javascript内置对象,Math.floor()返回小于或等于一个给定数字的最大整数;Math.random()返回一个浮点,伪随机数在范围从0到小于1。两种方法连用,我们就可以生成随机数了。

注意:Math.random()*2中的2,随上文中变量data中数组的值的数量而变化,即你需要调用几个外部JS文件,就把数字2换成几。

变量js.type是一个变量的基本模型,不做过多解释,声明了引用的文件为Javascript文件。

document.getElementsByTagName("body")[0].appendChild(js)

以上代码的含义是将变量js的内容引入到HTML文档的body标签中。

此处推荐将内容引入至body标签,浏览器会在页面加载的时候执行。

setTimeout("gethaojudata()","0");

最后再来看以下函数外的setTimeout,此方法用于在指定的毫秒数后调用函数或计算表达式,此处含义为加载到此Javascript后立即执行函数。

Author:fly6022
Link:http://fly6022.fun/2020/08/08/2020-08-08-01/
版权声明:本文章采用 署名 4.0 国际 (CC BY 4.0) 协议进行许可,转载请注明出处。