2013年6月16日 星期日

AngularJS 玩弄手札 Mr.Q 非關 Jolin

早在第一次看http://docs.angularjs.org/api/ng.$q的時候就看到 $q 這個望名無法思義的東東了

但是 AngularJS 有 Filter 人類也有 還是自動過濾的 然後因為沒有什麼大麻煩出現 Q 先生就從人類變成被遺忘者

如今就是 Q 先生 重返擂台的時刻!

官網留下一條線索 A promise/deferred implementation inspired by Kris Kowal's Q.

拜請 G 大神之後 發現

JavaScript异步编程的Promise模式

緊接著又發現這個

Javascript异步编程的4种方法

最後是這個

你没有抓住Promises的要点

原文:You're Missing the Point of Promises

最後這篇 他的彩蛋是最下面這句:

Q by Kris Kowal and myself: a full-featured promise library with a large, powerful API surface, adapters for Node.js, progress support, and preliminary support for long stack traces.

Q：Kris Kowal和我写的，一个promise特性完全实现的类库，有丰富的API、Node.js的支持、处理流支持，以及初步的对于长堆栈的支持。





如果你是個牛仔 不用麻煩了 是你的口頭禪

那我就大發慈悲的擅自作主幫你做結論

1.Javascript非同步程式設計 基本四式 : 回呼函數、事件監聽、發佈/訂閱、Promises物件

2.有人覺得 J蛞蝓 它的promises在錯誤處理上的實現是完全錯誤的

3.Q 先生 是幾位神人生出來的 一個promise特性完全實現的類庫





故事講完了 回歸現實 AngularJS 的 Q 先生 要怎麼玩呢?

首先看看官網怎麼說...尼瑪 當初就是看不懂 Q 先生 才變成被遺忘者

還是看看神人解釋http://zouyesheng.com/angular.html#toc40

神文章 果斷鞭辟入裡

但是仍舊抽象 做而言不如起而行 立馬來重構一下代碼

要被開刀的就是這位在虎山被大蟲咬的朋友

Web API in Web Form 之 SPA 明知山有虎 偏向虎山行 上篇

AngularJS in Web Form 之 SPA 明知山有虎 偏向虎山行 下篇

這位朋友有什麼毛病呢？

神人說 MVC Model 要肥、Controller 要輕、View 要夠笨 這傢伙的 Controller 顯然比端午節肉粽的肥肉還肥

來吧 跟著 鄭多燕 一起變瘦吧~





html 變這樣 js部分 拆成 app.js、roleService.js 和 rolesController.js

app ... 很空 因為沒有 config ~.~

roleService 注入 $http, $q 專門用來處理呼叫 webAPI

rolesController 注入 $scope, roleService 變笨瘦了 專心處理 $scope





最後...真的有變瘦嗎? 沒有呀 總行數變多了 哈哈

但是 rolesController 本身確實變瘦了

重點在於 roleService 現在可以被任何 Controller 注入使用 不再綁死在 rolesController 之中 也就是達成關注點分離





飯粒檔：http://www.mediafire.com/download/ft9vbfg05ejwhw9/testAPI_%24q.zip

張貼者： 於 下午2:52 0 意見
標籤： ,

2013年6月12日 星期三

AngularJS 玩弄手札 巢狀 ngRepeat + filter

一般的 filter 範例都長這樣





    <div ng-app>
        <div ng-controller="GagMangaCtrl">
            search.Name:<input type="text" ng-model="search.name" />
            search.Say:<input type="text" ng-model="search.say" />
            search.$:<input type="text" ng-model="search.$" />
            <table>
                <tr ng-repeat="member in GagManga.members | filter:search">
                    <td>{{member.name}}</td>
                    <td>{{member.say}}</td>
                </tr>
            </table>
        </div>
    </div>

    <script src="Scripts/angular.min.js"></script>
    <script>
        function GagMangaCtrl($scope) {
            $scope.GagManga = {
                members: [
                    { name: '熊吉', say: '我也只不過是被大三角板玩弄於股掌之間的一名犧牲者' },
                    { name: '兔美', say: '比起推理我更喜歡報警' },
                    { name: '聖德太子', say: '閉嘴，我聖德太子的字典裡沒有自作自受這個詞！' },
                    { name: '小野妹子', say: '你這字典也太個人主義了吧' },
                    { name: '悟空：', say: '這就是天竺麼？不給力啊，老濕~ ' },
                    { name: '三藏', say: '你們太大意了，蠢材！！擦！！擦！！ ' },
                    { name: '河合曾良', say: '您是巴嘎麼 芭蕉桑' },
                    { name: '松尾芭蕉', say: '不是巴嘎 是芭蕉' }
                ]
            };
        };

    </script>




