自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

  • 博客(55)
  • 收藏
  • 关注

转载 原型和原型链梳理

在javaScript中,经常会说到原型(prototype)和原型链(prototype chain)。我曾经以为我完全理解了,但是后来总是会发现不同的地方,这次进行一次系统的整理。原型什么是原型?看一下权威指南中的说明每一个javaScript对象(null除外)都和另一个对象相关联。“另一个”对象就是我们熟知的原型,每一个对象都从原型继承属性。如果是通过关键字new和...

2019-07-27 15:33:00 188

转载 二进制和十进制相互转换、位移运算

二进制和十进制相互转换、位运算记录下在codewar上做的一个题目和收获128.32.10.1 == 10000000.00100000.00001010.00000001Because the above IP address has 32 bits, we can represent it as the unsigned 32 bit number: 2149583361Co...

2019-06-24 17:17:00 278

转载 redux-thunk 源码学习记录

redux触发store更新,使用的dispatch(action),在关于createStore的源码解读中可以看到,store.dispatch限制了action必须是一个纯对象。是为了保持reducer的纯净性只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。redux-thunk是re...

2019-04-25 14:47:00 169

转载 redux源码学习笔记 - applyMiddleware

在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer。这个enhancer在createStore的源码中是这样使用的 return enhancer(createStore)(reducer, preloadedState)它可以接受createStore...

2019-04-25 12:03:00 117

转载 redux源码学习笔记 - combineReducers

上一篇有了解到,reducer函数的两个为:当前state和此次dispatch的action。state的结构是JavaScript对象,每个key都可以代表着不同意义的数据。比如说 { lists:object, type:string }lists管理列表数据,type管理选中的类型。此时就需要考虑将state分为不同的子树,每次...

2019-04-21 19:28:00 113

转载 数字每三位添加一个 ',' 的不同实现方式

