- 博客(37)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 从零开始一个完整的promise(附源码)
实现过程详细步骤，文档传送门从零实现promise(一)从零实现promise(二)从零实现promise(三)源码：// 先定义三个状态变量const PENDING = 'pending'const REJECTED = 'rejected'const FULFILLED = 'fulfilled'class MyPromise { state = PENDING value = '' // 向后传的value值 callbacks = [] // 回调
2021-07-01 17:24:08
191
原创 promise.all具体实现
简介promise的地位不言而喻，凡是需要异步处理的现在基本都在使用promise; promise的出现解决了异步处理中回调地狱的问题，使得开发者可以使用同步的方式去写异步逻辑。开发体验得到极大的提升；同时Promise还提供了很多有用的工具函数。 这里着重说一下Promise.all方法；功能Promise.all实现将多个Promise实例包装成一个的功能。接受一个数组作为参数，每一项为一个Promise实例，如果不是，内部会用Promise.resolve转化。参数中的每个Promise
2021-05-20 20:46:34
911
原创 长列表优化(虚拟列表)实践
介绍长列表优化是一个常见的问题，简单来说就是服务一下给你返回一万条数据，前端如果真的全部渲染出来，性能将是一个无法想象的问题；怎么做到只渲染可视区以及附近那几条数据的渲染，其他区域不渲染是一个前端问题，也就是这里所说的长列表优化。一般来讲这种问题有两种解决办法：做分页处理(服务分页0r前端伪分页均可)；虚拟列表；分页处理是一个常见的处理方式，技术上没啥难度；虚拟列表处理在社区有很多讨论，也有npm包可以直接使用，这里分析一下其原理和简易实现；虚拟列表原理虚拟列表优化的前提条件是：列表每一项的
2021-05-19 20:24:57
1279
8
原创 lazyMan实现
题目大概是实现一个如下功能的程序：LazyMan(‘tom’)输出:“this is tom”LazyMan(‘tom’).sleep(10).eat(‘apple’)输出:“this is tom”等待10秒…“eat apple”LazyMan(‘tom’).eat(‘apple’).eat(‘banana’)输出:“this is tom”“eat apple”“eat banana”LazyMan(‘tom’).eat(‘banana’).sleepFirst(5)输
2020-12-20 20:25:21
376
原创 手动实现instanceof函数
instanceof 功能a instanceof b 官方解释为检查构造函数b的prototype 有没有出现在a的原型链上。比如：function A() {}function B() { }function C() { }//B继承AB.prototype = new A()let instance = new B()console.log('---instance instanceof B-----', instance instanceof B) //trueconso
2020-05-25 16:50:27
903
原创 ts泛型，函数返回类型为对象某个key值的类型
泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。一直是ts学习中的一个重难点。具体的学习资料还是看官网吧。这里出一个题目：写一个函数，接受两个参数，一个为object，另一个为object中的一个key。函数返回类型指定为obj[key]的类型。interface Person{ name:string, age:number}func...
2020-04-15 22:06:19
17904
原创 从零开始一个前端脚手架（三）
优化经过前两篇的介绍，关于一个命令行工具的雏形，已经有了，至于每个命令的具体实现，就是简单的调用webpack的api了，网上的资料很多，这里就不在累述了。但是前边代码中那个有一个需要优化的地方需要指出来（主要是网上资料不多，楼主也是被坑了好久）。就是入口文件的地方，前边是这么写的#!/usr/bin/env noderequire('@babel/polyfill')require('@...
2020-02-16 14:28:56
146
原创 从零开始一个前端脚手架（二）
前言在上一篇文章从零开始前端脚手架系列(一)中，我们已经做好了前期准备工作，可以实现的功能是在本机的任何目录下执行simple-cli指令，都会输出test。本文继续向下推进，将实现通过输入不同的指令，执行对应的js脚本；结构规划一般来说，一个最简单的脚手架将具备以下几项基本功能：初始化项目；启动项目；打包项目；我们的脚手架也将实现这三个功能，指令为：simple-cli i...
2020-02-16 14:26:37
141
原创 从零开始一个前端脚手架（一）
前言在前端工程化概念越来越火的当下，作为前端工程师，老老实实的写业务貌似越来越不能满足需求，领导们的口中永远是提效以及产出。干再多的业务不如别人产出一个脚手架有说服力，那么写一个脚手架真的那么难吗？其实不然，本系列的文章将从零开始一个简单的前端脚手架。准备工作首先，我们默认你的电脑中装有node。然后这些前期的准备工作将实现在任意目录下的命令行工具中都可以通过一个命令执行指定的一段代码。第...
2020-02-16 14:23:25
300
原创 koa2参数解析
koa是基于node.js的web开发框架，官网：https://koa.bootcss.com/ 。不做详细介绍；在node端与前端交互时，不可避免的就是接口请求。在获取请求参数的时候，koa是基于一些中间件来处理的，而且这些中间件很多，至少有koa-body,koa-bodyparser,koa-better-body,koa-multer等（这么多真让人头大）。这里以koa-body为例介绍...
2019-10-29 16:57:37
1533
原创 window.open跳转到一个已经打开的页面
背景背景是这样的：某天拿到一个需求，在A页面点击打开B页面，B页面中操作完毕之后，关闭B页面，跳转回A页面。此时如果A页面处于打开状态（此时A页面可能已经人为关闭了），则直接定位到该页面，否则打开一个新页面显示A页面。分析这里自然就想到window.open函数了。这个函数有四个参数，但是常用的就是前两个。第一个参数（url）: 新页面的地址；第二个参数（target）: 页面的名称。...
2019-05-21 14:38:36
7297
1
原创 JavaScript数组使用总结
JavaScript数组的方法joinjoin:接受一个参数作为分隔符，将数组合并成以指定分隔符连接的字符串并返回，参数缺省时，默认用’,'分隔；不改变原数组；let arr=[1,2,3]console.log(arr.join('-')); //1-2-3console.log(arr) // [1,2,3]push和poppush和pop分别在数组尾部插入和删除一个元素；都会...
2019-01-08 20:52:15
166
原创 CSS中常见的水平垂直居中问题
当不知道子元素的宽和高的时候，如何实现子元素的水平垂直居中，这里总结了几种方法：1、利用定位和transform实现HTML和CSS代码如下：<div class="super-div"> <div class="sub-div">利用定位和transform <br/>实现水平垂直居中</div>...
2018-08-05 21:37:12
179
原创 vue组件的数据传递
vue的一个重要特征就是组件化开发。那么如何实现组件之间的消息传递就显得尤为重要。vue给出了以下几种方式：利用props实现父组件向子组件传递信息子组件内利用$emit方法触发父组件的一个事件，同时可以传入参数实现子组件向父组件的数据传递。 下边以一个具体的例子做详细说明，这个例子中父组件利用props向子组件传递一个字符串，同时子组件设置相应的按钮，点击按钮实现子组件向父组件传递...
2018-05-14 10:55:20
628
原创 react组件之间的消息传递
在react中，父子组件可以通过props来传递消息。而在实际开发中经常会遇到几个组件需要共享数据的情况，react提供的一种方法就是将他们共享的状态提升至离他们最近的父组件中进行统一管理。这种机制称为“状态提升”。 这里用一个例子来具体说明。假设我们有两个输入框，在其中任何一个输入框中输入内容，另一个框中的内容也会随着改变。每个输入框都是一个组件，这就涉及到组件之间的信息传递。因此...
2018-05-09 10:56:23
1024
原创 react实现单选框、复选框和下拉框
react和vue已经是当下前端开发领域的主流框架。确实极大程度的提高了开发效率。在博文 vue.js实现单选框、复选框和下拉框中详细叙述了vue实现表单的基本原理。本文将利用react实现相同功能。一、react开发模板 使用react进行网页开发，其基本结构如下：<!DOCTYPE html><html lang="en"><head> ...
2018-05-03 16:23:11
36929
原创 微信小程序tabBar的显示和跳转问题
如下图所示，我们按照小程序官方文档，分别在pages目录下建立test1和test2两个页面。然后在app.json下注册。按理说在左侧模拟器下边会出现一个导航栏。可是事与愿违，调试器也没有报错或者警告。为什么会出现这一情况呢？首先我们将以上代码做点小小的修改如下图所示。可以看到现在左侧模拟器导航栏已经可以正常显示了。比较这两个图可以发现，我们只是在tabBar的list中把当前页面也加进...
2018-04-17 16:28:32
13434
2
原创 微信小程序合法域名配置
在微信小程序的开发过程中，当需要请求第三方网站数据时。各种教程就直接说调用wx.request接口即可。但是当初学者自己用的时候就会出现问题。比如我们这里请求聚合数据的API(里边有不少免费的数据申请就可以使用)。调用邮编查询的接口。 getPostInfo: function (nu, callBack) { wx.request({ url: 'https://v...
2018-04-13 12:05:44
125341
28
原创 JavaScript定时器的几种方法
JavaScript定时器无非就是使用setTimeout和setInterval方法，我们以间隔1秒依次输出1,2,3,4,5为例总结几种不同的写法：一、使用闭包二、使用let三、使用setInterval
2017-08-20 21:12:07
1008
原创 vue.js中组件的创建和使用方法
vue.js中创建组件有三个步骤：创建组件构造器，注册组件以及使用组件。下边以实际例子说明组件的定义及使用方法。同时提供了使用语法糖的简单写法的例子
2017-05-26 09:33:14
23095
2
原创 vue2.0中过滤器的使用
vue2.0过滤器的使用规则：vue.js在2.0版本中，相对于1.0版本做了比较大的改动，2.0版本中，过滤器只用于插入文本中({{}})。1.0版本中指令(如：v-for,v-on等)里边的过滤器现在都放在计算属性中。同时1.0版本中的所有内置过滤器(如:capitalize等)全部取消了。下边通过一个实际的例子说明2.0版本中过滤器的用法。
2017-05-22 21:41:53
22052
2
原创 vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。以及使用过程中要注意的问题
2017-05-11 10:45:10
64664
原创 web数据存储
随着web应用程序的出现，产生了要直接在客户端存储用户信息能力的需求。下边就是几种具体的解决方案。cookie以及子cookie，还是Storage类型，及其实例对象(sessionStorage，globalStorage，localStorage)；最后介绍了storage事件
2017-05-10 09:57:05
648
原创 JavaScript中的正则表达式
ECMAScript通过RegExp类型来支持正则表达式，以下是创建一个正则表达式的常用方法： var expression=/pattern/flags; 其中，模式(pattern)是任何简单或者复杂的正则表达式。flags是一个或多个标志，可能取值如下： (1)、g:表示全局模式，即模式用于所有字符串，而不是发现第一个匹配项时立即停止。 (2)、i:表示不区分
2017-05-04 10:57:15
259
原创 JavaScript中的宽松相等和严格相等
JavaScript中宽松相等用‘==’表示，严格相等用‘===’表示。两者的区别是：==允许在相等比较中进行强制类型转换，而===不允许。下边分情况介绍几种抽象相等('==')。下边分别介绍：字符串和数字之间的相等比较，其他类型和布尔类型之间的相等比较，null和undefined之间的相等比较，对象和非对象之间的相等比较
2017-05-02 16:15:23
688
原创 ES6中的继承
在ES6之前，主要靠构造函数和原型链的灵活使用实现继承；而在ES6中引入了class(类)的概念，使得继承更加方便，也更接近传统的面向对象语言(C++,Java)中继承的实现。
2017-04-27 21:27:38
440
原创 JavaScript中的继承(下)
JavaScript中继承的实现方式，本文讲述了 原型链方式，构造函数继承，组合继承，原型式继承，寄生式继承，寄生组合继承等方式
2017-04-26 21:03:00
382
原创 2017/4/24 阿里前端笔试题
题目要求：1、Child继承自Parent； 2、执行p.set(20).get()返回结果为20；执行p.set(30).get()返回结果为30；3、执行c.set(30).get()返回结果为50，执行p.get()返回结果为20；
2017-04-24 21:28:00
1926
原创 JavaScript中的继承(中)
JavaScript中继承的实现方式，本文讲述了 原型链方式，构造函数继承，组合继承，原型式继承，寄生式继承，寄生组合继承等方式
2017-04-24 21:13:45
396
原创 JavaScript中的继承(上)
JavaScript中继承的实现方式，本文讲述了 原型链方式，构造函数继承，组合继承，原型式继承，寄生式继承，寄生组合继承等方式
2017-04-23 21:42:11
404
原创 2017/04/21阿里模拟笔试题目
题目如下：利用面向对象思想完成买家信息删除功能，每一条买家信息包含姓名 (name)性别 (sex)电话号码 (number)省份 (province)实现以下要求： 1、不能借助任何三方库，需使用原生代码实现 2、结合给出的基本代码结构，在下方2处 code here 处补充代码，完成买家信息的删除功能，注意此页面需要在手机上清晰显示。 3、j
2017-04-21 22:09:45
1119
原创 Java 中integer与int的区别
java中的int和 integer 其中答案是：true;true;false,true 很奇怪吧，其实原因很简单，integer是int的一个封装类：int是一个数据类型，integer是一个类。实例化Integer涉及到整型数的自
2016-09-01 22:07:34
777
原创 Android studio 中获取SHA1的方法
最近在做一个Android APP开发时需要嵌入地图，申请百度地图的 API key时，需要获取SHA1数据，在Eclipse中很容易得到，那么在Android Studio中怎么获取呢，楼主花了好长时间终于找到了比较简单的方法。 首先，打开Android Studio，找到左下角位置，点击Terminal(如图) 然后再命令行输入命令(如下图)注意：
2016-08-29 23:29:24
2123
空空如也
小程序swiper模拟器和真机效果不一样
2018-04-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人