欢迎订阅我的前端面经专栏: 每日前端面经
本期题目来源: 牛客
Vue 独特的响应式系统：当 JavaScript 对象发生变化时，视图会自动更新。核心设计思想是数据劫持+观察者模式
function render() {
console.log('模拟视图渲染')
}
let obj = [1, 2, 3]
let methods = ['pop', 'shift', 'unshift', 'sort', 'reverse', 'splice', 'push']
// 先获取到原来的原型上的方法
let arrayProto = Array.prototype
// 创建一个自己的原型 并且重写methods这些方法
let proto = Object.create(arrayProto)
methods.forEach(method => {
proto[method] = function() {
// AOP
arrayProto[method].call(this, ...arguments)
render()
}
})
function observer(obj) {
// 把所有的属性定义成set/get的方式
if (Array.isArray(obj)) {
obj.__proto__ = proto
return
}
if (typeof obj == 'object') {
for (let key in obj) {
defineReactive(obj, key, obj[key])
}
}
}
function defineReactive(data, key, value) {
observer(value)
Object.defineProperty(data, key, {
get() {
return value
},
set(newValue) {
observer(newValue)
if (newValue !== value) {
render()
value = newValue
}
}
})
}
observer(obj)
function $set(data, key, value) {
defineReactive(data, key, value)
}
obj.push(123, 55)
console.log(obj) //[1, 2, 3, 123, 55]
function render() {
console.log('模拟视图的更新')
}
let obj = {
name: '前端工匠',
age: { age: 100 },
arr: [1, 2, 3]
}
let handler = {
get(target, key) {
// 如果取的值是对象就在对这个对象进行数据劫持
if (typeof target[key] == 'object' && target[key] !== null) {
return new Proxy(target[key], handler)
}
return Reflect.get(target, key)
},
set(target, key, value) {
if (key === 'length') return true
render()
return Reflect.set(target, key, value)
}
}
let proxy = new Proxy(obj, handler)
proxy.age.name = '浪里行舟' // 支持新增属性
console.log(proxy.age.name) // 模拟视图的更新 浪里行舟
proxy.arr[0] = '浪里行舟' //支持数组的内容发生变化
console.log(proxy.arr) // 模拟视图的更新 ['浪里行舟', 2, 3 ]
proxy.arr.length-- // 无效
| GET | POST | |
|---|---|---|
| 后退按钮/刷新 | 无害 | 数据会被重新提交 |
| 书签 | 可收藏为书签 | 不可收藏为书签 |
| 缓存 | 可能会被缓存 | 不能缓存 |
| 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencode 或 multipart/form-data |
| 历史 | 参数保留再浏览器历史中 | 参数不会被保留在浏览器历史中 |
| 数据长度限制 | URL最大长度为2048字符 | 无限制 |
| 数据类型限制 | 只允许 ASII 字符 | 无限制 |
| 安全性 | 较差，发送的数据是 URL 的一部分 | 相对安全，参数不会被保存在日志中 |
| 可见性 | 数据在 URL 中对所有人都可见 | 不会显示在 URL 中 |
跨域问题是由于浏览器的同源策略导致的。同源策略是指，浏览器只允许同一域名下的网页进行数据交互。如果网页的协议、域名或端口号有一个与目标网页不同，则被认为是跨域请求。由于这种限制，不同域名之间的网页无法直接进行数据交互，从而产生了跨域问题
XSS 全称是 Cross Site Scripting 即跨站脚本，当目标网站目标用户浏览器渲染HTML文档的过程中，出现了不被预期的脚本指令并执行时，XSS 就发生了
作为一种 HTML 注入攻击，XSS 攻击的核心思想就是在 HTML 页面中注入恶意代码，而XSS 采用的注入方式是非常巧妙的。在 XSS 攻击中，一般有三个角色参与：攻击者、目标服务器、受害者的浏览器
由于有的服务器并没有对用户的输入进行安全方面的验证，攻击者就可以很容易地通过正常的输入手段，夹带进一些恶意的 HTML 脚本代码。当受害者的浏览器访问目标服务器上被注入恶意脚本的页面后，由于它对目标服务器的信任，这段恶意脚本的执行不会受到什么阻碍。而此时，攻击者的目的就已经达到了
在 JavaScript 中，异步编程是一个重要的概念，它允许我们执行一些可能需要花费一些时间的操作（例如网络请求或读取大文件），而不阻塞程序的执行。Promise 是 JavaScript 中用于处理异步操作的对象。通过 Promise，我们可以将异步代码组织得更加清晰，并且更容易处理异步操作的结果
Promise 是一个代表异步操作最终完成或失败的对象。它解决了回调地狱的问题，并提供了更好的错误处理机制。一个 Promise 对象有以下三种状态：
一旦 Promise 对象的状态变为已实现或已拒绝，它将不会再改变。
Vue的响应式数据与双向绑定：原理与实现解析
深入浅出Vue响应式原理（完整版）
v-if和v-show的区别详解
GET和POST请求的区别（超详细）
web前端面试 - 面试官系列
深入理解JavaScript Promise
vue和react的区别以及优劣势是什么？
web攻防之XSS攻击详解——XSS简介与类型
跨域及解决方案：正反向代理区别详解
从输入URL到页面展示的详细过程
新人发文，礼貌求关❤️