H5有坑，名字不可以乱叫

XGBCCC 发布于2019-08-20 15:27 / 3315人阅读

问题来自一位叫小白的同事的疑问，问题如下：

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 2019-08-23 10:30 评论0 收藏0
H5页面二次分享

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

layman 2019-08-02 11:03 评论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 2019-08-23 18:29 评论0 收藏0