Question

我有一个带汉堡菜单按钮的导航栏。在添加打开/关闭javascript动画之前，导航菜单适用于所有浏览器。在一些较旧的浏览器上，不幸的是，如果单击该脚本，则会阻止菜单打开。但它适用于大多数较新的浏览器。如果脚本没有正确执行以让旧浏览器能够打开导航栏，我需要停止脚本。

我编写了一个简单的解决方案来阻止脚本执行，如果＆＃34;某些东西＆＃34;是假的。

if (something == false) {
  <!--animation script goes here -->
stop
}

改变＆＃34;某事＆＃34;不同的事情给了我有趣的结果。如果我将其更改为

if (data == false) {
  <!--animation script goes here -->
stop
}

然后，即使在完全运行动画的浏览器中，它也会完全停止脚本。

我的问题是，我可以替换什么＆＃34;某些东西＆＃34;如果脚本没有成功运行，可以使脚本停止运行吗？

如果需要，这是动画脚本。（不要让它吓到你。如果动画失败，我只需要停止这个脚本。）

! function() {
"use strict";

function e() {
    var e, t = document.createElement("div"),
        n = {
            transition: "transitionend",
            OTransition: "otransitionend",
            MozTransition: "transitionend",
            WebkitTransition: "webkitTransitionEnd"
        };
    for (e in n)
        if (n.hasOwnProperty(e) && void 0 !== t.style[e]) return n[e];
    return !1
}

function t(e) {
    var t = {};
    e = e || window.event, t.evTarget = e.currentTarget || e.srcElement;
    var n = t.evTarget.getAttribute("data-target");
    return t.dataTarget = n ? document.querySelector(n) : !1, t
}

function n(e) {
    var t = e.style.height;
    e.style.height = "auto";
    var n = getComputedStyle(e).height;
    return e.style.height = t, e.offsetHeight, n
}

function a(e, t) {
    if (document.createEvent) {
        var n = document.createEvent("HTMLEvents");
        n.initEvent(t, !0, !1), e.dispatchEvent(n)
    } else e.fireEvent("on" + t)
}

function r(e, t) {
    e.classList.remove("collapse"), e.classList.add("collapsing"), t.classList.remove("collapsed"), t.setAttribute("aria-expanded", !0), e.style.height = n(e), u ? e.addEventListener(u, function() {
        s(e)
    }, !1) : s(e)
}

function i(e, t) {
    e.classList.remove("collapse"), e.classList.remove("in"), e.classList.add("collapsing"), t.classList.add("collapsed"), t.setAttribute("aria-expanded", !1), e.style.height = getComputedStyle(e).height, e.offsetHeight, e.style.height = "0px"
}

function s(e) {
    e.classList.remove("collapsing"), e.classList.add("collapse"), e.setAttribute("aria-expanded", !1), "0px" !== e.style.height && (e.classList.add("in"), e.style.height = "auto")
}

function o(e) {
    e.preventDefault();
    var n = t(e),
        a = n.dataTarget;
    return a.classList.contains("in") ? i(a, n.evTarget) : r(a, n.evTarget), !1
}

function l(e) {
    function n() {
        try {
            i.parentNode.removeChild(i), a(i, "closed.bs.alert")
        } catch (e) {
            window.console.error("Unable to remove alert")
        }
    }
    e.preventDefault();
    var r = t(e),
        i = r.dataTarget;
    if (!i) {
        var s = r.evTarget.parentNode;
        s.classList.contains("alert") ? i = s : s.parentNode.classList.contains("alert") && (i = s.parentNode)
    }
    return a(i, "close.bs.alert"), i.classList.remove("in"), u && i.classList.contains("fade") ? i.addEventListener(u, function() {
        n()
    }, !1) : n(), !1
}

function c(e) {
    e = e || window.event;
    var t = e.currentTarget || e.srcElement;
    return t.parentElement.classList.toggle("open"), !1
}

function d(e) {
    e = e || window.event;
    var t = e.currentTarget || e.srcElement;
    return t.parentElement.classList.remove("open"), e.relatedTarget && "dropdown" !== e.relatedTarget.getAttribute("data-toggle") && e.relatedTarget.click(), !1
}
for (var u = e(), g = document.querySelectorAll("[data-toggle=collapse]"), v = 0, f = g.length; f > v; v++) g[v].onclick = o;
for (var p = document.querySelectorAll("[data-dismiss=alert]"), h = 0, m = p.length; m > h; h++) p[h].onclick = l;
for (var L, T = document.querySelectorAll("[data-toggle=dropdown]"), y = 0, E = T.length; E > y; y++) L = T[y], L.setAttribute("tabindex", "0"), L.onclick = c, L.onblur = d}();

我在想，有人可能只会说＆＃34; if（transition == false）{stop}＆＃34;或那样做的东西，那将是完美的。

Answer 1

