JavaScript Convention

JavaScript不應該四散在html裡
至少應寫成獨立的js

1. html較小，能較快的呈現
2. 雖然需另一個request取js，不過該js可被cache

三種類型的js檔
1. 3rd-party js
a. jQuery
2. Component.js
a. Untity.js
b. 自行開發
3. Local.js

原則上禁止寫js在html裡，不過某些例外還是方便簡單
1.寫在html tag裡比較方便

1. Close Window


2. Back to Previous Page


2.local.js 只有一小段
如果只有幾行… 就算了啦… ( 20行內)

Reference
Top 10 JavaScript Snippets for Common Tasks

JavaScript Convention - 全域變數篇

為Application建立一個全域物件
所有變數、函數都放置於底下

/* 最上層進入點 */
//全域物件
var APP = {};
 
 
//模組物件容器
APP.modules = {};
 
/* 各模組進入點 */
//ex. 商品詳細頁
APP.modules.productDetail = {};

加上防禦性

/* 最上層進入點 */
//全域物件
var APP = {};
 
//模組物件容器
APP.modules = {};
 
/* 各模組進入點 */
//ex. 商品詳細頁
var APP = APP || {};
APP.modules.productDetail = {};

最佳化Ajax的執行速度

1. 最佳化 for 迴圈
2. 把DOM節點附加至文件
3. 減少點 (dot) 標記

Reference
Ajax in Action

Browser caching CSS, Javascript file 問題

有時遇到改了css或js，但卻沒反應，除了天兵改錯隻以外，太多是因為browser自己cache住了，有幾個做法可避免

1. ap server處理
   apache可用mod_expires
   

   //1.載入mod_expires.so
   # vi /etc/httpd/conf/httpd.conf
   LoadModule expires_module modules/mod_expires.so  #拿掉註解
   
   //2.config 
   #vi your_app_path/.htaccess
   ExpiresActive on
   ExpiresByType application/javascript "access plus 1 months"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType text/css "access plus 1 months"

   p.s. 最好搭must-revalidate ，不然cache時間寫太長的要改檔案才會變，不過也是有人測試說不一定有作用...，所以還是利用下面的做法一定有效!
   
2. 利用uri不同，迫使Browser reload
   以前是自己在get參數列加版本or日期
   

   <link type="text/css" href="aaa.css?v=20130526"/ >

   不過每次有更新就得手動更改，實在不是好方法
   看到有人利用file更新日期搭RewriteEngine~ 真是太棒了~
   
   • html載入
     

     <link type="text/css" href="/css/main.<?php echo filemtime('/path/to/css/main.css'); ?>.css" / >
     //會產出 /css/main.1237440708.css

     main.1237440708.css只是虛擬的檔案，此檔並不存在會透過rewrite rule指向main.css，因此還需設定.htaccess
     
   • .htaccess設定
     

     RewriteEngine On
     RewriteRule ^(css|js)/(.*)\.[0-9]+\.(.*)$ /$1/$2.$3 [L]

     p.s. 如果很好學想知道rewrite rule怎麼寫的，可以看Force reload of updated CSS and Javascript files with unique filenames
3. 利用HTML5的cache manifest
   就隨意改一下 cache manifest的內容
   Browser就會自己檢查有沒有新的版本...

References

• Using Apache mod_expires to control browser caching
• Force reload of updated CSS and Javascript files with unique filenames
• Try to avoid "no-cache"
  

減少JavaScript記憶體使用量

以下截錄 Ajax in Action (Ajax 實戰手冊)

• Reuse DOM Nodes (重用DOM節點)
  Create Always 與 Create If Not Exists
• Unlink On Hide (隱藏時斷開連結)
  即不用display=none 而用 node.parentNode.removeChild(node);
• Break Cyclic References (斷開循環參考)
  node = null 及 node內的用到的obj也要 null

表8.4 ClickBox Benchmark

ID	Reuse DOM Nodes	Unlink On Hide	Break Cyclic Refs	Final Memory Use (IE)
A	N	N	N	166 MB
B	N	N	N	84.5 MB
C	N	Y	N	428 MB
D	Y	N	N	14.9 MB
E	Y	N	Y	14.6 MB
F	Y	Y	N	574 MB
G	Y	Y	Y	14.2 MB

~
本以為reuse會最省，沒想到F居然會佔最高
有使用Unlink On Hide只有G才會降低記憶間用量，C & F 都爆了
所以開發時不要用！(誤)

偵測新視窗的close event

如何偵測新視窗的close event咧

