search

gracekrcx / weekly-notes

4 stars 0 forks source link

（筆記）JS 實用技巧分享 #111

Open gracekrcx opened 3 years ago

gracekrcx commented 3 years ago

來源：https://bit.ly/3qLvHz3

軟體開發趨勢（Why）

  1. 產出可運行的軟體 working software
  2. 交付價值 value
  3. 完全整合 fully interated
  4. 可驗證 verifiable
  5. 可測試 testable
  6. The Agile Mona Lisa
  7. 理想中 vs 現實中
    1. 是否有明確的需求規格？

易擴充的思維與範例（What）

抽象化 abstraction

抽象化，將『具體的細節』，保留成『模糊或無定義』的樣子

  1. 舉例：目標結果是『和』，但有可能今天是 1 次方和，明天是 2 次方和，後天是 2 次方和 / 3，這些變動，如何不輕易影響主程式
  2. data 與 rules : 購物車計算 discount
    1. 未 discount 前的 product price
    2. 這次購物的 total discount
    3. amountBeforeDiscount - totalDiscount
  3. jquery api 呼叫的抽象化（ie, chrome, saferi）（再想一次什麼是抽象化？抽象化是一個動詞）
  4. 小結： All problems in computer science can be solved by another level of indirection - David Wheeler

    單一職責原則 single responsibility principle SRP

  5. 如何切分：職責
  6. the principle is about people
  7. 縱切面與橫切面
  8. 公用方法 Util 的變動，會是最的小。公有 Public 的變化會小於 Private。條件式的變動會最大
  9. 千層蛋糕
  10. 小結：
    1. 多人關注的地方：垂直切分（職責）
    2. 變化：水平切分
    3. 在做完垂直切割後，每一塊千層蛋糕，又可以根據抽象化（想一下抽象化的凹字型），去做水平切割

      可測試性 testability

  11. 測試性不好？哪裡不好？（1）是否能測（2）是否好測
  12. 可控制性：可以控制 A->B->C or A->B'->C'
  13. 可觀察性：可以觀察過程與結果

    JS 函數特性實作策略模式（How）

  14. 問題產生：A function 裡 不該有產生 B function flag 的程式，因為之後 B 可能會換成 C function
  15. 有沒有可能在進入 A function 時就知道是要採取 B1 function 還是 B2 function

參考文章： 重新思考 jQuery

註：

  1. 工具是基於原理來的，有了原則，根據原則會產生出不同特性的 testing library
gracekrcx commented 3 years ago 
var add = function(x) {
  return function(y) {
    return x + y;
  };
};

var s1 = add(1);   // 策略 1
var s10 = add(10);  // 策略 10

s1(2); // data 2
s10(20) // data 20
gracekrcx commented 3 years ago 
const { curry } = require('ramda')

const getKey = curry((key, obj)=>{
 return obj[key]
})

const getName = getKey("name") // 策略
const getEmial = getKey("email") // 策略
gracekrcx commented 3 years ago 
const getKey = ((key)=>{
 return (obj)=>{
    return obj[key] 
 }
})

const getName = getKey('name') // 策略
const names = [
    {name: 'Bob', age: 13},
    {name: 'Zoo', age: 23},
    {name: 'Foo', age: 17}
].map((item)=>{
    return getName(item)
})

console.log(names)
// ["Bob", "Zoo", "Foo"]