前端入坑體驗與分享

1、Vue變化檢測

• 背景
  初始化對象，屬性未知；某些事件觸發時，對象改變（新增屬性），Vue監聽不到
• 緣由
  Vue.js 不能檢測到對象屬性的添加或刪除，由於Vue.js 在初始化實例時將屬性轉爲 getter/setter，因此屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。

• 官方說明

  https://v1-cn.vuejs.org/guide/reactivity.html

• 解決方案
  建立一個新的對象，包含原對象的屬性和新的屬性：
  

2、Vuex狀態持久化

• 背景
  後臺管理系統中，用戶點擊上方一級菜單，獲取左側二級菜單，同時將當前菜單存到Vuex中；刷新頁面時，存儲狀態消失
• 緣由
  JavaScript代碼是運行在內存中的，代碼運行時的全部變量，函數，也都是保存在內存中的。刷新頁面，之前申請的內存被釋放，從新加載腳本代碼，變量從新賦值，因此這些數據要想儲存就必須儲存在外部，例如：Local Storage, Session Storage等。這些是瀏覽器提供的API，能夠將數據儲存在硬盤上，作持久化儲存。
• 解決方案
  vuex-persistedstate
  vuex-persistedstate uses the browser's local storage to persist your state across sessions

3、Vue2.0過濾器

Vue2.0將插入文本以外的過濾器移除了

Vue2.0中，過濾器只能用在插入文本中 ({{ }} tags)。在指令 (如：v-model，v-on等) 中使用過濾器使事情變得更復雜。像v-for 這樣的列表過濾器最好把處理邏輯做爲一個計算屬性放在 js 裏面，這樣就能夠在整
個模板中複用

參考：https://cn.vuejs.org/v2/guide...

4、Js深拷貝淺拷貝

• 背景
  項目中，對接收到的數據對象直接拷貝，處理後，提交到服務器，發現組裝數據時，子類改變後，父類也改變了。
• 緣由
  在js中，對於非基本類型數據（普通對象或數組），淺拷貝只是拷貝了內存地址，修改新對象會致使原對象被修改
• 解決方案
  深拷貝：深拷貝會另外創造一個如出一轍的對象，新對象跟原對象不共享內存，修改新對象不會改到原對象
  

• 常見淺拷貝方式
  （1）直接複製
  （2）Object.assign

  這是是ES6的新函數，此方法能夠把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，而後返回目標對象。可是 Object.assign() 進行的是淺拷貝，拷貝的是對象的屬性的引用，而不是對象自己。

  須要注意的是：

  Object.assign()能夠處理一層的深度拷貝
  ![圖片描述][3]

• 常見深拷貝方式

  （1）轉成 JSON 再轉回來

  用JSON.stringify把對象轉成字符串，再用JSON.parse把字符串轉成新的對象。
  壞處：這種發放會拋棄對象的constructor。也就是深拷貝以後，無論這個對象原來的構造函數是什麼，在深拷貝以後都會變成Object。這種方法能正確處理的對象只有 Number, String, Boolean, Array, 扁平對象，即那些可以被 json 直接表示的數據結構。RegExp對象是沒法經過這種方式深拷貝。也就是說，只有能夠轉成JSON格式的對象才能夠這樣用，像function沒辦法轉成JSON。

能夠看到：要複製的function會直接消失，因此這個方法只能用在單純只有數據的對象。

（2）遞歸拷貝

![圖片描述][5]

（3）使用Object.create()方法

![圖片描述][6]

（4）jquery 有提供一個$.extend能夠用來作深拷貝
（5）loads：函數庫lodash也有提供_.cloneDeep用來作深拷貝。

![圖片描述][7]![圖片描述][8]

5、跨域

• 概念
  跨域是指一個域下的文檔或腳本試圖去請求另外一個域下的資源，這裏跨域是廣義的。
  廣義的跨域：
  1.) 資源跳轉： A連接、重定向、表單提交
  2.) 資源嵌入： <link>、<script>、<img>、<frame>等dom標籤，還有樣式中background:url()、@font-face()等文件外鏈
  3.) 腳本請求： js發起的ajax請求、dom和js對象的跨域操做等
  其實咱們一般所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。
• 同源策略
  同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即使兩個不一樣的域名指向同一個ip地址，也非同源。

  同源策略限制如下幾種行爲：
  1.) Cookie、LocalStorage 和 IndexDB 沒法讀取
  2.) DOM 和 Js對象沒法得到
  3.) AJAX 請求不能發送

• 常見跨域場景

• 跨域解決方案
  一、 經過jsonp跨域
  二、 document.domain + iframe跨域
  三、 location.hash + iframe
  四、 window.name + iframe跨域
  五、 postMessage跨域
  六、 跨域資源共享（CORS）
  七、 nginx代理跨域
  八、 nodejs中間件代理跨域
  九、 WebSocket協議跨域
  參考：https://segmentfault.com/a/11...