快捷導(dǎo)航

angular十大常見問題

更新時(shí)間：2017年03月07日 15:01:44 作者：幻夢(mèng)乍醒

本文主要介紹了angular十大常見問題，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

AngularJS可以視為是一種數(shù)據(jù)優(yōu)先的框架，在它的三個(gè)層面中，數(shù)據(jù)模型是骨架，視圖模型和業(yè)務(wù)事件是血肉，視圖模板和指令是皮毛，這三層合在一起，就形成了一個(gè)活生生的Web應(yīng)用。

1.ng-if的情況下，始終將頁(yè)面中的元素綁定到對(duì)象的屬性（data.x）而不是直接綁定到基本變量（x）上。因?yàn)閚g-if 會(huì)（隱式地）產(chǎn)生新作用域。

2.ng-repeat迭代數(shù)組的時(shí)候，如果數(shù)組中有相同值，會(huì)有什么問題，如何解決? 加 track by $index 可解決。也可以 trace by 任何一個(gè)普通的值

3.ng-click 中寫的表達(dá)式，能使用 JS 原生對(duì)象上的方法嗎?不能用，只要是在頁(yè)面中，都不能直接調(diào)用原生的 JS 方法。因?yàn)檫@些并不存在于與頁(yè)面對(duì)應(yīng)的 Controller 的 $scope 中。

<p>{{13.14 | parseIntFilter}}</p>
app.filter('parseIntFilter', function(){
  return function(item){
    return parseInt(item);
  }
})

4.{{now | 'yyyy-MM-dd'}} 這種表達(dá)式里面，豎線和后面的參數(shù)通過什么方式可以自定義？

ng 內(nèi)置的 filter 有九種：

date（日期）

currency（貨幣）

limitTo（限制數(shù)組或字符串長(zhǎng)度）

orderBy（排序）

lowercase（小寫）

uppercase（大寫）

number（格式化數(shù)字，加上千位分隔符，并接收參數(shù)限定小數(shù)點(diǎn)位數(shù)）

filter（處理一個(gè)數(shù)組，過濾出含有某個(gè)子串的元素）

json（格式化 json 對(duì)象）

5.filter 有兩種使用方法，一種是直接在頁(yè)面里：

<p>{{now | date : 'yyyy-MM-dd'}}</p>

另一種是在 js 里面用：

// $filter('過濾器名稱')(需要過濾的對(duì)象, 參數(shù)1, 參數(shù)2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

自定義 filter

// 形式
app.filter('過濾器名稱',function(){
  return function(需要過濾的對(duì)象,過濾器參數(shù)1,過濾器參數(shù)2,...){
    //...做一些事情 
    return 處理后的對(duì)象;
  }
}); 

// 栗子
app.filter('timesFilter', function(){
  return function(item, times){
    var result = '';
    for(var i = 0; i < times; i++){
      result += item;
    }
    return result;
  }
})

6.factory、service 和 provider 是什么關(guān)系？

factory返回的是一個(gè)對(duì)象，而service返回的是一個(gè)實(shí)例化對(duì)象，綁定到 this 的都可以被訪問。provider 是加強(qiáng)版 factory，返回一個(gè)可配置的 factory

7.性能問題

作為 MVVM 框架，因?yàn)閷?shí)現(xiàn)了數(shù)據(jù)的雙向綁定，對(duì)于大數(shù)組、復(fù)雜對(duì)象會(huì)存在性能問題。

可以用來優(yōu)化 Angular 應(yīng)用的性能的辦法：

減少監(jiān)控項(xiàng)（比如對(duì)不會(huì)變化的數(shù)據(jù)采用單向綁定）

主動(dòng)設(shè)置索引（指定 track by，簡(jiǎn)單類型默認(rèn)用自身當(dāng)索引，對(duì)象默認(rèn)使用 $$hashKey，比如改為 track by item.id）

降低渲染數(shù)據(jù)量（比如分頁(yè)，或者每次取一小部分?jǐn)?shù)據(jù)，根據(jù)需要再?。?/p>

數(shù)據(jù)扁平化（比如對(duì)于樹狀結(jié)構(gòu)，使用扁平化結(jié)構(gòu)，構(gòu)建一個(gè) map 和樹狀數(shù)據(jù)，對(duì)樹操作時(shí)，由于跟扁平數(shù)據(jù)同一引用，樹狀數(shù)據(jù)變更會(huì)同步到原始的扁平數(shù)據(jù)）

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: