tscn1的博客

原创 【网络层-5】路由器

在不同网络中，需要路由器转发。在网络N1中，主机A将数据先转发给路由器接口1。数据在同一个网络中传输，需要MAC地址。使用ARP协议根据IP地址拿到对应的MAC地址。

原创 代理和反射

reflect它是JS的内置对象，开发者可以通过调用这些方法，访问一些JS底层原理。reflect做什么使用Reflect可以实现诸如 属性的赋值与取值、调用普通函数、调用构造函数、判断属性是否存在与对象中 等等功能这些功能不是已经存在了吗？为什么还需要用Reflect实现一次？有一个重要的理念，在ES5就被提出：减少魔法、让代码更加纯粹这种理念很大程度上是受到函数式编程的影响ES6进一步贯彻了这种理念，它认为，对属性内存的控制、原型链的修改、函数的调用等等，这些都属于底层实现，属于一种

原创 属性描述符

什么是属性描述符属性描述符（Property descriptor）就是一个对象，用来描述对象属性的相关信息。Object.getOwnPropertyDescriptor(对象，属性名)得到一个对象的某个属性的属性描述符返回值：value：属性值configurable：该属性的描述符是否可以修改enumerable：该属性是否可以被枚举writable：该属性是否可以被重新赋值Object.getOwnPropertyDescriptors(对象)可以得到某个对象的所有属性

原创 css基础-属性值计算过程

目录css属性属性的计算过程两个特殊的css属性css属性首先css的属性值，是从0到1的过程，浏览器会等一个标签的css属性值全部确认后，才能渲染出来。属性的计算过程属性的计算过程有4步。确定声明值。参考样式表中（作者样式表和浏览器默认的样式表）没有冲突的声明，作为css的属性值。层叠冲突。对样式表中有冲突的声明使用层叠规则，确定css属性值层叠规则：1.重要性。2.特殊性。3.源次序使用继承。对仍然没有值的属性，若可以继承，则继承父元素的属性值使用默认值。对仍然没有值的属性，使

原创 css基础-层叠（权重计算）

目录层叠浏览器处理规则1.比较重要性2.比较特殊性3.比较代码次序应用爱恨法则层叠声明冲突：同一个样式，多次作用到同一个元素层叠：解决声明冲突的过程，是浏览器自动处理的浏览器处理规则有3个规则，若一个规则无法判定结果，那就继续看下一个规则。1.比较重要性重要性从高到低：开发者样式表中!important样式不建议使用，覆盖样式不方便开发者样式表普通样式浏览器默认样式表2.比较特殊性看选择器，总体规则：选择器选中的范围越窄，越特殊具体规则：通过选择器，计算出一个4位数（x

原创 编写高质量代码

目录01.警惕Unicode乱码要点名词解释资料01.警惕Unicode乱码要点在JS中可以使用中文来命名变量或函数名ECMA标准规定JS语言基于Unicode标准进行开发，JS内核完全采用UCS字符集进行编写，因此在JS代码中每个字符都采用两个字节来表示。Unicode把一对字符视为一个单一的字符，而JS认为一对字符是两个不同的字符，这将会带来很多问题，考虑到代码的安全性，我们应该尽量使用基本字符进行编码名词解释Unicode标准：一种字符集标准，用于对世界上不同语言、

原创 CommonJS

CommonJS规范CommonJS使用exports导出模块，require导入模块。exports是一个空对象，require是一个函数，参数传入模块的路径即可返回该模块导出的整个内容。导出:// 要隐藏的内部实现let abc = 1;// 要暴露给外部的接口function test(){ abc++; return abc;}// exports = {}exports.test = test;/* exports: { test: fn }*/

原创 每日知识点&问题

目录前言模板2021-11-26问题类微信小程序点击提示找不到函数知识点类前言总结每天用到的知识点和问题模板## 2021-11-26### 问题类#### 问题一- 错误信息- 错误截图- 问题原因- 解决方法#### 问题二- 错误信息- 错误截图- 问题原因- 解决方法### 知识点类#### 知识点一- 代码 || 截图- 理解2021-11-26问题类微信小程序点击提示找不到函数错误信息：Component “…” does not have a

原创 js基础-数据类型和运算符学习

