clarencef / blog Goto Github PK

class ToggleTheme extends React.Component {
  state = { isDarkMode: false }

  render() {
    const { darkThemeText, lightThemeText } = this.props;
    return this.state.isDarkMode ? (
      <div>
        {darkThemeText}
        <button>Toggle Theme</button>
      </div>
    )  :  (
      <div>
        {lightThemeText}
        <button>Toggle Theme</button>
      </div>
    );
  }
}

class Main extends React.Component {
  render () {
    return (
      <div className='main>
        <ToggleTheme
          darkThemeText ="Dark Mode"
          lightThemeText="Light Mode"
        />
      </div>
    );
  }
}

class ToggleTheme extends Component {
  state = { isDarkMode: false };

  toggle = () => {
    this.setState(
      ({ isDarkMode }) => ({ isDarkMode: !isDarkMode }),
      () => this.props.onToggle(this.state.isDarkMode)
    );
  };

  static Dark = ({ isDarkMode, children }) => {
    return isDarkMode ? children : null;
  };

  static Light = ({ isDarkMode, children }) => {
    return isDarkMode ? null : children;
  };

  static Button = ({ toggle, children }) => {
    return <button onClick={toggle}>{children}</button>;
  };

  render() {
    const { isDarkMode } = this.state;
    const { children } = this.props;

    return React.Children.map(children, child => {
      return React.cloneElement(child, {
        isDarkMode,
        toggle: this.toggle
      });
    });
  }
}

class Main extends Component {
  state = {
    currentTheme: "light"
  };

  onToggle = isDarkMode => {
    if (isDarkMode) {
      this.setState({
        currentTheme: "dark"
      });
    } else {
      this.setState({
        currentTheme: "light"
      });
    }
  };

  render() {
    const { currentTheme } = this.state;
    const mainClasses = cx("main", {
      dark: currentTheme === "dark"
    });

    return (
      <div className={mainClasses}>
        <ToggleTheme onToggle={this.onToggle}>
          <ToggleTheme.Dark>
            <span className="themeTxt">{currentTheme} mode</span>
          </ToggleTheme.Dark>
          <ToggleTheme.Light>
            <span className="themeTxt">{currentTheme} mode</span>
          </ToggleTheme.Light>
          <ToggleTheme.Button>
            Toggle {currentTheme === "light" ? "dark" : "light"} Theme
          </ToggleTheme.Button>
        </ToggleTheme>
      </div>
    );
  }
}

<ToggleTheme onToggle={this.onToggle}>
  <ToggleTheme.Dark>
    <span className="themeTxt">{currentTheme} mode</span>
  </ToggleTheme.Dark>
  <ToggleTheme.Light>
    <span className="themeTxt">{currentTheme} mode</span>
  </ToggleTheme.Light>
  <span>
    <ToggleTheme.Button>
       Toggle {currentTheme === "light" ? "dark" : "light"} Theme
    </ToggleTheme.Button>
  </span>
</ToggleTheme>

const ToggleThemeContext = createContext({
  isDarkMode: false,
  toggle: () => {}
});

class ToggleTheme extends Component {
  static Dark = ({children}) => {
    return (
      <ToggleThemeContext.Consumer>
        {({ isDarkMode }) => (isDarkMode ? children : null)}
      </ToggleThemeContext.Consumer>
    );
  };

  static Light = ({children}) => {
    return (
      <ToggleThemeContext.Consumer>
        {({ isDarkMode }) => (isDarkMode ? null : children)}
      </ToggleThemeContext.Consumer>
    );
  };

  static Button = ({children}) => {
    return (
      <ToggleThemeContext.Consumer>
        {({ isDarkMode, toggle }) => {
          return (
            <button onClick={toggle}>{children}</button>
          )
        }}
      </ToggleThemeContext.Consumer>
    );
  };
  
  toggle = () => {
    this.setState(
      ({ isDarkMode }) => ({ isDarkMode: !isDarkMode }),
      () => this.props.onToggle(this.state.isDarkMode)
    );
  };
  
  state = {
    isDarkMode: false,
    toggle: this.toggle,
  };

  render() {
    const { children } = this.props;

    return (
      <ToggleThemeContext.Provider value={this.state}>
        {children}
      </ToggleThemeContext.Provider>
    );
  }
}

