newway007-CSDN博客

原创 http相关

http头信息HTTP Request Header请求头Header 解释示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏览器可以接受的字符编码集。 Accept-Charset: iso-8859-5 Accept-Encoding 指定浏览器可以支持的web服务器返回内容压缩编码类型。 Accept-Encoding: compre..

2021-04-29 16:26:16 380

原创 vue3 源码之内置组件

teleport组件有一种场景是组件的一部分逻辑上属于该组件，但是需要显示在其它地方，类似于react的portals；一个常见的场景是创建一个包含全屏模式的对话框组件。在大多数情况下，我们希望对话框的逻辑存在于组件中，但是对话框的定位 CSS 是一个很大的问题，它非常容易受到外层父组件的 CSS 影响。把该组件渲染的这部分 DOM 挂载到 body 下面，这样就不会受到父级样式的影响了。而 Vue.js 3.0 把这一能力内置到内核中，提供了一个内置组件 Teleport，它可以轻松.

2021-04-23 22:24:39 954

原创 vue3 源码之生命周期钩子

生命周期钩子对应的生命周期Option如下:beforeCreate -> 使用 setup() created -> 使用 use setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy-> onBeforeUnmount destroyed ->

2021-04-23 16:34:15 661

原创 vue3源码之组合式api

vue3 提供了setupAPI来提供组合式API的使用. 我们开回顾一下vnode的挂载过程:const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => { // 创建组件实例 const instance = (initialVNode.component = createComponentInstance(initialV

2021-04-22 21:31:45 494

原创 vue3响应式原理附

上面讲了的N多源码。。其实只讲了怎么实现的，没有讲为什么要这么实现。vue3为什么会采用不同的响应式原理：这是因为vue2使用的Object.defineProperty存在一些问题：1.为什么vue2.x不支持使用数组下标来响应数据变化，只能用$set？事实上，Object.defineProperty 本身是可以监控到数组下标的变化的，只是在 Vue 的实现中，从性能 / 体验的性价比考虑，放弃了这个特性。下面是栗子：function defineReactive(data, k

2021-04-22 19:37:26 415

原创 vue3源码之响应式原理

reactive的函数实现如下:function reactive (target) { // 如果尝试把一个 readonly proxy 变成响应式，直接返回这个 readonly proxy if (target && target.__v_isReadonly) { return target } return createReactiveObject(target, false, mutableHandlers, mutableColl

2021-04-22 16:24:06 226

原创页面刷新回退等

刚才同事问我返回上一个路由的问题。。然后我就从vue3源码里面退出来，总结一下这些操作；刷新页面个人觉得刷新页面是一个备用选择，页面刷新无非是数据变了，要么从服务器获取新的数据，要么请求数据修改成功后自行修改数据；如果万一真的有绕不开刷新页面的情形，就用window.location.reload()history.go(0)回退页面：history.go(-1)history.back(-1)go(-1): 返回上一页，原页面表单中的内容会丢失；bac...

2021-04-22 12:32:32 230

原创 vue3源码之diff以及最长递增子序列详解（多种方法）

终于来到了我最想写的diff了。当时看这一块代码看了好久。然后顺带get了最长上升子序列算法和vue3源码中做的优化。新子节点数组相对于旧子节点数组的变化, 无非是通过更新, 删除, 添加和移动节点来完成的.新旧子节点数组很容易拥有相同的头尾节点. 对于相同的节点, 我们只需要对比更新即可.1.同步头部节点const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSus..

2021-04-21 19:00:54 1566

原创 vue3源码之渲染和更新流程

1.创建虚拟dom在createAppAPI的mount方法中, 通过createVNode创建了VNode:export function createAppAPI<HostElement>( render: RootRenderFunction, hydrate?: RootHydrateFunction): CreateAppFunction<HostElement> { return function createApp(rootComponent,

2021-04-20 20:46:17 539

原创 ts的断言

今天看vue的源码。看到了变量后加！的用法；后来查了一下：结论1、as和!用于属性的读取，都可以缩小类型检查范围，都做判空用途时是等价的。只是!具体用于告知编译器此值不可能为空值（null和undefined），而as不限于此。2、?可用于属性的定义和读取，读取时告诉编译器此值可能为空值（null和undefined），需要做判断。as：let someValue: any = "this is a string";let strLength: number = (someVa.

2021-04-08 16:07:03 1682

原创 vue3源码阅读-createApp

CreateApp 作为 vue 的启动函数，返回一个应用实例一个实例：const HelloVueApp = { data() { return { message: 'Hello Vue!' } }}Vue.createApp(HelloVueApp).mount('#hello-vue')export const createApp = ((...args) => { const app = ensureRenderer()..

2021-03-28 19:57:07 1465

原创 vuex4的使用

import{createStore}from'vuex'exportdefaultcreateStore({state:{count:0},getters:{doubleCount:state=>state.count*2},mutations:{addCount(state,payload=1){state.count+=payload;}},act...

2020-12-23 21:13:50 2254

原创 vue 的jsx语法

2020-12-14 21:14:07 320

原创从服务器下载

从服务器下载文件： <div class="uploadBtn" (click)="modeTableDownload1()">下载</div>modeTableDownload1() { const downUrl = `/meta/original_form`; const a = document.createElement('a'); a.setAttribute('href', downUrl); a.click(); }.

2020-10-27 14:23:55 141

原创任意多个的凸包以及具体的需求

刚刚有一个需求，就是想要把路口和路段的区域包裹起来，并且按照它的图形的形状往外扩大一些。（为了美观）首先是一连串点坐标的凸包的计算。先找到坐标点中x轴最小的一个点，这个一定是这个多边形的一个顶点。然后这个点a和任意一个点的所构成的向量，其他的点都在它的一侧，那么另一个点b也是多边形的一个顶点。否则，则不是。然后将b与剩下的任意一个点构成的向量，判断其他点是否在同一侧。这样就可以顺序得到所有多边形的点。这就是凸包。图形扩大的问题。首先先找到这个多边形的中心。这个中心与每个顶点的..

2020-10-27 14:23:07 213

原创 express的安装

理论上这个安装应该没什么问题。。我看到网上攻略都是说全局安装express，然后因为4.0+版本将命令行工具分离出来了。所以需要安装npm install express-generator -g但是我的node.js有点特殊，我之前安装一个什么东西将npm版本降低了。。然后前几天又安装一个啥，说npm版本和node.js？版本不一致？我又屁颠屁颠升高了npm版本。。又改了一些东...

2020-03-26 17:16:03 131

原创 react native

我觉得这个最难的是安装环境。。。公司的网限速，流量也限速，巨慢，再加上，昨天官网突然更新，我辛辛苦苦安装的环境又作废，重新安装。。。晚上回去没拿电脑电池。。。。装到快没电了，（装到我睡着了）。。。。今天峰回路转，就很顺利安装好了。。（还是要科学上网。。。。）至于中间踩过的坑。。。。如果你可以科学上网，并且网速很快，其实装起来很快的。。android studio 安装了很...

2020-03-20 13:47:09 144

原创 meta标签

meta标签放在html头部；用于描述页面元数据，元数据不会显示在客户端，但是会被浏览器解析。属性值描述 charset character_set 文档的字符编码。 content text 定义与 http-equiv 或 name 属性相关的元信息。 http-equiv content-type default-sty...

2020-03-16 21:40:30 135

原创 DOM操作

我觉得我最薄弱的是html部分。。。有一次面试（其实也没怎么面试。。。就是卡住了让我有点愤愤不平。）反而是大家忽视的css部分，我有段时间花了很大力气学了一下。。。添加dom元素var p = document.createElement("p");//创建文本节点var content= "第"+index+"段落";var txt = docu...

2020-03-16 20:23:11 139

原创 react的key节点和vue的key节点对比的区别

原以为这俩算法是一样的。。就只看了react的，没想到居然不一样。。。这里做一些笔记react：是将旧的虚拟dom的同一层级的key值节点作为一个集合（旧的集合）新的虚拟dom的同一层级的key值节点作为一个集合（新集合）比如旧集合为：a b c d新集合为：b c a d比较方法为：先遍历新的集合，判断有哪一些节点需要添加和删除；再...

2020-03-16 16:21:51 878

原创 react中click事件的优化

今天做react优化的时候，想到了click的延迟事件；引入了react-fastclick模块；想要探究一下fastclick插件背后原理，由于react-fastclick中的事件都是合成事件，可能会稍微复杂一些，所以在网上找了一个原生js可用的的fastclick.js模块。插件的注释写得真的太友好了，几乎可以无障碍阅读，比jquery简单。大概思路就是，先判断它...

2020-03-04 08:26:07 864 1

原创圣杯（左右均有两种定位方法）和淘宝双飞翼

圣杯模型：圣杯模型的核心在于父元素加padding。通过margin-left或者margin-right以及positive：relative定位左右两边元素；以下**左右元素的定位**有**两种**写法，均写在注释里面```<!DOCTYPE html><html><head> <title></title>...

2020-02-26 09:32:24 249

原创 css3新特性汇总

新增各种 CSS 选择器 :not(p)选择每个非p的元素； p:empty 选择每个没有任何子级的p元素（包括文本节点）边框（Borders）：div{ border:2px solid; border-radius:25px; //用于设置圆角 box-shadow: 10px 10px 5px #888888; //水平阴影 ...

2020-02-25 22:26:02 213

原创 toString和valueOf

这个东西很头疼，今天也算是离开自己的舒适区，去探究一下他们俩到底有什么区别？toString把转换为字符串，对于布尔类型对象，字符串类型对象，就是原始值；valueOf正常情况下，优先调用toString()有运算操作符的情况下valueOf()的优先级高于toString()当调用valueOf()方法无法运算后还是会再调用toString()方法...

2020-01-24 15:35:43 130

原创 js基础之array对象

array对象有很多方法:contact它可以摊平一层数组；如果它的参数是一个原始类型，那么它直接依次加到数组末尾。如果是参数是一个数组，数组里面的元素是原始类型，将数组里面的元素依次加到数组末尾。如果参数是一个数组，数组里面的元素是引用类型，直接将引用类型的元素加到数组末尾。join()它是将数组里面每一个元素转换成字符串，然后以某种方式连接起来，返回这个连接后的字符...

2020-01-24 12:47:35 186

原创 ssl初步了解

SSL证书由浏览器中“受信任的根证书颁发机构”在验证服务器身份后颁发,具有网站身份验证和加密传输双重功能特点保密性 (防泄密)完整性（防篡改）真实性（防假冒）HTTP + SSL = HTTPS网站如何通过加密和用户安全通讯...

2020-01-22 15:53:40 163

原创网络安全

参考代码见：https://github.com/newway7/xss-cookie/blob/master/README.mdxss-cookie安装数据库首先需要安装数据库，具体见https://mp.csdn.net/postedit/104061730 有我的安装和数据添加过程。克隆我的git安装依赖cnpm inodemon index.js打开浏...

2020-01-22 14:17:25 607

原创网络安全之xss之安装篇mysql

这一篇主要讲关于xss前期安装。在网上找了一个小的demo去尝试xss攻击。首先需要安装数据库mysql，（去官网找了一个比较老的版本，网上攻略说新版本收费？）然后几乎一路默认安装下来。我昨天傻傻地把默认端口3306改成了3000...结果后期一直在各种改端口。。。因为是初入手的关系，感觉demo里面全是使用3306端口，然后不知道为什么老报错3306什么什么orz。...

2020-01-21 14:49:55 566

原创 background少见的属性

CSS3 背景background-clip 规定背景的绘制区域。 background-origin 规定背景图片的定位区域。 background-size 规定背景图片的尺寸。 CSS3 渐变CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右...

2020-01-16 20:17:10 96

原创 transform

transform实例：https://c.runoob.com/codedemo/3391看了一下rotate，按照我自己的习惯总结了一下，rotatex是以x轴为旋转轴顺时针旋转，rotatey是逆时针旋转transform-origin是确定运动按照以什么为原点或者旋转轴，transform-origin是以左上为0，0，0.x是右上transform-origin :...

2020-01-16 19:29:08 164

原创 display:flex总结

flex布局是一个非常有用以及常见的布局方式在使用了display：flex之后，float，clear等属性均失效；display：inline-flex；将对象作为内联块级弹性伸缩盒显示，父元素宽度未设定时；根据子元素宽度自适应；display：flex；父元素宽度默认为100%；容器的flex属性：排列方向：flex-direction：row（默认）；从左到右；ro...

2020-01-16 15:49:59 340

原创 react hooks学习总结

学完这个，react就告一段落了。react hooks解决的问题：1.函数式组件不能使用state之前只能用于一些简单而无交互的场景。2.副作用的问题。通常数据的获取、订阅或者手动修改React DOM这些行为，我们成为副作用；react提供useEffect 这个API来处理组件的副作用问题。取代了componentDidMount，componentDidU...

2020-01-15 19:06:29 222

原创 react hooks的类似redux的构建

redux原理就是做一个全局的状态管理，然后通过上下文context传递，provide和connect就是这么做的。使用react hooks中的useContext和useReducer就可以构建一个类似的全局状态管理了。首先利用useReducer得到一个状态state和改变状态的dispatch然后用useContext传递state和dispatch给组件。组件就可以获得st...

2020-01-15 11:10:11 187

原创 react中router使用方式

react路由有两种：BrowserRouter和HashRouterBrowserRouter原理是H5的historyAPI地址栏没有#号通过高阶组件的属性代理方式，将match, location, history以props的形式传递给routeimport {Switch, Route, Link, BrowserRouter as Router} from 'reac...

2020-01-14 15:08:18 237

原创 mobx模板用法

全局的存储storeimport {observable, action} from 'mobx';class Store { @observable num; construction(){ this.num = 0 } timer= observable({ tile:1, visible: false,//用户信息的模态框...

2020-01-12 19:33:20 191

原创 redux之connect和provider的简单使用(加上中间件)

首先是src目录结构：store目录下：action.jsexport const add=()=>({type:'add',data:1});export const down=()=>({type:'down',data:1});reducer.jsfunction reducer(state=0,action){ switch(action.ty...

2020-01-12 15:20:11 664

原创 three.js之简单的一个效果

我有点学不动这个了。。主要是教程的代码有点旧了。各种效果出不来。我就当入门玩一下这个吧。一个可以运行的demo。<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="utf-8"> <s...

2020-01-06 20:48:27 168

转载 three.js 正交投影和透视投影

Three.js相机对象(正投影OrthographicCamera、透视投影PerspectiveCamera)针对不同应用的三维场景需要使用不同的投影方式，比如机械、工业设计领域常常采用正投影(平行投影), 游戏场景往往采用透视投影(中心投影)。为了完成三维场景不同的投影方式，three.js封装WebGL API和相关算法，提供了正投影OrthographicCamera、透视投影Pers...

2020-01-05 18:18:21 1648

原创 three.js画网格

var renderer; function initThree() {//初始化渲染器 width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeigh...

2020-01-05 15:37:59 727

原创 three.js 相机camera属性解析

先说右手定则定坐标系。。右手掌心向左，拇指食指中指指向三个方向，拇指即指向X轴的正方向，食指指向Y轴的正方向，中指所指示的方向即是Z轴的正方向。记忆方法是你右手的拇指食指中指分别是xyz，逆时针记忆。function initCamera() { camera = new THREE.PerspectiveCamera(45, width / height, 1, 10...

2020-01-04 19:22:36 1006

空空如也

关于css中1px的问题和解决方案

关于函数作为参数传入后，this指向问题

<input />能否输入undefined、boolean、NaN等值