自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

转载 深入浅出Redux-----react-redux

前言本文不会拿redux、react-redux等一些react的名词去讲解,然后把各自用法举例说明,这样其实对一些react新手或者不太熟悉redux模式的开发人员不够友好,他们并不知道这样使用的原因。本文通过一个简单的例子展开,一点点自己去实现一个redux+react-redux,让大家充分...

2018-05-21 16:04:28 2555 0

原创 JavaScript设计模式-----发布订阅模式

1.发布订阅模式的定义:发布订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖于他的对象都将得到通知。2.发布订阅模式的通用实现:3.一个真实的例子:ajax异步请求获取用户的登陆信息后,渲染到各个板块,使用这个模式可以解耦合,各个模块自行订阅登陆成功...

2018-04-15 10:58:25 93 0

原创 前端HTML5-----Doctype

HTML中 的Doctype 关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的,每次页面加载时,浏览器并不会下载DTD 并检查合法性,只有当手动校验页面时才启用。 决定浏览...

2018-08-20 10:49:04 97 0

原创 浏览器渲染原理

浏览器工作大流程:   1)浏览器会解析三个东西: 一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS,解析CSS会产生CSS规则树。 Javascript,脚本,主要是通过DOM API和CSSOM...

2018-08-19 09:58:04 634 0

转载 JavaScript底层-----深拷贝与浅拷贝

【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能...

2018-07-23 17:26:32 404 0

原创 前端之HTML5-----拖拽

1.浏览器支持:Internet Explorer 9 、Firefox、Opera 12、chrome、Safari52.拖拽API的相关函数:被拖动的源对象可以触发的事件:1.ondragstart:源对象开始被拖动2.ondrag: 源对象被拖动过程中(鼠标可能在移动也可能未移动)3.ond...

2018-07-06 13:41:46 1193 0

原创 前端之HTML5-----音频和视频

1.HTML5简介:新特性:用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线储存的更好支持新的特殊内容元素比如article、footer、header、nav、section新的表单控件,比如calendar、data、time、email、url、search浏览器...

2018-07-05 14:39:57 1914 0

原创 前端面试-----HTTP协议

HTTP协议的主要特点:简单快速,灵活,无连接,无状态HTTP报文的组成部分:请求报文:请求行:请求方法  URL地址  协议名称或版本号                 请求头:   键值对  服务端据此获取客户端的信息                 空行:      分隔请求头和请求体   ...

2018-06-19 11:15:26 321 0

原创 前端面试-----DOM事件类