class ToggleTheme extends Component {
  toggle = () => {
    this.setState(
      ({ isDarkMode }) => ({ isDarkMode: !isDarkMode }),
      () => this.props.onToggle(this.state.isDarkMode)
    );
  };

  state = {
    isDarkMode: false,
    toggle: this.toggle
  };

  render() {
    const { renderToggleThemeContent } = this.props;

    return renderToggleThemeContent(this.state);
  }
}

<div className={mainClasses}>
  <ToggleTheme
    onToggle={this.onToggle}
    renderToggleThemeContent={({ isDarkMode, toggle }) => {
      return (
        <>
          <span className="themeTxt">{currentTheme} mode</span>
          <button onClick={toggle}>
            Toggle {isDarkMode ? "dark" : "light"} Theme
          </button>
        </>
        );
     }}
     />
</div>

class ToggleTheme extends Component {
  toggle = () => {
    this.setState(
      ({ isDarkMode }) => ({ isDarkMode: !isDarkMode }),
      () => this.props.onToggle(this.state.isDarkMode)
    );
  };

  state = {
    isDarkMode: false,
    toggle: this.toggle
  };

  render() {
    return this.props.children(this.state);
  }
}

<div className={mainClasses}>
  <ToggleTheme onToggle={this.onToggle}>
    {({ isDarkMode, toggle }) => {
      return (
        <>
          <span className="themeTxt">{currentTheme} mode</span>
          <button onClick={toggle}>
            Toggle {isDarkMode ? "dark" : "light"} Theme
          </button>
        </>
      );
    }}
  </ToggleTheme>
</div>

let withValue = WrappedComponent => {
  class Wrapper extends React.Component {
    constructor () {
      super();
      this.state = { val: 0 }
      this.update = this.update.bind(this);
    }

    update () {
      this.setState({val:this.state.val+ 1 })
    }

    render () {
      return <InnerComponent update = {this.update} ref={this.ref} {...this.props} {...this.state}/>
    }
  }

  // 若沒給予新 component displayName，debug 時將會看到這 component 顯示 Unknown.
  Wrapper.displayName = `withValue(${WrappedComponent.displayName ||
    WrappedComponent.name})`;

  // hoistNonReactStatics 是 hoist-non-react-statics 這 library 提供的一個函式，能幫我們處理 static method hoisting 的問題 
  // 若要取得被 HOC 包裹過的 component 的 ref，必須使用 React.forwardRef 將其 forward 下去
  return hoistNonReactStatics(React.forwardRef(Wrapper), WrappedComponent);
}

var min = 18;
function checkAge(age) {
  return age >= min;
}

console.log(checkAge(15)); // false

min = 15;

console.log(checkAge(15)); // true

function checkAge(age) {
  var min = 15;
  return age >= min;
}

function unary (fn) {
  return function (arg) {
    return fn(arg);
  }
}

function binary (fn) {
  return function (arg1, arg2) {
    return fn(arg1, arg2);
  }
}

function f(...args)  {
  return args
}

const g = unary(f);
const h = binary(f);

g(1,2,3,4) // [1]
h(1,2,3,4) // [1,2]

function flip(fn) {
  return function(arg1,arg2,...args) {
    return fn(arg2, arg1, ...args)
  }
}

function reverseArgs(fn) {
  return function (...args) {
    return fn(args.reverse())
  }
}

function f(...args)  {
  return args
}

var g = flip(f)
var h = reverseArgs(f)

g(1,2,3,4) // [2, 1, 3, 4]
h(1,2,3,4) // [4, 3, 2, 1]

function not(fn) {
  return function(...args) {
    return !fn(...args)
  }
}

function isOdd(v) {
  return v % 2 === 1;
}

const isEven = not(isOdd);

isEven(4);

function partialL(fn,...larg) { // 參數順序由左至右，先進先出
  return function (...rest) {
    var argtoAplly = [...larg,...rest];
    console.log(argtoAplly) //["hello", "world", "hello", "albert"]
    return fn.apply(this,argtoAplly);
  }
}

function partialR(fn,...rarg) { // 參數順序由右至左，後進先出
  return function (...rest) {
    var argtoAplly = [...rest,...rarg];
    console.log(argtoAplly) // ["hello","albert","hello","world"]
    return fn.apply(this,argtoAplly);
  }
}