<script type="text/javascript">
    var win = window.open("secondwindow.html", "_blank");
    win.onunload =onun; 

    function onun() {
        if(win.location != "about:blank") // This is so that the function 
                                          // doesn't do anything when the 
                                          // window is first opened.
        {
            alert("closed");
        }
    }
</script>

不過這方法不能跨網域
也就是如果child開到不同網域，close不會觸發unload事件
解決方法先轉個空白的網頁，裡面夾iframe去連該網頁

後記-跨網頁問題
被同事嗆「閃開! 讓專業的來」 見下面程式碼
也不去bind event，只是持續monitor關了沒...真是好招...

var child = window.open('http://google.com','','toolbar=0,status=0,width=626,height=436');
var timer = setInterval(checkChild, 500);

function checkChild() {
    if (child.closed) {
        alert("Child window closed");   
        clearInterval(timer);
    }
}

References

• How to run function of parent window when child window closes?
• JS: Listen when child window is closed

json parse error with double quotes

搞了半天
原來要用3個斜線
var tmp = {'name' : "kev///'s blog"};


Reference
json parse error with double quotes

JavaScript debug工具、技巧

寫入快顯視窗

• 測試視窗
  var debug = window.open('','newWin',[arguments]);
  function addDebugginMessage(msg){
  debug.document.write(msg + '<br>');
  }

無侵入腳本程式設計 unobtrusive scripting

意思即將html中的view(css),結構(html),行為(js)分開
不要把3者都摻在html裡
css就很明確的利用class name從html分離了
js見下例
//html夾了javascript
<a href="#" onclick="showPopuup('niceimage.jpg')">Nice image!</a>

將html與js分開
<a href="niceimage.jpg" id="nice">Nice image!</a>
document.getElementById('nice').onclick = function(){
showPopup(this.href)
};

利用JavaScript跳過中間轉頁處理

html中，利用href的效果，如同click連結，會開啟新頁面
如果js中，判斷條件後轉頁
利用href轉頁，將會在history多一個歷史記錄
將造成使用者click上一頁會回到判斷頁，
而判斷頁又馬上轉到下一頁

解決方法，利用replace
//javascript
var isSupported = [check JavaScript support];
if (isSupported){
  locaiton.href = 'scriptpage.html';       //如果使用者按上一頁，就會再回到此判斷頁
  locaiton.replace('scriptpage.html');  //將回到真的上一頁
}



Reference:
pp]{ on JavaScript

[書]JavaScript: 優良部份

擷取

• 企圖擷取不存在的屬性，會產生undefined
  stooge['middle-name'] //undefined
flight.status //undefined
  

  較好的做法 - 給予預設值
  var middle = stooge['middle-name'] || "(none)";
var status = flight.status || "unknown";

• 企圖從undefined取值，將丟出TypeError
  可利用&&防衛此狀況
  flight.equipment //undefined
flight.equipment.model //丟出"TypeError"
flight.equipment && flight.equipment.model //undefined


減少全域變數
全域變教會削弱程式的彈性，利用物件包裝
var MYAPP = { };
//利用這個變數保存全域變數
MYAPP.flight = {
airline: "Oceanic",
number:815
};



Reference

JavaScript: The Good Parts - 中譯:JavaScript: 優良部份

ie css min-height問題

網上查只有ie6有不支援min-height問題
不過我也不知那機車美工怎麼做的
我的ie8不會自動延展div

最後用javascript自己給它"動"一下
做法是
function onload(){
var tmp = $('#content').css('position'); //content是破板的div
$("#content").css('position','absolute');
$("#content").css('position',tmp);
}

Reference
解決IE6不支援css min-width與min-height

js取得置中位置

1. 左右皆置中
   var $dialog = $("<div>hello</div>");
var left = ($(window).width() - $dialog.outerWidth()) / 2 + $(window).scrollLeft() + "px";
var top = ($(window).height() - $dialog.outerHeight() ) / 2 + $(window).scrollTop() + "px";

2. click button後，置於button正下方
   onclick = "showDialog(this)
function showDialog(obj)
var margin_top = 30; //自行預設設margin top距離

var pos = $(obj).offset();
var eWidth = $(obj).outerWidth();
var mWidth = $confirmBox.outerWidth();
var left = (pos.left - mWidth/2) + "px";
var top = margin_top + pos.top + "px";
   

'JSON' 未被定義

因為eval有安全性的問題
所以改用JSON來parse
沒想到居然發生'JSON' 未被定義的情況
上網查了一下，主要作法如下: (需要另外下載json2.js)
if (typeof (JSON) == 'undefined') { //沒有 JSON 時才讓 browser 下載 json2.js
$('head').append($("<script type='text/javascript' src='json2.js'>"));
}
//這樣就可以放心用JSON物件了
var strJson = "{\"ID\":1,\"Name\":\"Kelp\"}";
var json = JSON.parse(strJson);


另外因為只接受雙引號,所以自己要轉一下
jsString.replaceAll("'", "\"");

Reference
IE 說「'JSON' 未被定義」!?

parse json在browser上的支援問題

因為安全性問題 知道不要用eval轉json
改用JSON.parse
但幸虧有瞄到網友提醒瀏覽器的支援性

• IE8 Beta 2以上（但只限JScript 5.8，也就是IE8標準模式）
• Firefox 3.1 Beta 3以上（但似乎只有對JSON.parse()以及JSON.stringify()的支援）

看來只好用jquery的jQuery.parseJSON
不過要注意
因為字串的關係，所以要求key的部份要用雙引號(當然value是字串時，也是用雙引號)
//錯的格式
{test: 1} //需要引號包住
{'test': 1} //用了單引號
{"test":1} //正確的格式


另外google上的plugin jquery-json
還沒看懂 先記下來


References:
風之音 - JSON是什麼
jQuery.parseJSON

其他browser不支援firebug console問題

先前用firebug在看log
不過遇到其他browser就會說不支援~
甚至導致程式crash, 雖然開發完就會關掉，但就很煩
於是用jQuery本身的fucntion來檢查是否為firefox

//is browser firefox
jQuery.each(jQuery.browser, function(i, val) {
    isConsoleSupported = (i=="mozilla" ); //jQuery.browser.version.substr(0,3)=="1.9"
});
if(isConsoleSupported)
  console.info(message); 
};

