JavaScript/jQuery
文章平均质量分 75
Creabine
时无重至,华不再扬
展开
-
【设计模式系列】之【发布-订阅模式】
前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。发布-订阅模式定义与介绍发布-订阅模式的例子必须先发布再订阅吗?推模型和拉模型小结定义与介绍发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖...原创 2020-01-03 18:12:12 · 290 阅读 · 0 评论 -
【设计模式系列】之【迭代器模式】
前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。迭代器模式定义与介绍内部迭代器 和 外部迭代器JavaScript中的单例模式迭代器模式的例子定义与介绍迭代器模式是指提供一种方法顺序访问一个聚合对象中...原创 2019-12-25 16:24:33 · 177 阅读 · 0 评论 -
【设计模式系列】之【代理模式】
前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。代理模式单一职责原则定义与介绍保护代理 和 虚拟代理JavaScript中的代理模式单一职责原则面向对象涉及的原则之一:单一职责原则,即对一个类(对象,...原创 2019-12-25 15:41:36 · 201 阅读 · 0 评论 -
【设计模式系列】之【策略模式】
前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。策略模式定义与介绍JavaScript中的策略模式策略模式的例子定义与介绍单例模式的定义:定义一系列算法,把它们一个个封装起来,并且使它们可以互相替换。...原创 2019-12-23 17:09:51 · 241 阅读 · 0 评论 -
【设计模式系列】之【单例模式】
前言:要提升代码水平,就绕不开设计模式。之前也有过一些了解,但并没有深入学习。最近准备系统的学习一下设计模式,提高设计,解耦的能力,发现了一本好书《JavaScript设计模式与开发实践》,所以边读边写,把常用的设计模式学习并记录在这里。单例模式定义与介绍JavaScript中的单例模式惰性单例将创建对象和管理单例的逻辑解耦单例模式的例子定义与介绍单例模式的定义:确保只有一个实例,并提供...原创 2019-12-19 18:21:48 · 293 阅读 · 0 评论 -
LeetCode刷题(五)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-11-30 10:18:19 · 256 阅读 · 0 评论 -
LeetCode刷题(六)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-11-30 10:20:38 · 211 阅读 · 0 评论 -
LeetCode刷题(七)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-11-30 10:23:17 · 201 阅读 · 0 评论 -
Promise.all结合async/await
在日常编码中,async/await明显比promise写起来方便。但是当遇到多个可以同时执行的异步时,就必须使用promise.all,这时候把每个异步函数包装成promise又很麻烦,这时候就要结合起来。之所以能够结合,是因为async/await本身就是promise的语法糖,他就是promise,所以可以直接这样写:const a = async (x) => {};cons...原创 2019-02-15 10:12:57 · 10016 阅读 · 1 评论 -
React生命周期整理
之前对React的生命周期的理解一直比较浮于表面,今天有空来梳理一下。发现React的新版本对生命周期也做了改动,更有必要搞清楚了。参考资料:React.ComponentReact生命周期[译]如何使用React生命周期方法Mounting阶段constructorconstructor方法在组件建立前被调用:在这个方法里面,应该先调用super(props),否...原创 2019-02-18 16:45:13 · 191 阅读 · 0 评论 -
关于React 中All in js的浅尝辄止(React 柱状图,环形图)
什么是 All in js前段时间在别人的项目上了解到了styled-components插件,它能够用js来写css,方便的在其中加上需要的逻辑。React本身用过jsx已经把html用js来写了,再加上styled-components,就能够实现All in js 这种编码方式。如何看待All in js了解之后跟小伙伴在群里讨论了一下,这种All in js的方式比较有争议,不...原创 2019-02-15 11:03:02 · 1387 阅读 · 0 评论 -
记一道有意思的题目
昨天遇到了一道题目,一开始没解出来,后来再大佬的提示下做出来了。记录在这里。题目// 给定一个数组 arr,数组中的每个元素形式是{ id: 0, parent: 0, // 指向数组中的另一个元素 body: "xxx"}data:[ { id: 0, parent: 1, body: "wefw" }, { id: 1, body: "sdwe" },...原创 2018-11-30 10:14:01 · 289 阅读 · 0 评论 -
LeetCode刷题(四)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:36:36 · 206 阅读 · 0 评论 -
LeetCode刷题(三)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:34:33 · 221 阅读 · 0 评论 -
LeetCode刷题(二)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:32:27 · 209 阅读 · 0 评论 -
LeetCode刷题(一)
LeetCode 是个著名的编程题库,里边有很多面试、算法题目,多刷刷对提高编程水平很有帮助,避免因为天天写业务代码而停滞不前。最近玩了下挺有意思的,决定慢慢的刷起来,在这里记录一下我的刷题过程。相关资料:我的LeetCode我的GitHub备注:先从简单的开始刷,简单记录每道题的题目,解法和思路。因为之前并没有什么算法基础,所以很多解法可能并不是最优解。先把重点放在解题,...原创 2018-09-27 14:30:09 · 285 阅读 · 0 评论 -
Object.assign及在Vue中的应用小技巧
最近看代码的时候跟同事学到了一招。Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。// 目标对象有1个,后边可以有多个源对象。注意他只会拷贝源对象自身且是可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 set...原创 2018-08-14 11:40:13 · 22647 阅读 · 1 评论 -
小程序图片上传和Promise.all
之前写过一篇ES6异步处理方式: Promise / async await,对Promise和async await 有了简单的理解,但后来才发现我的理解太浅了,只是记录了基本知识而已。 在上家公司,遇到过需要发送多个总数不定的ajax的需求,当时的解决方式是使用递归,一个请求结束之后再发另一个,当时还以为自己很机智,写了这篇博客:javascript递归的实际应用场景。 所以...原创 2018-07-06 16:08:25 · 4210 阅读 · 0 评论 -
初识React的一些感受
新公司的后台管理用了React技术栈。小程序维护告一段落后,马上给了我一个后台任务之前对React的了解基本只有名字,这次带着需求,看文档,看代码,写代码,因为有vue基础,上手还是蛮快的,两周内终于按时搞定了,对React也多了一些了解,在这里简单记录一下。因为是先看了Vue再看React,不可避免的会把他们放在一起进行比较。由于现在对于React的了解不够深入,所以比较得出的大多数...原创 2018-05-31 18:00:28 · 1044 阅读 · 0 评论 -
初窥设计模式----策略模式及相关应用场景
一直觉得设计模式是非常高端的东西,之前也简单的了解过一些,但总是没有找到合适的应用场景,所以也没能深入的去理解他。直到最近在工作中,需要写一个通话记录的功能,每个记录后边要显示该条记录是多久之前产生的。写完的时候用了很多的if else来判断,看起来很不优雅,请教了leader之后,给我指点了一下,按照思路尝试之后,一下子有种豁然开朗的感觉。其实设计模式并非高不可攀或是难以应用的东西,很多代...原创 2018-05-03 17:43:41 · 357 阅读 · 0 评论 -
如何实现call,apply,bind方法?
很久前写过一篇call,apply,bind的作用,最近学习的过程中看了一篇手写这三个方法的文章。才想起这么多年其实一直知其然不知所以然,还是要更深入原理才好,接下来整理一下我自己的写法。实现call首先我们看call的用法,比如fn.call(obj,a,b,...)。从中可以看书,call是函数的一个方法,所以我们把它加在Function.prototype上,传入上下文contex...原创 2019-01-29 15:23:24 · 382 阅读 · 0 评论 -
React中的三种组件及其区别
React中有三种生成组件的方式,分别是React.Component、React.PureComponent和Function,他们有什么异同呢?参考资料:(React(二):类组件、函数式组件)[https://juejin.im/post/5c0dfa265188257a5a2514d6]React.ComponentReact.Component是最常使用的方式,我们经常...原创 2019-02-15 15:25:59 · 994 阅读 · 0 评论 -
React的受控组件和非受控组件
在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会维持自身状态,并根据用户输入进行更新。但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新。来源:浅谈React受控与非受控组件非受控组件非受控组件,即组件的状态不受React控制的组件,例如下边这个imp...转载 2019-02-15 16:53:14 · 852 阅读 · 0 评论 -
Moment.js
Moment 可以同时在浏览器和node环境中使用。是一个非常好用的时间日期处理类库。在新公司的项目中,大量使用Moment来处理时间日期,非常方便好用。参考资料:官方文档使用详情见官方文档,Moment基本可以代替Date,获取任意时间,时间格式化,时间日期计算,比较,都非常方便。常用方法:// 取当前时间moment();// 取当日开始时间moment().star...原创 2019-07-30 17:54:13 · 992 阅读 · 0 评论 -
BigNumber.js
在新公司的第一个项目是区块链相关的管理后台和交易所,其中就涉及了很多的计算问题。而JavaScript因为存在计算的精度问题,所以直接计算就可能会导致各种各样的bug,为了解决这个问题,就要使用BigNumber.js这个库。BigNumber.js是一个用于任意精度计算的js库。可以在 官方文档 的console中测试使用。也可以通过npm install bignumber.js --s...原创 2019-07-30 16:04:42 · 11107 阅读 · 0 评论 -
前端错误监控与错误日志
平时工作中没怎么接触到这部分,对它的了解也零零碎碎的。今天看了几篇文章,算是有个完整的认识了,在这里总结记录一下。项目上线之后肯定无法避免所有的bug,有些bug出现后开发人员并不知道,有的知道了缺无法快速准确的修复。这时候就需要在代码层面去处理bug,一是方便debug,二则是通过错误处理防止程序崩溃。参考资料:前端错误日志收集方案前端错误监控与上报Vue SPA项目 + S...原创 2019-05-05 16:32:07 · 1264 阅读 · 0 评论 -
React Hooks 入门
之前就听过React的新特性Hooks,今天有空来学习了解一蛤~参考资料:React中文文档概述Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。目前还在讨论中。简单来说,这个提案对React的函数式组件进行了加强。之前在React中的三种组件及其区别中提高过:函数式组件没有生命周期和内部状态,所以一般只做单纯的渲染。...原创 2019-04-24 15:49:05 · 319 阅读 · 0 评论 -
requestAnimationFrame学习
之前知道异步有个requestAnimationFrame,但一直没去了解,今天有空学了下,记录一波。参考资料:requestAnimationFrame理解与实践为什么需要requestAnimationFrame传统的 javascript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题:1. 动画的循时间环间隔...原创 2019-04-22 14:31:35 · 272 阅读 · 0 评论 -
如何实现数组的map和filter方法
最近经常看到如何实现原生方法的文章,之前自己对于这些并没有特别在意,看了几篇之后发现还是挺有意思的,搞清楚其中的原理比业务代码有趣多了。今天来记录一下数组的map和filter方法参考资料:JS Array.reduce 实现 Array.map 和 Array.filterArray.prototype.myMap在实现map方法之前,有一个要注意的地方在于,map方法有一个很...原创 2019-04-07 14:35:39 · 460 阅读 · 0 评论 -
JS数组去重
闲来无事,总结一下数组去重的各种思路。当然去重有很多种方法,这里只写几个相对简洁的思路。基本思路做一个空数组A,遍历数组,若A中不存在则放入Afunction uniqeArray (arr) { let result = []; arr.map(item => { if(!result.includes(item)) { result.push(item); ...原创 2019-04-07 11:07:26 · 714 阅读 · 0 评论 -
组件化和React
组件化和React题目:说一下对组件化的理解jsx的本质是什么jsx和vdom的关系是什么说一下setState的过程阐述自己对react和vue的认识对组件化的理解:1.封装(视图,数据,变化逻辑)。2.复用(props传递)。jsx的本质是什么:jsx跟vue模板一样,都是语法糖,是为了降低学习成本和写代码的难度(相比直接写h函数来说)。最终也是编译成js在浏览器中运...原创 2019-03-27 17:31:14 · 203 阅读 · 0 评论 -
MVVM 和 VUE
MVVM 和 VUE如何理解mvvm如何实现mvvm是否读过vue源码题目说一下使用jQuery和使用mvvm框架的区别说一下对mvvm的理解vue如何实现响应式vue如何解析模板vue的整个实现流程jQuery和vue的区别:数据和视图分离,解耦(开放封闭原则)以数据驱动视图,只关心数据变化,DOM操作被封装对mvvm的理解mvc(modal, view...原创 2019-03-27 17:29:24 · 950 阅读 · 0 评论 -
虚拟DOM和Diff算法
虚拟DOM (virtual dom)vdom 是 vue 和 react 的核心,学习他们绕不开vdomvdom比较独立,使用也比较简单如果面试问到了vue和react的实现,免不了问vdom问题:什么是vdom?为何会存在vdom?vdom如何应用,核心API是什么?介绍一下diff算法什么是vdom?为何会存在vdomvirtual dom , 虚拟dom用js...原创 2019-03-27 17:28:29 · 368 阅读 · 0 评论 -
jQuery 和 zepto中原型的实际应用
jquery 和 zepto 的简单使用zepto 如何使用原型jquery 如何使用原型在jquery中,我们获取不同的dom元素,但他们都有相同的jquery方法(如css(),html(), hide()等),这些方法就是在原型上的。zepto 和 jquery 中原型的使用<!DOCTYPE html><html lang="en"><hea...原创 2019-03-27 17:26:29 · 216 阅读 · 0 评论 -
ES6中的Proxy、Reflect以及Vue3.0中的应用原理
Vue3.0中,Even You表示会使用Proxy代替Object.defineProperty来做数据的响应式。对于Object.defineProperty我们已经很熟悉了,之前也写过相关的Vue双向绑定原理(二)访问器属性defineProperty()和发布/订阅模式。我们也知道了使用Object.defineProperty的一些劣势:Object.definePropert...原创 2019-02-20 17:59:39 · 2123 阅读 · 0 评论 -
数组的reduce方法及其应用
前两天在群里看到一道题,折腾半天没做出来。今天查了查,了解了前因后果,在此整理记录一下。参考资料:MDNredux之compose题目:const fn1 = x => x+1;const fn2 = x => x+2;const fn3 = x => x+3;const fn4 = x => x+4;let Fn = compose(fn1, ...原创 2019-02-19 18:21:31 · 1302 阅读 · 0 评论 -
class中的static
参考资料类(class)通过 static 关键字定义静态方法。不能在类的实例上调用静态方法,而应该通过类本身调用。这些通常是实用程序方法,例如创建或克隆对象的功能。class ClassWithStaticMethod { static staticMethod() { return 'static method has been called.'; }}conso...原创 2019-02-18 15:51:28 · 5792 阅读 · 0 评论 -
ES6知识整理(二)--- Promise
早在17年初就读了《ES6 标准入门》并在博客上做了笔记(《ES6 标准入门》读书笔记),工作中也有用到一些。一年后再回过头来看这些知识,又跟初看的时候的感觉完全不同了。对很多新特性的好处有了更具体的认识。也有一些知识依然了解不够,所以在这里重新整理一波,夯实基础。参考资料: 1. 浅析Promise用法 2. Promise对象的含义和基本用法 3. 大白话讲解Promise...原创 2018-03-11 13:51:17 · 339 阅读 · 0 评论 -
ES6知识整理(一)--- let/const/箭头函数
早在17年初就读了《ES6 标准入门》并在博客上做了笔记(《ES6 标准入门》读书笔记),工作中也有用到一些。一年后再回过头来看这些知识,又跟初看的时候的感觉完全不同了。对很多新特性的好处有了更具体的认识。也有一些知识依然了解不够,所以在这里重新整理一波,夯实基础。箭头函数 箭头函数主要有两个好处: 1. 减少代码量 2. 绑定函数定义时的作用域 对于1,这里记原创 2018-01-09 20:47:53 · 780 阅读 · 0 评论 -
Vue全家桶实践(五)---渲染函数&JSX
最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算简单梳理一下思路。相关博客:Vue全家桶实践(一)—vue-cliVue全家桶实践(二)—iViewVue全家桶实践(三)—axiosVue全家桶实践(四)—vue-routerVue原创 2018-01-07 17:09:22 · 4535 阅读 · 0 评论