- 博客(142)
- 收藏
- 关注
RSS订阅转载 前端状态管理和中间件的实现
思考对于状态管理的解决思路就是：把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。Flux，单向数据流方案，以 Redux 为代表reduxthunk、promise、saga、epic等处理副作用dva,rematch,mirror oop风格vuex同步和异步分开Reactive，响应式数据流方案，以 Mobx 为代表...
2019-03-05 16:31:00
591
转载 rxjs的世界
rxjs学习了几个月了，看了大量的东西，在理解Observable的本文借鉴的是渔夫的故事，原文，知识的主线以《深入浅出rxjs》为主，动图借鉴了rxjs中文社区翻译的文章和国外的一个动图网站正文：在思维的维度上加入时间考量一、函数响应式编程Rxjs使用了一种不同于传统的编程模式----函数响应式编程1.1 函数化编程函数化编程对函数的使用有一些特殊的要求声明式纯函数...
2018-12-19 08:03:00
350
转载 HTTP3.0(QUIC的实现机制)
回顾HTTP2.0HTTP1.1在应用层以纯文本的形式进行通信，每次通信都要带完整的HTTP的头，而且不考虑pipeli模式的化，每次的过程总是像上面描述的那样一去一回。那样在实时性、并发想上都存在问题头部压缩：HTTP2.0会对HTTP的头进行一定的压缩，将原来每次都要携带的大量key value在两端建立一个索引表，对相同的头只发送索引表中的索引HTTP2.0协议将一个TCP的...
2018-12-11 20:09:00
824
转载 时间复杂度和空间复杂度
数据结构和算法本身解决的是“快”和“省”的问题，即如何让代码运行得更快，如何让代码更省存储空间。所以，执行效率是算法一个非常重要的考量指标。那如何来衡量你编写的算法代码的执行效率呢？这里就要用到我们今天要讲的内容：时间、空间复杂度分析。为什么需要复杂度分析？首先，我可以肯定地说，你这种评估算法执行效率的方法是正确的。很多数据结构和算法书籍还给这种方法起了一个名字，叫事后统计法。但是，...
2018-11-29 16:03:00
219
转载 八、数据驱动和初始化
前端框架解决的根本问题就是数据和ui同步的问题，vue很好的额解决了那个问题。也就是Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。通过分析来弄清楚模板和数据如何渲染成最终的 DOM。new Vue 发生了什么从入口代码开始分析，我们先来分析 new Vue 背后发生了哪些事情。我们都知道，ne...
2018-11-29 11:51:00
220
转载 七、vue计算属性
细节流程图初始化计算属性的初始化是发生在 Vue 实例初始化阶段的 initState 函数中，执行了 if (opts.computed) initComputed(vm, opts.computed)，initComputed 的定义在 src/core/instance/state.js 中：const computedWatcherOptions = { compute...
2018-11-29 11:49:00
286
转载 六、vue侦听属性
$watch实际上无论是 $watch 方法还是 watch 选项，他们的实现都是基于 Watcher 的封装。首先我们来看一下 $watch 方法，它定义在 src/core/instance/state.js 文件的 stateMixin 函数中，如下：侦听属性的初始化也是发生在 Vue 的实例初始化阶段的 initState 函数中，在 computed 初始化之后，执行了：...
2018-11-29 11:48:00
204
转载 五、vue nextTick
主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度被调度。 消息队列中存放的是一个个的任务（task）。 规范中规定 task 分为两大类，分别是 macro task 和 micro task，并且每个 macro task 结束后，都要清空所有的 micro task。关于 macro task 和 micro task 的概念，这里不会细讲，简单通...
2018-11-29 11:47:00
96
转载 四、vue派发更新
收集的目的就是为了当我们修改数据的时候，可以对相关的依赖派发更新，那么这一节我们来详细分析这个过程。setter 部分的逻辑：/** * Define a reactive property on an Object. */export function defineReactive ( obj: Object, key: string, val: any, ...
2018-11-29 11:47:00
347
转载 三、vue依赖收集
Vue 会把普通对象变成响应式对象，响应式对象 getter 相关的逻辑就是做依赖收集，这一节我们来详细分析这个过程DepDep 是整个 getter 依赖收集的核心，它的定义在 src/core/observer/dep.js 中import type Watcher from './watcher'import { remove } from '../util/index'...
2018-11-29 11:46:00
800
转载 二、vue响应式对象
Object.definePropertyObject.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，先来看一下它的语法：Object.defineProperty(obj, prop, descriptor)obj 是要在其上定义属性的对象；prop 是要定义或修改的属性的名称；descriptor 是将...
2018-11-29 11:45:00
761
转载 一些需要注意的ts
写了一段时间ts，在从头学习一遍，温故而之新ts的一些技巧1、巧用注释通过/** */形式的注释可以给 TS 类型做标记，编辑器会有更好的提示：/** A cool guy. */interface Person { /** A cool name. */ name: string,}2、巧用注释 进阶注释有很多规范的字段，基本和 JSDOC 一致。但不用着急翻文...
2018-11-29 11:42:00
1904
转载 递归
递归本质上，将原来的问题，转化为更小的同一个问题生活中递归的例子周末你带着女朋友去电影院看电影，女朋友问你，咱们现在坐在第几排啊？电影院里面太黑了，看不清，没法数，现在你怎么办？别忘了你是程序员，这个可难不倒你，递归就开始排上用场了。于是你就问前面一排的人他是第几排，你想只要在他的数字上加一，就知道自己在哪一排了。但是，前面的人也看不清啊，所以他也问他前面的人。就这样一排一排往前...
2018-11-29 11:36:00
241
转载 链表
常用的链表结构单链表双向链表 空间换时间循环链表链表的删除/插入是O(1)级别的，但是随机访问需要O(n)的复杂度双向循环链表技巧理解指针或引用的含义将某个变量赋值给指针，实际上就是将这个变量的地址赋值给指针，或者反过来说，指针中存储了这个变量的内存地址，指向了这个变量，通过指针就能找到这个变量。在编写链表代码的时候，我们经常会有这样的代码：p->...
2018-11-29 11:30:00
137
转载 TypeScript类型定义文件（*.d.ts）生成工具
在开发ts时，有时会遇到没有d.ts文件的库，同时在老项目迁移到ts项目时也会遇到一些文件需要自己编写声明文件，但是在需要的声明文件比较多的情况，就需要自动生产声明文件。用过几个库。今天简单记录一下。自己怎么编写有很多教程和文档，那里就不介绍了。1、为整个包添加声明文件使用微软的dts-gen简单使用npm install -g dts-gen // 先全局安装dts-gen...
2018-10-12 15:54:00
3953
转载 TypeScript 3.0下react默认属性DefaultProps解决方案
ts和react的默认属性的四种解决方案Non-null assertion operator(非空断言语句)Component type casting(组件类型重置)High order function for defining defaultProps(高阶组件)Props getter function(Getter函数)1、 非空断言语句1、const col...
2018-09-26 12:59:00
1429
转载 linux学习笔记
基础命令网络相关的基础命令 ifconfig // 查看ip地址 ip addr // 如何不支持，那个可以使用 vi /etc/sysconfig/network-scripts/ifcfg-xx // 比如lo eth0 什么的，把ONBOOT=no 改成yes就开始网卡 yum install net-tools // 安装就可以用ipconfig了替换默认...
2018-08-20 15:15:00
223
转载 nginx的入门到框架设计
mac上安装nginx安装与启动安装brew install nginx命令通过 Homebrew 下载的软件默认位置在 /usr/local/Cellar应该ln-s 加连接就能全局nginx -h 查看 nginx 命令参数 nginx -s reopen | quit | reload | stop 开启 退出 重启 停止 nginx -t 测试配置文件是否正...
2018-08-19 11:06:00
234
转载 Web 安全概念
Web 安全概念Web 应用中存在很多安全风险，这些风险会被黑客利用，轻则篡改网页内容，重则窃取网站内部数据，更为严重的则是在网页中植入恶意代码，使得用户受到侵害。常见的安全漏洞如下：XSS 攻击：对 Web 页面注入脚本，使用 JavaScript 窃取用户信息，诱导用户操作。CSRF 攻击：伪造用户请求向网站发起恶意请求。钓鱼攻击：利用网站的跳转链接或者图片制造钓鱼陷阱。...
2018-07-27 18:17:00
310
转载 前端单元测试
前端单元测试概述前端测试工具测试分为e2e测试和单元测试和集成测试e2e：端到端的测试，主要是测业务，绝大部分情况是指在浏览器上对某一个网站的某一个功能进行操作。单元测试工具：mache、ava、jest、jasmine等断言库： shoud.js.chai.js 等测试覆盖率工具：istanbulreact 采用jest加enzyne的写法 e2e 测试pupertear...
2018-06-22 19:08:00
324
转载 一、vue的数据双向绑定的实现
响应式系统一、概述Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。双向数据绑定，简单点来说分为三个部分：1、Observer。这里的主要工作是递归地监听对象上的所有属性，在属性值改变的时候，触发相应的watcher。2、Watcher。观察者，当监...
2018-05-24 15:33:00
243
转载 渲染机制
什么是DOCTYPE及其作用浏览器渲染过程重排Reflow重绘Repaint布局Layout一、什么是DOCTYPE及其作用DTD（document type defiition，文档类型定义）是一系列的语法规则，用来定义XML或者Html的文件类型。浏览器会使用它来判断文档类型，决定使用什么协议来解析。以及切换浏览器模式。==DOCTYPE是用来声明文档类型和DTD规...
2018-03-07 21:42:00
68
转载 帆布指纹识别
“帆布指纹识别”代码可以看出，均使用到了HTML5专属标签canvas的一个现状：在绘制canvas图片时，同样的canvas绘制代码，不同机器和浏览器绘制的图片特征是相同并且独一无二的，这样以来，提取最简单的md5值便可以唯一标识和跟踪这个用户。evercookie官网 http://samy.pl/evercookie/使用帆布指纹识别技术的库fingerprintjs 官网...
2018-03-07 15:15:00
165
转载 call、apply与bind在理解
call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。fun.call(thisArg[, arg1[, arg2[, ...]]])apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数fun.apply(thisArg, [argsArray])bind() 方法会创建一个新函...
2018-03-07 11:27:00
104
转载 webpack的世界
本文也是多次学习webpack积累下来的知识点，一直在云笔记里。webpack的原理webpack构建流程从启动webpack构建到输出结果经历了一系列过程，它们是：解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。...
2018-03-06 18:03:00
163
转载 line-height与vertical-align
css世界读书笔记：内联元素与流块级元素负责结构，内联元素接管内容x元素的下边缘就是我们的基线baselinex-height就是x的高度vertical-align：middle是x中点位置，所以那个不是严格的中间对齐ex单位是一个x的高度利用那个ex单位可以做不受字体和字号影响的内联元素的垂直居中对齐效果z<i class="icon-arrow"><...
2018-02-24 22:08:00
126
转载 'abc' 转换成[a, b, c]一道面试题的思考
最近面试遇到那样一个问题把'abc' 转换成[a, b, c]，就是字符串转成数组。看着简单，我就是说split，然后面试官问还有吗。我有思考了一下。循环用charAt()取，然后还有Array.from()和扩展运算符[...'abc']。然后就是答不出了。然后面试官问还有其他实现方式吗。我实在想出来，那道题就过了。面试完，自己思考还有什么方法，又翻看了阮一峰老师的ECMAScr...
2018-02-24 21:59:00
992
转载 Event Loop详解
1.进程，单线程与多线进程: 运行的程序就是一个进程，比如你正在运行的浏览器，它会有一个进程。线程: 程序中独立运行的代码段。一个进程由单个或多个线程组成，线程是负责执行代码的。2.单线程与多线程的区别单线程 从头执行到尾，一行一行执行，如果其中一行代码报错，那么剩下代码将不再执行。同时容易代码阻塞。多线程 代码运行的环境不同，各线程独立，互不影响，避免阻塞。任务队...
2018-02-24 21:54:00
103
转载 Generator与async/await与Generator的模拟
Generator函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。形式上，Generator 函数是一个普通函数，但是有两个特...
2018-02-24 21:43:00
235
转载 sass和postcss
sass是css预处理器需要安装node-sass支持 核心是c++编写集成sass-loader 把scss装换成csscss-loader 找出@import和url()导入的语法，告诉webpack依赖的资源。同时支持css modules、压缩css等style-loader 把css转换成字符串，注入到javascript里。单独提出ExtractTextPlugi...
2018-02-24 21:41:00
500
转载 bable
Babel是一个javascrpt编译器，能将es6转换为es5代码。并且通过插件的形式可以灵活的扩展。从根目录读取.babelrc文件中读取配置。.babelrc是一个json文件配置pluginsbabel-plugin-transform-runtime 要和 babel-runtime配合使用 减少多余的代码presets 告诉babel要转换的源代码要使用那些新的语...
2018-02-24 21:36:00
183
转载 面向对象与原型链
类的声明和实例化//、类的声明var Animal = function () { this.name = 'Animal';};//es6中class的声明class Animal2 { constructor () { this.name = 'Animal2'; }}//实例化console.log(new Animal(), new An...
2018-02-24 21:32:00
88
转载 react-router的原理
1、hash的方式以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示function Router() { this.routes = {}; this.currentUrl = '';}Router.prototype.r...
2018-02-24 21:29:00
179
转载 生命周期与状态机
所谓组件其实就是 有限状态机，通过状态渲染对应的界面，且每个组件都有自己的生命周期，它规定了组件的状态和方法需要在哪个阶段进行改变和执行。有限状态机（FSM），表示有限个状态以及在这些状态之间的转移和动作等行为的模型。React 正是利用这一概念，通过管理状态来实现对组件的管理。自定义 React 组件时，根据需要会在组件生命周期的不同阶段实现不同的逻辑组件的生命周期在不同状态下...
2018-02-24 21:27:00
333
转载 Redux
1、数据流2、redux的实现const createStore = (reducer) => { let state = {}; let listeners = []; const getState = () => state; const dispatch = (action) => (reducer) => { ...
2018-02-24 21:25:00
61
转载 移动端布局rem em
1、概念em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小优缺点：em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系2、Rem布局原理rem布局的本质是等比...
2018-02-24 21:24:00
100
转载 css盒模型与bfc与布局与垂直水平居中与css设计模式等
一、css盒子与布局相关盒子内部的布局盒子之间的布局visual formatting脱离正常流normal flow的盒子的布局absolute布局上下文下的布局float布局上下文下的布局flow下的盒子的布局BFC布局上下文下的布局IFC布局上下文下的布局FFC布局上下文下的布局table布局上下文下的布局css grid布局上下文下的布局1...
2018-02-24 21:19:00
142
转载 http的一些知识
TCP/IP协议分层应用层TFPDNSDNS域名解析的过程在浏览器DNS缓存中搜索 读取系统的hosts文件，查找其中是否有对应的ip向本地配置的首选DNS服务器发起域名解析请求HTTP传输层TCP(Transmission Control Protocel，传输控制协议)1、建立连接三次握手发送端首先发送一个带SYN（synchron...
2018-02-24 21:04:00
136
转载 mvc与mvp与mvvm
==MVC，MVP和MVVM都是常见的软件架构设计模式，它通过分离关注点来改进代码的组织方式==MVC、MVP和MVVM的相同点和不同点不同部分是C(Controller)、P(Presenter)、VM(View-Model)，而相同的部分则是MV(Model-View)Model层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法View作为视图层，主要负责数据的展...
2018-02-24 20:59:00
63
转载 发布订阅代码
发布就是触发事件，例如node中的emitter.emit ，订阅就是绑定那个事件比如emitter.on。在jq中on绑定clink事件，就是类似订阅，当click就是发布了。自己怎么实现呢，就是把订阅的事件，比如a，b两个事件，保存在一个对象中，当发布时，取是保存了事件，执行。class PubSub { constructor() { this.hand...
2017-12-22 10:16:00
342
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人