[小技巧] JavaScript Cross Browser Best Practices

标签： Browser Chrome Firefox IE JavaScrpt | 发表时间：2013-04-12 10:50 | 作者：appleboy
出处：http://blog.wu-boy.com

先前寫了一篇 modern.IE 的使用方式及介紹，今天在 Facebook 上看到 Eric Shangkuan 說已經有了 中文介面，如果你的瀏覽器是中文版，應該就可以直接看到中文介面了，裡面有篇文章非常重要，寫 Web 的工程師都必須注意，那就是 Cross Browser Best Practices，這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧，這些技巧也不只用在 IE 上，更是教您在實做 CSS，JavaScript 的注意事項。我們來看看 Javascript 的小技巧。

不要再使用 navigator.userAgent

為了知道使用者 Browser 資訊，之前有寫篇 jQuery 偵測瀏覽器版本, 作業系統(OS detection)，內容使用 navigator.userAgent 來取得使用者瀏覽器及裝置資訊，開發者為了 IE 各版本的相容，所以透過此方式來知道 IE 各版本，進而在 JS 做處理，但是有時候並不是這麼準確，因為目前市面上裝置實在是太多種了，手機，平板，電視一堆等等，為了支援各種裝置，請不要再用 navigator.userAgent 來判斷了，現在取而代之的就是用 Modernizr，用來偵測您的 Browser 有無任何您所想要的功能，像是 Html5 的 Canvas，利用 Modernizr 來判斷是否支援，這時候各種裝置就不會因為 JS 沒有判斷到而產生錯誤 ，尤其是在電視介面或 Android 平板，踩到很多雷阿。詳細資訊可以參考此 連結。

簡單來說 Canvas 在 IE9 才有支援，所以針對 IE 部份，我們使用 navigator.userAgent 來判斷

<script type="text/javascript">
    functiongetInternetExplorerVersion()
    // Returns the version of Internet Explorer or a -1 for other browsers.
    {
        var rv = -1;
        if(navigator.appName == 'Microsoft Internet Explorer')
        {
            var ua = navigator.userAgent;
            varre    = newRegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if(re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
        }
        return rv;
    }
    functiononLoad()
    {
        var version = GetInternetExplorerVersion()
        if (version < 9 && version > -1)
        {
            // Code to run in Internet Explorer 9 or earlier.
        }
    }
</script>

但是如果遇到 Safari, Chrome, Android, IPad, IPhone 版本呢，也很好解決，就是一直些判斷式，那為什麼不換個角度去想，直接判斷有無 Cnavas 功能即可，透過 Modernizr 套件可以簡單做到。另外 jQuery 在 1.9 版也直接捨棄了 jQuery.browser API 功能，取而代之的也是推薦 Modernizr。

if (Modernizr.canvas) {
  console.info('Your browser support canvas');
}

在 document ready 內不要執行大量 script

現在大部分的網站缺少不了的就是 jQuery，jQuery 提供了 $(document).ready() 在 html load 完成後可以快速執行 JavaScript，在大多的狀況下都可以正確執行的，但是如果在 $(document).ready() 寫入大量及複雜的 Script，只會讓瀏覽器呆滯而不能使用，所以盡可能減少執行的程式碼，等到使用者真正要執行功能的時候在進行呼叫即可。通常像是 tooltip 或 dialog 可以延遲等到要出現的時候在初始化即可。

網頁開始先優先執行 AJAX

由於執行 AJAX 需要一段時間，所以請在 html load 之前就開始執行，並不需要等到 $(document).ready() 後才執行，另外在 AJAX 完成執行後的 Complete function 加入 $(document).ready() 函式確保 html 已載入完成。

延遲載入 social button(Facebook Like, Google +1, Twitter)

現在大多網站都有一大堆分享機制（social networks），像是 Facebook Like、Twitter 等等，但是這些 JS 的載入，都大大影響到網頁的載入時間，其實最主要的解決方式就是務必思考哪些頁面才需要這些 button，能減少載入外部 JS 就是提昇網頁載入速度，在以前載入外部 JS 的作法就是底下

<script>
(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
  load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk');
  load('https://apis.google.com/js/plusone.js', 'gplus1js');
  load('//platform.twitter.com/widgets.js', 'tweetjs');
}(document, 'script'));
</script>

