资讯专栏INFORMATION COLUMN

H5有坑,名字不可以乱叫

XGBCCC / 3411人阅读

问题来自一位叫小白的同事的疑问,问题如下:

var str = "[img_/storage/uploads/2016/1465955105.2148.jpg]";
str = str.replace(/[img_(S*)]/g,"");

或者

var str = "[img_/storage/uploads/2016/1465955105.2148.jpg]";
var name = new RegExp("[img_(S*)]","g");
str = str.replace(name,"");

正则大神现身,这两种写法有什么区别?为什么结果不同?

无论怎么试都有问题,首先上面的正则有点问题,我们调整一下:

var str = "[img_/storage/uploads/2016/1465955105.2148.jpg]";
var aa = /[img_(S*)]/g;
var bb = new RegExp("[img_(S*)]","g");
var cc = "";

//方法1
str.replace(aa, cc);

//方法2
str.replace(bb, cc);

结果一样了,这就是一个正则的问题
本来到这里就完了,可是小白还是很执着的,为什么他写的不行,他再次用正确的正则来测试,代码贴出来如下:

显然他之前也测试过,只是用 replace 来做验证的,我测试也不通,就测试 new RegExp得出的结果是否一样了,不知不觉,改了变量名来测试了,重复的东西别我提取,专门测试不一样的地方,反而避免了这个 name 变量名的问题

var str = "[img_/storage/uploads/2016/1465955105.2148.jpg]";
var name = new RegExp("[img_(S*)]","g");
str = str.replace(name,"");

怎么会还是不行,这次正则绝对没错了,都测试通过了

结果这次在控制台测试,确实不通过,咦为什么?

小白得出个暂时的结论:var 正则,不能用 name 来命名

这就奇怪了,哪有这样的道理,你以为你是谁啊,你又不是关键字、保留字,还不让作为变量用了,凭什么不让命名?还限制正则不让用?

没有这样的道理,这时我才注意到 name 这个名字的特别处,我有个印象,name 是作为 window 的一个属性在使用,作为当前窗口(tab 页)的名称,即使网站都跳转走了,只要当前窗口没变,那么 name 值一直存在,不跟 url 相关,这可以用来为跨域来用

这里难道有问题,于是专一测试 name 这个特殊变量:

var name = new RegExp("[img_(S*)]","g");
//输出 name
//"/[img_(S*)]/g"

而

var bb = new RegExp("[img_(S*)]","g");
//输出 bb
//[img_(S*)]/g

在控制台下调试,不细看就错过去了,差了分号,上面的结果实际变成字符串了

奇怪啊,正则不行,变量类型都变了,我试试其他数据类型,

也是不行,但在闭包里可以了,这是 name 这个值作为特定属性,被限制为“强数据类型”了,js 中一直没有此概念,普通变量,我想什么类型就什么类型,赋值就可以了,这里一个大坑,真是不可料想,变量类型不可变(自动转为 String 类型)

还有其他变量是这样的么,呵呵,这根本没法预料,这个浏览器用这个名字,鬼知道那么多浏览器,谁会不会偶尔又用了一个变量名字呢,他又有什么限制呢!!!

旧事重提,一直说尽量避免使用全局变量,今天又上了一课,如果不遵守,终会摔跟头,而且死都不知道怎么死的,另外变量名称真的不是随便用的,良好的命名规范,能避免出现这种情况,和非意义的变量名aa, bb相比,name明显有具体指代,指某名称,作为一个正则表达式的值来用,确有不合理之处,名字不可以随便叫啊。不过也正因为如此,发现这个变量名原来还有这种限制。

我们当前的开发,几乎不存在使用全局变量的情况了,全都使用闭包封装了,能避免变量被污染(或者出现上面变量类型被限制的情况),但个别情况,简单页面,还是存在不适用闭包把自己的变量全部包装的情况,这是很可能出问题

所以只要能用闭包包装,尽量把自己的逻辑包装起来,免得再出现类似的诡异问题

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82255.html

相关文章

  • H5页面二次分享

    摘要:对于页面来说二次分享还是蛮重要的,毕竟还是微信发出去之后习惯性的使用自带的分享功能。通篇看完的话,基本上能避过很多坑记得微信文档习惯把一些坑写在后面,不放在一起先说说,怎么微信怎么做二次分享文档地址,通过引入官方。 对于H5页面来说二次分享还是蛮重要的,毕竟qq还是微信发出去之后习惯性的使用自带的分享功能。和PC端不同,PC直接复制地址了。前两天在做请柬,踩了不少的雷,个人开发和公司开...

    evin2016 评论0 收藏0
  • H5页面二次分享

    摘要:对于页面来说二次分享还是蛮重要的,毕竟还是微信发出去之后习惯性的使用自带的分享功能。通篇看完的话,基本上能避过很多坑记得微信文档习惯把一些坑写在后面,不放在一起先说说,怎么微信怎么做二次分享文档地址,通过引入官方。 对于H5页面来说二次分享还是蛮重要的,毕竟qq还是微信发出去之后习惯性的使用自带的分享功能。和PC端不同,PC直接复制地址了。前两天在做请柬,踩了不少的雷,个人开发和公司开...

    layman 评论0 收藏0
  • h5 vue引入微信sdk 实现分享朋友圈,分享给朋友,获取地理位置

    最近入职的公司主要做微信端的h5,所以在所难免要引用sdk。虽然官方文档写的还算清楚,但是还是有坑。 1.在index.html中 引入微信sdk 2.在assets/js 下新建文件 wx.js export default { wxShowMenu: function (that,sign=) { let url = window.location.href.split(#)[...

    tomorrowwu 评论0 收藏0

发表评论

0条评论

XGBCCC

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<