個人常用的 Sublime Text 2 外掛

Sublime Text 的優點就不多說了，必裝的外掛為 Package Control。 安裝 Package Control 之後，可以注意一下最受歡迎的排行榜，前 100 個應該都可以查看一下。

個人常用外掛：

1. Advanced​New​File
2. Alignment
3. All Autocomplete
4. Bracket​Highlighter
5. Convert​To​UTF8
6. Hex​Viewer
7. Highlight
8. HTML-CSS-JS Prettify
9. JSHint
10. JsMinifier
11. Keymap​Manager
12. Side​Bar​Enhancements
13. Sublime​Code​Intel
14. Tag
15. Terminal
16. Theme - Soda
17. Sublimerge Pro

A deep-linking tool: Simrou

之前介紹過 用 jQuery Address 實現「深連結」。
Simrou 的功能也是相同的，但個人覺得 Simrou 更為方便，看一下它的說明立即就能上手。

// 建立實體
window.simrou = new Simrou();

// 設定 deep-linking 規則
var postRoute = window.simrou.addRoute('/post/:id');

// 定義某 deep-linking 規則的事件處理
postRoute.get(function(event, params){
    // alert(params.id);
});

window.simrou.start();

連結寫法（同一般用法）：

<a href="#/post/12">第 12 則<</a>

觸發的方式：

window.simrou.navigate('/post/'+myid);

使用 beginContent() 和 endContent() 設定 Yii 的 layouts

Yii 的 views/layouts 是用來放置 layouts 的目錄，在預設的情況下會有 main.php 和 column1.php 和 column2.php。
main.php 內容定義了，<head> 以及 page header 和 footer 等。 column1.php 和 column2.php 是使用 main.php 的網頁佈局，但修改內容的部份。
例如，我們有個 layout 叫做 mylayout.php：

<?php $this->beginContent('//layouts/main'); ?>
<div>
    <?php echo $content ?>
</div>
<div class="sidebar">
    <ul>
        <li>option 1</li>
        <li>option 2</li>
    </ul>
</div>
<?php $this->endContent() ?>

beginContent('//layouts/main') 表示以 main 為佈局，在  beginContent() 和 endContent() 之間為 content 呈現的修改。 beginContent() 和 endContent() 之外的範圍不建議加入 HTML，否則會在 main.php 內容的前面或後面（<html> 標籤之前或 </html> 標籤之後）。

在 controller 裡可以這樣使用：

public function actionMylayout() {
    $this->layout = 'mylayout';
    $this->render('//site/index');
}

表示以 mylayout.php 為佈局，views/site/index.php 為內容。

利用 renderPartial() 重複使用 view

Yii 可以利用 renderPartial() 引用某個 view。
例如有個 view 的路行為 views/common/part1.php，內容為：

<table>
    <tr>
        <td>Name</td>
        <td>Phone</td>
    </tr>
    <tr>
        <td><?php echo !empty($name) ? $name : 'anonymous'; ?></td>
        <td><?php echo !empty($phone) ? $phone : ''; ?></td>
    </tr>
</table>

在另外的 view 可以使用 renderPartial() 引用：

<?php
$this->renderPartial('//common/part1', array(
    'name' => 'John',
    'phone'=> '123456',
));
?>

renderPartial() 是 controller 的方法，所以也可以在 controller 裡面使用。
第一個參數為 view 的路徑，路徑中的 // 指的是 views/ 的路徑。
第二個參數為關聯式陣列，包含欲傳入的變數。
第三個參數為「是否回傳」，預設值為 false，就是直接輸出，不回傳。若為 true，則是不輸出，只回傳字串。

啟用 Yii::trace() 功能

啟用 Yii::trace() 功能有兩個步驟：
1. 在專案目錄的 index.php 中 設定 (預設情況) ：

defined('YII_DEBUG') or define('YII_DEBUG',true);

2. 將 config/main.php 中，log component 設定中移除註解：

