资讯专栏INFORMATION COLUMN

前端入坑体验与分享

hss01248 / 1673人阅读

摘要:同源策略同源策略是一种约定,由公司年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到等攻击。

一、Vue变化检测

背景
初始化对象,属性未知;某些事件触发时,对象改变(新增属性),Vue监听不到

原因
Vue.js 不能检测到对象属性的添加或删除,因为Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

官方说明

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

解决方案
创建一个新的对象,包含原对象的属性和新的属性:

二、Vuex状态持久化

背景
后台管理系统中,用户点击上方一级菜单,获取左侧二级菜单,同时将当前菜单存到Vuex中;刷新页面时,存储状态消失

原因
JavaScript代码是运行在内存中的,代码运行时的所有变量,函数,也都是保存在内存中的。刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想储存就必须储存在外部,例如:Local Storage, Session Storage等。这些是浏览器提供的API,可以将数据储存在硬盘上,做持久化储存。

解决方案
vuex-persistedstate
vuex-persistedstate uses the browser"s local storage to persist your state across sessions

三、Vue2.0过滤器

Vue2.0将插入文本之外的过滤器移除了

Vue2.0中,过滤器只能用在插入文本中 ({{ }} tags)。在指令 (如:v-model,v-on等) 中使用过滤器使事情变得更复杂。像v-for 这样的列表过滤器最好把处理逻辑作为一个计算属性放在 js 里面,这样就可以在整
个模板中复用

参考:https://cn.vuejs.org/v2/guide...

四、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]
五、跨域

概念
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。
广义的跨域:
1.) 资源跳转: 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协议跨域
参考:https://segmentfault.com/a/11...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95562.html

相关文章

  • 前端入坑指南

    摘要:作为自学两年的初级前端,希望对那些想入门前端开发的人分享一些观点。尤其是这几年前端领域飞速的发展,新东西层出不穷。或者关注下我的微信公众号前端获取每天分享前端入门知识。为什么选择前端 做一件事之前最好问问自己为什么要做,然后再去思考该怎么做。如果只是看到别人做了,并且有很不错的收入,然后自己就决定做了,很可能中途放弃浪费掉很多时间。起码问自己一个问题:我是否真的热爱这个领域,并且很乐意在这个...

    junnplus 评论0 收藏0
  • 【Electron】酷家乐客户端开发实践分享入坑

    摘要:系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。 作者:钟离,酷家乐PC客户端负责人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

    jay_tian 评论0 收藏0
  • 【Electron】酷家乐客户端开发实践分享入坑

    摘要:系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。 作者:钟离,酷家乐PC客户端负责人原文地址:https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

    TwIStOy 评论0 收藏0
  • Vert.x入坑须知(4)

    摘要:主要是避免引入太多的复杂性,并且出于灵活部署的需要。以应用为例,由于实际上是在上执行,若它被阻塞,即导致后续请求全部无法得到处理。因此,最合适的做法就是对于简单业务,采用异步库。本系列其他文章入坑须知入坑须知入坑须知 最开始觉得这个系列也就最多3篇了不起了(因为事不过三嘛),没曾想居然迎来了第四篇! Kotlin 由于最近决定投身到区块链的学习当中的缘故,出于更好的理解它的基本概念,自...

    summerpxy 评论0 收藏0
  • Electron,从玩玩具的心态开始,到打造出一款越来越优秀的桌面客户端产品

    摘要:首发于酷家乐前端博客标题是我以第一视角基于开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触到去开发客户端产品,最后随着业务和功能的复杂度提升再不断地优化客户端。 首发于酷家乐前端博客 标题是我以第一视角基于 Electron 开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触 Ele...

    Markxu 评论0 收藏0

发表评论

0条评论

hss01248

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<