bitqiang / fee-skills Goto Github PK
View Code? Open in Web Editor NEW整理前端博客好文,以及自己的博客
整理前端博客好文,以及自己的博客
链表是一种数据结构。
// 链表单个节点
class Node {
constructor (value) {
this.value = value
this.next = null
}
}
实现一个链表的
append 添加节点方法
removeAt 删除指定位置节点
insert 指定位置插入
indexOf 查找是否包含
remove 删除指定节点
size 返回链表代下
isEmpty 判断是否为空
class LinkedList {
constructor (value = null) {
this.head = null
this.length = 0
if (value) {
this.head = new Node(value)
this.length = 1
}
}
append (value) {}
removeAt (position) {}
insert (position, value) {}
indexOf (value, start = 0) {}
remove (value, start = 0) {}
size () {}
isEmpty () {}
}
// 链表单个节点
class Node {
constructor (value) {
this.value = value
this.next = null
}
}
class LinkedList {
constructor (value = null) {
this.head = null
this.length = 0
if (value) {
this.head = new Node(value)
this.length = 1
}
}
append (value) {
const node = new Node(value)
// 如果head为null 说明链表没有数据,直接添加到头部
if (this.head === null) {
this.head = node
} else {
let current = this.head
// 循环最next为false说明next为null,则把当前节点添加到链表尾部
while (current.next) {
current = current.next
}
current.next = node
}
this.length += 1
}
removeAt (position) {
// 判断移除的节点是否在 链表内
if (position >= this.length || position < 0) {
return null
}
let current = this.head
// 如果为0,则直接将 head 设置为 head.next
if (position === 0) {
this.head = current.next
} else {
let index = 0
let prev = null
// 循环 找到需要删除position的节点,将其上一个节点的next 设置为当前的节点
while (index < position) {
prev = current
current = current.next
index += 1
}
prev.next = current.next
}
this.length -= 1
return current.next
}
insert (position, value) {
if (position >= this.length || position < 0) {
return false
}
const node = new Node(value)
// 节点在头部则 直接将节点next指向this.head。然后将head的指针指向新节点
if (position === 0) {
node.next = this.head
this.head = node
} else {
let index = 0
let current = this.head
let prev = null
// 遍历循环找节点添加进入
while (index < position) {
prev = current
current = current.next
index += 1
}
node.next = current
prev.next = node
}
this.length += 1
return true
}
indexOf (value, start = 0) {
if (start > this.length) {
return false
}
let index = 0
let current = this.head
while (index < this.length) {
if (current.value === value && start <= index) {
return index
}
current = current.next
index += 1
}
return -1
}
remove (value, start = 0) {
const index = this.indexOf(value, start)
return this.removeAt(index)
}
size () {
return this.length
}
isEmpty () {
return !!this.length
}
}
let test = new LinkedList('a')
test.append('b')
test.append('c')
test.removeAt('1')
test.insert(1, 'e')
let e = test.indexOf('e')
console.log('e', e)
console.log('test', test)
随着互联网的快速发展,网络安全逐渐成为大家所关注的点,对于网页的安全更是需要注意的地方,互联网应用安全主要包含两部分
相关概念
这篇文章主要是介绍https跟证书相关的一些知识,首先我们知道证书是从CA机构申请,然后将其放到服务端进行部署,此时浏览器端需要校验证书是否是真的从CA机构发的,防止服务端返回证书的时候被篡改。就会需要使用到数字签名的一个流程来验证证书的合法性。
签名流程 如图1
1.发送者对消息计算摘要
2.发送者使用私钥对摘要进行签名得到签名值
3.发送者将原始消息跟签名值一起发送给接受者
签名验证流程 如图2
介绍完数字签名流程,我们知道CA机构收到用户申请证书的请求后,会将一些重要信息如(网站的域名,RSA密钥对的公钥,营业执照等)如下图
核实申请的者的身份后,会将这些信息是由CA的私钥对信息进行签名,得到签名值,此时将其附属在这些重要信息的后面,返回给用户。此时证书就申请完成了。申请证书与校验证书流程可以如下图所示。
最后是一个客户端与服务端通信的一个流程图。
<template>
<div>
<input type="text" v-model="test.a">
<input type="text" v-model="test.b">
<button @click="change">hhhh</button>
</div>
</template>
<script>
export default {
name: 'test',
components: {},
data () {
return {
test: {
a: 1,
b: 1
}
}
},
computed: {
test2: {
get () {
return JSON.parse(JSON.stringify(this.test))
},
set (value) {
this.test = value
}
}
},
props: {},
watch: {},
methods: {
change () {
this.test.a = 2
}
},
mounted () {
}
}
</script>
类似如图,当时觉得vue 既然能get到变化,为什么set不到具体值,然后就看vue相关computed的代码。
vue 的 computed 在 stateMixin方法里面执行了。对应文件路径为src/core/instance/state.js
// 初始化init计算属性
function initComputed (vm: Component, computed: Object) {
const watchers = vm._computedWatchers = Object.create(null)
const isSSR = isServerRendering()
// 遍历计算属性这个对象
for (const key in computed) {
const userDef = computed[key]
const getter = typeof userDef === 'function' ? userDef : userDef.get
if (process.env.NODE_ENV !== 'production' && getter == null) {
warn(
`Getter is missing for computed property "${key}".`,
vm
)
}
if (!isSSR) {
// create internal watcher for the computed property.
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
}
// 如果key没有在data 或者 prop里面定义,就执行defineComputed
if (!(key in vm)) {
defineComputed(vm, key, userDef)
} else if (process.env.NODE_ENV !== 'production') {
if (key in vm.$data) {
warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
}
}
}
export function defineComputed (
target: any,
key: string,
userDef: Object | Function
) {
const shouldCache = !isServerRendering()
// 如果计算属性是一个function的话,直接将其设置为get,没有set,是对象的话会分别取get跟set设置
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef)
sharedPropertyDefinition.set = noop
} else {
sharedPropertyDefinition.get = userDef.get
? shouldCache && userDef.cache !== false
? createComputedGetter(key)
: createGetterInvoker(userDef.get)
: noop
sharedPropertyDefinition.set = userDef.set || noop
}
if (process.env.NODE_ENV !== 'production' &&
sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
`Computed property "${key}" was assigned to but it has no setter.`,
this
)
}
}
// 在这句可以看到,vue计算属性只对外出key做了劫持,所以我们修改对象属性里面的key是不能触发set方法。
Object.defineProperty(target, key, sharedPropertyDefinition)
}
可以将计算属性修改的地方,使用onchange事件进行触发 之前定于在set里面需要触发的逻辑。
标签(空格分隔): JavaScript
分配你所需要的内存
使用分配到的内存(读、写)
不需要时将其释放\归还
因为其大小固定,所以会直接存在栈内存中。
左值会声明在执行栈,右值是其引用地址。
1、可以简单理解成 对象是否可达
高程P79页说 2008年之后浏览器的JavaScript都使用的标记清除方式,只是其垃圾回收时间间隔不同。
所以在9102年的今天,应该不需要考虑循环引用内存泄漏的问题。
2、新一代chorme以及nodejs使用js引擎是V8
v8的回收策略是将内存空间分为新生代(new generation)和老生代(old generation)。
新生代中会放置存活时间较短的对象,比如局部变。老生代则是存活时间较长的比如全局变量、闭包之类的。
一开始运行的时候,对象都会现在新生代进行创建,在满足某些条件后,会被移动到老生代。
1、跟踪记录每个值被引用的次数
曾经在IE8 COM使用以及Netscape Navigation3.0使用过,其他浏览器并未使用其。
产生的问题有:循环引用无法清除、早期IE8dom不是原生JavaScript对象,其中BOM、DOM对象是C++以COM(component Object model)对象实现的,然后其采用的垃圾回收是引用计数,在JavaScript使用Dom会导致存在循环引用bug。例如
var el = document.getElementById('test')
var myObj = {}
myObj.el = el
el.obj = myObj
就会导致循环引用无法回收的bug,但是其只存在于IE8
主要包含了页面是元数据
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
h1 会加载显示在页面中
title 是用来表示整个html文档大致内容的元数据
<meta>
在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属 性来定义。name 表示元信息的名,content 则用于表示元信息的值。
元数据就是描述数据的数据,而HTML有一个“官方的”方式来为一个文档添加元数据—— 元素。
<meta charset="utf-8">
<meta name="author" content="Chris Mills">
<meta name="description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both
Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
一个典型的针对移动端优化的站点包含类似下面的内容:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport主要有以下属性
属性 | 说明 |
---|---|
width | 页面具体宽度,可以取具体数值 |
height | 页面高度,可以取值具体的数字 |
initial-scale | 初始缩放比例。 |
minimum-scale | 最小缩放比例 |
maximum-scale | 最大缩放比例 |
user-scalable | 是否允许用户缩放 |
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js"></script>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.