Ember 計(jì)算屬性

2018-12-11 14:49 更新

簡單的計(jì)算屬性

簡單地來說，計(jì)算屬性就是將函數(shù)聲明為屬性，就類似于調(diào)用了一個(gè)函數(shù)，Ember會自動調(diào)用這個(gè)函數(shù)。計(jì)算屬性最大的特點(diǎn)就是能自動檢測變化，及時(shí)更新數(shù)據(jù)。

  1. Person = Ember.Object.extend({
  2.     firstName: null,
  3.     lastName: null,
  5.     
  6.     //  fullName 就是一個(gè)計(jì)算屬性
  7.     fullName: Ember.computed('firstName', 'lastName', function() {
  8.         return this.get('firstName') + ", " + this.get('lastName');
  9.     })
  10. });
  13. //  實(shí)例化同時(shí)傳入?yún)?shù)
  14. var piter = Person.create({
  15.     firstName: 'chen',
  16.     lastName: 'ubuntuvim'
  17. });
  18. console.log(piter.get('fullName'));  // output >>   chen, ubuntuvim

計(jì)算屬性其實(shí)就是一個(gè)函數(shù)，如果你接觸過就jQuery、Extjs相信你會非常熟悉，在這兩個(gè)框架中函數(shù)就是這么定義的。只不過在Ember中，把這種函數(shù)當(dāng)做屬性來處理，并且可以通過get獲取函數(shù)的返回值。

計(jì)算屬性鏈

在Ember程序中，計(jì)算屬性還能調(diào)用另外一個(gè)計(jì)算屬性，形成計(jì)算屬性鏈，也可以用于擴(kuò)展某個(gè)方法。在上一實(shí)例的基礎(chǔ)上增加一個(gè)description()方法。

  1. Person = Ember.Object.extend({
  2.     firstName: null,
  3.     lastName: null,
  4.     age: null,
  5.     county: null,
  7.     
  8.     //  fullName 就是一個(gè)計(jì)算屬性
  9.     fullName: Ember.computed('firstName', 'lastName', function() {
  10.         return this.get('firstName') + ", " + this.get('lastName');
  11.     }),
  12.     description: Ember.computed('fullName', 'age', 'county', function() {
  13.         return this.get('fullName') + " age " + this.get('age') + " county " + this.get('county');
  14.     })
  15. });
  18. //  實(shí)例化同時(shí)傳入?yún)?shù)
  19. var piter = Person.create({
  20.     firstName: 'chen',
  21.     lastName: 'ubuntuvim',
  22.     age: 25,
  23.     county: 'china'
  24. });
  25. console.log(piter.get('description'));  // output >>   chen, ubuntuvim

當(dāng)用戶使用set方法改變firstName的值，然后再調(diào)用get('description')得到的值也是更新后的值。

重寫計(jì)算屬性的get、set方法

注意要把重寫的屬性作為參數(shù)傳入computed方法，要區(qū)別計(jì)算屬性的定義方法，定義的時(shí)候computed方法的最后一個(gè)參數(shù)是一個(gè)function，而重寫的時(shí)候最后一個(gè)參數(shù)是一個(gè)hash。

  1. //    重寫計(jì)算屬性的get、set方法
  2. Person = Ember.Object.extend({
  3.     firstName: null,
  4.     lastName: null,
  6.     
  7.     //  重寫計(jì)算屬性fullName的get、set方法
  8.     fullName: Ember.computed('firstName', 'lastName', {
  9.         get(key) {
  10.             return this.get('firstName') + "," + this.get('lastName');
  11.         },
  12.         set(key, value) {
  13.             //  這個(gè)官方文檔使用的代碼，但是我運(yùn)行的時(shí)候出現(xiàn) Uncaught SyntaxError: Unexpected token [  這個(gè)錯誤，不知道是否是缺少某個(gè)文件，后續(xù)會補(bǔ)上；
  14. //            console.log("value = " + value);
  15. //            var [ firstName, lastName ] = value.split(/\s+/);  
  16.             var firstName = value.split(/\s+/)[0];
  17.             var lastName = value.split(/\s+/)[1];
  18.             this.set('firstName', firstName);
  19.             this.set('lastName', lastName);
  21.             
  22.         }
  23.     }),
  24. //    對于普通的屬性無法重寫get、set方法
  25. //    firstName: Ember.computed('firstName', {
  26. //        get(key) {
  27. //            return this.get('firstName') + "@@";
  28. //        },
  29. //        set(key, value) {
  30. //            this.set('firstName', value);
  31. //        }
  32. //    })
  33. });
  35.     
  36. var jack = Person.create();    
  37. jack.set('fullName', "james kobe");
  38. console.log(jack.get('firstName'));
  39. console.log(jack.get('lastName'));

運(yùn)行結(jié)果

計(jì)算屬性值的統(tǒng)計(jì)

