- 博客(76)
- 收藏
- 关注
RSS订阅
原创 实现React-Redux（1）
首先来回顾下之前学习的内容：React: 组件化的UI界面处理方案；React-Router: 根据地址匹配路由，最终渲染不同的组件；Redux：处理数据以及数据变化的方案（主要用于处理共享数据）；如果一个组件，仅用于渲染一个UI界面，而没有状态（通常是一个函数组件），该组件叫做展示组件。如果一个组件，仅用于提供数据，没有任何属于自己的UI界面，则该组件叫做容器组件，容器组件纯粹是为了给其他组件提供数据。react-redux这个库的作用是连接redux和react，它核心是connec
2020-08-06 17:35:06
198
原创 Redux-实现redux-promise
最近在读Redux相关源码，现将自己实现的代码和理解贴上，后期再补充详细～使用redux-promise中间件，允许action是一个promise，在promise中，如果要触发action，则通过调用resolve来触发。实现原理：如果action是一个promise，则会等待promise完成，将完成的结果作为action触发，如果action不是一个promise，则判断其payload是否是一个promise，如果是，等待promise完成，然后将得到的结果作为payload的值触发。
2020-07-20 13:52:57
1420
原创 Redux-实现redux-thunk
最近在读Redux相关源码，现将自己实现的代码和理解贴上，后期再补充详细～redux-thunk用于副作用处理。thunk允许action是一个带有副作用的函数，当action是一个函数被分发时，thunk会阻止action继续向后移交。thunk会向函数中传递三个参数：dispatch：来自于store.dispatch getState：来自于store.getState extra：来自于用户设置的额外参数redux-thunk的原理很简单，接收的action参数类型是函数就执行
2020-07-20 11:06:57
183
原创 Redux-实现createStore
最近在读Redux源码，现将自己实现的代码和理解贴上，后期再补充详细～/** * 判断某个对象是否是一个plain-object * @param {*} obj */function isPlainObject(obj) { if (typeof obj !== "object") { return false; } return Object.getPrototypeOf(obj) === Object.prototype;}/** * 得
2020-07-20 10:58:53
156
原创 Redux-实现combineReducers
最近在读Redux源码，现将自己实现的代码和理解贴上，后期再补充详细～由于在大中型项目中，操作比较复杂，数据结构也比较复杂，因此，需要对reducer进行细分。redux提供了方法，可以帮助我们更加方便的合并reducer，combineReducers会合并reducer，得到一个新的reducer，该新的reducer管理一个对象，该对象中的每一个属性交给对应的reducer管理。代码很简单，组装reducers，返回一个reducer，数据使用一个对象表示，对象的属性名与传递的参数对象保持一致
2020-07-19 14:37:44
199
原创 Redux-实现bindActionCreators
最近在读Redux源码，现将自己实现的代码和理解贴上，后期再补充详细～bindActionCreators，接受两个参数：actionCreators、dispatch。dispatch会被传递，每次调用action都会执行一次。actionCreators需区分对象和函数类型，做不同的处理。简单的说是返回一个对象，每个key对应一个函数，这个函数运行时会调用action生成函数，然后再调用一下dispatch，简化了操作。/** * * @param {*} actionCre
2020-07-19 14:23:14
281
原创 Redux-实现applyMiddleware
最近在读Redux源码，现将自己实现的代码和理解贴上，后期再补充详细～主代码：import {compose} from "./compose";/** * 注册中间件 * @param {...any} middlewares */export function applyMiddleware(...middlewares) { // 接收creatStore方法 return function (createStore) { // 接收reduce
2020-07-19 14:11:06
563
原创 JavaScript：实现call、apply和bind方法
实现call方法call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。语法：function.call(thisArg, arg1, arg2, ...)call()的原理比较简单，首先要明确函数的this会指向它的直接调用者，我们变更调用者即完成this指向的变更：//变更函数调用者示例function printName() { console.log(this.name)}// 测试const person = { n.
2020-07-05 14:41:30
168
原创 JavaScript：模拟实现new
模拟实现new首先我们要知道new做了什么创建一个新对象，并继承其构造函数的prototype，这一步是为了继承构造函数原型上的属性和方法 执行构造函数，方法内的this被指定为该新实例，这一步是为了执行构造函数内的赋值操作 返回新实例（规范规定，如果构造方法返回了一个对象，那么返回该对象，否则返回第一步创建的新对象）// new是关键字,这里我们用函数来模拟,new Foo(args) <=> myNew(Foo, args)function myNew(foo, ...ar
2020-07-01 15:33:53
144
原创 你不知道的GET和POST
GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。它俩最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。当面试官问到这个问题时，先要清楚是基于什么前提的？如果什么前提都没有，不使用任何规范，只考虑语法和理论上的HTTP协议。GET和POST几乎没有什么区别，只有名字不一样～如果基于RFC规范从理论...
2020-04-25 10:49:06
127
原创 什么是CORS，它是如何解决前端跨域的
CORS是一个W3C标准，全称是“跨域资源共享”，它允许浏览器向跨源服务器，发出XHR请求，克服了AJAX的同源限制。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。浏览器将CORS...
2020-03-22 17:31:13
2028
原创 详述Vue自定义指令
在 Vue 中我们除了可以使用核心功能默认内置的指令 (v-model和v-show)之外，Vue 同样也允许我们注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，我们仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。先来举个简单的聚焦输入框的例子，如下：当页面加载时，该 input 元素将获得焦点。事实上，只要你在打开这个...
2019-11-05 14:35:16
284
原创 Vue自定义混入mixin的使用
Vue提供了一种非常灵活的开发方式：混入 (mixin) ，它用来分发 Vue 组件中的可复用功能，一个混入对象可以包含任意组件选项，例如：created、methods、data、directives等等。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。Vue提供的混入对象mixin，类似于一个公共的组件，其他任何组件都可以使用它。我们可以直接把它当成一个公共方法来...
2019-11-05 10:34:36
772
原创 最常使用的Vue标签 教你 v-slot 插槽的作用与使用
在Vue的官方文档中，关于v-slot插槽的使用，介绍的不是非常清晰明确，插槽这个东西其实很好理解，当我们定义了一个Vue组件后，我们是不能在调用组件时在里面再定义其它的dom结构的：<submit-button> <div>Save</div></submit-button>上述这种结构是不合法的，如果submit-button组...
2019-11-04 15:42:40
706
原创 简述从URL输入到页面展现发生了什么
简述简单来说，发生了三件事情浏览器将请求发送到服务器 服务器根据请求返回对应的内容 浏览器将返回的内容解析成我们所见的页面面试的时候有些面试官会问这个问题，可按如下流程作答：1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析(DNS...
2019-11-04 14:21:20
145
原创 详解EventTarget.addEventListener事件注册方法
EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素Element,Document和Window或者任何其他支持事件的对象 (比如XMLHttpRequest)。addEventListener()的工作原理是将实现EventListener...
2019-11-04 11:17:52
850
2
原创 浏览器事件机制-事件委托
浏览器事件机制讲的也是 JavaScript 事件流，JS事件执行的整个过程分为三个阶段：事件捕获阶段 事件目标处理函数 事件冒泡1.捕获（Capture）阶段是事件对象 event object 从 window 派发到目标对象父级的过程。2.目标（Target）阶段是事件对象派发到目标元素时的阶段，如果事件类型指示其不冒泡，那事件传播将在此阶段终止。3.冒泡（Bubblin...
2019-11-04 10:59:16
383
原创 将一段HTML转为虚拟DOM再渲染到浏览器上-模拟Vue中的template模板标签
在我的上一篇文章中，很清晰的讲述了如何实现虚拟DOM，实现完了以后我就想到了在Vue当中，有template这个模板标签，我们在真实开发中，不可能是像写虚拟DOM那样去描述一个页面的UI结构，我们还是希望写的是正常的HTML代码，这样才能有可读性和维护性。// 我们不会以这种形式去写HTML let a = h('ul', { id: 'ol-list' }, ['123123', ...
2019-11-02 20:36:44
2124
原创 如何实现Virtual DOM
前言前端开发者都知道，在网页中浏览器资源开销最大的便是DOM节点渲染了，DOM很慢并且非常庞大，网页性能问题大多数都是由JavaScript修改DOM所引起的，网页的重排、重绘都非常的消耗浏览器性能。重排、重绘的次数越多，我们的应用程序就会越卡顿。DOM结构可以看作是从根节点开始的一个树结构，那么我们就可以通过JavaScript的对象来描述一个DOM，这就是虚拟DOM，JavaScrip...
2019-11-02 15:07:30
358
原创 React：详解生命周期函数-v16.3生命周期函数
最近项目在使用React，所以准备写一些关于react的博文，方便学习和巩固。本文将会详细讲述 v16.3 的生命周期函数，react在v16.3版本后对生命周期函数进行了较大的更新，但大部分团队不见得会跟进升到v16.3版本，所以v16.3前的生命周期还是很有必要掌握的，并且v16.3版本也是基于之前的进行修改。React v16.3 的生命周期在 v16.3 版本中废除的...
2019-11-01 17:28:36
194
原创 React：详解生命周期函数-v16.0前的生命周期函数
最近项目在使用React，所以准备写一些关于react的博文，方便学习和巩固。本文将会详细讲述react的生命周期函数，react在v16版本后对生命周期函数进行了较大的更新，但大部分团队不见得会跟进升到16版本，所以16前的生命周期还是很有必要掌握的，并且16版本也是基于之前的进行修改。React v16.0前的生命周期函数组件的初始化(initialization)阶段第一...
2019-11-01 16:33:06
171
原创 JavaScript：事件循环机制-宏任务微任务
前面的话本文将详细介绍javascript中的事件循环event-loop，目标是让你彻底弄懂JavaScript的执行机制。不论是在你面试求职，或是日常开发工作中，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的那么我们以为的JS代码可能是长这样的：...
2019-10-31 17:39:19
624
原创 Vue源码：计算属性的实现原理
在Vue中有一个计算属性，只要在它的函数里引用了 data 中的某个属性，当这个属性发生变化时，函数就可以嗅探到这个变化，并自动重新执行。Vue 怎么知道计算属性在函数中引用了哪个 data 属性？这个函数又是怎么知道 data 属性变了，而且只关心它内部引用的那个属性，别的都不管？以下是官方的描述：由于涉及 Vue 的响应式绑定的原理，如果你对此不熟，最好先看看Vue源码：双向...
2019-10-29 16:09:51
2328
原创 Vue源码：双向绑定的实现原理
本篇博客供个人学习记录，暂时附上代码，后期进行整理。代码粘贴下来存储为html文件可直接查看效果。几种实现双向绑定的做法双向绑定可以简单的理解为：在单向绑定的基础上给可输入元素（input、textarea）添加onchange、oninput事件，来动态修改model和 view。目前几种主流的mvc(vm)框架都实现了单向数据绑定，实现数据绑定的做法有大致如下几种：发布者-...
2019-10-25 15:41:25
498
原创 async、await、promise使用小例子
function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(2 * num) reject('我就是想要错') ...
2019-10-09 10:48:15
139
原创 使用for循环渲染时为什么不要将key值设为index？
无论是Vue的v-for还是React的数组渲染，它们都要求设置一个key值，它默认用“就地复用”策略，方便了diff算法更高效的比对dom元素。那为什么不推荐使用index作为key值呢？因为它可能会导致dom操作次数增多，从而拉低性能。以React的JSX语法为例const arr = ['a', 'b', 'c'];//key值设为元素本身const newArr = arr.ma...
2019-08-03 16:26:23
900
原创 Vue中v-if和v-show的区别
参考链接：博客园简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低。共同点都是动态的显隐DOM元素。区别（1）手段v-if：当隐藏结构时该结构会直接从整个dom树中移除；v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内...
2019-08-03 11:06:15
99
原创 通过原生JS实现React的虚拟Dom及渲染方法
JSX语法通过Babel会转换为React.createElement（）形式的代码，所以也是为什么在引入react时，要将其命名为"React"。// 实现React的createElement方法const React = { // 它返回一个vNode虚拟节点 createElement: function (type, props, ...children) { retur...
2019-08-02 21:55:22
921
原创 精品：用JavaScript教你如何实现二叉查找树（3）
参考：《数据结构与算法 JavaScript 描述》本篇文章中，给二叉查找树，添加四个数据操作方法，这四个方法也展示了二叉查找树查找数据的快捷性。在二叉查找树上进行查找对 BST 通常有下列三种类型的查找：(1) 查找给定值；(2) 查找最小值；(3) 查找最大值。查找 BST 上的最小值和最大值非常简单。因为较小的值总是在左子节点上，在 BST 上查找最小值，只需要遍历左子树，直到...
2018-12-30 22:04:33
148
原创 精品：用JavaScript教你如何实现二叉查找树（2）
**说在前面的话：**不懂递归的可一定要看到最后，我画了一个树形图对理解递归有帮助哦！遍历二叉查找树本文接上一篇文章，上篇文章介绍了如何实例化一个二叉查找树，并且实现了如何实例化一个节点，并插入到二叉查找树中。本文开始讲解如何实现二叉查找树的遍历！现在 BST 类已经初步成型，但是操作上还只能插入节点，我们需要有能力遍历 BST，这样就可以按照不同的顺序，比如按照数字大小或字母先后，显示节点...
2018-12-21 22:39:53
140
原创 精品：用JavaScript教你如何实现二叉查找树（1）
本文参考《数据结构与算法JavaScript描述》一书，根据我的学习心得详述了以下几点内容：树的定义二叉查找树的实现二叉查找树的遍历二叉查找树的查找如何删除二叉查找树上的节点二叉树的术语一棵树最上面的节点称为根节点，如果一个节点下面连接多个节点，那么该节点称为父节点，它下面的节点称为子节点。一个节点可以有 0 个、1 个或2个子节点。没有任何子节点的节点称为叶子节点。如图中所示...
2018-12-21 22:08:18
193
原创 JavaScript中递归的简单概述
JavaScript 中允许函数递归调用。前面定义过的 factorial() 函数也可以用递归方式定义：function factorial(number) { if (number == 1) { return number; }else { return number * factorial(number-1); }}print(factorial(5));当一个函数...
2018-12-20 13:11:35
137
原创 如何通过CORS跨域请求实现聊天小AI
聊天机器人github地址：https://github.com/Neekky/chatting-robotCORS跨域解决方案CORS（跨源资源共享）通过新增一系列 HTTP 头，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。对于 GET 以外的 HTTP 方法，或者搭配某些 MIME 类型的 POST 请求，如：PUT 或者 DELETE 等，以及如果自定义了请求头的话，浏...
2018-12-15 14:18:33
179
原创 JavaScript：使用原生JS封装一个ajax兼容性方法
ajax请求过程：需要有个设备的支持，就是浏览器，没浏览器ajax是发不出去的。需要有一个ajax对象。规定请求的方式，获取谁家的数据。ajax.open(method，url，true)初始化请求方式、请求数据地址、选择异步（true）还是同步（false）方式。ajaxSend()方法，将请求发送到服务器，为了拿数据。语法: $(document).ajaxSend(functi...
2018-12-14 15:42:05
1144
原创 JavaScript：使用原生JS实现Jsonp跨域，调用百度搜索接口完成联想词功能
Jsonp解释Jsonp这个术语听起来很高大上，其实它的原理非常简单，就是利用src不受同源策略限制这一点来实现的，很多标签都有src特性。你们可以想想为什么img标签能将不同源的百度logo拿过来？<img src="https://www.baidu.com/img/bd_logo1.png" alt="">Jsonp原理一、src不受同源策略的限制，不受跨域的影响，所...
2018-12-14 15:24:37
1269
原创 前端开发实战：实现京东购物平台的静态首页
本次实战的内容是实现京东购物网页的前端页面，使用的依然是DIV+CSS布局模式。本次项目主要是为了检验自己对原生JS和jQuery的掌握程度，项目中也用到了很多CSS3的新特性。这次使用jQuery将轮播图、下拉菜单栏，城市选项卡封装成了三个插件，使代码结构的更为模块化，提高了后期维护性。技术栈：HTML+CSS+原生JS+jQuery+CSS3京东首页代码GitHub地址：京东首页代码现...
2018-12-07 16:23:25
2044
原创 JavaScript精华笔记：ES5数组新增函数的源码实现（2）
本篇文章中，对forEach、filter、map、every、some、reduce和reduceRight等函数，讲述了如何自己编写代码实现它们的功能。通过阅读源码，自己编写源码，能了解编写思想、熟悉设计模式，能锻炼自己编写组件、框架的能力。接上文内容，这里继续封装自己的map、every、some函数。实现map 源码编写map() 方法的作用是：返回一个新数组，数组中的元素为原始数...
2018-11-26 11:21:25
142
原创 JavaScript：用原生js实现重力条件下，可拖拽小球的碰撞运动
本次用原生js，在小球的碰撞运动上添加了重力效应。并且可以拖拽小球，拖拽的方向和力度大小，决定了小球的初始速度和运动放下。蛮有趣的，大家可以拷贝代码试一试。代码也附带了一些小注释。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset=&q
2018-11-22 13:11:57
670
原创 JavaScript：DOCTYPE的作用及渲染过程
1.定义DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。&lt;!DOCTYPE html&gt; 声明必须是 HTML 文档的第一行，位于&lt;html&gt; 标签之前。2.作用DOCTYPE声明的主要作用就是声明文档的解析类型(document.compatMode)，避免浏览器的怪...
2018-11-21 09:12:20
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人