DOM事件的级别:DOM0 : element.onclick = function(){}DOM2 : element.addEventListener('click', function(){}, false)DOM3 : element.addEventListener(...

2018-06-17 22:05:16 201 0

原创 前端面试-----CSS盒模型

标准模型和IE模型:box-sizing: content-box  标准模型box-sizing: border-box  IE模型JS如何设置获取盒模型对应的宽和高:内敛属性:dom.style.width.height获取渲染后的属性:dom.currentStyle.width/heigh...

2018-06-17 21:17:42 219 0

原创 前端面试-----页面布局

题目:假设高度已知,请写出三栏布局,其中左栏,右栏宽度各为300px,中间自适应:1.浮动解决方案:2.绝对定位解决方案:3.flexbox解决方案:4.表格布局:5.网格布局:他们的优缺点分析:浮动布局: 脱离文档流但兼容性好绝对定位: 脱离文档流导致子元素也脱离文档流但快捷flex布局: 较完...

2018-06-16 10:38:29 828 0

原创 前端布局-----Grid布局

1.什么是网格:1.固定的位置和弹性的轨道的大小:可以使用固定的轨道尺寸创建网格,比如使用像素单位,也可以使用比如百分比或者专门为此目的创建的新单位fr来创建弹性尺寸的网格。2.元素位置:可使用行号行名来标定一个网格区域来精确定位元素2.网格容器:我们通过在元素上声明display: grid或者...

2018-06-15 10:37:34 393 0

原创 前端布局-----flex布局

1.flex布局是什么:flex布局意为弹性布局,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局。设为flex布局后,子元素的float,clear,vertical-align属性将失效2.容器的属性:1.flex-direction:决定主轴的方向2.flex-wrap属性...

2018-06-14 21:44:07 493 0

转载 编码规范-----react

基本规范原则上每个文件只写一个组件, 多个无状态组件可以放在单个文件中. eslint: react/no-multi-comp.推荐使用 JSX 语法编写 React 组件, 而不是 React.createElement创建组件的三种方式Class vs React.createClass v...

2018-05-26 13:58:06 354 0

原创 前端框架之React-----CSS Module

在react开发中会遇到一系列css的相关问题:1.全局污染:css使用全局选择器的机制来设置样式,样式可能被错误覆盖2.命名混乱:为了避免全局污染,为了避免样式冲突,容易使命名混乱3.依赖管理不彻底:组件应该相互独立,引入一个组件应该只引入它所需要的css4.无法共享变量:复杂组件要使用Java...

2018-05-25 16:00:12 214 0

原创 前端框架之React-----事件系统

1.事件委派:react不是把事件函数绑定到真实的节点上,而是把所有事件绑定到结构的最外层,使用一个统一的监听器,这个事件监听器上维持了一个映射来保持组件内部的事件监听和处理函数。当组件挂载或卸载时,只是在这个统一的事件监听器上插入或删除一些对象,当事件发生时,首先被这个统一的事件监听器处理,然后...

2018-05-25 11:05:42 168 0

原创 JavaScript性能优化-----循环性能

1.减少对象成员及数组项的查找次数:只查找一次属性,并把值存储到一个局部变量,然后在控制条件中使用这个变量2.颠倒数组的顺序提高性能:通常数组项的顺序与所执行的任务无关,可以从最后一项开始处理。3.减少迭代次数: Duffs Device循环体展开技术,减少迭代次数能获得更加显著的性能提升...

2018-05-13 11:06:36 216 0

原创 JavaScript设计模式-----模板方法模式

1.模板方法模式的定义和组成:假如我们有一些平行的子类,各个子类之间有一些相同的行为,也有一些不同的行为,如果相同和不同的行为都混合在各个子类的实现中,说明这些相同的行为会在各个子类中重复出现。但实际上,相同的行为可以被搬移到另一个单一的地方,模板方法模式就是为了解决这个问题而生的,在模板方法模式...

2018-05-12 16:08:36 71 0

原创 深入浅出Redux

1.redux第一原则:所有在应用中的改变,包括数据和UI状态都包含在单一的对象里,我们把他称为状态或者状态树2.redux第二原则:状态树是只读的,你不能修改或者对他进行写入操作,唯一能改变树的方式就是分发一个动作,一个动作就是一个普通的JavaScript对象,他以最简单的方式描绘了应用里面发...

2018-05-12 14:15:28 100 0

原创 JavaScript设计模式-----组合模式

1.组合模式的定义:组合模式就是用小的子对象来构建更大的对象,而这些小的对象本身也许是由更小的”孙对象“构成2.组合模式的用途:组合模式将对象组合成树形结构,以表示”部分-整体“的层次结构。除了用来表示树形结构之外,组合模式的另一个好处是通过对象的多态性表示,使得用户对单个对象和组合对象的使用具有...

2018-05-05 14:16:18 99 0

原创 JavaScript性能优化-----数据存取

1.存储位置:可以通过改变数据的存储位置来获得最佳的读写性能,数据存储的位置信息关系到代码执行过程中数据的检索速度。访问字面量和局部变量的速度最快,相反,访问数组元素和对象成员相对较慢。2.管理作用域:在函数执行过程中,每遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取存取数据,搜索过程从...

2018-04-23 11:30:26 69 0

原创 JavaScript性能优化-----加载和执行

多数浏览器使用单一进程来处理用户界面刷新和JavaScript脚本的执行,所以同一时刻只能做一件事。JavaScript执行时间耗时越久,浏览器等待响应的时间就越长。无论当前的JavaScript代码是内嵌的还是包含在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。1.脚本位置:由于脚本...

2018-04-20 11:05:34 107 0

原创 JavaScript设计模式-----命令模式

1.命令模式的应用场景:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么,此时希望用一种松耦合的方式来设计软件,使得请求的发送者和请求的接收者能够消除彼此之间的耦合关系。2.命令模式的实现:命令模式将过程式的请求封装在command对象的execute方法里,...

2018-04-17 16:58:42 85 0

原创 JavaScript设计模式-----迭代器模式

1.迭代器模式的定义:迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示,迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式后,即不用关心对象的内部构造,也可以按顺序访问其中的每个元素。2.内部迭代器和外部迭代器:使用迭代器判断两个数组里元素的...

2018-04-12 10:28:44 57 0

原创 JavaScript设计模式-----代理模式

1.代理模式的定义:代理模式是为一个对象提供一个代用品或占位符,以便控制对他的访问保护代理,代理B能帮A过滤掉一些请求。虚拟代理:把一些开销很大的对象延迟到真正需要它的时候才去创建2.虚拟代理实现图片的预加载:在开发中图片预加载是一种技术,先用一张loading的图片站位,然后用异步的方式加载图片...

2018-04-10 20:07:51 75 0

原创 前端框架之React-----jsx

1.简介:jsx是xml的JavaScript的扩展,react里面用的也就是jsx2.jsx语法:使用一个父节点包裹:    jsx中不能一次性返回零散的多个节点,如果有多个节点要包含在一个节点中注释:    {/*          注释              */}样式 : 事件 : 循...

2018-03-10 11:51:43 137 0

原创 前端工具的使用-----webpack打包

1.webpack简介由于浏览器解析JavaScript时,没有实现JavaScript的模块化,也就是如果一个文件想给另外的文件暴露一部分数据,或者一个变量,他只能将他定义在全局作用域下。但是随着文件的增多,可能导致全局变量的污染,或者冲突。在服务器端node就能解决这个问题,webpack的作...

2018-03-09 11:44:34 623 0

原创 前端工具的使用-----npm

1.简介npm是一个包管理工具,运行用户能从npm服务器下载别人编写的第三方包到本地使用,也可以将自己的第三方包上传到npm服务器供别人使用,可通过npm -v来测试是否安装成功。2.npm的使用初始化npm环境   :    切换到目标目录 使用命令npm  init -y 安装需要的包  : ...

2018-03-08 10:16:53 143 0

原创 JavaScript设计模式-----策略模式

1.策略模式的定义:定义一系列的算法,将他们一个个封装起来,并且使他们可以互相替换,他的目的是将算法的使用和算法的实现分离开,通俗的讲就是:定义一系列算法,将他们各自封装成策略类,算法被封装在策略内部的方法里,在客户对context发起请求时,context总是把请求委托给这些策略对象中间的某一个...

2018-03-07 10:22:19 83 0

原创 前端工具的使用-----git

1.git简介由于完成一个项目需要多次更改文件内容,但每次更改可能都不是完全正确的,想回到最起初的修改前的状态,并不能实现,但是可以通过git的版本控制实现,(每添加一个节点,就相当与留下一个可供更改的节点)git也能远程管理我们的代码,就不用担心代码遗失,git也能方便团队合作开发项目。2.gi...

2018-03-06 20:57:15 514 0

原创 前端面试-----JavaScript内置函数

1.Date2.mathMath.random()3.数组APIforEach 遍历所有元素every 判断所有元素是否都满足条件some 判断是否至少有一个元素符合条件sort 排序map对元素重新组装,生成新数组filter过滤符合的条件...

2018-02-24 16:29:39 119 0

原创 前端面试-----JavaScript异步和单线程

JavaScript是单线程语言,但是ajax,事件监听是异步的,那么异步是怎么实现的呢(同步会阻塞代码的运行,而异步不会)同步与异步执行第一行,打印100执行setTimeout后,传入setTimeout的函数会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事)由于定时了1秒,这个函数...