我們經(jīng)常會遇到這種情況：某個(gè)計(jì)算屬性值是依賴某個(gè)數(shù)組或者其他對象的，比如在Ember的todos這個(gè)例子中有這樣的一段代碼。

  1. export default Ember.Controller.extend({
  2.   todos: [
  3.     Ember.Object.create({ isDone: true }),
  4.     Ember.Object.create({ isDone: false }),
  5.     Ember.Object.create({ isDone: true })
  6.   ],
  7.   remaining: Ember.computed('todos.@each.isDone', function() {
  8.     var todos = this.get('todos');
  9.     return todos.filterBy('isDone', false).get('length');
  10.   })
  11. });

計(jì)算屬性remaining的值于依賴數(shù)組todos。在這里還有個(gè)知識點(diǎn)：在上述代碼computed()方法里有一個(gè)todos.@each.isDone這樣的鍵，里面包含了一個(gè)特別的鍵@each（后面還會看到更特別的鍵[]）。需要注意的是這種鍵不能嵌套并且是只能獲取一個(gè)層次的屬性。比如todos.@each.foo.name(獲取多層次屬性，這里是先得到foo再獲取name)或者todos.@each.owner.@each.name(嵌套)這兩種方式都是不允許的。

在如下4種情況Ember會自動更新綁定的計(jì)算屬性值：<br> 1.在todos數(shù)組中任意一個(gè)對象的isDone屬性值發(fā)生變化的時(shí)候； 2.往todos數(shù)組新增元素的時(shí)候； 3.從todos數(shù)組刪除元素的時(shí)候； 4.在控制器中todos數(shù)組被改變?yōu)槠渌臄?shù)組的時(shí)候；

比如下面代碼演示的結(jié)果；

  1. Task = Ember.Object.extend({
  2.   isDone: false  //  默認(rèn)為false
  3. }); 
  6. WorkerLists = Ember.Object.extend({
  7.   //  定義一個(gè)Task對象數(shù)組
  8.   lists: [
  9.     Task.create({ isDone: false }),
  10.     Task.create({ isDone: true }),
  11.     Task.create(),
  12.     Task.create({ isDone: true }),
  13.     Task.create({ isDone: true }),
  14.     Task.create({ isDone: true }),
  15.     Task.create({ isDone: false }),
  16.     Task.create({ isDone: true })
  17.   ],
  20.   remaining: Ember.computed('lists.@each.isDone', function() {
  21.     var lists = this.get('lists');
  22.     //  先查詢屬性isDone值為false的對象，再返回其數(shù)量
  23.     return lists.filterBy('isDone', false).get('length');
  24.   })
  25. });
  28. // 如下代碼使用到的API請查看：http://emberjs.com/api/classes/Ember.MutableArray.html
  29. var wl = WorkerLists.create();
  30. //  所有isDone屬性值未做任何修改
  31. console.log('1,>> Not complete lenght is ' + wl.get('remaining'));  //  output 3
  32. var lists = wl.get('lists');  //  得到對象內(nèi)的數(shù)組
  35. // -----  演示第一種情況： 1. 在todos數(shù)組中任意一個(gè)對象的isDone屬性值發(fā)生變化的時(shí)候；
  36. //  修改數(shù)組一個(gè)元素的isDone的 值
  37. var item1 = lists.objectAt(3);  //  得到第4個(gè)元素 objectAt()方法是Ember為我們提供的
  38. // console.log('item1 = ' + item1);
  39. item1.set('isDone', false);
  40. console.log('2,>> Not complete lenght is ' + wl.get('remaining'));  //  output 4
  43. //  --------- 2.  往todos數(shù)組新增元素的時(shí)候；
  44. lists.pushObject(Task.create({ isDone: false }));  //新增一個(gè)isDone為false的對象
  45. console.log('3,>> Not complete lenght is ' + wl.get('remaining'));  //  output 5
  48. //  --------- 3.  從todos數(shù)組刪除元素的時(shí)候；
  49. lists.removeObject(item1);  // 刪除了一個(gè)元素
  50. console.log('4,>> Not complete lenght is ' + wl.get('remaining'));  //  output 4
  53. //  --------- 4.  在控制器中todos數(shù)組被改變?yōu)槠渌臄?shù)組的時(shí)候；
  54. //  創(chuàng)建一個(gè)Controller
  55. TodosController = Ember.Controller.extend({
  56.   // 在控制器內(nèi)定義另外一個(gè)Task對象數(shù)組
  57.   todosInController: [
  58.     Task.create({ isDone: false }),
  59.     Task.create({ isDone: true })
  60.   ],
  61.   //  使用鍵”@each.isDone“遍歷得到的filterBy()方法過濾后的對象的isDone屬性
  62.   remaining: function() {
  63.     //  remaining()方法返回的是控制器內(nèi)的數(shù)組
  64.     return this.get('todosInController').filterBy('isDone', false).get('length');
  65.   }.property('@each.isDone')  //  指定遍歷的屬性
  66. });
  67. todosController = TodosController.create();
  68. var count = todosController.get('remaining');
  69. console.log('5,>> Not complete lenght is ' + count);  //  output 1