但是如果來源不是 使用者輸入 而是巢狀 ngRepeat 的某個父元素 要 filter 某個子元素呢





    <div ng-app="app" ng-controller="myCtrl" class="well-small">

        <fieldset ng-repeat="degree in degrees">
            <legend>{{degree.Degree}}</legend>
            <span ng-repeat="toxic in toxics | filter : { Degree: degree.ID }" class="alert span3">
                Name: {{toxic.Name}}<br />
                Scientific: {{toxic.Scientific}}
            </span>
        </fieldset>

    </div>

    <script src="Scripts/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller('myCtrl', function ($scope) {

            $scope.degrees = [
                {
                    ID: 0,
                    Degree: 'Mild',
                    IsDeadly: false
                },
                {
                    ID: 1,
                    Degree: 'Moderate',
                    IsDeadly: false
                },
                {
                    ID: 2,
                    Degree: 'Severe',
                    IsDeadly: true
                }
            ];

            $scope.toxics = [
                {
                    ID: 1,
                    Name: "毒澱粉",
                    Scientific: "順丁烯二酸",
                    Degree: 0
                },
                {
                    ID: 2,
                    Name: "毒奶粉",
                    Scientific: "三聚氰胺",
                    Degree: 1
                },
                {
                    ID: 3,
                    Name: "瘦肉精",
                    Scientific: "乙型交感神經受體致效劑",
                    Degree: 0
                },
                {
                    ID: 3,
                    Name: "塑化劑",
                    Scientific: "鄰苯二甲酸酯",
                    Degree: 1
                },
                {
                    ID: 5,
                    Name: "丁丁汁",
                    Scientific: "甲基環丙烷",
                    Degree: 2
                }
            ];
        });


    </script>




張貼者： 於 下午4:17 0 意見
標籤： ,

2013年5月31日 星期五

一秒看破 LINQ & Lambda Expressions

最近有人問我 令Q 跟 浪打 到底是在玩什麼花招的? 可以吃嗎? 非用不可?

我就在此稍微回答一下

1.令Q 跟 浪打 都可以用來對付 [可列舉型態型別的查詢] 浪打花招更多一點點 還能用來建立 委派 跟 註冊事件

2.可以吃唷 前者有點 QQ 的 後者 有點辣辣的

3.就民主立場而言 沒有非用不可 跟你有沒有非要 非死不可 差不多

　但是專制獨裁的微軟要推他就會使出各種陰謀稱作技術主流





如果這張圖你很懂在幹嘛 你可以關閉這個網頁 試著啟動 OO聯盟

影像節錄自 跟著 Wade 哥哥 學習ASP.NET MVC + NHibernate - Day 5 16:43



如果 你覺得 花惹發科 就繼續看下去

其實上圖跟等下的內容沒有關係 呵呵 但是證明了 微軟會無所不用其極的在任何地方使用他





首先 非關DB 非關Query List 的 方法

如果你不認識 泛型先生 跟 委派小姐 的話 請拜估狗大神

生死格鬥之浪打委派 第一彈 List Sort()、Find()、FindAll()、Exist() 豬走路範例
public void Sort(Comparison<T> comparison);

public T Find(Predicate<T> match);

public List<T> FindAll(Predicate<T> match);

public bool Exists(Predicate<T> match);





發現了什麼了嗎? 沒錯 浪打 就是一個委派 委派就是一個方法 所以使用浪打 跟使用一般的方法只差在多寫一個 方法

(這句話其實不完全正確 但是暫時這麼想會比較好理解)





以前老師說 一般的 = 在C# 是向左指派的意思 而 => 則是 向右指派 所以 x 可以被 => 右邊所用...

恩 完全正確 但是當時我也 完全不知道這是在講沙米碗糕 真是給他打敗啦 還是說只有我比較笨 聽不懂上面這句話





實際玩弄很久之後 才大徹大悟 哎呀 他不過是濃縮寫法的方法

=> 的左邊 就是方法傳入參數 會由叫用委派的地方提供

而且會自動推斷型別 所以不像一般方法需要 給傳入參數標明型別

=> 的右邊 就是方法要執行的內容

一行寫法 可以省略 { } return 跟 ;

整個浪打本身 就是一個匿名方法 所以不像一般方法需要命名


沒傳入參數 沒回傳型別 浪打
        private void Foo()
        {
            Action Fn = () => { };
        }
沒傳入參數 沒回傳型別 方法
        private void Fn()
        {
        }

有傳入參數 沒回傳型別 浪打
        private void Foo()
        {
            Action<int> Fn = i => { };
        }
有傳入參數 沒回傳型別 方法
        private void Fn(int i)
        {
        }

沒傳入參數 有回傳型別 浪打
        private void Foo()
        {
            Func<bool> Fn1 = () => true;
            Func<bool> Fn2 = () => { return true; };
        }
沒傳入參數 有回傳型別 方法
        private bool Fn()
        {
            return true;
        }

有傳入參數 有回傳型別 浪打
        private void Foo()
        {
            Func<int, bool> Fn1 = i => i > 0;
            Func<int, bool> Fn2 = i => { return i > 0; };
        }
有傳入參數 有回傳型別 方法
        private bool Fn(int i)
        {
            return i > 0;
        }




什麼? 你說 LINQ 跟查詢在哪? 下回分曉 哈哈

張貼者： 於 上午10:39 0 意見
標籤： ,
訂閱： 文章 (Atom)