_付宏-CSDN博客

原创 vue的响应式原理及从无到有用原生js实现vue的一套响应式系统

what is 响应式？响应式作为vue的代表特点之一, 意义非凡, 响应式的含义也就是: 我们更改了js中的数据, 页面会同步进行更新, 同理, 页面中的数据发生了变化, js也会得到通知从而更改数据来看看实例<div id='#app'></div>const vm = new Vue({ el: '#app', data: {.

2020-06-12 14:10:06 2166 4

原创 ES6 - 从Promise入门到深入原理（手写一个自己的Promise）

事件和回调函数的缺陷我们习惯于使用传统的回调或者事件处理来解决异步问题事件: 某个对象的属性是一个函数, 当发生一件事时, 运行该函数dom.onclick = function() { // ...执行的代码}回调：运行某个函数以实现某个功能的时候, 传入一个函数作为参数, 当某个特定的条件下的时候, 就会触发该函数dom.addEventListner('click', ...

2020-04-17 16:34:48 4803 10

原创你不知道的JS专栏 - 避免bug利器纯函数

你不知道的JS专栏 - 避免bug利器纯函数目录：纯函数的概念及基本认识纯函数在实际开发中的使用案例纯函数在框架中的使用, 以及框架中的纯函数思想纯函数的概念及基本认识纯函数定义 - 不依赖除参数外的任何其他外部作用域变量, 同时也不修改其作用域外任何变量的函数纯函数的作用 - 由于纯函数定义的特质, 所以纯函数不需要考虑任何上下文环境, 也不会被上下文环境所影响,...

2020-04-17 16:33:37 1219

原创一份前端工程师快速接入GO语言语法指南(中)

一份前端工程师快速接入GO语言语法直男指南(中)long time no see, 又过了一周, 笔者这周为大家带来的是咱们这个指南的中篇(目测指南大概会存在: 上,中, 下, 进阶四篇), 而有了上篇的铺垫, 笔者相信你对go语言也有了一些基本的认识, 这一篇我们来继续讲讲go语言的其他特性:指针复合数据类型函数go语言中一些常用的包指针如果你大学里上过C语言的话, 我相信你对指针这个东西不太陌生, 如果你没上过, 那笔者就用自己对指针的理解来跟同学聊聊指针指针到底是什么？跟in

2020-11-21 15:03:50 406 1

原创一份前端工程师快速接入GO语言语法指南(上)

一份前端工程师快速接入GO语言语法直男指南如果你对行业风向比较关注的话, 我相信你对go一定是不陌生的, 作为近几年频频露脸大放异彩的21世纪C语言, go华服加身（熹妃回宫~）, 当然, 作为一名前端, 不论是为了让自己的职业道路更加宽广(搞更多的钱), 还是为了要让自己的技术栈更加丰富, KOA node这种级别的语言已经不足以让我们停下脚步, 如果想要成为全栈或者架构, 一门或多门服务端语言的学习与掌握不可避免, 而go这两年又这么红, 所以笔者这里提供一本葵花宝典(不正经前端学习go基本语法指南)

2020-11-14 20:34:56 1437

原创 vue3 - composition api

Vue3中提出的一个新概念, 作用: 聚合代码 & 逻辑重用Vue的组件化做的相当出色, 帮助我们更好的拆分代码和约束代码, 增加可读性, 但是2.x有几个问题也是开发者们时刻在关注的代码逻辑不够聚合, 比较分散, 如果我们的组件代码量一多, 找相同的代码逻辑会显得比较困难上面的图我把相同逻辑代码用同样的颜色框在了一起, 抛出方法本身的调用以外, 我们依旧可以很清晰的发现这些逻辑是分散的, 非聚合的, 跟react不同, vue只能拆分功能组件却很难拆分逻辑, 所以当我们逻辑一多.

2020-10-31 12:55:24 3108 1

原创 webpack笔记（八）- 入口 & 出口

目录:前置知识./的双重含义__dirnamenode中的path模块入口出口前置知识咱们先来说说这个./在模块化代码中, 比如require, ./表示当前JS文件所在的目录在路径和文件处理中, ./表示node运行目录__dirname所有情况下, __dirname都表示当前运行的JS文件所在的目录, 不过他是一个绝对路径console.log( __dirname ); // 必须在node环境中使用node中的path模块顾名思义, path模块中

2020-08-08 19:25:07 307

原创 webapck笔记（七）- 编译过程

目录:初始化编译创建chunk构建依赖生成chunk assets合并chunk assets输出总结webpack官方术语啥叫编译？有数不, webapack将我们书写的代码转换为最终使用的代码的这个过程就叫做编译, 如下图红框中的流程就叫做编译过程初始化此阶段, webpack会将cli参数, 配置文件, 默认配置进行融合, 形成一个最终的配置对象（有点像Css的融合过程, 也有点像Object.assign ）对配置的处理过程是依托于一个叫做yargs

2020-08-08 13:55:03 307

原创 webpack笔记（六）- webpack.config.js之devtools

目录:source map 源码地图webpack的source mapsource map前端发展到现阶段, 很多时候都不会直接运行源代码, 可能需要对现有源代码进行合并, 压缩, 转换等操作, 真正运行后的是转换后的代码这就给调试带来了困难, 因为当运行发生错误时, 我们可能得不到我们想要的错误信息在src下新建index.js// index.jsconsole.log('right');console.log(a); // a是未经声明就去输出的肯定会报错npx w

2020-08-08 10:49:31 1230

原创 webpack笔记（五）- webpack配置文件初识

webpack提供的cli支持非常多的参数, 例如--mode, 但更多的时候, 我们会使用更加灵活的配置文件来控制webpack的行为默认情况下, webpack会读取webpack.config.js, 但也可以通过cli参数 --config来指定某个配置文件配置文件中通过COMMONJS模块导出一个对象, 对象中的各种属性对应不同的webpack配置注意, Webpack是在构建依赖过程中可以允许多种模块化规范, 但是在打包过程中, 只允许commonjs规范, 环旭话说我们自己在构建依赖过程

2020-08-07 11:20:04 171

原创 ES6笔记（十一）- Reflect & Proxy

目录:Reflect反射的用途Reflect常用方法【扩展】Property Descriptor属性描述符简介和基本特性属性描述符的存取器属性（ getter, setter ）属性描述符的最佳实践存取器的意义ProxyProxy的使用【扩展】观察者模式【扩展】代理模式ReflectReflect是一个内置的JS对象, 它提供了一系列方法, 可以让开发者通过调用这些方法, 访问JS的一些底层功能由于他类似于其他语言的反射, 因此取名Refle

2020-08-07 09:50:45 245

原创 ES6笔记（九）- Set & Map

一直以来, JS只能使用数组和对象来保存多个数据, 缺乏像其他语言那样拥有丰富的集合类型, 因此, ES6新增了两种新的集合类型（ Set和Map ）, 用于在不同的场景中发挥作用目录:SetSet集合的创建对Set集合的后续操作Set的最佳实践【扩展】手写SetMapMap集合的创建对Map集合进行后续操作【扩展】手写Map【扩展】WeakMap & WeakSetWeakSetWeakMapSetSet集合用于存放不能重复的数据

2020-08-03 18:33:58 182

原创 ES6笔记（八）- Iterator & Generator

目录:迭代器背景知识JS中的迭代器next方法像遍历一样操作数据封装公共迭代方法可迭代协议for…of可迭代对象和展开运算符生成器生成器的创建生成器函数内部的执行规则生成器实例生成器函数的特性迭代器背景知识什么是迭代？从一个数据集合中按照一定的顺序, 不断取出数据的过程叫做迭代迭代和遍历的区别？迭代强调的是依次取数据, 不保证一次性取完, 遍历强调的是把整个数据依次全部取出为什么要使用迭代器？将数据和取数据的过

2020-08-02 21:16:22 238

原创 ES6笔记（七）- Symbol

ES6笔记（七）- Symbol符号: 符号是ES6新增的一个数据类型, 通过Symbol(符号名)来创建目录:符号概览普通符号共享符号知名（具名, 公共）符号符号概览在开始之前, 咱先回顾一下ES6之前的我们所知道的数据类型string, number, boolean, object, undefined, null符号设计的初衷: 是为了给对象设置私有属性在过去我们JS是没有私有成员这一说的（当然你通过特殊手段实现的不算）, 但是私有成员又是非常有必要的,

2020-08-02 08:07:29 1049

原创 ES6笔记（六）- Desconstruction

解构: 使用ES6提供的新的语法，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。目录:过去我们遇到的一些尴尬场景对象解构函数解构解构默认值解构 + rest运算符一些实战场景过去我们遇到的一些尴尬场景当我们访问一个对象中的成员属性的时候, 一般会使用obj.xxx的形式去访问, 如下const obj = { username: 'loki', age: 18}console.log(obj.username);cons.

2020-08-01 17:05:24 980 1

原创 ES6笔记（五）- Object

目录:新增的对象字面量语法成员速写方法速写计算属性名新增的Object方法Object.isObject.assignObject.setPrototypeOfObject.keys, Object.values, Object.entriesClass【扩展】面向对象简介用class（类）来实现更好的面向对象支持类的其他书写方式类的继承新增的对象字面量语法成员速写ES5在书写对象成员的一些问题我们在开发中总是会遇到这样的逻辑, 用户输入了用户

2020-08-01 14:45:35 612

原创 ES6笔记（四）- Spread

目录:剩余运算符给我们带来的问题展开运算符（散列运算符）对数组展开对对象展开展开运算符的最佳实践剩余运算符给我们带来的一个小问题我们先来看一个结合ES6剩余运算符的一个小例子（剩余运算符在我的ES6笔记（三）- Function中有交流到）// 这是我们要书写的求和函数getSum其中使用到了剩余运算符function getSum( ...numberArr ) { let sumResult = 0; numberArr.forEach(it =

2020-07-26 11:04:06 275

原创 ES6笔记（三）- Function

目录:参数默认值ES6之前我们给函数参数默认值的方式使用更加舒服的ES6参数默认值【扩展】ES6参数默认值对arguments的影响【扩展】参数默认值和暂时性死区剩余参数ES6之前处理不限定参数函数的方法剩余参数运算符new.targetES5检测是否通过new操作符使用构造函数的方法ES6的解决方案箭头函数ES5关于函数this指向的一些烦恼和骚操作箭头函数混脸熟箭头函数特点箭头函数的最佳实践【扩展】关于this指向问题参数默认值

2020-07-25 20:15:53 434

原创 ES6笔记（二）- String

目录:字符串新的常用字符串操作方法startsWith, endsWithincludesrepeat【扩展】ES5 + ES6字符串常用方法集合模板字符串ES6之前字符串书写的问题使用模板字符串获得更好的体验【扩展】模板字符串的标记字符串新的常用字符串操作方法startsWith, endsWithstartsWith用于判定一个字符串是不是以参数字符串开头, endsWith用于判定一个字符串是不是以参数字符串结尾, 是的话返回true, 否则

2020-07-25 14:38:34 392

原创 ES6笔记（一）- let & const

目录:使用var声明变量的原罪使用let和const声明变量使用var声明变量的原罪定义的全局变量存入window, 如果同名将直接影响window的成员console.log('test');var console = 'helloWorld';console.log('demo'); // 直接报错, 因为上面定义的console允许重复的变量声明, 导致影响数据被覆盖var foo = function() { console.log('我是foo函数');

2020-07-25 08:55:34 402

原创 webpack笔记（四）- 编译结果分析

我们每一次用webpack打包以后都会生成一个dist文件夹, 下面有一个main.js文件,我们是时候关注一下webpack的编译结果main.js都写了什么我们不看main.js到底写了什么, 我们在src目录下新建一个a.js, b.js和index.js, 各自书写代码如下// a.jsconsole.log('i am a.js');module.exports = { a: 10, b: 20}// index.jsconsole.log('i am inde.

2020-07-22 09:39:53 495

原创 webpack笔记（三）- 模块化兼容性

我们知道, 我们只要接入了webpack, 那我们在书写代码的时候几乎可以做到随心所欲, 特别是在模块化这块, 经过webpack编译过后的代码, 任何规范他都可以给你处理的服服帖帖的, 那这一篇博客我们就来看看webpack在模块化兼容性这块是怎么处理的吧ES6导出 + ES6导入关于es6导出和es6导入, 这个其实都不用怎么说, 因为是完全按照es6的规范来的, 我们新建一个src目录, 然后再里面新建一个index.js和es6Module.js// es6Module.jsexpo.

2020-07-21 10:32:42 371

原创 webpack笔记（二） - webpack的安装和使用

webpack简介webpack是一个基于模块化的打包（构建）工具, 它把一切都视作模块它通过一个开发时态的入口作为起点, 分析出所有的依赖关系, 然后经过一系列的过程（压缩, 合并）, 最终生成线上环境的文件webpack的特点:为前端工程化而生: webpack致力于解决前端工程化, 特别是浏览器工程化中遇到的问题, 让开发者集中注意力编写业务代码, 把工程化过程中问题交给webpack简单易用: 支持零配置, 可以不用写任何一行额外的代码就可以使用webpack强大的生态: webpac

2020-07-21 08:58:25 402

原创 webpack笔记（一）- webpack / webpack的诞生背景

要学习webpack, 我们必须要知道浏览器现在的模块化有什么问题效率问题先来看一个例子我们要做的事情非常简单, 新建一个目录, 在里面在新建src目录, 在目录下创建几个文件分别是: index.html, index.js, a.js, b.js, 目录格式如下这几个文件对应的文件各自的内容如下index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UT.

2020-07-20 16:49:45 466 1

原创面经 - 记一次巨人网络的一面(二面稍后更新)

笔者最近也是因为一些个人问题选择了跳槽, 巨人网络的内推, 来了一面的视频面试, 面完了以后想着自己也想写个面试模块, 把自己的一些面试经历遇到的问题都总结一下, 也希望能够给大家提供一些帮助基本上是真实对话还原, 所以字会比较多面试官:付金权你好, 我是巨人网络xx事业部的前端工程师,也是此次的一面面试官, 我叫xxx。我:你好。面试官:用三分钟简单介绍一下自己吧我:略面试官:好的, 收到, 这边我看你简历上有写道你熟悉vue全家桶和react全家桶, 那么你怎.

2020-07-18 18:01:51 1396

原创 React笔记(七) - 手写redux

来吧, 手写redux, 本篇博客针对于对redux有使用经验想交流原理的同学和朋友, 如果你对redux尚未了结, 笔者建议你先去看看redux的基本使用目录:createStore的实现bindActionCreator的实现combineReducers的实现applyMiddleWare的实现createStore的实现初始化数据仓库要实现createStore, 我们先要知道createStore的工作流程和实现效果createStore接收三个参数reduc.

2020-07-18 09:45:27 476

原创 React笔记(六) - 用小白能看懂的方式手写React-Router

Hi, Everyone, 好久不见, 其实想了很久, 到底要不要出一篇react-router的源码级博客, 怕自己的理解不够深, 误导了大家, 但是本着书写学习笔记的习惯, 笔者还是写下来了自己对react路由的理解, 如果有问题之处还请大牛指教, 也希望这篇博客可以帮助到正在学习router原理的你本博客不会过度的去分析react自身的源码, 因为这些我相信大家从git上可以很轻易的拿到, 笔者是通过从0书写一个自己的react-router来实现跟react同样功能的方式来分享整个路由的思想,.

2020-07-12 15:56:59 633

原创 # React专栏 - lesson2 / 浅谈react内置事件原理

啥是react的内置事件？onClick, onMouseEnter这类事件就是react给开发者提供的内置事件, 我们来看看一些比较常见的应用// Test组件import React from 'react';export default class Test extends React.PureComponent { divClick = e => { console.log('react事件: div被点击了') } buttonClick.

2020-06-19 18:33:25 377

原创深度学习专栏 - lesson 1 / 初试江湖（深度学习和Python语言概览及环境搭建

最近确实也闲来无事, 于是笔者也顺应时代的潮流, 打算瞅一瞅深度学习, 说到深度学习其实很多人想到的是神经网络, 自然语言理解, 很多高大上的名词, 笔者也想从这篇博客开始来记录一下自己的学习历程, 也希望能够给大家提供一些帮助what is 深度学习？Deep Learning, 这个deep其实说的就是深层神经网络, 神经网络其实真的是炒的很老的一个概念了, 深度学习也是神经网络二次翻红以后取的新的高大上的名字, 毕竟如今被捧上神坛的AI在曾经也有着让人嗤之以鼻的历史上个世纪五十年代AI就已经

2020-06-13 21:25:23 1198

前端攻城狮Dannis