JavaScript
Neeky Zeng
这个作者很懒,什么都没留下…
展开
-
实现React-Redux(1)
首先来回顾下之前学习的内容:React: 组件化的UI界面处理方案;React-Router: 根据地址匹配路由,最终渲染不同的组件;Redux:处理数据以及数据变化的方案(主要用于处理共享数据);如果一个组件,仅用于渲染一个UI界面,而没有状态(通常是一个函数组件),该组件叫做展示组件。如果一个组件,仅用于提供数据,没有任何属于自己的UI界面,则该组件叫做容器组件,容器组件纯粹是为了给其他组件提供数据。react-redux这个库的作用是连接redux和react,它核心是connec原创 2020-08-06 17:35:06 · 210 阅读 · 0 评论 -
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 · 1468 阅读 · 0 评论 -
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 · 227 阅读 · 0 评论 -
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 · 172 阅读 · 0 评论 -
Redux-实现combineReducers
最近在读Redux源码,现将自己实现的代码和理解贴上,后期再补充详细~由于在大中型项目中,操作比较复杂,数据结构也比较复杂,因此,需要对reducer进行细分。redux提供了方法,可以帮助我们更加方便的合并reducer,combineReducers会合并reducer,得到一个新的reducer,该新的reducer管理一个对象,该对象中的每一个属性交给对应的reducer管理。代码很简单,组装reducers,返回一个reducer,数据使用一个对象表示,对象的属性名与传递的参数对象保持一致原创 2020-07-19 14:37:44 · 226 阅读 · 0 评论 -
Redux-实现bindActionCreators
最近在读Redux源码,现将自己实现的代码和理解贴上,后期再补充详细~bindActionCreators,接受两个参数:actionCreators、dispatch。dispatch会被传递,每次调用action都会执行一次。actionCreators需区分对象和函数类型,做不同的处理。简单的说是返回一个对象,每个key对应一个函数,这个函数运行时会调用action生成函数,然后再调用一下dispatch,简化了操作。/** * * @param {*} actionCre原创 2020-07-19 14:23:14 · 294 阅读 · 0 评论 -
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 · 589 阅读 · 0 评论 -
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 · 190 阅读 · 0 评论 -
JavaScript:模拟实现new
模拟实现new首先我们要知道new做了什么创建一个新对象,并继承其构造函数的prototype,这一步是为了继承构造函数原型上的属性和方法 执行构造函数,方法内的this被指定为该新实例,这一步是为了执行构造函数内的赋值操作 返回新实例(规范规定,如果构造方法返回了一个对象,那么返回该对象,否则返回第一步创建的新对象)// new是关键字,这里我们用函数来模拟,new Foo(args) <=> myNew(Foo, args)function myNew(foo, ...ar原创 2020-07-01 15:33:53 · 160 阅读 · 0 评论 -
详述Vue自定义指令
在 Vue 中我们除了可以使用核心功能默认内置的指令 (v-model和v-show)之外,Vue 同样也允许我们注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,我们仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。先来举个简单的聚焦输入框的例子,如下:当页面加载时,该 input 元素将获得焦点。事实上,只要你在打开这个...原创 2019-11-05 14:35:16 · 319 阅读 · 0 评论 -
Vue自定义混入mixin的使用
Vue提供了一种非常灵活的开发方式:混入 (mixin) ,它用来分发 Vue 组件中的可复用功能,一个混入对象可以包含任意组件选项,例如:created、methods、data、directives等等。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。Vue提供的混入对象mixin,类似于一个公共的组件,其他任何组件都可以使用它。我们可以直接把它当成一个公共方法来...原创 2019-11-05 10:34:36 · 799 阅读 · 0 评论 -
最常使用的Vue标签 教你 v-slot 插槽的作用与使用
在Vue的官方文档中,关于v-slot插槽的使用,介绍的不是非常清晰明确,插槽这个东西其实很好理解,当我们定义了一个Vue组件后,我们是不能在调用组件时在里面再定义其它的dom结构的:<submit-button> <div>Save</div></submit-button>上述这种结构是不合法的,如果submit-button组...原创 2019-11-04 15:42:40 · 739 阅读 · 0 评论 -
详解EventTarget.addEventListener事件注册方法
EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素Element,Document和Window或者任何其他支持事件的对象 (比如XMLHttpRequest)。addEventListener()的工作原理是将实现EventListener...原创 2019-11-04 11:17:52 · 903 阅读 · 2 评论 -
浏览器事件机制-事件委托
浏览器事件机制讲的也是 JavaScript 事件流,JS事件执行的整个过程分为三个阶段:事件捕获阶段 事件目标处理函数 事件冒泡1.捕获(Capture)阶段是事件对象 event object 从 window 派发到目标对象父级的过程。2.目标(Target)阶段是事件对象派发到目标元素时的阶段,如果事件类型指示其不冒泡,那事件传播将在此阶段终止。3.冒泡(Bubblin...原创 2019-11-04 10:59:16 · 423 阅读 · 0 评论 -
将一段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 · 2210 阅读 · 0 评论 -
如何实现Virtual DOM
前言前端开发者都知道,在网页中浏览器资源开销最大的便是DOM节点渲染了,DOM很慢并且非常庞大,网页性能问题大多数都是由JavaScript修改DOM所引起的,网页的重排、重绘都非常的消耗浏览器性能。重排、重绘的次数越多,我们的应用程序就会越卡顿。DOM结构可以看作是从根节点开始的一个树结构,那么我们就可以通过JavaScript的对象来描述一个DOM,这就是虚拟DOM,JavaScrip...原创 2019-11-02 15:07:30 · 382 阅读 · 0 评论 -
React:详解生命周期函数-v16.0前的生命周期函数
最近项目在使用React,所以准备写一些关于react的博文,方便学习和巩固。本文将会详细讲述react的生命周期函数,react在v16版本后对生命周期函数进行了较大的更新,但大部分团队不见得会跟进升到16版本,所以16前的生命周期还是很有必要掌握的,并且16版本也是基于之前的进行修改。React v16.0前的生命周期函数组件的初始化(initialization)阶段第一...原创 2019-11-01 16:33:06 · 200 阅读 · 0 评论 -
JavaScript:事件循环机制-宏任务微任务
前面的话本文将详细介绍javascript中的事件循环event-loop,目标是让你彻底弄懂JavaScript的执行机制。不论是在你面试求职,或是日常开发工作中,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。因为javascript是一门单线程语言,所以我们可以得出结论:javascript是按照语句出现的顺序执行的那么我们以为的JS代码可能是长这样的:...原创 2019-10-31 17:39:19 · 678 阅读 · 0 评论 -
Vue源码:计算属性的实现原理
在Vue中有一个计算属性,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数就可以嗅探到这个变化,并自动重新执行。Vue 怎么知道计算属性在函数中引用了哪个 data 属性?这个函数又是怎么知道 data 属性变了,而且只关心它内部引用的那个属性,别的都不管?以下是官方的描述:由于涉及 Vue 的响应式绑定的原理,如果你对此不熟,最好先看看Vue源码:双向...原创 2019-10-29 16:09:51 · 2368 阅读 · 0 评论 -
Vue源码:双向绑定的实现原理
本篇博客供个人学习记录,暂时附上代码,后期进行整理。代码粘贴下来存储为html文件可直接查看效果。几种实现双向绑定的做法双向绑定可以简单的理解为:在单向绑定的基础上给可输入元素(input、textarea)添加onchange、oninput事件,来动态修改model和 view。目前几种主流的mvc(vm)框架都实现了单向数据绑定,实现数据绑定的做法有大致如下几种:发布者-...原创 2019-10-25 15:41:25 · 524 阅读 · 0 评论 -
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 · 156 阅读 · 0 评论 -
web开发:使用HTML+CSS编写淘宝的静态
在学习python的第二个月,接触到了web前端开发,兴趣一发不可收拾。于是在学习了三天HTML和CSS后,对于基本的语法规则很快就掌握了,于是试着写出了一个淘宝的静态首页。淘宝首页GitHub:https://github.com/Neekky/Web-Front-end-development效果展示:对自己制作出来的效果还是很满意的,通过实践,掌握到了DIV+CSS布局模式,加深了对...原创 2018-10-24 09:56:19 · 4968 阅读 · 3 评论 -
async、await、promise使用小例子
function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { console.log(2 * num) reject('我就是想要错') ...原创 2019-10-09 10:48:15 · 147 阅读 · 0 评论 -
精品:用JavaScript教你如何实现二叉查找树(3)
参考:《数据结构与算法 JavaScript 描述》本篇文章中,给二叉查找树,添加四个数据操作方法,这四个方法也展示了二叉查找树查找数据的快捷性。在二叉查找树上进行查找对 BST 通常有下列三种类型的查找:(1) 查找给定值;(2) 查找最小值;(3) 查找最大值。查找 BST 上的最小值和最大值非常简单。因为较小的值总是在左子节点上,在 BST 上查找最小值,只需要遍历左子树,直到...原创 2018-12-30 22:04:33 · 173 阅读 · 0 评论 -
精品:用JavaScript教你如何实现二叉查找树(2)
**说在前面的话:**不懂递归的可一定要看到最后,我画了一个树形图对理解递归有帮助哦!遍历二叉查找树本文接上一篇文章,上篇文章介绍了如何实例化一个二叉查找树,并且实现了如何实例化一个节点,并插入到二叉查找树中。本文开始讲解如何实现二叉查找树的遍历!现在 BST 类已经初步成型,但是操作上还只能插入节点,我们需要有能力遍历 BST,这样就可以按照不同的顺序,比如按照数字大小或字母先后,显示节点...原创 2018-12-21 22:39:53 · 161 阅读 · 0 评论 -
JavaScript笔记:最详细的call函数和apply函数用法总结
昨天听了一堂直播,里面有教到关于forEach函数的源码编写,提到了call()和apply()函数,有点懵,这才发现之前我学的太快了,有很多细节没有注意,当进行实战时才发现漏了一些东西,现在开始查漏补缺。今天就好好总结一下call()和apply()方法的应用。首先,这两个函数的作用完全一样,都是调用构造函数来构造自己的对象,并且还能够改变this的指向,区别就只是传参形式不一样。call(...原创 2018-11-02 22:09:26 · 557 阅读 · 0 评论 -
JavaScript:如何找出一行字符串第一个不重复的字符
题目:找出字符串第一个不重复的字符。查看了很多人的博客,基本都是20行左右的代码,可读性不好。只需要8行代码,就能完美实现这个程序。function findSingleChar(str) { var len = str.length; for(var i = 0;i &amp;amp;amp;amp;amp;amp;amp;amp;lt; len; i ++){ var firStr = str.slice(i+1);...原创 2018-11-09 10:14:29 · 535 阅读 · 1 评论 -
JavaScript笔记:原型和原型链
prototypeprototype翻译过来叫做原型,每一个构造函数都有一个prototype,并且prototype是一个对象,里面有两条属性:constructor和__proto__。Nice.prototype {constructor: ƒ Nice(),__proto__: Object}其中,“constructor” 叫做构造器,返回的是构造这个对象的构造函数,也就是...原创 2018-11-01 22:40:52 · 161 阅读 · 0 评论 -
什么是闭包?从底层解释闭包的运行
之前看过廖雪峰老师的闭包讲解,当时不明白其中的运行原理,今天在看了渡一的js课程后,明白了闭包的原理。那就举两个例子来解释下。首先要了解预编译中的几个名词:GO对象(Global Object),全局环境下创建的执行期上下文,就是全局作用域。AO对象(Activation Object),也叫执行期上下文。在函数被执行前一刻创建,可以称为是局部环境、局部作用域。Scope chain(作用...原创 2018-10-27 17:15:28 · 554 阅读 · 0 评论 -
知识扩展:求100以内的质数 简述多种算法的实现方法
质数(prime number)又称素数,有无限个。质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数。先用python来实现:count = 0list1=[ ]for i in range(1,101): for j in range(1,i+1): # 从1到i的数组 if i%j == 0: count += 1 ...原创 2018-10-21 16:37:28 · 1537 阅读 · 0 评论 -
JavaScript笔记:原始值对象包装类
原始值有数字、字符串、布尔值、undefined、null。但是在JavaScript中,数字可分为:原始值数字,数字类型对象。字符串可分为:原始值字符串,字符串类型对象。布尔值可分为:原始值布尔值,布尔值类型对象。但是undefined、null没有上面这些东西。可以像下面这样生成原始值对象:var num = new Number(123);var st...原创 2018-10-28 22:39:24 · 338 阅读 · 2 评论 -
JavaScript笔记:对象创建
这里先放一个常规的函数对象代码:var mrDeng = { name : &amp;quot;nrDeng&amp;quot;, age : 40, sex : &amp;quot;male&amp;quot;, health : 100, smoke : function () { console.log('i am smoking ! cool!!!');原创 2018-10-28 22:09:50 · 138 阅读 · 0 评论 -
在JavaScript中,++在前和++在后有什么区别
一、++可以与输出语句写在一起,++写在变量前和写在变量后不是一个意思++ i 和 i ++ 区别在于运算顺序和结合方向。在JavaScript中有两种自加运算,其运算符均为 ++,功能为将运算符自加 1。其中:++ VAR 被称为前自加,其后面的变量执行自加操作,其运算为,先执行自加操作,再引用VAR值。VAR ++ 被称为后自加,其前面的变量执行自加操作,其运算为,先引用VAR值,...原创 2018-10-28 21:56:20 · 5743 阅读 · 0 评论 -
JavaScript精华笔记:ES5数组新增函数的源码实现(1)
本篇文章中,对forEach、filter、map、Every、Some、reduce和reduceRight等函数,讲述了如何自己编写代码实现它们的功能。通过阅读源码,自己编写源码,能了解编写思想、熟悉设计模式,能锻炼自己编写组件、框架的能力。试验对象所有的函数源码编写出来后,以这段数据作为试验对象:var personArr = [ {name: '王港', s...原创 2018-11-05 14:24:45 · 343 阅读 · 0 评论 -
JavaScript:将类数组转换成数组的几种方式
首先说说什么是类数组,类数组有几个组成部分:属性要为索引(数字)。必须有length属性,最好加上push和splice方法对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为类数组对象。类数组的length属性会随着数组成员的增减而发生...原创 2018-11-13 15:40:42 · 1136 阅读 · 1 评论 -
JavaScript:实现对Object类型的深克隆方法
通过浅拷贝所克隆出来的对象指向的是同一个空间,改变一个对象的内容会影响另一个。而深拷贝所克隆出来的完全是两个对象,修改内容,相互不影响。这个程序的编写思路是:1.遍历对象(for(var prop in obj))2.判断是不是原始值 typeof() object3.判断是数组还是对象 instanceof toString constructor4.如果是对象则递归。functi...原创 2018-11-12 12:51:59 · 258 阅读 · 0 评论 -
精品:用JavaScript教你如何实现二叉查找树(1)
本文参考《数据结构与算法JavaScript描述》一书,根据我的学习心得详述了以下几点内容:树的定义二叉查找树的实现二叉查找树的遍历二叉查找树的查找如何删除二叉查找树上的节点二叉树的术语一棵树最上面的节点称为根节点,如果一个节点下面连接多个节点,那么该节点称为父节点,它下面的节点称为子节点。一个节点可以有 0 个、1 个或2个子节点。没有任何子节点的节点称为叶子节点。如图中所示...原创 2018-12-21 22:08:18 · 215 阅读 · 0 评论 -
如何通过CORS跨域请求实现聊天小AI
聊天机器人github地址:https://github.com/Neekky/chatting-robotCORS跨域解决方案CORS(跨源资源共享)通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。对于 GET 以外的 HTTP 方法,或者搭配某些 MIME 类型的 POST 请求,如:PUT 或者 DELETE 等,以及如果自定义了请求头的话,浏...原创 2018-12-15 14:18:33 · 200 阅读 · 0 评论 -
JavaScript:使用原生JS封装一个ajax兼容性方法
ajax请求过程:需要有个设备的支持,就是浏览器,没浏览器ajax是发不出去的。需要有一个ajax对象。规定请求的方式,获取谁家的数据。ajax.open(method,url,true)初始化请求方式、请求数据地址、选择异步(true)还是同步(false)方式。ajaxSend()方法,将请求发送到服务器,为了拿数据。语法: $(document).ajaxSend(functi...原创 2018-12-14 15:42:05 · 1166 阅读 · 0 评论 -
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 · 1308 阅读 · 0 评论