Neekky的博客

首先来回顾下之前学习的内容：React: 组件化的UI界面处理方案；React-Router: 根据地址匹配路由，最终渲染不同的组件；Redux：处理数据以及数据变化的方案（主要用于处理共享数据）；如果一个组件，仅用于渲染一个UI界面，而没有状态（通常是一个函数组件），该组件叫做展示组件。如果一个组件，仅用于提供数据，没有任何属于自己的UI界面，则该组件叫做容器组件，容器组件纯粹是为了给其他组件提供数据。react-redux这个库的作用是连接redux和react，它核心是connec

最近在读Redux相关源码，现将自己实现的代码和理解贴上，后期再补充详细～使用redux-promise中间件，允许action是一个promise，在promise中，如果要触发action，则通过调用resolve来触发。实现原理：如果action是一个promise，则会等待promise完成，将完成的结果作为action触发，如果action不是一个promise，则判断其payload是否是一个promise，如果是，等待promise完成，然后将得到的结果作为payload的值触发。

最近在读Redux相关源码，现将自己实现的代码和理解贴上，后期再补充详细～redux-thunk用于副作用处理。thunk允许action是一个带有副作用的函数，当action是一个函数被分发时，thunk会阻止action继续向后移交。thunk会向函数中传递三个参数：dispatch：来自于store.dispatch getState：来自于store.getState extra：来自于用户设置的额外参数redux-thunk的原理很简单，接收的action参数类型是函数就执行

