柑仔雜想: Javascript

顯示具有 Javascript 標籤的文章。顯示所有文章

2013年7月3日星期三

NodeJS Production Depoly (1)

最近公司的專案要開始Depoly
從原本的測試環境改為production

目前用到以下技術:
Nginx: 負責Loadblance
NodeJS: 撰寫後端應用
MongoDB: 儲存Session與服務的資料

NodeJS 用到的Module:
connect-mongo: 存session資料
expressjs: 網站Framework
i18n: 多國語系
moment: 處理日期時間
mongoskin: 連結mongoDB
underscore: 前後端都好用的JS Library (針對Flow Control也有用到)

因應多核心主機使用了 cluster

整體架構圖

2013年2月4日星期一

ExpressJS 印出JSON範例

 
msg = JSON.stringify(json);
res.writeHead(200, {
    "Content-Type": "application/json;",
    "Content-Length": msg.length
});
res.end(msg);

2012年8月13日星期一

用 JavaScript 做中文驗證

利用正規輸入法來判斷

  function isChinese ( str ) {
      var regx = /[^\u4e00-\u9fa5]/;
      if ( regx.test( str ) ){
        return false;
      } else {
        return true;
      }
  }
  alert(isChinese("中文"));

範例網址: http://jsfiddle.net/dNVDV/5/

2012年4月18日星期三

JavaScript 進位轉換方式

剛好朋友問起
在JS裡怎麼讓原本為2進位的字串變成16進位呢?

這裡紀錄一下小小的教學

JS提供了很方便的工具可以讓我們將傳統的數值轉為各種進位的字串

例如：

var origin = 100;
var result = origin.toString(2);

這時候 origin 還是10進位的數值型態
要將他轉為2進位則利用toString並傳入需要的進位方式

但是如果要將2進位轉為16進位呢?

由於JS沒有辦法直接將2進位變成16進位

所以我們需要轉個方向
將2進位先轉回10進位就好啦! :p

好在JS也提供了轉回10進位的方式
parseInt()
parseInt除了將傳入的字串解析成數值以外
也可以加入進位的參數唷

例如：

parseInt( '1100',  2 );

這樣就會將1100當2進位處理
回傳 12這個數值
而不是直接回傳1100唷

所以2進位轉數值及數值轉回2進位都有了
這時候就可以來嘗試2轉16的部份
程式碼非常非常簡單 :)

範例：

var origin = '10000110'; // 2進位數字
var temp = parseInt(origin, 2); // 先將字串以2進位方式解析為數值
var result = temp.toString(16); // 將數值轉為16進位

jsfiddle線上範例

雖然不知道為什麼簡單的東西
打出來又變成長篇大論OTL...

2012年4月11日星期三

調整 jQuery 動畫效果的更新頻率

前陣子在開發平板應用時
由於需要仿製Ipad上的主頁面
讓螢幕上排滿App 圖示的情況下
還必須要滑動換頁
公司的裝置在降頻且使用舊版webkit核心的瀏覽器下
顯得有些許頓挫感
後來想到可以針對jQuery動畫效果的部份去調整

這時候得手動調整
jQuery.fx.interval

下面開始範例

範例DEMO on jsfiddle

我們先建立基本的HTML

<!DOCTYPE html>
<html>
<body>
  <p><input type="button" value="Run"/></p>
  <div class="box"></div>
</body>
</html>

這裡我們建了一個box及啟動按鈕

設定一下css

讓box有個顏色跟基本大小
這邊要注意的是
要做動畫效果必須要設定position為相對或是絕對定位

.box {
  width:50px;
  height:30px;
  background-color:#000;
  position: relative;
}

再來就是重頭戲了:p
我們來建立按鈕事件
讓box每按一次移動 100px

jQuery.fx.interval = 18;

$("input").click(function(){
    $("div").animate({left:'+=100px'}, 500);
});

jQuery.fx.interval 的型態是數字, 預設值為13毫秒
我們為了調整更新的效率
將它改為18

雖然只是小小的5毫秒
卻還是讓原本在平板上有頓挫感的程式
變成咻咻咻的流暢動畫
不過數字不能調太大
不然因為更新頻率間隔太長
反而會造成動畫效果不佳的情形

網頁

2013年7月3日 星期三