关于typeof的一些细节typeof函数返回的类型时stringtypeof(null)使用typeof得到类型时，可以是未声明的变量，得到的值是undefined。数据类型原始类型：number，string，boolean，null，undefined引用类型：object，function…关于对象读取对象中的某个属性当读取对象的属性不存在时，会得到undefined。当读取属性的对象（对象的值为undefined或null）不存在时，会报错。

原创 微信小程序自定义组件- behavior

组件通信在使用自定义组件中获取自定义组件实例自定义组件中根组件的属性中加一个id属性自定义组件中通过 this.xxx = this.selectComponent('#id值')获取自定义组件的实例this.xxx.方法名()调用自定义组件中抛出事件this.triggerEvent('事件名',数据,冒泡或者捕获的处理方式);// 只触发调用本身this.triggerEvent('事件名',数据);// 触发引用上下层关系this.triggerEvent('事件名',

原创 自定义组件-抽象节点

目录抽象节点代码实操抽象节点官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html有时，自定义组件模版的一些节点，其对应的自定义组件不是由自定义组件本身确定，而是由自定义组件的调用者确定的，这时就可以把这个节点声明为抽象节点。这个特性自小程序基础库版本 1.9.6 开始支持。代码实操//文件结构-components -generics -custo

原创 自定义组件-数据监听器

数据监听器官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html数据监听器可以用于监听和响应任何属性和数据字段的变化，从小程序基础库版本 2.6.1 开始支持。何时使用数据监听器有时，数据被setData设置时，需要执行一些操作。那么数据监听器就可以监听数据被setData改变。通俗点，在使用setDate改变数据时，数据监听器就可以感知到，然后就可以做一些

原创 【微信小程序】组件生命周期

组件的生命周期主要的三个函数：created组件实例被创建好触发，组件在调用Component里的定义的数据data来实例化数据，此时不能使用setDataattached组件初始化完毕，进入页面节点时被触发。几乎所有的初始化工作都在这里完成。detached当页面退出时，页面中如果还有节点树，次函数被触发定义生命周期的方法可以直接写在Component构造器的第一级参数中，但是不建议。小程序在2.2.3期，生命周期函数的位置建议写在lifetimes中，优先级要高于第一级

原创 前端tips

原创 yarn install 报错

yarn install 报错报错信息：There appears to be trouble with your network connection. Retrying解决办法：删除yarn.lock文件，可能是yarn.lock中记录的版本依赖问题。如果不行就去改源。

原创 git Tips

git之修改分支名称将本地分支oldbranch切一个分支到本地 git branch -m 要修改的分支名 新分支名删除远程分支git push --delete origin 要修改的分子名将本地新分支推送到远程git push origin 新分支名...

原创 React之HOOK

HOOKHOOK简介HOOK（钩子）是React16.8.0版本之后出现的组件：函数组件（无状态组件）、类组件类组件的问题：this指向问题生命周期很繁琐其它问题HOOK的出现是为了增强函数组件的功能，使之理论上能成为类组件的替代品官方目前没有计划取消类组件HOOK在类组件中不能使用，HOOK本质上是一个函数，该函数可以挂载任何功能HOOK种类命名是以use开头useStateuseEffect其它State HookState HOOK是一个函数组件中

原创 TS之成员装饰器

