88必发客户端:javascript中typeof的使用示例

2016-02-08 13:03:37 88必发客户端

复制代码 代码如下: <html> <head> <title>javascript中typeof的使用</title> <script> //1、基本类型 var x = 123; var y = "abc"; var z = true; //alert(typeof x);//number //alert(typeof y);//string //alert(typeof z);//boolean //2、引用类型,类型是object var arr = new Array(); var date = new Date(); var str = new String("abc"); //alert(typeof arr);//object //alert(typeof date);//object //alert(typeof str);//object //3、对象类型,

复制代码 代码如下: if(!window.console){ var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml","group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; window.console = {}; for (var i = 0; i < names.length; i++){ window.console[names[i]] = function() {}; } } 可以放在基础库里面,当然,

可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码:复制代码 代码如下:$("a.toggle").click(function () {      $("#mydiv").toggle();      return false; // Prevent browser from visiting `#`  }); 这个函数使用toggle来显示或者隐藏#mydiv,然后阻止浏览器继续访问href中指定的链接。像上面这样的例子会让用户养成使用“return false”来阻止浏览器执行默认行为的坏习惯,在这篇文章里,我将会讨论关于阻止浏览器执行默认行为的两个非常重要的主题:•选择正确的方法: return false还是preventDefault,stopPropagation或者stopImmediatePropagation•选择合适的位置,开始,结束,还是中间某个地方:你应该在事件回调的哪个部分取消浏览器执行默认行为?注意:当我在这篇文章中提到event bubbling(事件冒泡),我想表达的是大部分事件都是先在初始DOM上触发,然后再通过DOM树往上,在每一级父元素上触发,事件不会在兄弟节点或是子节点上冒泡(当事件向下冒泡时,我们叫它事件捕捉(event capturing)),你可以在这里了解更多关于事件起泡和捕捉的介绍。选择正确的方法“return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢?”return false“到底做了什么?当你每次调用”return false“的时候,它实际上做了3件事情:•event.preventDefault();•event.stopPropagation();•停止回调函数执行并立即返回。“等等”,你叫了起来!我只是想让浏览器停止继续执行默认行为而已,我不需要它去做另外2件事。这3件事中用来阻止浏览器继续执行默认行为的只有preventDefault,除非你想要停止事件冒泡,否则使用return false会为你的代码埋下很大的隐患,让我们通过一个真实的例子来看看这样的误用会造成什么后果:这是我们用来演示的HTML:复制代码 代码如下:<div class="post">  <h2><a href="http://jb51.net">My Page</a></h2>  <div class="content">      Teaser text...    </div>  </div>  <div class="post">  <h2><a href="http://jb51.net">My Other Page</a></h2>  <div class="content">      Teaser text...    </div>  </div>  现在假设我们想要在用户点击文章标题时,将文章动态载入到div.contentd中:复制代码 代码如下:jQuery(document).ready(function ($) {    $("div.post h2 a").click(function () {      var a    = $(this),      href = a.attr('href'), // Let jQuery normalize `href`,      content  = a.parent().next();      content.load(href + " #content");      return false; // "cancel" the default behavior of following the link    });  });  这段代码可以正常工作(至少目前是),但如果我们顺着这个思路继续,如果我想要在用户点击了一个div.post元素(或者任何一个它的子元素)时,给它加上一个active类,我就需要给div.post增加了一个click回调:复制代码 代码如下:// Inside Document Ready:  var posts = $("div.post");    posts.click(function () {    // Remove active from all div.post    posts.removeClass("active");    // Add it back to this one    $(this).addClass("active");  });  现在,如果我们点击一个帖子的标题,这段代码会工作吗?答案是不会,因为我们在标题的click回调里使用了return false而不是我们应该使用的,”return false“等于event.preventDefault();加event.stopPropagation();,所以事件冒泡就被终止了,click事件不会被冒泡到div.post上,我们为它添加的事件回调当然也就不会被调用了。如果我们把它和live或者delegate事件混在一起使用时,情况就更糟了。复制代码 代码如下:$("a").click(function () {    // do something    return false;  });  $("a").live("click", function () {    // THIS WON'T FIRE  });  那么我们真正需要的是什么呢?preventDefault()大多数情况下,当你使用return false时,你其实真正需要的是e.preventDefault()。要使用e.preventDefault,你需要确保你传递了event参数到你的回掉函数中(在这个例子里,就是那个e):复制代码 代码如下:$("a").click(function (e) {    // e == our event data    e.preventDefault();  });  它会替我们完成所有工作,但不会阻止父节点继续处理事件,要记住,你放在代码中的限制越少,你的代码就越灵活,也就越易于维护。stopPropagation()但有些情况下,你有可能需要停止事件冒泡,让我们看看下面的例子:复制代码 代码如下:<div class="post">      Normal text and then a <a href="http://jb51.net">link</a> and then more text.  </div>  现在,让我们假设如果你点了div上除了a链接之外的地方,我们希望能发生点什么事情(比如改变下背景什么的),但是不能影响用户点击a链接的行为(从可用性的角度,这个例子不怎么好,你可能不希望用户点击别的地方时发生任何事情)。复制代码 代码如下:$("div.post").click(function () {    // Do the first thing;  });  $("div.post a").click(function (e) {    // Don't cancel the browser's default action    // and don't bubble this event!    e.stopPropagation();  });  在这种情况下,如果我们使用return false,div的click事件不会被触发,但是用户也不会到达他们点的那个链接。stopImmediatePropagation()这个方法会停止一个事件继续执行,即使当前的对象上还绑定了其它处理函数,所有绑定在一个对象上的事件会按绑定顺序执行,看看下面的例子:复制代码 代码如下:$("div a").click(function () {    // Do something  });  $("div a").click(function (e) {    // Do something else    e.stopImmediatePropagation();  });  $("div a").click(function () {    // THIS NEVER FIRES  });  $("div").click(function () {    // THIS NEVER FIRES  });  你可能会觉得这个例子看起来很别扭,没错,尽管如此,但有时这的确会发生,如果你的代码非常复杂,那么不同的widgets和plugin就有可能在同一个对象上添加事件,如果遇到这种情况,那你就很有必要理解和使用stopImmediatePropagation。return false只有当你同时需要preventDefault和stopPropagation,并且你的代码可以接受直到你的回调执行完成才停止执行浏览器的默认行为,那你就可以使用”return false“。但我强烈建议你别在写给其它jQuery开发者的演示代码中使用这个方法,因为这会造成更多误用,只有在你确信非用不可的情况下再去使用”return false“。选择适当的位置如果你使用了”return false“,它只会在你的回调函数执行结束才去取消浏览器的默认行为,但是使用e.preventDefault,我们有更多的选择,它可以随时停止浏览器执行默认动作,而不管你将它放在函数的哪个部分。1. 开发阶段,你应该总是将它放在第一行。你最不想做的事情可能就是你正在调试将一个form改成ajax提交的时候,它却已经被按照老方法提交了。2. 产品阶段,如果你采用了渐进增强(progressive enhancement),那就把它放到回调的结束位置,或者是逻辑终点,如果在一个普通页面采用渐进增强,那你就需要在服务器端考虑如果浏览器不支持JS时(或者被禁用时),对链接的click事件和表单的提交事件的处理。这里的好处是,我们不考虑关闭JS的情况,只考虑支持js时的强狂,如果你的回调代码出错抛出了异常,让我们看看下面的代码:复制代码 代码如下:var data = {};  $("a").click(function (e) {    e.preventDefault(); // cancel default behavior    // Throws an error because `my` is undefined    $("body").append(data.my.link);    // The original link doesn't work AND the "cool"    // JavaScript has broken. The user is left with NOTHING!  });  现在,让我们看看同样的事件,把preventDefault调用放在底部的效果:复制代码 代码如下:>  var data = {};  $("a").click(function (e) {    // Throws an error because `my` is undefined    $("body").append(data.my.link);    // This line is never reached, and your website    // falls back to using the `href` instead of this    // "cool" broken JavaScript!    e.preventDefault(); // cancel default behavior  });  这对表单提交也同样有效,你可以更好的应对出错的情况,别指望你的代码一直正常工作,在发生错误时有正确的应对总胜过假设代码不会出错。3.在产品阶段,如果功能这设计JS,那就还应该放在第一行。记住,不必非得是函数的第一行,但是越早越好,这里的原则是:如果函数的功能是通过JS实现的(不涉及服务端交互),那就没必要考虑兼容,在这种情况下,添加在第一行可以防止URL中出现#字符,但显然,你还是应该尽可能多的增加些错误处理代码,以防止用户在出错时变得不知所措。结论我希望这篇文章传达的信息足够你在需要阻止浏览器执行默认行为时做出正确的选择。记住,只有当你真的明白你在做什么时,才使用”return false“,并确保你是在函数的正确位置调用了相应的代码。最后,尽可能保持代码的灵活性,尽量不要再用“return false”了!

近来的使用者,越来越强调 UI 介面的互动,渐渐原本对一条小龙来说只是配角的 JavaScript (以下简称 JS) 变成的主角,占了很大一块的用途。像是最近很热门的 ASP.NET 的 MVC 里面就直接Include JQuery 可见一般。 MVC 用了一阵子,一条小龙甚至感觉 MVC 中的 Controller 根本就是 JS 在控制的,这样怎么把 UI 工作独立,切给美工用,感觉也是蛮大的疑问。 看来后面的美工,只会绘图、拉画面是不行的,一定要会 JS、Flash 等等前端控制语言,才会吃香。 这边,一条小龙介绍一下,如何用 JavaScript 动态呼叫函数,这个时候需要先介绍一下 前提,这样读者才能了解,下面的技术能应用在哪里。 一般会使用到 动态呼叫,基本上都是 后端动态产生 JS的程式码,在由前端的 JS 框架,来呼叫使用。 会需要这样做的用途,不外乎,动态设定 UI 的栏位、样式、资料 等等,另外一种可能,就是保留 JS 框架的扩充性,让后面的开发人员,可以根据每只程式的特性,在额外编写代码来扩充原有JS 框架的功能。 下面 就来介绍一下,动态呼叫函数 目前就一条小龙所知应该有下面 两种方式 复制代码 代码如下: function myAlert(value) { document.write("myAlert - " + value + "<br>"); } $(function () { eval("myAlert")("test"); window["myAlert"]("test"); } 一般来说,比较正规还是要使用 window 这个object 来查询 function 是否存在,用 eval 弹性太大比较有风险。 而且直接照上述来实作,会有蛮大风险,一但被呼叫的函数不存在,整个画面就会出错,所以 在使用上,需再加上判断式,从这角度这时eval 就无法使用了,因为使用 eval 就是要产生 function 这个 object 了,而 window 只是查询有无 object,所以当 function 不存在,eval 就会直接报错了,这样 读者应该比较能了解其中差异。 范例程式如下 复制代码 代码如下: function myAlert(value) { document.write("myAlert - " + value + "<br>"); } $(function () { var fnName = "myAlert"; var fn = window[fnName]; if (typeof fn == "function") { fn.apply(window, ["window - test"]); } } 最后,是我自己又另外想出的一种方式,如下 复制代码 代码如下: function myAlert(value) { document.write("myAlert - " + value + "<br>"); } $(function () { if (typeof (myAlert) == 'function') { myAlert("typeof - test"); } } 虽然这种方式会牺牲一些弹性,但相反却可以用这种方式,来限制后续开发人员的命名原则,例如像是框架中的 Init() Load() 等等,皆可用如此方式则可以将使用方式固定下来,不至于发散出去,也方便后续的维护成本。

网页错误详细信息用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; QQDownload 551; SLCC2; .NET CLR 2.0.50727)时间戳: Wed, 12 Aug 2009 07:02:03 UTC消息: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)行: 0字符: 0代码: 0今天调试一段JS代码出现这个状况..在火狐 IE7 和IE6下都正常...郁闷,在网上搜索了一下相关资料 一般错误都是指所指定的标签没有加载完就是用该对象....检查了代码 从表面上看没有什么问题如下<body><script language="javascript"> var bgObj = document.createElement("div");          bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";          document.body.appendChild(bgObj); </script></body>其实 仔细检查出来就发现 这段代码会在body没有加载完毕之前运行....问题就出在这里....所以 代码只能放在波电压外面去执行<body></body><script language="javascript"> var bgObj = document.createElement("div");          bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index: