这篇文章上次修改于 1060 天前，可能其部分内容已经发生变化，如有疑问可询问作者。
之前看过一次,现在写插件有这个需求了,就去找了一下.有一说一,这种骚操作还是比较难找的,如何提问都是个问题.
原理
原理都是通过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 或者省略后缀需要配置别的东西,自行研究.
没有评论