不過遇到firebug沒啟動 也是會掛
有時還會嚇到自己.. 以為程式掛了...
一查原來是firebug沒啟動

上網看了一下 哈 這麼簡單...

//is it support console & is console turn on
isConsoleSupported = (window.console && window.console.firebug);

//2013.4 
後來firebug團隊決定把window.console.firebug拿掉，所以一定是false，為了兼容要改成
(window.console && (window.console.firebug || window.console.exception))

完整用法

//取得console
var console = getConsole();
console.log("console works");

function getConsole(){
    if(window.console && (window.console.firebug || window.console.exception))) 
        return window.console;

     //自行產生個console，雖然不能log，但至少引用的程式不用再判斷
     console = {
          write: function() { },
          debug: function() { },
          log: function() { },
          info : function() { },
          warn : function() { },
          error : function() { }
     };

     return console; 
}

References

• 如何判斷Firebug的存在
• Check whether console is present

JSON toString

不知道json結構是件挺麻煩的事
怎麼看json結構咧 很簡單就
var iamjson = {id:1};
JSON.stringify(iamjson );

不過日子一久
就忘了這個function...
又花一些時間上網找
還有看到有人寫iamjson .toJSONString();
不過出現script error 指出沒這function
就很氣當時沒記下來 測試完就把段code給刪了
這次要寫好筆記... 不然又要花時間找了
都寫了 就順便寫JSON其他的function

取代eval
var myObject = JSON.parse(myJSONtext, reviver);

Reference
JSON in JavaScript

clone json object

利用jquery可以很輕易的複製dom裡的object
$("input").clone();

但想複製json就沒辦法了
截錄了網友的做法
JSON.clone = function (obj) {
return JSON.parse( JSON.stringify( obj ) );
};

var obj = { "date": "2009-03-05", "amount": "0.1" };
var clonedObj = JSON.clone(obj);

A more elegant browser independent solution comes from Marijn Haverbeke (Elegant JavaScript):
function clone(o) {
function OneShotConstructor(){}
OneShotConstructor.prototype = o;
return new OneShotConstructor();
}

最後查一下jQuery本身的方法
利用extend的方法來當成一個新的
雖然感覺...怪怪的...
不過也算是簡單的達到目的了
var shot = {id:1,x=2,y=3};

//Method 2 jQuery.extend( [ deep ], target, object1, [ objectN ] ) v1.1.4
var newShot = jQuery.extend(true, {}, shot); //沒有target,而是直接return


Reference

• Cloning javascript objects
• 官方jQuery.extend()說明
• jQuery.extend的用法

jQuery的mouse座標

沒想到jQuery對mouse event的x,y就有很好的支援...
我還在努力的用javascript在event.x ..........

在element上的mouseover或click
Mouse co-ordinates within the element when mouseover or click an element
Relative Mouse Position

JavaScript 兩三事

學習
17 Hours of JavaScript from the Masters

測試
驗證你的 JavaScript 程式：JSLint

上線
不要讓 JavaScript 拉長你網站的反應時間
上線前用 JSMin 壓縮你的 JavaScript 檔案