我們最近為我們的論壇增加了一個(gè)自動(dòng)完成功能（稱為Smarty），在要求專業(yè)人員簡(jiǎn)介的主頁(yè)上。這是一個(gè)超有用的功能，因?yàn)樗兄谖覀儗⒂脩魧?dǎo)航到他們真正想去的地方。它很有意思，也是用AngularJS構(gòu)建的！

我們希望Smarty能夠:

1.     通過(guò)用戶的給定輸入 (一個(gè)前綴)，通過(guò)一個(gè)HTTP請(qǐng)求后自動(dòng)提供建議
2.     顯示一個(gè)建議的下拉列表
3.     當(dāng)用戶輸入時(shí)更新
4.     足夠快，能夠跟得上用戶的輸入
5.     導(dǎo)航直觀且能夠關(guān)閉
6.     可重用

以往沒(méi)有AngularJS的經(jīng)驗(yàn)，這個(gè)項(xiàng)目是我使用這個(gè)框架的入門項(xiàng)目。它真的成為了一次寶貴的學(xué)習(xí)經(jīng)驗(yàn)，而且我發(fā)現(xiàn)這個(gè)框架許多方面相互借鑒地很好且能很好地符合我上面列出的要求。當(dāng)然，還有一些問(wèn)題尚在學(xué)習(xí)過(guò)程中！

AngularJS的樂(lè)趣所在

我最喜歡Angular的一點(diǎn)是它是如何分解成具有明確目的的概念的。Smarty廣泛使用了其中的兩個(gè)概念——Directives 和 Services。Directive和DOM綁定在了一起，用來(lái)管理和元素之間的交互；而Service通過(guò)依賴注入的方式為Controller和Directive提供了獨(dú)立的可以重用的邏輯。

Angular提供了很多內(nèi)建的Directive和Service，我們?cè)谶@個(gè)項(xiàng)目中使用到了其中的多個(gè)。

    為了顯示建議(見要求2)，我們使用了ngIf 和 ngRepeat 指令來(lái)有條件的顯示和填充建議下來(lái)列表。

    為了實(shí)現(xiàn)當(dāng)用戶輸入的時(shí)候更新建議內(nèi)容（見要求3），我們使用了ngModel 指令將$scope上前綴變量上輸入元素的請(qǐng)求和Scope上的$watch方法雙向綁定起來(lái)，用來(lái)監(jiān)聽前綴的變化。

    我們需要考慮的一件事是這個(gè)自動(dòng)完成功能的更新速度可能跟不上用戶的輸入速度（見要求4）。因?yàn)槊慨?dāng)前綴的值發(fā)生變化時(shí)，Smarty都要發(fā)送一個(gè)HTTP請(qǐng)求（通過(guò)內(nèi)建的$http Service）。我們決定用 $http 的可選配置參數(shù)($http.get(requestUrl, {cache: true}))來(lái)緩存結(jié)果。這是提升性能的一個(gè)很簡(jiǎn)單的方法。

我們還寫了自定義的Directive和Service來(lái)滿足我們的特定需求：

    smartySuggestor Service:smartySuggestor 提供了一個(gè)getSmartySuggestions()函數(shù)，用來(lái)接受用戶生成的前綴作為它的參數(shù)，并通過(guò)http請(qǐng)求訪問(wèn)我們后端的suggestor服務(wù)來(lái)得到自動(dòng)完成的建議。（見要求1）。

    smartyInput Directive: 我們所面臨的一個(gè)挑戰(zhàn)是，定義出一個(gè)用戶和下拉列表之間的所有可能的交互，并且寫測(cè)試用例，以確保在開發(fā)期間和開發(fā)之后，這些功能都是完好的。我們使用一個(gè)Directive(smartyInput)來(lái)包含用戶和下拉列表之間所有可能發(fā)生的交互（見要求6），同時(shí)，我們使用內(nèi)建的ng-mouseover 和 ng-click 指令(Directive)來(lái)定義下拉列表和鼠標(biāo)事件之間的交互。

正如我前邊所提到的，我們所面臨的一個(gè)挑戰(zhàn)是我們要確保我們沒(méi)有破壞掉所有用戶和下拉列表之間可能發(fā)生的交互方式。為了追蹤這些用戶交互，并確保我們沒(méi)有在開發(fā)的過(guò)程中破壞掉它，我們使用了

學(xué)習(xí)總結(jié)

$scope.selected = -1;

<input type="text" smarty-input index="selected">

scope: {index: "=", ...}

$scope.setSelected = function(newValue) {...};

<input type="text" smarty-input select="setSelected(x)">

scope: {select: "&", ... }...scope.select({"x": parseInt(scope.index) + 1});

$scope.prefix = ""

<div smarty-suggestions prefix="{{prefix}}">

scope: {prefix: "@", ...}

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data) {
  $scope.suggestions = data;});

function getSmartySuggestions(prefix) {
  requestParams["query"] = escape(prefix.toLowerCase());
  var promise = $http.get(requestUrl(),
    {
      params: requestParams,
      cache: true
    }
  ).then(function(response) {
    return response.data.slice(0, 5).map(function(item) {
      return item.Name;
    });
  });
  return promise;}

[{"ID":13,"Name":"Portrait Photography"},{"ID":24,"Name":"Commercial Photography"},{"ID":21,"Name":"Pet Photography"},{"ID":16,"Name":"Event Photography"},{"ID":26,"Name":"Headshot Photography"}]

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);
promise.then(function(data) {
  $scope.suggestions = data;
});

最新評(píng)論