- 博客(104)
- 收藏
- 关注
RSS订阅原创 详解js原型链
面试题 Object.prototype.test1 = function () { console.log('test1'); }; Function.prototype.test2 = function () { console.log('test2'); }; function Fun() { this.a = 1; } var obj = new Fun(); console.log(obj.test
2020-11-17 21:15:22
1501
原创 函数的节流和防抖
节流函数节流函数用于控制函数执行的频率.比如用户设置时间间隔为1秒,那么在1s的时间内函数只执行一次.如果上面的表述还不清楚,通过下面的案例来深入理解.不加节流函数 window.onscroll = function (value) { console.log('移动了鼠标'); };从上面可以看出,不加节流函数时,滑动鼠标触发事件的次数是惊人的.如果被执行的函数里面包含了复杂的计算逻辑,在这么高的调用频率下,会造成严重的页面卡顿.增加节流函数 window.
2020-11-06 22:59:17
424
1
原创 从非主流走向主流-B站
本篇文章是作者学习完《吴伯凡-每周商业评论》课程后的感悟,如果想了解更多知识请登录得到App购买相关商业课程2020年美国东部时间6月8号发布财报,B站市值121.46亿美元,日活跃用户5100万,月活跃用户达到1.56亿.第一季度的业绩,月均活跃用户增长70%,营收同比增长69%,月付费用户同比增长134%.这样的增长速度让人惊叹,投资者看到这样的数字无不心动.B站的发展过程所有的公司都可以划分为以下三种类型:盆景型公司,热带雨林型公司和植树造林型公司.盆景型公司:不是说规模小的公司是盆.
2020-11-01 13:10:58
752
原创 数字商业帝国-亚马逊
本篇文章是作者学习完《吴伯凡-每周商业评论》课程后的感悟,如果想了解更多知识请登录得到App购买相关商业课程引言传统的印象里亚马逊是一家网上书店,同时它是一家电子商务公司,如今已经成为了集数据和智能的高新科技公司.公司的名称起源于一条河流-亚马逊河,亚马逊河是世界上流量最大的河,涌入大海的水量占到世界的1/5,其中包含了15000多只支流.亚马逊公司的特点同样如此,用户量数以亿计,业务模块百花争鸣.2019年亚马逊的年度营业额为2805.11亿美元,相当于2.5个华为.而一个华为的营业额比百度,.
2020-10-25 12:54:40
1030
原创 react如何拖拽模态框
前言实际开发中,模态框展现数据会经常出现.但不幸的是有时功能开发完了,UI同学突然提出需求希望模态框能拖拽.如何在不修改原来代码的基础上实现拖拽呢.最终效果图如下:实践1.创建高阶组件DragHoc新建文件ModalDrag/index.js,将下面代码copy进去DragObj是具体拖拽的原生js代码,后面再看DragHoc是创建高阶组件的函数,其中参数InnerComponent是需要被改造的模态框组件,函数最终的返回值是增强后的组件render方法中直接返回了 <InnerC
2020-10-22 20:29:59
1331
3
原创 互联网的下半场
如果要谈新兴的互联网企业,不得不提字节跳动,拼多多和美团这三家公司.他们虽然资历年轻,但实力不容小觑,在短期内实现快速扩张,经受住了市场一轮又一轮的洗牌,最终存活.如今BAT的势力已经渗透到各行各业,很多创业者忧虑即使寻找到一种新的商业机会,很快也会被巨头模仿并迎来残酷的竞争,在没有足够的资源和能力提供支持时,很大程度会面临惨败,如果运气好一点能被巨头瞧上得以收购将是一件幸运的事.如今企业想发展壮大,必须意识到吃东西和被别人吃同等重要.整体互联网环境已呈现高度饱和,巨头在各个领域打造的行业壁垒在一定程度上实
2020-10-16 21:00:31
575
2
原创 探索underscore的流式调用
前言underscore是一个JavaScript工具库,提供了一整套函数式编程的实用功能.其内部包含了很多工具函数比如each,map,reduce,filter等等.虽然es5,es6已经包含其中大部分,但查看源码了解这些函数底层的实现有助于加深对原生js的理解.underscore内部定义的都是纯函数,并支持单向数据源的链式调用.在众多函数组成的链条中,可以神奇的发现数据就像经过管道一样从一个函数流向另一个函数. const result = _([1, 2, 3, 4, 5, 6, 7]
2020-10-15 21:05:14
181
1
原创 拼多多的商业模式
当今市面上存在一家神奇的公司.2015年正式上线.2016年单月成交额破1000万,用户量突破1亿.2017年近1个月长期霸占苹果应用商店购物类榜首.2018年登陆纳斯达克上市.你猜的没错它就是拼多多.如今当下的市场环境早已被互联网巨头所覆盖,市场已呈现高度饱和和成熟,即使有幸能挖掘出新的商机,也会很快被巨头模仿和征用.拼多多之所以神奇,不仅体现在它的野蛮生长,关键这一切都在巨头的眼皮子底下发生.成交金额突破一万亿元,淘宝用了9年,京东用了14年,而拼多多只用了四年半.它到底如何在残酷的丛林法则下的商业世界
2020-10-07 14:40:19
2831
原创 字节跳动的经营哲学
字节跳动是一家成立8年的公司,目前在市场上形成业务的有20多款产品,大众所熟知的如今日头条,抖音,悟空问答,西瓜视频,火山小视频等.这家公司不光是一座App工厂,而且每推出一款新产品,就立马拥有极强的市场竞争力,很容易形成爆品.2019年字节跳动总收入1300-1400亿元,其中商业产品广告收入1200-1300亿元左右,另外知识付费,硬件销售、To B 业务在巨大的流量风口下急速展开,它们共同贡献了其他收入.近几年来字节跳动的营收目标一路飙升,从2017年的150亿,到2018年的500亿,再到2019
2020-09-26 18:01:37
7252
原创 补码的除法运算
补码的除法运算是将两个数都使用补码的形式来进行计算,和原码的除法相比,补码的除法运算中被除数,除数以及余数都采用双符号位的形式参与计算,最后得到的余数符号位就代表着最终结果的符号位.加减交替法题目:假设机器字长为5位,x=+0.1000,y=-0.1011,采用补码交替法求x/y?首先通过题目计算出x的补码还有y的补码和-y的补码.都采用双符号位表示x(补)=00.1000,y(补)=11.0101,(-y)(补)=00.1011首先判端被除数x(补)与除数y(补)是同号还是异号.如果是同号,
2020-09-23 20:47:03
16344
12
原创 原码除法
计算机原码除法主要分为恢复余数法和加减交替法,我们先从十进制除法运算中获取一些规律,再运用到二进制的除法运算中.十进制除法仔细观察下面十进制运算782/7的过程.782除以7第一位商上1,余数为0.第二位上1,余数为1,1和2又组合成新的余数.第三位还是上1,余数为5.结果商便为111.我们可以得出以下规律每一次上的商乘以除数要无限接近于被除数但又要比它小上完商之后要用被除数减去商乘以除数的结果算出余数减出余数后要把被除数后一位和余数结合形成新的余数进行下一轮计算我们现在可以把这些规律
2020-09-19 17:21:04
8578
3
原创 nodejs实现jwt token认证登录
在本文中采用koa2框架编写接口的方式实现一遍jwt token登录认证的流程,主要涉及的知识点有如何生成登录校验码,koa2如何配置session以及前后端对token的处理.githup项目地址session配置在koa2项目中安装一个依赖包 koa-session 能够方便的操作session.配置如下:const session = require('koa-session');const key = 'koa:sess';exports.sessionKey = k.
2020-08-28 18:03:26
2345
原创 nodejs实现用户邮箱注册
前言本篇博文以实战的角度描述用户注册和密码找回的实现过程.整个项目使用koa2框架搭建.用户注册的流程简述如下:用户向接口地址发送三个字段用户名user_name,密码password和邮箱email.后端接受后向数据库中的用户表插入一条新的记录,但设置该条用户记录的状态为不可用.随后向用户邮箱发送一个校验的url,用户打开邮箱里面的地址跳转之后,数据库对应的那条用户记录状态由不可用置为可用,至此...
2020-08-27 19:32:21
2629
2
原创 原码一位乘法和补码一位乘法
原码一位乘法原码乘法遵循的规则如下符号位与符号位进行异或运算,数值位的绝对值和数值位的绝对值相乘,最后将两个结果结合起来就得出了最终的结果 向右移位的时候高位填0比如 A = -0.1101,B = 0.1011,求A*B的积?符号位与符号进行计算,A的符号位为-1,B的符号位为+1.两个进行异或最后的符号位仍然是-1.数值位乘以数值位.|A|=0.1101,|B| = 0.1011.我们采用双符号位来进行计算.|A| = 00.1101, |B| = 00.1011.下面是|A|*..
2020-08-21 21:05:51
8558
2
原创 原生js从零实现图片裁切
效果图 在我的上一篇文章已经介绍过如何实现图片压缩,本篇文章主要讲解在此基础上单独实现的图片裁剪功能.点击选择文件上传一张图片,点击裁切时会出现裁剪框,移动或拉伸裁剪框会在下方生成裁剪后的图片.点击下拉框选择裁剪图的压缩比例.最终点击生成就可以将裁剪压缩后的图片下载到本地.githup完整代码地址HTML结构 对应页面图 ...
2020-08-12 16:29:06
2820
原创 前端实现图片压缩
前言图片压缩在许多交互场景下具有广泛的应用,html5标准还没有普及之前图片压缩主要通过服务器端编程实现,而随着浏览器的快速发展对许多先进属性的支持致使前端技术也可以实现相同的功能.本篇文章以实战角度去深入研究前端技术是如何压缩图片并生成出来.案例效果图如下,通过选择文件按钮打开本地的某张图片,并在页面上预览出来.随后选择压缩率,下方会展现压缩后的图片效果,最终点击生成下载被压缩的图片.Demo地址功能实现html结构 ...
2020-08-07 17:47:19
6654
原创 循环冗余校验码
前言循环冗余校验码简称CRC码,是目前使用非常广泛的数据校验方式.它不仅能校验传递过来的数据正确性,还能筛查出哪一位出现了错误.它的局限性是只能校验一位数据发生跳变,在现实世界当中数据发生跳变很大很大的概率是只有一位发生变化,因此CRC码也拥有很大的发挥舞台.发送方数据处理前期准备假设发送方A向接收方B发送一串二进制数据101001.A需要计算出K位校验码,放在原始数据的后面一起发送给B.假设它们双方事先约定了一个私密的二项式G(x) = x^3 + x^2 +1,这个多项式用来计.
2020-08-02 10:32:16
12789
3
原创 数据校验之海明码
前言在计算机的世界里,所有数据都以二进制的形式存在,而互联网的出现让计算机之间的沟通成为可能,它们彼此通过相互传递数据实现对话.那怎么确保一台计算机向另一台计算机发送的数据没有因为网络波动造成数据跳变呢?因此为了确保每台计算机接受到的数据都是准确无误的,我们需要创造一种校验机制以保证传输数据的正确性.奇偶校验现在计算机A有一个任务,它需要向计算机B传输一条二进制数据1010.为了确保B接受到的数据没有发生跳变,A就和B约定:"我呢需要在所有的原始数据(当前是1010)前面加一个数字(也就是.
2020-07-26 15:56:08
1114
原创 onmouseover和onmouseout事件小结
前言onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中触发的事件,而onmouseout是移除dom元素触发的事件. 说明我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开" 鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover...
2020-06-30 20:55:47
12807
原创 dva + react hooks实战Demo
前言dva 是一款轻量级的应用框架,是阿里旗下的开源产品.dva是基于redux和redux-saga的数据流方案,然后为了简化开发体验，dva 还额外内置了react-router和fetch.写过原生redux代码的同学应该体会的到,redux里面充斥着大量的样板代码,对开发者而言使用体验十分的不友好.而dva将这些繁杂的工作封装到了底层去实现,开发者只需要调用它提供的几个简单Api就能实现完全相同的功能,从而大大的提升了开发效率.本篇博文将从实战的角度将dva和目前流行的reac...
2020-06-21 16:04:31
8014
4
原创 vue3初尝试
前言目前vue3还处于beta版本,离正式版的发布还有一段时间.在此之前我们可以对vue3新特性CompositionAPI做一个demo练习,加深对其具体应用的场景的理解.相关文档API完整项目地址Demo需求 上图为Demo最终展现结果.Demo总共有三张页面:首页,商品详情页和登录页.首页有"猜你喜欢"和"今日推荐"两个数据列表.点击列表标题会随机触发列表项的颤动.点...
2020-06-18 21:01:38
605
原创 6.浅尝JQuery源码dom操作的设计架构
前言本篇文章以jquery@1.11.0为例对源码进行了删减抽离出了核心的代码重新实现了.css,.text以及.addClass和.removeClass四个API,通过对这四个API的实现过程可以窥探到jquery底层实现dom操作的设计思想.首先回顾一下上述四个API的使用方法,为实现其源码做准备,假设html如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8
2020-06-07 13:00:51
189
原创 svg里stroke相关属性在css动画中的应用
stroke-dasharraystroke-dasharray是做什么用的呢?先看下面代码<svg> <rect x="20" y="20" width="100" height="100" fill="none" stroke-width="1" stroke="red"> </rect></svg>结果: ...
2020-05-21 21:52:16
1441
原创 4.实现jQuery的$.Deferred延迟对象
$.Deferred功能描述以下代码运行三秒后会在控制台输出"执行完毕".$.Deferred函数运行会生成一个延时对象dtd,该对象本身具有很多属性比如resolve,reject,progress.其中在一个异步函数中,比如下面代码中的setTimeout或者ajax回调函数里,如果执行dtd.resolve(),则会立刻执行done里面的函数回调.dtd.reject()会触发fail里面的函数回调.dtd.progress()会触发notify里面的函数回调.如果想详细了解$.Deferr.
2020-05-11 20:52:29
517
原创 koa2参数校验方案
前言在当前web项目的前后端分离已经大行其道的时代,通过json进行前后端交互已经成为了必不可少的部分,而对json数据的校验工作会随着项目的逐步扩大而变得日益臃肿而难以维护,尤其是中后台的项目提交的有些表单含有的参数特别的多且结构复杂,如果不能很好的设计一种参数校验的方案,对后续的开发工作将会造成巨大的困扰.在开发nodejs后端项目时,我们希望最好的结果便是将所有的参数校验部分单独抽离出来放在另外的文件中不和路由模块绑定在一起.将参数校验的逻辑代码封装到一个中间件函数里,如果用户上传的参数不符合
2020-05-08 20:27:13
3724
原创 3.实现jQuery的$.Callbacks函数
功能描述$.Callbacks作为jquery源码中的一个使用非常多的工具函数,为其他的许多模块提供支持.它的主要功能是使用一个add方法添加函数存储到函数队列中,使用fire方法去依次执行队列中的函数.另外我们可以添加各种参数对其执行队列中的函数的种种行为进行控制.下午我们先快速熟悉一下$.Callbacks的基本功能和用法.var cb = $.Callback();cb.add...
2020-05-04 15:32:38
220
原创 2.实现jQuery选择器
功能描述用过jquery的同学都知道,在$()函数中可以传递多种参数来生成jquery对象,本次就探究一下如何实现此功能.$()函数中主要接受的参数有以下三种:字符串类型,dom对象和函数.//1.传入字符串类型选择器 $("#container")//2.传入字符串类型html代码$("<div>123</div>")//3.传入dom类型$(...
2020-05-02 15:37:30
313
原创 1.实现jQuery构造函数和extend
实现jQuery构造函数现在我们想实现$()这种形式的函数调用并返回一个对象.(function(global){ var $,jQuery; $ = jQuery = function(){ return new jQuery.fn.init(); } jQuery.fn = jQuery.prototype = { init:functi...
2020-04-11 18:04:09
202
原创 浏览器自定义事件监听以及应用
自定义事件如果我们想在window上面挂载一个自定义事件该如何实现呢?比如: window.addEventListener("testEvent",(e)=>{ console.log(e.data); }) 想实现上面的事件监听可以利用window.dispatchEvent这个API派发自定义事件.整个过程是先创建自定义事件,再通...
2020-04-08 20:55:18
2236
原创 手写Promise
代码实现function _Promise(fn) { this.status = "pending"; this.data = null; const _this = this; this.cacheFn = []; this.errorObj = { fn: null } function resolve(data) { _this.stat...
2020-03-28 20:34:32
196
原创 使用nodejs原生API实现文件上传下载
搭建HTTP服务器 使用原生http模块创建一个服务器提供给前端访问,访问路径为localhost:8000const http = require("http");const path = require("path");const querystring = require("querystring");const { getPostData, downloadFile }...
2020-03-22 16:43:07
3423
1
原创 详解js类数组对象
基本概念类数组对象,顾名思义就是一个和数组很类似的对象.它不是一个数组,但具有数组的length属性可以查看元素的个数,它承载元素的方式和数组一样都是以连续的数字作为索引.在实际中开发中比如经常使用的arguments还有document.querySelectorAll返回的都是类数组对象,如下: 从上面运行代码我们可以得出一些结论....
2020-03-21 14:01:17
637
原创 前端面试题精选
1.用es5实现类型的继承function Animal(){ this.name="动物"; this.sex="男孩";}Animal.prototype.eat = ()=>{console.log("吃食物")}function Dog(){ Animal.call(this); this.name="狗狗";}Dog.prototype =...
2020-03-15 12:26:15
863
原创 简化redux模板代码
在实际开发过程中,react通常会配合redux,react-router,redux-thunk等生态插件一起协同开发,尤其在使用redux的过程当中,会出现很多的模板代码的编写.比如你想修改页面上的一个状态的某个错误,你要去先找到action文件中触发的action,在该方法中寻找到actionCreator,随后你又要找到actionType,最后在reducer中找到对应的处理逻辑.不管是...
2020-03-14 13:47:48
451
原创 js实现异步任务调度器
需求: 实现一个异步调度器函数,能够不断的将异步执行的函数加入其中,但是它能控制最多同一时间只能执行两个异步函数,并将执行结果返回.核心代码:/** * 编写一个异步任务调度器 */class Scheduler { list = [];//用来承载还未执行的异步 count = 0; //用来计数 async add(fn) { this....
2020-03-13 23:40:58
4713
3
原创 如何解决搜狗浏览器自动填充
问题描述: 搜狗浏览器一旦选择保存你的账号密码,只要是页面上出现password类型的input它就将用预先存储的账号密码用黄色背景给你填充上去,不管你是给input加id还是autocomplete="off"都不起作用令人苦恼不已.解决方案: 既然已经知道搜狗浏览器是根据页面上是否有type="password"的input作为判断是否填充的依据,我们就可以对这...
2020-03-11 15:47:48
3324
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人