'log'=>array(
 'class'=>'CLogRouter',
 'routes'=>array(
  array(
   'class'=>'CFileLogRoute',
   'levels'=>'error, warning',
  ),
  // uncomment the following to show log messages on web pages
  /*
  array(
   'class'=>'CWebLogRoute',
  ),
  */
 ),
),

以上設定好之後，會顯示所有 level 為 trace 的訊息，若只要顯示我們 trace 的訊息，可以設定 categories 限定：

'log'=>array(
    'class'=>'CLogRouter',
    'routes'=>array(
        array(
            'class'=>'CFileLogRoute',
            'levels'=>'error, warning',
        ),
        array(
            'class'=>'CWebLogRoute',
            'categories'=>'application',
        ),
    ),
),

$scope.$watch() 監視 model

$scope.$watch() 可以用來監視 model 值。

<html ng-app>
<meta charset="utf-8">
<body ng-controller='myController'>
    <input ng-model="my.input" placeholder="填入整數" />
    <p>填入值: {{my.input}}</p>
    <p ng-bind="my.dots"></p>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script>
    function myController($scope) {
        $scope.my = {
            input: 0,
            dots: ''
        };
        $scope.$watch('my.input', function(newValue, oldValue, scope) {
            // console.log(':::', newValue, oldValue, scope);
            alert('new value:' + newValue);
            var dot = '◎';
            var i = parseInt($scope.my.input);
            $scope.my.dots = '';
            while (i-- > 0) {
                $scope.my.dots += dot;
            }
        });
    }
    </script>
</body>
</html>

範例 ng_scope_watch.htm

AngularJS 非全域 controller 設定方式

<html ng-app='myApp'><!-- 設定模組名稱為 myApp -->
<meta charset="utf-8">
<body ng-controller='myController'>
    <p>Hello {{txt}}</p>
    <p ng-bind=" 'Hi ' + txt"></p><!-- 未完成動作前無顯示內容 -->

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script>
    // 建立名稱為 myApp 的模組。第二個參數空陣列表示 "建立", 沒有給表示 "取得"
    var myAppModule = angular.module('myApp', []);
    
    // 設定 controller
    myAppModule.controller('myController',
        function($scope) {
            $scope.txt = "John";
        });
    </script>
</body>
</html>

AngularJS 非全域 controller 設定方式：

• 以 ng-app 設定模組名稱。
• angular.module() 建立模組。
• 以模組的 controller() 設定控制器。

ng-bind 和 {{}} 都是設定 data-binding 的方式。ng-bind 的優點是 AngularJS 尚未處理完時，不會出現模版文字。

AngularJS 概念

AngularJS 是目前相當熱門的 JS framework, 好像不學一下就快跟不上技術了。

最近看到的資源：
範例： http://tutorialzine.com/2013/08/learn-angularjs-5-examples/
影片教學： http://egghead.io/lessons

AngularJS 主要概念（參考  Oreilly AngularJS）：

• Client-Side Templates
• MVC
• Data Binding
• Dependency Injection
• Directives

練習、修改了書中的 Shopping Cart 例子，ng_cart01.htm。
個人修改時的要點：

• ng-init 初始化。
• ng-repeat="item in items" 裡 $index 是預設的索引變數。
• ng-keyup 事件在 1.1.5 之後的版本才有效。

取得某網頁上 Facebook 的 like 「讚」數量

http://graph.facebook.com/?ids=http://stackoverflow.com/,http://qops.blogspot.tw/

直接 copy 上列，貼到瀏覽器的網址列，就可以得到如下的結果：

{
    http://stackoverflow.com/: {
        id: "http://stackoverflow.com/",
        shares: 14867,
        comments: 9
    },
    http://qops.blogspot.tw/: {
        id: "http://qops.blogspot.tw/",
        shares: 13
    }
}

利用以下的 PHP 可以得到讚的數量：

<?php
$links = array(
 'http://stackoverflow.com/',
 'http://qops.blogspot.tw/',
);

$my_graph = 'http://graph.facebook.com/?ids=' . implode(',', $links);

$likes_info = json_decode( file_get_contents($my_graph), true );

