phpstudy集成环境

 首页 > 魅族官网里面的JS代码，有点疑问。

魅族官网里面的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)
    }
}

这段代码是什么意思？

这段代码有两个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匹配到的结果，reg2和reg3比较类似，但是reg3是不捕获分组的写法，多了(?:)。
如果没有这个，那么结果会是这样，

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

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

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

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

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

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

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

【热门文章】
【热门文章】