資訊專欄INFORMATION COLUMN
摘要：同源策略同源策略是一種約定，由公司年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到等攻擊。
一、Vue變化檢測
背景
初始化對象，屬性未知；某些事件觸發(fā)時，對象改變（新增屬性），Vue監(jiān)聽不到
原因
Vue.js 不能檢測到對象屬性的添加或刪除，因為Vue.js 在初始化實例時將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。
官方說明
https://v1-cn.vuejs.org/guide/reactivity.html
解決方案
創(chuàng)建一個新的對象，包含原對象的屬性和新的屬性：
背景
后臺管理系統(tǒng)中，用戶點擊上方一級菜單，獲取左側(cè)二級菜單，同時將當前菜單存到Vuex中；刷新頁面時，存儲狀態(tài)消失
原因
JavaScript代碼是運行在內(nèi)存中的，代碼運行時的所有變量，函數(shù)，也都是保存在內(nèi)存中的。刷新頁面，以前申請的內(nèi)存被釋放，重新加載腳本代碼，變量重新賦值，所以這些數(shù)據(jù)要想儲存就必須儲存在外部，例如：Local Storage, Session Storage等。這些是瀏覽器提供的API，可以將數(shù)據(jù)儲存在硬盤上，做持久化儲存。
解決方案
vuex-persistedstate
vuex-persistedstate uses the browser"s local storage to persist your state across sessions
Vue2.0將插入文本之外的過濾器移除了
Vue2.0中，過濾器只能用在插入文本中 ({{ }} tags)。在指令 (如：v-model，v-on等) 中使用過濾器使事情變得更復(fù)雜。像v-for 這樣的列表過濾器最好把處理邏輯作為一個計算屬性放在 js 里面，這樣就可以在整
個模板中復(fù)用
參考：https://cn.vuejs.org/v2/guide...
四、Js深拷貝淺拷貝背景
項目中，對接收到的數(shù)據(jù)對象直接拷貝，處理后，提交到服務(wù)器，發(fā)現(xiàn)組裝數(shù)據(jù)時，子類改變后，父類也改變了。
原因
在js中，對于非基本類型數(shù)據(jù)（普通對象或數(shù)組），淺拷貝只是拷貝了內(nèi)存地址，修改新對象會導(dǎo)致原對象被修改
解決方案
深拷貝：深拷貝會另外創(chuàng)造一個一模一樣的對象，新對象跟原對象不共享內(nèi)存，修改新對象不會改到原對象
常見淺拷貝方式
（1）直接復(fù)制
（2）Object.assign
這是是ES6的新函數(shù)，此方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，然后返回目標對象。但是?Object.assign()?進行的是淺拷貝，拷貝的是對象的屬性的引用，而不是對象本身。
需要注意的是：
Object.assign()可以處理一層的深度拷貝 ![圖片描述][3]
常見深拷貝方式
（1）轉(zhuǎn)成?JSON?再轉(zhuǎn)回來
用JSON.stringify把對象轉(zhuǎn)成字符串，再用JSON.parse把字符串轉(zhuǎn)成新的對象。 壞處：這種發(fā)放會拋棄對象的constructor。也就是深拷貝之后，不管這個對象原來的構(gòu)造函數(shù)是什么，在深拷貝之后都會變成Object。這種方法能正確處理的對象只有?Number, String, Boolean, Array, 扁平對象，即那些能夠被 json 直接表示的數(shù)據(jù)結(jié)構(gòu)。RegExp對象是無法通過這種方式深拷貝。也就是說，只有可以轉(zhuǎn)成JSON格式的對象才可以這樣用，像function沒辦法轉(zhuǎn)成JSON。
可以看到：要復(fù)制的function會直接消失，所以這個方法只能用在單純只有數(shù)據(jù)的對象。
（2）遞歸拷貝
![圖片描述][5]
（3）使用Object.create()方法
![圖片描述][6]
（4）jquery?有提供一個$.extend可以用來做深拷貝
（5）loads：函數(shù)庫lodash也有提供_.cloneDeep用來做深拷貝。
![圖片描述][7]![圖片描述][8]五、跨域
概念
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
廣義的跨域：
1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交
2.) 資源嵌入： 、
跨域解決方案
1、 通過jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域資源共享（CORS）
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協(xié)議跨域
參考：https://segmentfault.com/a/11...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95562.html
摘要：系列文章酷家樂客戶端開發(fā)實踐分享入坑篇酷家樂客戶端開發(fā)實踐分享軟件自動更新酷家樂客戶端開發(fā)實踐分享瀏覽器啟動客戶端酷家樂客戶端開發(fā)實踐分享進程通信酷家樂客戶端開發(fā)實踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
摘要：系列文章酷家樂客戶端開發(fā)實踐分享入坑篇酷家樂客戶端開發(fā)實踐分享軟件自動更新酷家樂客戶端開發(fā)實踐分享瀏覽器啟動客戶端酷家樂客戶端開發(fā)實踐分享進程通信酷家樂客戶端開發(fā)實踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...
摘要：主要是避免引入太多的復(fù)雜性，并且出于靈活部署的需要。以應(yīng)用為例，由于實際上是在上執(zhí)行，若它被阻塞，即導(dǎo)致后續(xù)請求全部無法得到處理。因此，最合適的做法就是對于簡單業(yè)務(wù)，采用異步庫。本系列其他文章入坑須知入坑須知入坑須知 最開始覺得這個系列也就最多3篇了不起了（因為事不過三嘛），沒曾想居然迎來了第四篇！ Kotlin 由于最近決定投身到區(qū)塊鏈的學(xué)習(xí)當中的緣故，出于更好的理解它的基本概念，自...
摘要：首發(fā)于酷家樂前端博客標題是我以第一視角基于開發(fā)客戶端產(chǎn)品的體驗，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開始接觸到去開發(fā)客戶端產(chǎn)品，最后隨著業(yè)務(wù)和功能的復(fù)雜度提升再不斷地優(yōu)化客戶端。 首發(fā)于酷家樂前端博客 標題是我以第一視角基于 Electron 開發(fā)客戶端產(chǎn)品的體驗，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開始接觸 Ele...
閱讀 1996·2021-11-24 09:39
閱讀 3416·2021-09-22 14:58
閱讀 1229·2019-08-30 15:54
閱讀 3386·2019-08-29 11:33
閱讀 1853·2019-08-26 13:54
閱讀 1699·2019-08-26 13:35
閱讀 2538·2019-08-23 18:14
閱讀 836·2019-08-23 17:04