foreach($links as $link) {
 printf("%s<br/>%s<br/>", $link, $likes_info[ $link ]['shares']);
}

2-2 資料型別

在 AS1，每個變數都一視同仁，沒有型別的區別。宣告變數時使用關鍵字 var，下式是宣告一個變數 b 同時設定其數值為 10。

var b = 10;

在 AS3 和 AS2 一樣，宣告變數時可以不宣告型別。不過在此建議應該指明變數的型別。指明變數型別的方式是在變數名稱之後加上冒號，再加上型別名稱，如下式：

var b:Number;

一個變數只能做一次宣告，重複宣告相同變數時，會發生錯誤。指明型別的變數，在編譯的過程中會檢查變數是否設定不同型別的值，若是則會發生錯誤，無法編譯成功。下面是個錯誤的例子。

// variable1.fla　影格　圖層1:1
var b:Number = 10;
b = true;
trace(b);

測試影片（按【Ctrl】+【Enter】）時，在輸出面板顯示錯誤訊息，如下圖。

型別（類型）不符的錯誤

宣告變數時指明型別，主要有兩個好處：

• 編程時的code completion提示。
• 避免設定不同型別的值，減少程式臭蟲。

如下圖所示，當某個變數在宣告時指明型別，則往後在變數右側輸入點（dot）之後，會有自動提示的浮動視窗出現。

程式碼提示

2-2-1  基本型別和參照型別

AS3 的基本型別（primitive types），包含5種型別：Boolean、int、uint、Number 和 String。int 和 uint 是新增的型別，int 和 uint 都是佔 32-bit 的整數型別，int 為有號整數值（可表示正、負數），uint 為無號整數（只可表示正數）。

何謂參照型別（reference types）？原則上只要不是上述的 5 種基本型別，就屬參照型別。兩者主要的差異在於設定時，一個以值設定，另一個以參照設定。Object 和 Array 是常用的參照型別。

無設定值的變數，若未宣告型別，或型別以 * 宣告，其預設值為 undefined。未設定值的參照型別變數，其預設值為 null。基本型別的預設值，如下表所示，其中比較特別的是，Number 型別的預設值為 NaN（Not a Number）。

基本資料型別	預設值
Boolean	false
int	0
uint	0
Number	Number.NaN
String	null

表: 基本型別的預設值

2-2-2  布林值

布林值就是所謂的真假值，只有兩個值 true 或者 false。布林值看起來很簡單，然而它跟邏輯有密不可分的關係，尤其在流程控制時更顯得格外重要。宣告布林變數使用 Boolean 型別，設定其值時只能使用 true、false 或者運算結果為 true、false 的運算式。

var b1:Boolean = true;
var b2:Boolean = 7>3;

上式的大於（>）符號是比較運算子之一，它在比較左右兩邊數值之後會傳回布林值。7 大於 3，所以「7>3」的計算結果為 true。

2-2-3  數值

數值在 AS3 中又可以分成 int（整數）、uint（無號整數）和 Number（可表示整數或浮點數）。使用 Number 型別時，不必為整數和浮點數之間的轉換煩心。若一開始 Number 型別變數的值就設定為整數，則以整數的型態存在，必要時整數會自動被轉換成浮點數。

若只使用到整數時，應考慮使用 int 或 uint。int 和 uint 使用 4-byte 來表現整數。Number 型別使用 8-byte 來表現數值，由於自動轉換和使用較大記憶體的關係，Number 型別的變數會比 int 或 uint 型別的變數在處理上要來得慢一點點。

數值也可以使用科學表示法，使用 e 或 E 接上10的次方數，例如：100可以寫成 1e2，0.001可以寫成 1e-3。

// number1.fla　影格　圖層 1:1
var n1:Number = 5;
var n2:Number = 5.000000000000000001;
var n3:Number = 0.123456789123456789;
var n4:Number = 1e2;
trace("n1=", n1);
trace("n1/2=", n1/2);
trace("n2=", n2);
trace("n3=", n3);
trace("n4=", n4);