2018-02-24 15:47:06 221 0

原创 JavaScript设计模式 ----- 单例模式

单例模式:保证一个类只有一个实例,并提供一个访问他的全局变量访问点1.实现一个单例类不复杂,用一个变量来标识当前是否为这个类创建过实例,如果是,则在下次获取该例的实例时,直接返回之前创建过的对象。2.惰性单例在需要的时候再创建对象实例。...

2018-02-21 17:24:26 77 0

原创 前端面试-----JavaScript作用域与闭包

1.执行上下文相当于将a=undefined和函数声明提前2.this的指向3.作用域不像强类型语言一样,JavaScript没有块级作用域,只有函数和全局作用域4.闭包的应用(闭包的更多引用会在我的其他博客中慢慢写到)...

2018-02-19 22:37:36 180 0

原创 前端面试-----JavaScript中原型链与原型

1.构造函数2.五条原型原则    (1).所有的引用类型(数组,对象,函数)都具有对象特性,即可自由扩展属性(除了null以外)(2).所有的引用类型(数组,对象,函数),都有一个_proto_属性,属性值是一个普通的对象    (隐式原型)(3).所有的函数,都有一个prototype属性,属...

2018-02-19 20:37:51 2206 0

原创 前端面试-----JavaScript中变量类型与计算

1.按储存方式区分变量类型        引用类型   (变量相当于是一个指针,不同的变量都指向于相同的内存单元)    值类型   (每个变量指向的都是不同的内存)2.变量计算,强制类型转换    字符串拼接    == 运算符    何时使用===  何时使用==    除了这种情况,其余都写...

2018-02-18 22:08:15 167 0

原创 实现JavaScript中的分时函数

在短时间中在页面中添加大量的dom节点让浏览器出现卡顿,解决的方案可以将1秒钟创建1000个节点,改为200ms创建8个节点,这样就实现了分时函数 var timeChunk = function(arr, fn, count){//参数分别为传入的数据,执行的函数,每次执行的数量 var obj...

2018-02-07 14:03:51 122 0

原创 实现JavaScript函数节流

为了避免函数被触发的频率太高,便用函数节流来实现控制触发频率 var throttle = function(fn, interval){  var _self = fn;//保存需要运行的函数  var timer; //定时器  var firstTime = true;//用于判断是否第一...

2018-02-07 13:21:00 171 0

原创 实现JavaScript中uncurrying方法

Array.prototype的方法原本只能用来操作array对象,但用call和apply可以把任意对象当做this传入这个方法,从而实现泛化。 Function.prototype.uncurrying = function(){  var self = this;//保留this指针 re...

2018-02-04 13:37:08 72 0

原创 实现JavaScript中currying(函数柯里化)

currying:函数柯里化,俗称部分求值,一个curry函数首先接收一些参数,接收参数后,函数不会立即求值,而是继续返回一个函数,传入的参数在函数形成的闭包中保存,当真正需要求值时,之前的参数才会一次性用于求值。 var  currying = function(fn){  var args =...

2018-02-03 15:14:12 142 0

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