function hello(a=' who',b=' who',c=' who',d=' who') {
  return a + b + c + d;
}

var say = partialL(hello,'hello',' world');
console.log(say(' hello',' albert')); // "hello world hello albert"

var say2 = partialR(hello,' hello',' world');
console.log(say2('hello',' albert')); "hello albert hello world"

var greeting = function(first, lastname, other) {
    return 'Hi, ' + first + ' ' + lastname + ' ' + other;
}

function curry (fn) {
  var minArgNum = fn.length;
  
  function given (argsNow) {
    return function helper () {
      var args = Array.prototype.slice.call(arguments, 0);
      var updatedArgs = argsNow.concat(args);
          
      if (updatedArgs.length >= minArgNum) {
        return fn.apply(this, updatedArgs);
      }  else {
        return given(updatedArgs);
      }
    }
  }
  
  return given([]);
}

var togreet = curry(greeting);
var toalbert = togreet('albert');

console.log(toalbert('fang')('good to see you'));
// "Hi, albert fang good to see you"

const compose = function () {
  let funcArg = Array.prototype.slice.apply(arguments);
  let start = funcArg.length-1; 
  return function () {
    var args = arguments;
    for(let i=start;i>=0;i--) {
      args = [funcArg[i].apply(this,args)];
    }
    return args[0];
  }
}

var query = function(chr) {
    return function(str) {  
        var index = str.indexOf(chr);
        return (index < 0) ? "" : str.substring(index + 1);
    };
};

var splitOn = function(chr) {
    return function(str) {  
        return str.split(chr);
    };
};

var makeObj = function(term) {  
    return term.reduce(function(obj, str) {
        var parts = str.split("=");
        obj[parts[0]] = parts[1];
        return obj;
    }, {});
};

var url = "http://www.airbnb.com.tw/s/%E9%A6%96%E7%88%BE--%E5%8D%97%E9%9F%93?guests=2&checkin=2016-09-13&checkout=2016-09-19&ss_id=uxu1uf9a&source=bb&s_tag=FT-vBGd6";
var getTerm = compose(makeObj, splitOn("&"), query("?"));

console.log(getTerm(url));
//[object Object] {
  checkin: "2016-09-13",
  checkout: "2016-09-19",
  guests: "2",
  s_tag: "FT-vBGd6",
  source: "bb",
  ss_id: "uxu1uf9a"
}

var add = function (number) {return number + 2};
var double = function (number) {return number * 2};
var triple = function (number) {return number * 3};

var pipe = function compose(f) {
    var queue = f ? [f] : []; //先將function放入array給foreach用
    var fn = function fn(g) {
        if (arguments.length) { // 若有function傳入，持續加入function至佇列陣列中
            queue.push(g);
            return fn;
        }
        return function() { // 開始執行pipe function;
            var args = Array.prototype.slice.call(arguments);
            queue.forEach(function(func) {
                args = [func.apply(this, args)];
            });
            console.log(args);
            return args[0];
        }
    };
    return fn;
};

var goPipe = pipe(add)(double)(triple)();

console.log(goPipe(2));
--------------------------------------------------------------
ES2015:
const add = (number) => number + 2;
const double = (number) => number * 2;
const triple = (number) => number * 3;

const pipeline = (...fns) => {
  return val => {
    return fns.reduce((acc,fn) => fn(acc),val);
  }
};

let funPipe = pipeline(add,double,triple);
let result = funPipe(8);

console.log(result) // 60

const originObj= {
  a:1,
  b:2,
}

const originObj2= {
  a:1,
  b:2,
}

function mutateObj(obj) {
  obj.a = 3;

  return obj;
}

function notToMutateObj(obj) {
  const cloneObj = { ...obj };
  cloneObj.a = 3;

  return cloneObj;
}

const notMutateObj = notToMutateObj(originObj);
const isMutateObj = mutateObj(originObj2);

console.warn('originObj before', originObj);  // originObj before {a: 1, b: 2}
console.warn('originObj2 before', originObj2); //originObj2 before {a: 1, b: 2}
console.warn("-----------------------------------------------");
console.warn(notMutateObj); // {a: 3, b: 2}
console.warn(isMutateObj); // {a: 3, b: 2}
console.warn("-----------------------------------------------");
console.warn('originObj after', originObj); // originObj after {a: 1, b: 2}
console.warn('originObj2 after', originObj2); //originObj2 after {a: 3, b: 2}

