qq_35469739-CSDN博客

原创 React hooks整理

React hooks整理:会有 Capture Value 特性推荐配合 eslint-plugin-react-hooks 使用useEffect:useEffect 依赖一个空数组的时候，会记住 state 的值useEffect(()=>{ setInterval(() => { console.log(num) setNum(num+1) }, 500);},[])// 一直打印 0，依赖空数组时，这个 effect 会记住 num 的值，每

2020-09-28 12:15:31 156

原创 webpack 高级特性总结

webpackplugins:new webpack.DefinePlugin({ // window.ENV = 'development' ENV: JSON.stringify('development')})自动补全 css 前缀{ test: /\.css$/, // loader 的执行顺序是：从后往前 loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 post

2020-09-28 11:51:37 301

原创 Vue.js 3.0 响应式系统的实现原理

Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：1、reactive:接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理创建拦截器对象 handler, 设置 get/set/deletePropertyget收集依赖（track）返回当前 key 的值。如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty如果当前的 key 的值不是

2020-09-23 16:30:50 567

原创 Vue 3.0 介绍

Vue 3.0 介绍1、Vue 3.0 源码组织方式源码组织方式：源码采用 ts 重写使用 Monorepo 管理项目结构packages 目录结构compiler-core: 和平台无关的编译器代码compiler-dom: 浏览器平台下的编译器代码(依赖于 compiler-core)compiler-sfc: 编译单文件组件的代码(依赖于 compiler-core 和 compiler-dom)compiler-ssr: 服务端渲染的编译器（依赖于 com

2020-09-16 17:39:23 10154

原创 2020前端面试题整理

1、已知如下对象，请基于 es6 的 proxy 方法设计一个属性拦截读取操作的例子，要求实现去访问目标对象 example 中不存在的属性时，抛出错误：Property “$(property)” does not exist// 案例代码const man = { name: 'jscoder', age: 22}//补全代码const proxy = new Proxy(...)proxy.name // "jscoder"proxy.age // 22proxy.locati

2020-09-01 18:19:05 474

原创 typeScript整理笔记

typeScriptTypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集，为 JavaScript 的生态增加了类型机制，并最终将代码编译为纯粹的 JavaScript 代码。TypeScript 简介TypeScript 由 Microsoft(算上 Angular 2 的话加上 Google)开发和维护的一种开源编程语言。它支持 JavaScript 的所有语法和语义，同时通过作为 ECMAScript 的超集来提供一些额外的功能，如类型检测和更丰富的语法。

2020-08-28 16:56:41 237

原创从输入URL到页面展示，这中间发生了什么？

从输入URL到页面展示，这中间发生了什么？用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL用户输入完内容，按下回车键，浏览器导航栏显示loading状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得浏览器进程浏览器构建请求行信息，会通过进程间通信（IPC）将URL请求发送给网络进程GET /index.html H

2020-08-27 16:42:50 320

原创 js继承的几种方式及优缺点

1、原型链继承function Parent () { this.name = 'kevin';}Parent.prototype.getName = function () { console.log(this.name);}function Child () {}Child.prototype = new Parent();var child1 = new Child();console.log(child1.getName()) // kevin 问

2020-08-27 15:12:09 457

原创 dva 使用手册

dvaapp = dva(opts)创建应用，返回 dva 实例(注：dva 支持多实例)opts 包含如下配置：history：指定给路由用的 history，默认是 hashHistoryinitialState：指定初始数据，优先级高于 model 中的 state，默认是 {}如果配置history 为 browserHistory，则创建dva对象可以写成如下写法import createHistory from 'history/createBrowserHistory'

2020-08-26 17:14:43 321

原创 Vuex 数据流管理及Vue.js 服务端渲染（SSR）

Vuex 数据流管理及Vue.js 服务端渲染（SSR）项目见：https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-03任务一：Vuex 状态管理1、课程目标Vue 组件间通信方式回顾Vuex 核心概念和基本使用回顾购物车案例模拟实现 Vuex2、组件内的状态管理流程状态管理：state：驱动应用的数据源view：以声明方式将 state 映射到视图actions：响应在 vie

2020-08-09 16:00:22 749

原创 vue.js源码剖析——虚拟 DOM

任务二：vue.js源码剖析——虚拟 DOM1、虚拟 DOM 概念回顾什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。例如：指令和组件机制为什么要使用虚拟 DOM避免直接操作 DOM，提高开发效率作为一个中间层可以跨平台虚拟 DOM 不一定可以提高性能首次渲染的时候会增加开销复杂视图情况下提升渲染性能2、代码

2020-08-02 22:40:01 136

原创 Vue.js 源码剖析-响应式原理学习的心得体会+学习笔记（青铜到铂金）

拉勾教育大前端高薪训练营心得体会+学习笔记心得体会不知不觉在拉钩教育大前端高薪训练营已经学习2个多月了，在这两个多月的学习中，自己收获了很多，不仅养成了每次学习时都保证高质量的记好学习笔记的习惯，而且对自己整个的前端基础知识进行了巩固，对基础知识有了更深的理解，勉强做到了知其然，更知其所以然。接下来我想谈下拉钩教育大前端高薪训练营的课程体系：这门课的内容非常的好，为什么这么说呢？原因有以下几点：1.课程的深度做的足够好：课程不仅会教同学们怎么使用前端经常使用的框架（vue、react 和 ang

2020-08-02 09:55:07 902

原创 vue.js源码剖析——虚拟 DOM（更新中）

Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）项目见：https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-02任务二：vue.js源码剖析——虚拟 DOM1、虚拟 DOM 概念回顾什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。

2020-08-02 00:08:46 162

原创 Vue.js 源码分析-响应式原理

Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）项目见：https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-02任务一：Vue.js 源码剖析-响应式原理1、Vue 的不同构建版本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BgywtCl9-1596183666518)(…/images/vueAllJs.png)]Full：包含编译器和运行时的构建

2020-07-31 16:22:31 863

原创 tensorflow.js 训练模型和可视化训练时用到的高频API详解

tf.js 实战学习笔记tfvis.render.scatterplot （container，data，opts？）绘制散点图(文档见 https://js.tensorflow.org/api_vis/1.4.3/#render.scatterplot)const series1 = Array(100).fill(0).map(y => Math.random() * 100 - (Math.random() * 50)).map((y, x) => ({ x, y, }))

2020-07-21 17:25:42 662

原创 TensorFlow.js 学习笔记(持续更新)

六子 TensorFlow.js 学习笔记part一、Tensors1、Creation:我们具有用于标量，1D，2D，3D和4D张量的常见情况的实用程序功能，以及许多用于以对机器学习有用的方式初始化张量的功能。tf.tensor(values, shape?, dtype?)参数：values （TypedArray| Array）张量的值。可以是数字的嵌套数组，平面数组或 TypedArray。如果值为字符串，则将其编码为 utf-8 并保留为 Uint8Array[]。shape

2020-07-13 10:11:44 272

原创简易版 vue-router的 hash 模式实现

1、模拟 VueRouter 的 hash 模式的实现，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。答：自己实现的 vue-router 的代码如下(完整代码见https://github.com/smallSix6/fed-e-task-liuhuijun/tree/master/fed-e-task-03-01/code/liuzi-hash-router)：router/index.jsimport Vue from "vue";i

2020-07-11 09:21:59 790

qq_35469739的博客