魅族官网里面的JS代码,有点疑问。

if (("undefined" == typeof document.referrer || -1 === document.referrer.indexOf("http://m.meizu.com")) && navigator.userAgent.match(/android|webos|ip(hone|ad|od)|opera (mini|mobi|tablet)|iemobile|windows.+phone|mobile|fennec|kindle (Fire)|Silk|maemo|blackberry|playbook|bb10\\; (touch|kbd)|Symbian(OS)|Ubuntu Touch/i))
{
    var pathname = window.location.pathname,
    reg = /^\/?([a-z\-]*)\/?(?:\/index\.html)?$/,
    langArr = ["", "en", "in"];
    if (reg.test(pathname))
    {
        var lang = reg.exec(pathname)[1];
        langArr.indexOf(lang) > -1 && (window.location.href = "http://m.meizu.com/" + lang)
    }
}

这段代码是什么意思?

阅读 4.4k
5 个回答

这段代码有两个if判断,第一层if判断有两个分支,第一个分支判断referrer信息(这应该HTTP请求的一部分),第二个分支是用户代理(浏览器)的判断,
如果两个分支都成立,才会执行if里面的逻辑。if里面会判断浏览器中的pathname,这个是域名之后后的字符串的部分。

需要解释的地方可能就是两个正则表达式了。

  • 第一个正则表达式

var reg = /android|webos|ip(hone|ad|od)|opera (mini|mobi|tablet)|iemobile|windows.+phone/

因为太长了,所以就只看这么多了。
首先|把这段正则表达式分割成很多分支,其次在ip(hone|ad|od)这种形式里面还有分支,像这样的正则表达式希望匹配的字符串形式大概是这样的。

reg.test("android");//true
reg.test("iphone"); //true
reg.test("ipad");   //true
reg.test("ipod");   //true
  • 第二个正则表达式

reg = /^\/?([a-z\-]*)\/?(?:\/index\.html)?$/

这段正则表达式里面可以三种情况的组合,

reg1 = /\/?/
reg2 = /([a-z\-]*)\/?/
reg3 = /(?:\/index\.html)?/

照这样的分法逐一解释下,
reg1希望匹配到至多一次的/,或者什么都不匹配;
reg2希望匹配到字母和连字符-,可以匹配多次,或者一次都不匹配,后面接着可以至多匹配一次/,这个和reg1相同;
reg3希望匹配到的是index.html,或者不匹配,这是一个不捕获分组的写法,在后面的exec中有体现。
三组正则表达式中都用到了?量词(误?我觉得这是个糟糕的正则)。
那么这样的正则表达式希望匹配到什么的字符呢,大概是

reg.test("/products/index.html"); //true
reg.test("/en/index.html"); //true

按照上面的这两个测试例子,接着看里面的if判断

langArr = ["", "en", "in"];
if (reg.test(pathname))
{
    var lang = reg.exec(pathname)[1];
    langArr.indexOf(lang) > -1 && (window.location.href = "http://m.meizu.com/" + lang)
}

首先执行了reg.exec方法,结果是

reg.exec("/products/index.html"); //["/products/index.html", "products"]
reg.exec("/en/index.html");       //["/en/index.html", "en"]

reg.exec(pathname)[1]

获得的是上面拆解的reg2匹配到的结果,reg2reg3比较类似,但是reg3是不捕获分组的写法,多了(?:)
如果没有这个,那么结果会是这样,

reg.exec("/products/index.html"); //["/products/index.html", "products", "/index.html"]
reg.exec("/en/index.html");       //["/en/index.html", "en", "/index.html"]

接下来满足条件就做跳转。
(魅族是不是针对移动端重新写了页面,没有使用那种响应式布局的方式?)

判断网页语言,切换到相对应的移动版网页

检测是否是魅族网,且是手机等非台式设备。

若不是,那就以指定语言跳转到魅族网。

通过判断访问设备类型(PC,安卓,苹果等)加载对应的页面。

检查链接是否是魅族官网,访问设备是否那几个

推荐问题
宣传栏