Javascript

文章將不會照內容系統的排序，只會將我認為重要的資料放入。

javascript tip

javascript 可以說是非常萬能、而且語法很寬鬆，所以有很多特殊的寫法與技巧。

JavaScript tip

幾個實用的 JS 小技巧

airbnb 的代碼規範

https://github.com/airbnb/javascript

如果你是獨自學習 javascript 沒有前輩的規範指導，那麼這篇可以帶你少走很多彎路。

參考資料

非常推薦去看得資料，本篇的內容大部分都是從這些文章取得的。

1. 用 Node.js 學 JavaScript 語言
2. 深入理解 JavaScript

推薦安裝 node.js

javascrupt 的後端，也方便做測試。

arguments 接收所有變數

當函式接收到參數時，會存入arguments成array

  function print() {
    for (var i in arguments) {
      console.log(i, ":", arguments[i]);
    }
  }

  print(3, 2.71828, "hello");

將會輸出 :

  0 : 3
  1 : 2.71828
  2 : hello

Module模式

var Calculator = function (a) {
    //private function

    var ahref = document.getElementById(a);

    return {
        //public
        add: function (x, y) {
            var val = x + y;
            ahref.innerHTML = val;
        }
    };
};

// 使用
var calculator = new Calculator('a');
calculator.add(2, 2);

一些常用的

新增元素

    var txt1 = "<p>Text.</p>";               // Create element with HTML  //方法一
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery //方法二 //這個要 Jquery
    var txt3 = document.createElement("p");  // Create with DOM //方法三 
    txt3.innerHTML = "Text."; 
    $("body").append(txt1, txt2, txt3);      // Append the new elements //加到body中

計時器

var start = new Date().getTime();

for (i = 0; i < 50000; ++i) {
    // do something
}

var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

計時器2 (更準)

var t = 0,tlock=1;
showTime();

//顯示倒數秒收
function showTime()
{
    t += 1;
    if(tlock==1){
    var sec = t;
    $('#showTimeinn').html(minSecStr(sec / 60 | 0) + ":" + minSecStr(sec % 60)); //矯正時間
      document.getElementById('showTimeinn').innerHTML= tt;  顯示
      //每秒執行一次,showTime()
      setTimeout("showTime()",1000);
    }
}

關閉觸發事件

通常有效

return false;

比較有效

e.preventDefault();  // 通知瀏覽器不要執行與事件關聯的默認動作。
e.stopPropagation();  // 不再派發事件。

範例:

var lock==0;

$( "a#iframe_fsd" ).click(function( event ) {

  if(lock===0){
    // pass 
  }else{
    alert('請先選擇!');
    $('#fs_mode').onfocus();
    // return false;  // 因為是 a 無效;
    event.preventDefault();
    event.stopPropagation();
  }
});

nl2br 的替代方法

function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

資料來源