代碼演示的結(jié)果

上述的情況中，我們對數(shù)組對象的是關(guān)注點(diǎn)是在對象的屬性上，但是實(shí)際中往往很多情況我們并不關(guān)系對象內(nèi)的屬性是否變化了，而是把數(shù)組元素作為一個(gè)整體對象處理（比如數(shù)組元素個(gè)數(shù)的變化）。相比上述的代碼下面的代碼檢測的是數(shù)組對象元素的變化，而不是對象的isDone屬性的變化。在這種情況你可以看看下面例子，在例子中使用鍵[]代替鍵@each。從鍵的變化也可以看出他們的不同之處。

  1. Task = Ember.Object.extend({
  2.   isDone: false,  //  默認(rèn)為false
  3.   name: 'taskName',
  4.   //  為了顯示結(jié)果方便，重寫toString()方法
  5.   toString: function() {
  6.     return '[name = '+this.get('name')+', isDone = '+this.get('isDone')+']';
  7.   }
  8. }); 
  11. WorkerLists = Ember.Object.extend({
  12.   //  定義一個(gè)Task對象數(shù)組
  13.   lists: [
  14.     Task.create({ isDone: false, name: 'ibeginner.sinaapp.com' }),
  15.     Task.create({ isDone: true, name: 'i2cao.xyz' }),
  16.     Task.create(),
  17.     Task.create({ isDone: true, name: 'ubuntuvim' }),
  18.     Task.create({ isDone: true , name: '1527254027@qq.com'}),
  19.     Task.create({ isDone: true })
  20.   ],
  23.   index: null,
  24.   indexOfSelectedTodo: Ember.computed('index', 'lists.[]', function() {
  25.     return this.get('lists').objectAt(this.get('index'));
  26.   })
  27. });
  32. var wl = WorkerLists.create();
  33. //  所有isDone屬性值未做任何修改
  34. var index = 1;
  35. wl.set('index', index);
  36. console.log('Get '+wl.get('indexOfSelectedTodo').toString()+' by index ' + index);

代碼演示的結(jié)果

Ember.computed這個(gè)組件中有很多使用鍵[]實(shí)現(xiàn)的方法。當(dāng)你想創(chuàng)建一個(gè)計(jì)算屬性是數(shù)組的時(shí)候特別適用。你可以使用Ember.computed.map來構(gòu)建你的計(jì)算屬性。

  1. const Hamster = Ember.Object.extend({
  2.   chores: null,
  3.   excitingChores: Ember.computed('chores.[]', function() { //告訴Ember chores是一個(gè)數(shù)組
  4.     return this.get('chores').map(function(chore, index) {
  5.       //return `${index} --> ${chore.toUpperCase()}`;  //  可以使用${}表達(dá)式，并且在表達(dá)式內(nèi)可以直接調(diào)用js方法
  6.       return `${chore}`;  //返回元素值
  7.     });
  8.   })
  9. });
  12. //  為數(shù)組賦值
  13. const hamster = Hamster.create({
  14.   //  名字chores要與類Hamster定義指定數(shù)組的名字一致
  15.   chores: ['First Value', 'write more unit tests']
  16. });
  19. console.log(hamster.get('excitingChores'));
  20. hamster.get('chores').pushObject("Add item test");  //add an item to chores array
  21. console.log(hamster.get('excitingChores'));

Ember還提供了另外一種方式去定義數(shù)組類型的計(jì)算屬性。

  1. const Hamster = Ember.Object.extend({
  2.   chores: null,
  3.   excitingChores: Ember.computed('chores.[]', function() {
  4.     return this.get('chores').map(function(chore, index) {
  5.       //return `${index} --> ${chore.toUpperCase()}`;  //  可以使用${}表達(dá)式，并且在表達(dá)式內(nèi)可以直接調(diào)用js方法
  6.       return `${chore}`;  //返回元素值
  7.     });
  8.   })
  9. });
  12. //  為數(shù)組賦值
  13. const hamster = Hamster.create({
  14.   //  名字chores要與類Hamster定義指定數(shù)組的名字一致
  15.   chores: ['First Value', 'write more unit tests']
  16. });
  19. console.log(hamster.get('excitingChores'));
  20. hamster.get('chores').pushObject("Add item test");  //add an item to chores array
  21. console.log(hamster.get('excitingChores'));

<br> 博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大?。?，如果你覺得博文對你有點(diǎn)用在github項(xiàng)目上給我個(gè)star吧。您的肯定對我來說是最大的動力?。?/p>

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號