本週學習總結

前端路由

• 那種spa應用,都是前端路由
• 後端路由成爲服務器路由,對於服務器來講,會根據請求的相應的url,來找到相應的映射函數,而後執行該函數,將函數的返回值發送給客戶端
• 對於前端路由來講,後端的路由映射函數一般是進行DOM的顯示和隱藏操做

優缺點

後端路由優勢: 安全性好,SEO好

缺點: 加大服務器壓力,不利於用戶體驗

前端路由優勢: 開發方便,只須要修改路徑就能夠啦,沒有網絡延遲,用戶體驗好

缺點: 瀏覽器的前進,退後的時候會從新發送請求,沒有合理的緩存,一樣不利於SEO

前端路由實現方案

• hash

  window.location.hash

• history API

  history.pushState()

  history.replaceState()

  window.history.back() 後退

  window.history.forward() 前進

  window.history.go(1) 前進1部,-2退後兩次

那怎麼監控history

每當同一個文檔瀏覽歷史出現變化時都會觸發popState事件,只須要監控事件

window.addEventListener('popstate',function(event){
    
})

可是僅僅調用pushState 或replaceState方法,並不會觸發該事件

那怎麼讓pushState或replaceState 事件

const _wr=function(type){
    let orig=history[type]
    return function(){
        let rv=orig.apply(this,arguments)
        let e= new Event(type)
        e.arguments=arguments
        window.dispatchEvent(e)
        return rv
    }
}
//重寫方法
 history.pushState = _wr('pushState');
 history.replaceState = _wr('replaceState');
//實現監聽
window.addEventListener('replaceState', function(e) {
  console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
  console.log('THEY DID IT AGAIN! pushState 2222222');
});

學習angular的時候收集的一些資料

https://mlog.club/articles/3454
https://alligator.io/angular/
https://laixiazheteng.com/subject
https://blog.kevinyang.net/categories/Angular/
http://www.ngbeijing.cn/
https://rxjs-dev.firebaseapp.com/guide/observable
https://ithelp.ithome.com.tw/users/20090728/ironman/1600   Angular深刻淺出三十天
https://github.com/ymfe/yapi

Array.prototype.entries()

返回一個新的Array Iterator 對象,該對象包含數組中每一個索引的鍵/值對

let arr = ['a', 'b', 'c']
let a = arr.entries()
console.log(a.next().value)
// [0,'a']
console.log(a.next().value)
// [1,'b']
console.log(a.next().value)
// [2,'c']

串聯瀑布流

const wait = value => new Promise(resolve => {
  setTimeout(() => resolve(value), 3000)
})

const fetchFoo = () => wait('foo')
const fetchBar = () => wait('bar')
const fetchBaz = () => wait('baz')
const fetchDataSlowly = async time => {
  // 串聯瀑布流
  const foo = await fetchFoo()
  const bar = await fetchBar()
  const baz = await fetchBaz()
  return {foo, bar, baz, time: Date.now() - time}
}

fetchDataSlowly(Date.now())
  .then(({foo, bar, baz, time}) => {
    console.log('fetched slowly:', foo, bar, baz, time
    )
})

並聯瀑布流

const wait = value => new Promise(resolve => {
  setTimeout(() => resolve(value), 3000)
})

const fetchFoo = () => wait('foo')
const fetchBar = () => wait('bar')
const fetchBaz = () => wait('baz')

const fetchDataQuickly = async time => {
  // 並行瀑布流
  const [
    foo,
    bar,
    baz
  ] = await Promise.all([
    fetchFoo(),
    fetchBar(),
    fetchBaz()
  ])
  return {foo, bar, baz, time: Date.now() - time}
}
fetchDataQuickly(Date.now())
  .then(({ foo, bar, baz, time}) => {
    console.log('fetched quickly:', foo, bar, baz, time);
  });

Object.fromEntries

相似Array,Map 把鍵值對轉換爲一個對象

let map=new Map([['a',1],['b',2],['c',3]])
console.log(Object.fromEntries(map))
// { a: 1, b: 2, c: 3 }
let arr = [['a', 1], ['b', 2], ['c', 3]]
console.log(Object.fromEntries(arr))
// { a: 1, b: 2, c: 3 }

平滑滾動到瀏覽器窗口的可見區域

const smoothScroll = element => 
  document.querySelector（element）.scrollIntoView（{ 
    behavior：'smooth' 
  }）; 
//平滑滾動到ID爲id的元素elementID 
smoothScroll（'＃elementID'）;

undefined和null的區別

undefined==null //true
1+null  //1
1+undefined //NaN

發現一道有意思的算法題

AAAABBCCCdFFFd
4A2B3C1d3F

const encodingStr = str => {
  if (str.length === 0) {
    return ''
  }
  let currChar = str.charAt(0)
  let count = 1
  let encoding = ''
  for (let i = 1; i < str.length; i++) {
    const char = str.charAt(i)
    if (char === currChar) {
      count++
    } else {
      encoding += count + currChar
      count = 1
      currChar = char
    }
  }
  return encoding
}
console.log(encodingStr('AAAABBCCCdFFFd'))

正則
疊詞分割
let str = 'AAAABBCCCddFFFdddege'
console.log(str.match(/(.)\1*/g))
[
  'AAAA', 'BB',
  'CCC',  'dd',
  'FFF',  'ddd',
  'e',    'g',
  'e'
]

Element.animate

js動畫

參數
 * 關鍵幀是一個對象,表明關鍵幀的一個集合
 * 表明動畫持續時間的整數數字(毫秒單位),也能夠是一個時間對象
	> duration 每次迭代的毫秒數
    >  iterations 動畫重複次數
    
export class TextThreeComponent implements OnInit, AfterViewInit {
  constructor() {
  }
  public action = [{
    transform: 'rotate(0) translate3D(-50%, -50%, 0)',
    color: '#000'
  },
    {
      color: '#431236',
      offset: 0.3
    },
    {
      transform: 'rotate(360deg) translate3D(-50%, -50%, 0)',
      color: '#000'
    }
  ];
  public animation;
  timing = {
    duration: 3000,
    iterations: Infinity
  };

  ngAfterViewInit() {
  this.animation=document.querySelector('.ccc').animate(this.action, this.timing)
  }

  ngOnInit(): void {}
}

play.onclick =（）=> animation.play（）; //播放
pause.onclick =（）=> animation.pause（）; // 暫停
reverse.onclick =（）=> animation.reverse（）; // 反向