处理数值,为每三位数加一个逗号,兼容浮点型数值以1234567.1234 和 12345678为例通过内置方法实现 function addComma(num = 0){ let temps = num.toString().split('.'), //处理浮点数的情况,整数时会返回原数值 target = temps[0].spl...

2019-04-19 17:54:00 334

转载 redux源码学习笔记 - createStore

本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1。在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱。redux就派上用场了,它最大的特点就是使状态变化变的可预测。redux提供一个管理state的仓库(store),并且规定了store只能通过reducer(函数)来更新,而reducer...

2019-04-18 11:29:00 143

转载 compose函数

compose函数在学习redux源码的时候看到了其中的工具函数compose,compose函数的作用就是组合函数,依次组合传入的函数:后一个函数作为前一个函数的参数最后一个函数可以接受多个参数,前面的函数只能接受单个参数;后一个的返回值传给前一个reduce实现redux中是使用reduce实现的function compose(...funcs) { //没有传...

2019-04-12 00:24:00 504

转载 你不知道的JavaScript --- 作用域相关

本篇是《你不知道的JavaScript》的读书笔记什么是作用域?程序离不变量,那么变量存储在哪里?程序需要时如何找到他们?这些问题说明需要一套设计良好的规则来存储变量, 并且之后可以方便地找到这些变量。这套规则被称为作用域。作用域负责收集并维护由所有声明的标识符(变量) 组成的一系列查询, 并实施一套非常严格的规则, 确定当前执行的代码对这些标识符的访问权限。作用域嵌套当一个...

2019-04-07 23:08:00 87

转载 Date相关

处理时间是常见的需求,总结下Date类的相关知识构建时间对象Date 对象基于1970年1月1日(世界标准时间)起的毫秒数。构建对象实例有多种方式:不传入参数,默认以系统当前时间返回一个时间对象.new Date(); new Date(); // Wed Mar 13 2019 10:49:28 GMT+0800 (中国标准时间)返回的是一个对象实例,...

2019-03-14 15:14:00 181

转载 记录一个面试题目

判断以下代码的执行结果(涉及变量提升,函数声明,原型链,this指向,作用域等知识点)掘金 上看到的一个笔试题目,记录并分析总结以下考察点。 function Foo () { getName = function () { alert(1) } return this } Foo.getName = function () { alert(2) } ...

2019-02-19 14:13:00 112

转载 new 操作符 做了什么

new 操作符 做了什么new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。假设Test是一个构造函数,通常在创建对象的实例时,要使用new,eg:test = new Test() , 那么在调用new的时候,发生了什么呢?步骤如下:1.一个继承自 Test.prototype 的新对象被创建。可以理解为: // 创建一个空对象,继承构造函...

2019-02-12 17:10:00 165

转载 属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;内外边距margin,padding设置百分比时,在默认(水平)书写模式下,以包含块的宽度为标准进行计算,其他情况以包含块的高度进行计算。所以正常情况下,mar...

2018-12-30 13:58:00 244

转载 各种居中方案

元素居中是常见的场景,此页为总结各种实现方式水平居中内联元素(inline,inline-block等),将父元素的text-align属性设为center。text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。块级元素(block等),设置margin-left,margin-right为auto,此时左右外边距会平分水平方向的多余空间,实现居中...

2018-12-28 15:31:00 89

转载 关于如何使`(a === 1 && a === 2 && a === 3)`返回`true`问题的思考

看见这个面试题目,第一反应就是在变量a取值时进行了一些改变,那就要用getter,关于存取器的介绍可以看这里var temp = 1;Object.defineProperty(window, 'a', { get: function() { // 每次取值,temp+1 return this.temp++ }});console.log( a...

2018-12-27 10:55:00 173

转载 选择适合的类型判断方式

类型判断是个常见问题,有多种不同的判断方式,每种方式都有适用的场景。typeoftypeof 操作符返回一个字符串,表示未经计算的操作数的类型。typeof operand 或者 typeof (operand) 都可以,括号为可选的。类型结果Undefined"undefined"==Null===="object"==Boolean"b...

2018-12-24 15:49:00 95

转载 this的指向问题

this是JavaScript中的一个关键字,不是变量,也不是属性,它不能被赋值。在绝大多数情况下,它的值取决于函数的调用方式。当然javascript中也有一些方式可以设置this。本文总结下this的指向问题。函数调用时这里的函数调用指的是,函数表达式是普通函数,而不是对象的属性。例如 x(a1,a2) 此类。此时如果是非严格模式,函数中的this就会指向window/全局对...

2018-12-19 12:42:00 109

转载 MarkDown基础语法记录

基础语法记录,其中有一些博客园暂不支持<!--标题--># 一级标题 ### 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题一级标题二级标题三级标题四级标题五级标题六级标题<!--分割线-->---***<!--文字修饰-->**加粗***斜体*~~...

2018-12-19 12:38:00 69

转载 JavaScript 交换数组元素位置的几种方式

前言  交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式。第三方变量  最基础的方式,创建一个变量作为中转。 let temp = array[index1]; array[index1] = array[index2]; array[index2] = temp;splice方法  splice() 方法用于插入、删除...

2018-09-18 16:57:00 1250

转载 Angular使用总结 --- 通过指令动态添加组件

  之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态、值、回调函数什么的。但是有一些场景不适合这种方式,还是动态添加组件更加好。通过写过的一个小组件来总结下。创建组件  场景:鼠标移动到图标上时,展示解释性的说明文字。那就需要创建一个普通的tooltip组件。如下:<aside class="hover-tip-wrappe...

2018-07-09 11:25:00 302

转载 Angular使用总结 --- 如何正确的操作DOM

  无奈接手了一个旧项目,上一个老哥在Angular项目中大量使用了JQuery来操作DOM,真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢?获取元素  1、ElementRef --- A wrapper around a native element inside of a View.    在组件的constructor中注入Elemen...

2018-07-06 13:45:00 211

转载 JavaScript 全屏展示

  浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API, 一个小demo验证一下!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...

2018-06-30 14:32:00 107

转载 JavaScript getter和setter

  对象的属性是由属性名name,值key,和其他特性(可读写性 writable,可枚举性enumerable,可配置性configurable)组成的。从ES5开发,提供了getter和setter 可以将属性值的获取和设置分别绑定到方法上,称之为“存取器”。有了getter和setter我们就能够在属性值的变更和获取时实现一些操作。简单的getter , setter  直...

2018-06-28 17:02:00 85

转载 Angular使用总结 --- 模型驱动表单

模型驱动表单  之前有篇博文总结了 模版驱动表单, 以及 模版驱动表单的自定义校验, 本篇总结下模型驱动表单。  与模版驱动表单是不同的编程思路,偏向于数据模型。先在组件中建立表单控件的对象树,再绑定到组件模版的原生表单控件上。而模版驱动表单则是在组件模版中使用了内置的 ngForm、ngModel指令,这些指令会自动完成很多工作,以达到双向绑定、监听form和表单控件的状态...

2018-06-25 10:16:00 159

转载 JavaScript 那些不经意间发生的数据类型自动转换

  JavaScript可以自由的进行数据类型转换,也提供了多种显式转换的方式。但是更多的情况下,是由JavaScript自动转换的,当然这些转换遵循着一定的规则,了解数据类型自由转换的规则是非常必要的。再次翻阅犀牛书后有了一些总结,与大家分享,有不严谨地方,望指正!数据类型  聊到数据类型转换,就不得不提到JavaScript的数据类型:原始类型(Number , String...

2018-06-20 17:04:00 118

转载 JavaScript 判断对象中是否有某属性

  判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。一、点( . )或者方括号( [ ] )  通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined。当然,这里的“不存在”指的是对象自身和原型链上都不存在,如果原型链有该属性,则会返回原型链上的属性值。// 创建对象let test = {name : 'lei'}...

2018-06-14 00:00:00 178

转载 Angular使用总结 --- 搜索场景中使用rxjs的操作符

  在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的。节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装。rxjs提供了各种操作符, 可以很快捷高效的实现这些功能。栗子  现在有一个查询场景,可以通过城市、类型、关键字来多维度过滤结果,如下图:    处理思路:    1、通过ngMod...

2018-05-29 13:15:00 196

转载 Angular使用总结 --- 以密码确认为例实现模版驱动表单的自定义校验

  上一篇总结了模版驱动表单的基本用法,示例中的校验使用的是原生HTML5的校验方式,本文补上自定义校验的部分。  HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校验需求,但是有些场景必须用到自定义校验,比如注册时的密码确认,有比对关系的时间/数值选择, 需要到请求到服务端取值验证等等···这里以密码确认为例进行说明。指令开发  表单...

2018-05-16 20:51:00 141

转载 Angular使用总结 --- 模版驱动表单

  表单的重要性就不多说了,Angular支持表单的双向数据绑定,校验,状态管理等,总结下。获取用户输入 1 <div class="container-fluid login-page"> 2 <h1>Angular表单</h1> 3 <form class="login-area"> 4 <...

2018-05-05 01:22:00 113

转载 记录cacl()函数中使用scss变量不生效的问题

问题  使用cacl()动态计算元素的高度,运算中包含一个scss变量。如下: height: calc(100% - $ws-header-height);  在浏览器中发现并没有达到预期效果,scss变量没有被解析。如下:解决  使用scss的插值语句 #{} height: calc(100% - #{$ws-header-heig...

2018-05-03 16:13:00 991

转载 Angular 和 Vue 使用的对比总结 -- 脚手架

前言  之前是用Vue的,现在由于工作原因,开始使用Angular。分别是Vue2和Angular5入的坑。只是从使用上来对比总结,加深记忆,避免混淆。什么 ? 你问实现原理的异同及优劣? 本宝宝还在努力学习中,也许有生之年你可以看到分析贴。 不管用什么框架,创建项目都是第一步。发展到现在,Angular 和 Vue 都有官方的脚手架用来快捷的创建和配置项目。...

2018-04-24 09:03:00 125

转载 angular中使用echart遇到的获取容器高度异常的问题记录

问题  在使用echart去创建图表时,发现图表只占了容器的一个角落,如图,并没有充满容器。  第一反应是容器元素的样式有问题,于是我把容器的宽高都改为px指定的(之前是百分比设定的,查询资料发现说echart容器宽高要明确指定),修改之后,还是和上面一样的展示,依旧有问题。定位  于是我想是不是渲染图表时,获取到的容器元素的高度有问题,代码中我是在ngAfterVi...

2018-04-15 11:49:00 172

转载 生成指定范围的时间列表

遇到一个场景,需要拿到指定时间范围内的每一天,满足格式"YYYYMMDD",简单的功能,简单的思路准备 date对象有很多的方法,用到了以下:  new date ()生成date对象,可以直接指定年月日等,new date(year,month,day)  getFullYear() 返回date对象中的年份  getMonth() 返回date对象中的...

2018-03-19 12:16:00 149

转载 .gitignore总结

  git进行管理时,.gitignore是必不可少的,可以指定不需要提交到仓库的资源。最好在git init之后就创建 .gitignore文件,这是个好习惯,常用的配置及说明如下:    转载于:https://www.cnblogs.com/shapeY/p/8507927.html...

2018-03-05 11:09:00 81

转载 nodejs爬虫初试---superagent和cheerio

前言  早就听过爬虫,这几天开始学习nodejs,写了个爬虫 demo ,爬取 博客园首页的文章标题、用户名、阅读数、推荐数和用户头像,现做个小总结。  使用到这几个点:  1、node的核心模块-- 文件系统  2、用于http请求的第三方模块 -- superagent  3、用于解析DOM的第三方模块 -- cheerio  几个模块详细的讲解及API请到...

2018-03-05 00:29:00 152

转载 非首屏图片延时加载

目标  减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载。思路  想要实现以上的目标,有几个地方需要思考。  1、如何判断哪些图片需要立即加载,哪些可以晚些再加载?  2、如何控制图片在指定的时候加载?    对于第一个问题,页面打开就会被用户看到的图片肯定需要立即加载,...

2018-01-05 17:12:00 76

转载 absolute和relative元素 设置百分比宽高的差异

  一般元素在页面所占的空间包括:magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时,却是不同的结果。demo  用如下小demo测试: <aside class="container"> <div class="test"...

2017-12-07 21:13:00 108

转载 自定义事件

前言  除了浏览器提供的原生事件外,有时我们还需要自定义事件以满足特定的需求,比如小模块之间的通信,传递信息等。JavaScript提供了几种自定义事件的方式:    1.Event()构造函数, 创建一个新的事件对象Event    2.CustomEvent()创建一个自定义事件    3.document.createEvent()创建一个新的事件(...

2017-11-29 23:34:00 30

转载 formData实现图片上传

前言  在 上一篇已经实现了图片预览,那么如何上传图片呢?有两种思路:  1、将图片转化为dataURL(base64),这样就成为了一串字符串,再传到服务端。不过这样缺点很多,数据量比转换之前增加1/3,而且会增加了存储开销(如果存在数据库,就多了访问数据库;如果解析成图片再存储,就多了解析的开销)。所以这样方式不可取。  2、使用formData对象进行上传。For...

2017-11-27 11:43:00 509

转载 input[type='file']样式美化及实现图片预览

前言  上传图片是常见的需求,多使用input标签。本文主要介绍 input标签的样式美化 和 实现图片预览。  用到的知识点有:    1、input标签的使用    2、filelist对象 和 file对象    3、fileReader对象样式美化  原生的input标签样式单一,且在不同浏览器下的表现还不一致。所以为了美观和统一,我们需要自定义inp...

2017-11-24 21:10:00 546

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除