目录成员装饰器属性装饰器方法装饰器方法装饰器的用处成员装饰器属性装饰器属性装饰器也是一个函数，该函数有两个参数第一个参数：如果是静态属性，则是类本身(构造函数)；如果是实例属性，则是类的原型；第二个参数：为属性名，固定一个字符串function t(target:any,str:string){ console.log(target,target === Test.prototype,str);}class Test{ //实例属性 @t props1:st

原创 TS之类装饰器

类装饰器装饰器本身是一个函数，该函数有一个参数，参数本身是该类（构造函数）使用装饰器@装饰器在TS中，如何约束一个变量为类Functionnew(参数)=>object在TS中使用装饰器，要配置"experimentalDecorators": true,装饰器函数的运行是在类定义之后就马上运行。装饰器在编译后存在，本身是js存在的语法类装饰器可以具有的返回值void：仅运行函数返回一个新的类：会将新的类替换掉装饰目标function test(target:

原创 React深入setState【4】

深入setStatesetState对状态的改变可能是异步的如果改变状态的代码处于某个HTML元素的事件中，则其是异步的，否则是同步。后面开发的时候始终当成异步的，然后使用回调函数进行处理。this.setState(() => { //改变状态 n: xxx,}, () => { //状态改变完成之后触发，改回调运行在render之后 xxxx})若遇到某个事件，需要同步调用多次，需要使用函数的方式得到最新状态。this.setState(cu

原创 React事件【3】

目录事件自定义组件的事件绑定this使用bind使用箭头函数事件//快捷键imrimport React from 'react'//imrdimport ReactDOM from 'react-dom'在React中，组件的事件，本质就是一个属性。事件名为小驼峰命名。原生的组件如内置事件与原生的使用一样。const btn = < button onClick = { (e) => { console.log('点击了', e); }}

原创 React组件【2】

组件和组件属性创建一个组件组件名的首字母必须大写why？react元素分为普通的react元素会生成html元素，另外一种是组件元素，组件本身是一个函数，返回的是React元素，type值为一个函数。function MyFunc(){ return <h1>this is function component</h1>}const comp = MyFunc();console.log(comp); //打印出来的仍然是一个React元素，只是type

原创 ts环境搭建【1】

安装TypeScript//全局安装npm i -g typescriptts配置文件//生成配置文件tsconfig.jsontsc --inittsconfig.json报错问题解决方法@types/node@types是一个ts官方的类型库，其中包含了很多对js代码的类型描述。JQuery：用js写的，没有类型检查安装@types/jquery，为jquery库添加类型定义npm i -D @types/node使用第三方库ts-node.

原创 微信小程序之生命周期与调试【3】

生命周期函数onLaunch全局的app.js的生命周期函数。单个页面的onLoad，监听页面加载。onReady，监听页面初次渲染完成。onShow，监听页面显示。onHide，监听页面隐藏。onShow和onHide的区别，当在小程序中操作时（填写信息时）是onShow，然后切换到接电话这是onHide可以监听到隐藏。onUnload，监听页面卸载。当页面全部执行完成后，页面不用了但是要保存一些数据时。onPullDownRefresh，监听用户下拉动作。设置enableP

原创 微信小程序之新页面的创建【2】

目录新页面创建与组成结构新页面创建组成结构文件解析wxml标签例子新页面创建与组成结构新页面创建在全局的app.json中的pages键后面加值（页面路径），然后点击编译或者保存，会自动生成相应的文件。手动创建。组成结构所有页面都在pages文件中，也可以自己定义在其它文件中。在一个文件夹中创建一个页面（代码清晰）也可以创建多个页面（比如同一功能的页面）。文件解析wxml与html对应，但是不能使用html中的标签，需要用微信小程序的标签。wxss与css对应，语法也一致。j

原创 微信小程序【1】

目录申请小程序账号开发准备开发工具界面介绍微信小程序开发框架全局配置文件app.json申请小程序账号'微信公众平台’注册。然后登录点击设置找到APPID，记录一下，后面有用。开发准备微信小程序官网：https://mp.weixin.qq.com/cgi-bin/wx开发模块：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html开发工具下载地址开发工具界面介绍小程序项目是用于开发时使用的，公众号网

原创 react简介【1】

React概述官网：https://react.docschina.org/什么是React？React是由Facebook研发的、用于解决UI复杂度的开源JavaScript库，目前由React联合社区维护。它不是框架，只是为了解决UI复杂度而诞生的一个库React的特点轻量：React的开发版所有源码（包含注释）仅3000多行 原生：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库 易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以

原创 ps 抠图章

选择上图的色彩范围，然后吸取图章的颜色，白色不清楚的地方，选择吸取小工具右下角有个加号的地方去吸取图章，减号反之。出现如下图清晰的白色图章，然后点击确认。之后，ctrl+j复制选择的图章。根据需要，放在不同的图片。...

原创 Echarts学习笔记之title组件（2）

setOption学习官网文档中配置项的一些笔记记录。title标题组件，包含主标题和副标题。里面有很多属性，具体可以查看官网。代码实操<div class="echarts"></div><script> //title组件的属性使用 const myEchartsInstance = echarts.init(document.getElementsByClassName('echarts')[0]); myEchartsInsta

原创 Echarts学习笔记（1）

学习笔记Echarts官网https://echarts.apache.org/zh/index.html获取Echarts通过npm获取Echarts，npm i echarts --save官方文档说明API是全部属性和方法（公用的属性和方法）APIEcharts中的init方法创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。echartsInstance方法通过 echarts.init 创建的实例。

原创 科里化函数和函数管道

科里化函数将函数一些不会变的参数固定下来，方便统一处理。在函数式编程中，科里化函数最重要的作用就是将多参函数变成单参函数。function curry(func,...args){ return function(...subArgs){ const totalArgs = [...args,...subArgs]; if(totalArgs >= func.length){ //参数够了 return func(...totalArgs); } else { //

原创 new的原理

function new(){ const obj = {}; const fn = [].shift.call(arguments); obj.__proto__ = fn.prototype; const result = fn.apply(obj,arguments); return typeof result === 'object' ? result : obj;}

原创 node生命周期

题一async function async1() { console.log("async1 start"); await async2(); console.log("async1 end");}async function async2() { console.log("async2");}console.log("script start");setTimeout(function() { console.log("setTimeout0");}, 0);setT

原创 跨域解决方案

jsonp跨域服务器代码const json = JSON.stringify(result);//返回的 callback({"a":"1","b":"2"});const script = `callback(${json})`;// 设置响应头 并发送scriptres.header("content-type",'application/javascript').send(script);客户端<script> function callback(data)

原创 websocket

socket客户端连接服务器（TCP / IP），三次握手，建立了连接通道客户端和服务器通过socket接口发送消息和接收消息，任何一端在任何时候，都可以向另一端发送任何消息有一端断开了，通道销毁http客户端连接服务器（TCP / IP），三次握手，建立了连接通道客户端发送一个http格式的消息（消息头 消息体），服务器响应http格式的消息（消息头 消息体）客户端或服务器断开，通道销毁实时性的问题：轮询客服端写一个setInterval 隔一段时间发送一次请求询问服务器数据

原创 CSRF(跨域请求伪造)和XSS（跨域脚本攻击）的概念和防范措施

这里写目录标题CSRF(跨域请求伪造)原理：防御cookie的sameSite验证referer和Origin二次验证使用非cookie令牌XSS（跨域脚本攻击）存储型XSS反射型DOM型CSRF(跨域请求伪造)恶意网站以正常用户为媒介，通过模拟正常用户的操作，攻击其登录过的网站。原理：1. 正常用户登录后，获得正常站点的令牌，以cookie的形式保存。2. 用户访问恶意站点，恶意站点通过某种形式去请求了正常网站，然后将用户的令牌传递到正常网站，完成攻击。防御cookie的sameSite

原创 HTTP缓存

首先，HTTP缓存分为强缓存和协商缓存。强缓存不需要和服务器沟通，当请求发出时，浏览器会看Expires和Cache-control有没有，有的话命中缓存，返回状态码200，从缓存中获取。协商缓存会和服务器沟通，看资源有没有没改动。没有改动，返回状态码304，资源会被服务器重定向到浏览器缓存中。强缓存与强缓存相关的字段有Expires和Cache-control，由于Expires是http1.0，Cache-control是http1.1的所以Cache-control的优先级高。Expires

原创 搞懂promise【4】模拟源码，淦

状态数据const MyPromise = (() => { const PENDING = 'pending', //状态变量 RESOLVED = 'resolved', REJECTED = 'rejected', // 符号变量外面的访问不到 promiseStatus = Symbol('PromisrStatus'), //promise的状态 promiseValue = Symbol('prom

原创 一张图了解SSL加密

原创 迭代器和生成器

迭代的理解把一堆数据按照一定的顺序拿出来的过程。再简单点就是从一堆东西中，先拿一个，再拿一个。迭代和遍历的区分迭代强调是：依次取数据，取多少，取不取完都不知道，取一个算一个。遍历强调的是：要取完，即完整性。产品迭代：这个产品最终是什么样的是不知道的，但是可以去做这产品，在过程中不断迭代更新。迭代器对迭代过程的封装。帮我们去拿数据的一个东西。通常表示为对象。迭代模式规定迭代器的功能。迭代器应该有得到下一个数据的能力。迭代器应该具有判断后面还有没有数据的能力。js中的迭代器如果一个