• n2 設定數值時，由於小數點後超出數值可以表現的準確度，故 n2 設定為 5。
• n3 設定數值時同樣超出可表現的準確度，故以近似值表示。
• 5/2 在計算過程自動轉換為浮點數，所以得到 2.5。

number1.fla 執行結果

整數除了以一般十進位表示之外，也可以使用十六進位表示。十六進位的數值以 0x 為開頭，使用的數字符號為 0~9 及 a~f（或 A~F）。以十六進位指定數值的變數和以十進位指定數值的變數是一樣的，在輸出時都會以十進位表示。int、uint 和 Number 都可以使用十六進位的表示法，如 number2.fla。

// number2.fla　影格　圖層 1:1
var i:int = 0x66;
var u:uint = 0x66;
var n:Number = 0x66;
trace("i=", i);
trace("u=", u);
trace("n=", n);

number2.fla 執行結果

數值型別的表現範圍並不是沒有限定的，由 number1.fla 就可以了解 Number 型別有準確度的問題。數值類別的 MAX_VALUE 和 MIN_VALUE 表示數值可以表現的最大值和最小值。Number 型別的變數，若大於 Number.MAX_VALUE，則以 Infinity 表示；若大於 0 而小於 Number.MIN_VALUE，則以 0 表示。number3.fla 是個數值型別顯示範圍值的例子。

// number3.fla　影格　圖層 1:1
trace("int.MAX_VALUE=", int.MAX_VALUE);
trace("int.MIN_VALUE=", int.MIN_VALUE);
var i:int = int.MAX_VALUE+1;
var j:* = int.MAX_VALUE+1;
trace("i=", i);
trace("j=", j);
trace("uint.MAX_VALUE=", uint.MAX_VALUE);
trace("uint.MIN_VALUE=", uint.MIN_VALUE);
trace("Number.MAX_VALUE=", Number.MAX_VALUE);
trace("Number.MIN_VALUE=", Number.MIN_VALUE);

• int 型別的最大值再加 1，再設定給 int 型別變數，其值將會變成 int.MIN_VALUE。int 和 uint 一樣，在處理超出範圍的整數時，以循環的方式處理，也就是 int.MAX_VALUE+2 的值將變成 int.MIN_VALUE+1，依此類推。
• 變數j宣告成萬用型別。由於運算的過程，數值會被轉換成 Number 型別，所以可以表現比 int.MAX_VALUE 還要大的值。
• Number 型別表現整數時，可以使用53 bits（int為 32 bits），其最大值和最小值是針對浮點數而言。

number3.fla 執行結果

不同數值型別的變數值在相互設定時要注意，由於 int 和 uint 表現數值的範圍比 Number 小，Number 型別的變數不要任意轉換成 int 或 uint 型別，否則可能發生數值不如預期。

// number4.fla　影格　圖層 1:1
var m:Number = -2;
var n:Number = -1.23;
var i:int = m;
var j:int = n;
var u:uint = m;
var v:uint = n;
trace(i, u);
trace(j, v);

Number 型別轉 uint 型別時，可以想成先轉成 int，再依位元解釋數值。所以，-2147483648 ~ -1 將被轉換為 2147483648 ~ 4294967295。

number4.fla 執行結果

2-2-4  字串

ActionScript 沒有字元的型別，只有字串型別。字串常數是使用雙引號「"」或單引號「'」前後包起來。若以雙引號開頭，就必須以雙引號結尾；同樣地，若以單引號開頭，就必須以單引號結尾。你可以將雙引號放入字串內，只要使用單引號包起來就可以了，反之亦然。

// string1.fla　影格　圖層 1:1
var s1:String = "abc";
var s2:String = '您好啊';
var s3:String = "qop's blog";
var s4:String = '>"<';
trace("s1=", s1);
trace("s2=", s2);
trace("s3=", s3);
trace("s4=", s4);

string1.fla 執行結果

跳脫表示法

