这篇文章上次修改于 884 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

之前看过一次,现在写插件有这个需求了,就去找了一下.有一说一,这种骚操作还是比较难找的,如何提问都是个问题.

原理

原理都是通过getElement来实现的,要么找标签,要么找ID尔尔.

具体的赋值方法看上去区别就比较大了,有URL传参的,也有使用data属性的.另外全局变量也行,但最好别用.写项目时万一重名那不是得找半天.

具体实现

URL赋值

链接不美观而且解析还麻烦,懒得写了

DATA属性赋值

同样通过get来查找元素,data数据写法和URL的?后一样

document.getElementById('MyScript').getAttribute('data');

全局变量赋值

没试过,纯云.

使用global,别的没什么好说的.

单独赋值

我是比较偏向这种写法,看起来很美观,键值对一一对应.所以这里写的比较详细

<script type="text/javascript" msg="阿姨洗铁路" src="./AliveTitle.js"></script>

//引用JS的内容

msg='';
let data=document.getElementsByTagName('script');
msg=data[data.length - 1].getAttribute('msg')??msg;
console.log(msg);
//控制台输出"阿姨洗铁路"
首先查找script标签,长度减一即为当前标签,因为HTML渲染是从上往下的.然后取当前标签,获取属性值.若不存在则用初始值,存在则替换.

然后又在别的项目里发现了看上去更简单的方法

function getAttr(script, attr, default_val) {
return Number(script.getAttribute(attr)) || default_val;
}

// 获取自定义配置

var ribbon = document.getElementById('ribbon');  // 当前加载的script

config = {
zIndex: getAttr(ribbon, "zIndex", -1), // z-index
alpha: getAttr(ribbon, "alpha", 0.6), // alpha
ribbon_width: getAttr(ribbon, "size", 90), // size
};

采用对象来复制的确看上去更舒服,然后再给 script 标签一个唯一的特征属性比如 id 用于获取元素属性.最后再用运算符来判断变量的值是否更新.在这里使用 || 要比 ?? 更好,因为在格式化输出 H5 代码的时候即使值为空,只要属性设置了那 ?? 判断就永不为空

终极方案

不搞那么多花里胡哨的的,直接玩动态就行.比如用 PHP 输出 JavaScript ,然后接收 GET 值来动态改变某些部分或者只输出一部分脚本.但如果想看上去更像 .js 或者省略后缀需要配置别的东西,自行研究.