function isPalindrome(str) {
  if (str.length < 2) return true;

  var first = str[0];
  var last = str[str.length - 1];

  if (first === last) {
    return isPalindrome(str.substring(1,str.length-1)); // 取第二的字跟倒數第二個字做下一次比對
  }
  return false;
}

console.log(isPalindrome("") === true );
console.log(isPalindrome("a") === true );
console.log(isPalindrome("aa") === true );
console.log(isPalindrome("aba") === true );
console.log(isPalindrome("abba") === true );
console.log(isPalindrome("abccba") === true );

console.log(isPalindrome("ab") === false );
console.log(isPalindrome("abc") === false );
console.log(isPalindrome("abca") === false );
console.log(isPalindrome("abcdba") === false );

function factorial(n) {
    console.trace();
    if (n === 0) {
        return 1;
    }

    // no tail call
    return n * factorial(n - 1);
}

factorial(2);

function factorial(n, total = 1) {
    console.trace();
    if (n === 0) {
        return total;
    }

    return factorial(n - 1, n * total);
}

factorial(2);

var a = Number('albert fang');
var b = Number('n/a')

console.warn(a === b)  // false

console.warn(0 === -0)  // true
console.warn(Object.is(0,-0)) // false

-------------------------------------------------

如何判別 Negative zero

console.warn(1/0); // Infinity
console.warn(1/-0); // -Infinity

function isNegativeZero (v) {
  return v == 0 && 1/v == -Infinity
}

[].toString() // ""
[1,2,3].toString() // "1,2,3"
[,,].toString() // ","
(-0).toString() // "0"
(0).toString() // "0"
({}).toString() // "[object Object]"
({ a: 2 }).toString() // "[object Object]"
({toString: function toString() { return 'X'}}).toString(); // "X"

// flat array - 若 array 內包含 object 會拋出 SyntaxError 因此不適用於含有 object 的 array
[1,2,[10,11],3,[4,6,[5,[9]]]].toString().split(',') // ["1", "2", "10", "11", "3", "4", "6", "5", "9"]

---------------------------------------------------------------------------

Number(".") // NaN
Number(undefined) // NaN
Number([1, 2, 3]) // NaN
Number([15]) // 15
Number([undefined]) // 0
Number(null) // 0
Number([null]) // 0
Number("") // 0
Number([""]) // 0
Number('0') // 0
Number('-0') // -1
Number({}) // NaN
Number({valueOf() {return 3;}}) // 3

console.warn(a);
c(); 
notHoistingFunc();

var a = "react";
var b = "vue";

function c () {
  console.warn('message from function');
}

var notHoistingFunc = function () {
  console.warn('message from not hoisting func');
}

function c () {
  console.warn('message from function');
}
var a;
var b;
var notHoistingFunc;

console.warn(a);  // undefined
c(); // message from function
notHoistingFunc(); // TypeError: notHoistingFunc is not a function

a = "react";
b = "vue";
notHoistingFunc = function () {
  console.warn('message from not hoisting func');
}

var a = 'a'

{   // block scoping
  console.warn(a)  // ReferenceError: Cannot access 'a' before initialization
  let a  = 'changed a';
}

for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.warn(`i: ${i}`);
  }, i * 1000)
}

我們預期的結果是           實際結果卻是
// i: 1                 // i: 4
// i: 2                 // i: 4
// i: 3                 // i: 4

過去我們是這樣解的，利用 IIFE pattern
for (var i = 1; i <= 3; i++) {
  (function (i) {
    setTimeout(function() {
      console.warn(`i: ${i}`);
    }, i * 1000)
  })(i)
}

如今我們可以用 ES6 的 let 來解
for (let i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.warn(`i: ${i}`);
  }, i * 1000)
}

如預期的結果是顯示
// i: 1
// i: 2 
// i: 3  

var getPerson = (function module(leader) {
  
  function toLead(team) {
    console.warn(`${leader} to lead ${team} team`)
  };

  const publicAPI = { toLead };

  return publicAPI

})("Tom");

getPerson.toLead('Web');  // Tom to lead Web team

function getPerson(leader) {
  
  function toLead(team) {
    console.warn(`${leader} to lead ${team} team`)
  };

  const publicAPI = { toLead };

  return publicAPI

};