現在請改寫成底下

由於各瀏覽器相容問題，所以判斷是否支援 addEventListener 或 attachEvent，在 onload 後才開始執行。更多詳細內容可以參考 requesting these scripts

相关 [技巧 javascript cross] 推荐：

[小技巧] JavaScript Cross Browser Best Practices

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
我們來看看 Javascript 的小技巧. 不要再使用 navigator.userAgent. 簡單來說 Canvas 在 IE9 才有支援，所以針對 IE 部份，我們使用 navigator.userAgent 來判斷. 但是如果遇到 Safari, Chrome, Android, IPad, IPhone 版本呢，也很好解決，就是一直些判斷式，那為什麼不換個角度去想，直接判斷有無 Cnavas 功能即可，透過 Modernizr 套件可以簡單做到.

javascript技巧

- - ITeye博客
oncontextmenu="window.event.returnValue=false"  将彻底屏蔽鼠标右键. < table border oncontextmenu=return(false)>< td>no< /table>  可用于Ta bl e. < body onselectstart="return false">  取消选取、防止复制.

javaScript高级技巧

- - JavaScript - Web前端 - ITeye博客
注意： uncaught refereceError：is not defined 和 undefined 不是一样. js是函数级作用域,在内部的变量，函数内部都能访问，函数外部不能访问函数内部的变量，函数内部能访问外部的变量. 注意：在函数里声明变量，都会提到函数的最前面. 如何可以在函数外部拿到函数内部的变量，就需要使用闭包(注意使用，闭包会造成内存泄露).

JavaScript的一些技巧

- - Web前端 - ITeye博客
主要列举了使用JavaScript时应该注意的一些技巧. 1 变量使用前，需要使用var关键字声明，避免使用全局变量；. 2 尽量使用===（!==），而不用==（!=）；.    ===（!==）操作不执行转换，在速度上被认为优于==（!=）. 3 使用闭包实现私有变量；. 4 语句结尾不省略分号；.

高效率JavaScript编写技巧

- - CSDN博客Web前端推荐文章
最近在编写一个JavaScript框架，发现有很多细节注意得不够，担心长时间积累会导致框架实际应用的时候出现严重的效率问题. 于是开始关注JavaScript提高效率的一些技巧，在这里分享给大家. 1.JavaScript是唯一一个对代码体积要求越小越好的语言，因此我们可以通过一些工具来精简和压缩JavaScript代码，如JSMin、Packer、YUICompressor等.

原生JavaScript技巧大收集

- - JavaScript - Web前端 - ITeye博客
1、原生JavaScript实现字符串长度截取. 2、原生JavaScript获取域名主机. 3、原生JavaScript清除空格. 4、原生JavaScript替换全部. 5、原生JavaScript转义html标签. 6、原生JavaScript还原html标签. 7、原生JavaScript时间日期格式转换.

【转载】最新的Javascript和CSS应用技巧荟萃

- - HTML5研究小组
随着前端技术的发展， javascript和 css在网站和web应用中展现出强大的统治力，特别是随着HTML5和CSS3的标准的成熟，我们可以使用javascript和css开发出你想都没有想到过的特效和动画，在今天的这篇文章中，我们将介绍一组相关CSS和javascript的强大教程和插件，希望大家喜欢.

今天开始应该使用 5 个JavaScript调试技巧

- - SegmentFault 最新的文章
我之前使用过用 printf debugging，自此之后我用这种方法似乎总能更快地解决bug. 在某些情况下需要更好的工具，下面是其中的一些佼佼者，我敢肯定你会发现它们的有用之处：. 正如我 之前提到的，你可以使用“debugger;”语句在代码中加入强制断点. 有时DOM像有了自己的想法.

JavaScript编程注意事项、技巧大全

- - SegmentFault 最新的文章
收藏自 JavaScript奇技淫巧45招. JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等. JavaScript还是很多新手踏入编程世界的第一个语言. 既可以用来显示浏览器中的简单提示框，也可以通过nodebot或nodruino来控制机器人.

红十字少女 THE RED CROSS 第一~三话

- llpazxj - FeedzShare
来自: LastAngel's AT Field - FeedzShare  . 发布时间:2011年06月26日,  已有 3 人推荐.