如果某個字串包含雙引號也包含單引號，那麼應該如何指定字串呢？這個時候就必須使用跳脫（Escape）表示法。所謂跳脫表示法，就是使用特定的符號表示某一個字元，該字元可能是沒有符號的（如跳格、換行）或有特別意義的。下表為跳脫表示法及說明。

跳脫表示法	說明
\”	雙引號
\’	單引號
\\	反斜線
\t	相當於按下「Tab」跳格
\n	相當於按下「Enter」換行
\r	和 \n 相同
\uXXXX	以Unicode字元編碼表示一個字元，XXXX為四位的十六進位數值

跳脫表示法可以使用於 trace 輸出，也可以使用於 TextField 物件。我們以 string2.fla 為例子說明。如下圖，在場景上拉一個較大的 TextField，設定為「Dynamic Text」（動態文字），取名為 tf_txt，並設定為「Multiline」（多行）及顯示邊框。

設定名為tf_txt的TextField物件

影格內輸入如下的script。

// String2.fla　影格　圖層1:1
var s1:String = "單引號\' 和雙引號\"換行\n";
var s2:String = '反斜線\\跳格\t換行\r';
var s3:String = "\u798f氣";
trace(s1+s2+s3);
tf_txt.text = s1+s2+s3;

• 加號在此的功能為字串串接，將三個字串連接後設定給 trace 輸出。
• 將三個字串連接後設定為 tf_txt 的字串內容。執行結果如下圖。跳格會因字型而影響位置，並不常用。

string2.fla 執行結果

字串的方法

字串的唯一屬性為 length，可以求得字串所包含的字元數目（或稱字元長度）。字串常用的方法列於下表。

String的方法	說明
charAt(index)	回傳字串中索引值為index的字元。
charCodeAt(index)	回傳字串中索引值為index的字元字碼。
concat(s)	字串本身連接字串s。和執行「+=s」運算相同。
fromCharCode(c)	String的靜態方法，將c字碼轉換成字串。
indexOf(s, start)	從索引值為start處開始尋找子字串s。若start省略則從頭開始找。找到子字串回傳子字串索引，若否則回傳 -1。
lastIndexOf(s)	尋找子字串最後的索引。
slice(start, end)	擷取索引index至end的字串。若end省略則擷取至最後一個字元。
search(pattern)	使用正規表示法（Regular Expression）尋找子字串。回傳子字串索引，若找不到則回傳 -1。
split(s)	將字串依特定字串s分割成元素，回傳字串陣列。
substr(index, length)	從索引為index處擷取長度為length的字串。
substring(start, end)	擷取索引index至end的字串。若end省略則擷取至最後一個字元。
toLowerCase()	轉換為小寫字母。
toUpperCase()	轉換為大寫字母。

string3.fla是使用一些字串方法的例子。

// string3.fla　影格　圖層 1:1
var s1:String = '感覺\'Happy\'就是\"幸福\"';
trace("s1的字元數為: "+s1.length);
trace(s1.charAt(0)+": "+s1.charCodeAt(0));
trace('\\u611f : '+ '\u611f');
trace( String.fromCharCode( s1.charCodeAt(0) ) );
trace(s1.slice(2, 9));
trace(s1.substring(11));
trace(s1.toUpperCase());
trace(s1.toLowerCase());
var s2:String = "12-34-567";
trace(s2.split("-"));

• 第1行，s1 字串中包含了單引號和雙引號。
• 第3行，字串中字元的索引值從 0 開始，故第一個字元的索引為 0。輸出的字元碼是 Unicode 編碼。
• 第4行，輸出 '\u611f'，其實就是「感」，可以計算一下 0x611f 是否為 24863。
• 第5行，以 String 的靜態方法 fromCharCode() 將字碼轉換為字元。
• 第6行，擷取索引 2~8 的字元（不包含索引為 9 的字元）。
• 第7行，擷取索引 11 至最後一個字元。
• 第8行，將字串轉換成全大寫輸出。
• 第9行，將字串轉換成全小寫輸出。
• 第11行，以「-」為分割字串，將s2轉換為陣列。

string3.fla 執行結果

目錄