const webLeader = getPerson('Tom'); 
webLeader.toLead('Web');  // Tom to lead Web team

const androidLeader = getPerson('Hu')
androidLeader.toLead('Android');  // Hu to lead Android team

function callName() { 
  console.log(this.name);
}

var name = 'Global';
var area = { 
  name: 'Taiwan',
  callName: callName    // 這裡的 function 指向全域的 callName function
};

// 此方法在全域環境下被呼叫除非我們在 strict mode 下執行這程式碼，
// 不然 this 會指向 global 環境 (strict mode 下 this 會等於 undefined)
callName() //  'Global'

area.callName() // 'Taiwan'，方法是在物件下調用，那麼 this 則是指向該物件

'use strict';
function greeting(person1, person2){
  console.log('Hi', this, ',', person1, 'and', person2)
}

const greeting2 = greeting.bind('you', 'Tom', 'Tina');
 
greeting('Tom', 'Tina')  // Hi undefined , Tom and Tina
greeting.call('you', 'Tom', 'Tina') // Hi you , Tom and Tina
greeting.apply('you', ['Tom', 'Tina']) // Hi you , Tom and Tina
greeting2();  // Hi you , Tom and Tina

const course = {
  lecturer: 'Albert',
  teach(lang) {
    setTimeout(() => {
        console.warn(this.lecturer, 'teaching' ,lang)
    }, 500);
  }
}

course.teach('javascript'); // Albert teaching javascript

// 失敗的例子(因為 course1 為一個 object 而不是 scope，因此 arrow function 的 lexical this 變成global 了)
const course1 = {
  lecturer: 'Albert',
  teach: (lang) => {
    console.warn(this.lecturer, 'teaching' ,lang)
  }
}

course.teach('javascript'); // undefined "teaching" "javascript"

function Workshop (teacher) {
  this.teacher = teacher;
}

Workshop.prototype.ask = function(question) {
  console.warn(this.teacher, question);
}

var deepJS = new Workshop('Kyle');
var reactJS = new Workshop('Suzy');

deepJS.ask("Is 'prototype' a class?");  // Kyle Is 'prototype' a class?
reactJS.ask("Isn't 'prototype' a ugly?");  // Suzy Isn't 'prototype' a ugly?

deepJS.constructor === Workshop;  // true
deepJS.__proto__ === Workshop.prototype  // true
Object.getPrototypeOf(deepJS) === Workshop.prototype  // true

function Workshop (teacher) {
  this.teacher = teacher;
}

Workshop.prototype.ask = function(question) {
  console.warn(this.teacher, question);
}

function AnotherWorkshop (teacher) {
  Workshop.call(this, teacher);
}

AnotherWorkshop.prototype = Object.create(Workshop.prototype);
AnotherWorkshop.prototype.speakUp = function(msg) {
  this.ask(msg.toUpperCase());
}

const JSRecentParts = new AnotherWorkshop("Kyle");

JSRecentParts.speakUp("Is this actually inheritance?");  // Kyle IS THIS ACTUALLY INHERITANCE?

class Workshop {
  constructor(teacher) {
    this.teacher = teacher
  }

  ask(question) {
      console.warn(this.teacher, question);
  }
}

class AnotherWorkshop extends Workshop {
  speakUp(msg) {
      console.warn(this.ask(msg.toUpperCase()));
  }
}

const deepJS = new Workshop('Kyle');
const JSRecentParts = new AnotherWorkshop('Kyle');

deepJS.ask("Is 'prototype' a class?");  // Kyle Is 'prototype' a class?
JSRecentParts.speakUp("Is this actually inheritance?");  // Kyle IS THIS ACTUALLY INHERITANCE? 

const Workshop = {
 setTeacher(teacher) {
    this.teacher = teacher;
  },
  ask(question) {
    console.warn(this.teacher, question);
  }
}

const AnotherWorkshop =Object.assign(
  Object.create(Workshop),
  {
    speakUp(msg) {
      console.warn(this.ask(msg.toUpperCase()));
    }
  }
);

const JSRecentParts = Object.create(AnotherWorkshop);
JSRecentParts.setTeacher('Kyle');
JSRecentParts.speakUp("Is this actually inheritance?");  // Kyle IS THIS ACTUALLY INHERITANCE?