最近在读Redux源码，现将自己实现的代码和理解贴上，后期再补充详细～/** * 判断某个对象是否是一个plain-object * @param {*} obj */function isPlainObject(obj) { if (typeof obj !== "object") { return false; } return Object.getPrototypeOf(obj) === Object.prototype;}/** * 得

最近在读Redux源码，现将自己实现的代码和理解贴上，后期再补充详细～由于在大中型项目中，操作比较复杂，数据结构也比较复杂，因此，需要对reducer进行细分。redux提供了方法，可以帮助我们更加方便的合并reducer，combineReducers会合并reducer，得到一个新的reducer，该新的reducer管理一个对象，该对象中的每一个属性交给对应的reducer管理。代码很简单，组装reducers，返回一个reducer，数据使用一个对象表示，对象的属性名与传递的参数对象保持一致

最近在读Redux源码，现将自己实现的代码和理解贴上，后期再补充详细～主代码：import {compose} from "./compose";/** * 注册中间件 * @param {...any} middlewares */export function applyMiddleware(...middlewares) { // 接收creatStore方法 return function (createStore) { // 接收reduce

实现call方法call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。语法：function.call(thisArg, arg1, arg2, ...)call()的原理比较简单，首先要明确函数的this会指向它的直接调用者，我们变更调用者即完成this指向的变更：//变更函数调用者示例function printName() { console.log(this.name)}// 测试const person = { n.

模拟实现new首先我们要知道new做了什么创建一个新对象，并继承其构造函数的prototype，这一步是为了继承构造函数原型上的属性和方法 执行构造函数，方法内的this被指定为该新实例，这一步是为了执行构造函数内的赋值操作 返回新实例（规范规定，如果构造方法返回了一个对象，那么返回该对象，否则返回第一步创建的新对象）// new是关键字,这里我们用函数来模拟,new Foo(args) <=> myNew(Foo, args)function myNew(foo, ...ar

GET和POST是HTTP请求的两种基本方法，要说它们的区别，接触过WEB开发的人都能说出一二。它俩最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。当面试官问到这个问题时，先要清楚是基于什么前提的？如果什么前提都没有，不使用任何规范，只考虑语法和理论上的HTTP协议。GET和POST几乎没有什么区别，只有名字不一样～如果基于RFC规范从理论...

CORS是一个W3C标准，全称是“跨域资源共享”，它允许浏览器向跨源服务器，发出XHR请求，克服了AJAX的同源限制。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。浏览器将CORS...

在 Vue 中我们除了可以使用核心功能默认内置的指令 (v-model和v-show)之外，Vue 同样也允许我们注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，我们仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。先来举个简单的聚焦输入框的例子，如下：当页面加载时，该 input 元素将获得焦点。事实上，只要你在打开这个...

Vue提供了一种非常灵活的开发方式：混入 (mixin) ，它用来分发 Vue 组件中的可复用功能，一个混入对象可以包含任意组件选项，例如：created、methods、data、directives等等。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。Vue提供的混入对象mixin，类似于一个公共的组件，其他任何组件都可以使用它。我们可以直接把它当成一个公共方法来...

在Vue的官方文档中，关于v-slot插槽的使用，介绍的不是非常清晰明确，插槽这个东西其实很好理解，当我们定义了一个Vue组件后，我们是不能在调用组件时在里面再定义其它的dom结构的：<submit-button> <div>Save</div></submit-button>上述这种结构是不合法的，如果submit-button组...

简述简单来说，发生了三件事情浏览器将请求发送到服务器 服务器根据请求返回对应的内容 浏览器将返回的内容解析成我们所见的页面面试的时候有些面试官会问这个问题，可按如下流程作答：1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析(DNS...

EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素Element,Document和Window或者任何其他支持事件的对象 (比如XMLHttpRequest)。addEventListener()的工作原理是将实现EventListener...

浏览器事件机制讲的也是 JavaScript 事件流，JS事件执行的整个过程分为三个阶段：事件捕获阶段 事件目标处理函数 事件冒泡1.捕获（Capture）阶段是事件对象 event object 从 window 派发到目标对象父级的过程。2.目标（Target）阶段是事件对象派发到目标元素时的阶段，如果事件类型指示其不冒泡，那事件传播将在此阶段终止。3.冒泡（Bubblin...

在我的上一篇文章中，很清晰的讲述了如何实现虚拟DOM，实现完了以后我就想到了在Vue当中，有template这个模板标签，我们在真实开发中，不可能是像写虚拟DOM那样去描述一个页面的UI结构，我们还是希望写的是正常的HTML代码，这样才能有可读性和维护性。// 我们不会以这种形式去写HTML let a = h('ul', { id: 'ol-list' }, ['123123', ...

前言前端开发者都知道，在网页中浏览器资源开销最大的便是DOM节点渲染了，DOM很慢并且非常庞大，网页性能问题大多数都是由JavaScript修改DOM所引起的，网页的重排、重绘都非常的消耗浏览器性能。重排、重绘的次数越多，我们的应用程序就会越卡顿。DOM结构可以看作是从根节点开始的一个树结构，那么我们就可以通过JavaScript的对象来描述一个DOM，这就是虚拟DOM，JavaScrip...

最近项目在使用React，所以准备写一些关于react的博文，方便学习和巩固。本文将会详细讲述 v16.3 的生命周期函数，react在v16.3版本后对生命周期函数进行了较大的更新，但大部分团队不见得会跟进升到v16.3版本，所以v16.3前的生命周期还是很有必要掌握的，并且v16.3版本也是基于之前的进行修改。React v16.3 的生命周期在 v16.3 版本中废除的...

最近项目在使用React，所以准备写一些关于react的博文，方便学习和巩固。本文将会详细讲述react的生命周期函数，react在v16版本后对生命周期函数进行了较大的更新，但大部分团队不见得会跟进升到16版本，所以16前的生命周期还是很有必要掌握的，并且16版本也是基于之前的进行修改。React v16.0前的生命周期函数组件的初始化(initialization)阶段第一...

前面的话本文将详细介绍javascript中的事件循环event-loop，目标是让你彻底弄懂JavaScript的执行机制。不论是在你面试求职，或是日常开发工作中，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的那么我们以为的JS代码可能是长这样的：...

Jsonp解释Jsonp这个术语听起来很高大上，其实它的原理非常简单，就是利用src不受同源策略限制这一点来实现的，很多标签都有src特性。你们可以想想为什么img标签能将不同源的百度logo拿过来？&lt;img src="https://www.baidu.com/img/bd_logo1.png" alt=""&gt;Jsonp原理一、src不受同源策略的限制，不受跨域的影响，所...

ajax请求过程：需要有个设备的支持，就是浏览器，没浏览器ajax是发不出去的。需要有一个ajax对象。规定请求的方式，获取谁家的数据。ajax.open(method，url，true)初始化请求方式、请求数据地址、选择异步（true）还是同步（false）方式。ajaxSend()方法，将请求发送到服务器，为了拿数据。语法: $(document).ajaxSend(functi...

本次实战的内容是实现京东购物网页的前端页面，使用的依然是DIV+CSS布局模式。本次项目主要是为了检验自己对原生JS和jQuery的掌握程度，项目中也用到了很多CSS3的新特性。这次使用jQuery将轮播图、下拉菜单栏，城市选项卡封装成了三个插件，使代码结构的更为模块化，提高了后期维护性。技术栈：HTML+CSS+原生JS+jQuery+CSS3京东首页代码GitHub地址：京东首页代码现...

聊天机器人github地址：https://github.com/Neekky/chatting-robotCORS跨域解决方案CORS（跨源资源共享）通过新增一系列 HTTP 头，让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。对于 GET 以外的 HTTP 方法，或者搭配某些 MIME 类型的 POST 请求，如：PUT 或者 DELETE 等，以及如果自定义了请求头的话，浏...

参考：《数据结构与算法 JavaScript 描述》本篇文章中，给二叉查找树，添加四个数据操作方法，这四个方法也展示了二叉查找树查找数据的快捷性。在二叉查找树上进行查找对 BST 通常有下列三种类型的查找：(1) 查找给定值；(2) 查找最小值；(3) 查找最大值。查找 BST 上的最小值和最大值非常简单。因为较小的值总是在左子节点上，在 BST 上查找最小值，只需要遍历左子树，直到...

JSX语法通过Babel会转换为React.createElement（）形式的代码，所以也是为什么在引入react时，要将其命名为"React"。// 实现React的createElement方法const React = { // 它返回一个vNode虚拟节点 createElement: function (type, props, ...children) { retur...

参考链接：博客园简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低。共同点都是动态的显隐DOM元素。区别（1）手段v-if：当隐藏结构时该结构会直接从整个dom树中移除；v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内...

无论是Vue的v-for还是React的数组渲染，它们都要求设置一个key值，它默认用“就地复用”策略，方便了diff算法更高效的比对dom元素。那为什么不推荐使用index作为key值呢？因为它可能会导致dom操作次数增多，从而拉低性能。以React的JSX语法为例const arr = ['a', 'b', 'c'];//key值设为元素本身const newArr = arr.ma...

function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(2 * num) reject('我就是想要错') ...

在学习python的第二个月，接触到了web前端开发，兴趣一发不可收拾。于是在学习了三天HTML和CSS后，对于基本的语法规则很快就掌握了，于是试着写出了一个淘宝的静态首页。淘宝首页GitHub：https://github.com/Neekky/Web-Front-end-development效果展示：对自己制作出来的效果还是很满意的，通过实践，掌握到了DIV+CSS布局模式，加深了对...