第1步

让我们首先确定我们如何调用我们的函数。我们在这里保持简单;像下面这样的东西应该做的伎俩：

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

这应该是最后的函数调用。当我们将CSS属性名称传递给supports()函数时，它将返回一个布尔值。如果为true，我们会将className附加到documentElement或<html>。这将为我们提供一个新的课程＆＃39;要从我们的样式表中挂钩的名称。

第2步

接下来，我们将构建supports()函数。

var supports = (function() {

})();

为什么我们不支持等于标准功能？答案是因为我们先做了一些准备工作，而且每次调用该函数时都没有理由一遍又一遍地重复这些任务。在这种情况下，最好使支持等于从自执行函数返回的任何内容。

第3步

要测试浏览器是否支持特定属性，我们需要创建一个 dummy 元素进行测试。这个生成的元素永远不会插入到DOM中;把它想象成一个测试假人！

var div = document.createElement('div');

正如您可能已经意识到的那样，在使用CSS3属性时，我们可以使用一些供应商前缀：

-moz
-webkit
-o
-ms
-khtml

我们的JavaScript需要过滤这些前缀并对其进行测试。所以，让我们把它们放在一个数组中;我们称之为供应商。

var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' ');

使用split()函数从字符串创建数组无疑是懒惰的，但它可以节省几秒钟！

由于我们要过滤这个数组，让我们成为好男孩和女孩，并缓存数组的长度。

var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;

上面的准备工作本质上是静态的，每次调用supports()时都不需要重复。这就是为什么我们只在页面加载时运行一次。现在，让我们返回实际分配给支持变量的函数。

return function(prop) {

};

闭包的优点在于，即使supports()等于返回的函数，它仍然可以访问div，vendors和len变量。

第4步

立即测试：如果传递的属性可用于div的样式属性，我们知道浏览器支持该属性;所以return true。

return function(prop) {
   if ( prop in div.style ) return true;
};

想一想text-shadow CSS3属性。大多数现代浏览器都支持它，而不需要供应商前缀。考虑到这一点，如果我们不需要，为什么要过滤掉所有前缀？这就是我们将此支票放在最顶层的原因。

第5步

您可能习惯于输入CSS3属性名称，如下所示：-moz-box-shadow。但是，如果在Firebug中查看样式对象，则会发现它拼写为MozBoxShadow。因此，如果我们测试：

'mozboxShadow' in div.style // false

将返回False。该值区分大小写。

区分大小写这意味着，如果用户将boxShadow传递给supports()函数，则它将失败。让我们提前思考，并检查参数的第一个字母是否小写。如果是，我们将为他们修复错误。

return function(prop) {
   if ( prop in div.style ) return true;

   prop = prop.replace(/^[a-z]/, function(val) {
      return val.toUpperCase();
   });

};

正常表达救援！在上面，我们要检查字符串开头是否有一个小写字母（^）。只有在找到一个的情况下，我们才使用toUpperCase()函数来大写字母。

第6步

我们接下来需要过滤供应商数组，并测试是否匹配。例如，如果传递了box-shadow，我们应该测试div的style属性是否包含以下任何内容：

MozBoxShadow
WebkitBoxShadow
MsBoxShadow
OBoxShadow
KhtmlBoxShadow

如果找到匹配项，我们可以return true，因为浏览器确实提供了对框阴影的支持！

return function(prop) {
   if ( prop in div.style ) return true;

   prop = prop.replace(/^[a-z]/, function(val) {
      return val.toUpperCase();
   });

   while(len--) {
      if ( vendors[len] + prop in div.style ) {
            return true;       
      } 
   }  
};

虽然我们可以使用for语句来过滤数组，但在这种情况下并不需要。

订单并不重要 while语句可以更快地键入，并且需要更少的字符性能微小改善不要被vendors[len] + prop;弄糊涂，只需将这些名称替换为其真实值：MozBoxShadow。

第7步

但是，如果这些值都不匹配怎么办？在这种情况下，浏览器似乎不支持该属性，在这种情况下我们应该返回false。

while(len--) {
   if ( vendors[len] + prop in div.style ) {
         return true;       
   } 
} 
return false;

应该为我们的功能做到这一点！如果浏览器支持text-stroke属性（仅限webkit），则通过将className应用于html元素来测试它。

if ( supports('textStroke') ) {
   document.documentElement.className += ' textStroke';
}

第8步：

用法使用我们现在可以挂钩的类名，让我们在样式表中试一试。

/* fallback */
h1 {
   color: black;
}   

/* text-stroke support */
.textStroke h1 {
  color: white;
  -webkit-text-stroke: 2px black;
}

最终源代码

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         } 
      }
      return false;
   };
})();

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

来源：copy pasted from here

有关更全面的解决方案，请参阅Modernizr库。

If / Else Javascript语句如果失败则禁用转换动画

1 个答案: