- 博客(43)
- 收藏
- 关注
RSS订阅
转载 深入浅出Redux-----react-redux
前言本文不会拿redux、react-redux等一些react的名词去讲解，然后把各自用法举例说明，这样其实对一些react新手或者不太熟悉redux模式的开发人员不够友好，他们并不知道这样使用的原因。本文通过一个简单的例子展开，一点点自己去实现一个redux+react-redux，让大家充分理解redux+react-redux出现的必要。预备知识在阅读本文之前，希望大家对以下知识点能提前有...
2018-05-21 16:04:28
3301
原创 JavaScript设计模式-----发布订阅模式
1.发布订阅模式的定义：发布订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知。2.发布订阅模式的通用实现：3.一个真实的例子：ajax异步请求获取用户的登陆信息后，渲染到各个板块，使用这个模式可以解耦合，各个模块自行订阅登陆成功后的消息事件，当登陆成功后，登陆模块只需要发布登陆成功的消息，而业务方接收到消息后，就会开始进行各自的...
2018-04-15 10:58:25
229
原创 前端HTML5-----Doctype
HTML中 的Doctype关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。 决定浏览器的呈现模式: 对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的...
2018-08-20 10:49:04
265
原创 浏览器渲染原理
浏览器工作大流程： 1）浏览器会解析三个东西：一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。CSS，解析CSS会产生CSS规则树。Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.2）解析完成后，浏览器引擎会通过DOM ...
2018-08-19 09:58:04
774
转载 JavaScript底层-----深拷贝与浅拷贝
【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子：let a=[0,1,2,3,4], ...
2018-07-23 17:26:32
556
原创 前端之HTML5-----拖拽
1.浏览器支持：Internet Explorer 9 、Firefox、Opera 12、chrome、Safari52.拖拽API的相关函数：被拖动的源对象可以触发的事件：1.ondragstart：源对象开始被拖动2.ondrag: 源对象被拖动过程中（鼠标可能在移动也可能未移动）3.ondragend：源对象被拖动结束...
2018-07-06 13:41:46
1978
原创 前端之HTML5-----音频和视频
1.HTML5简介：新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线储存的更好支持新的特殊内容元素比如article、footer、header、nav、section新的表单控件，比如calendar、data、time、email、url、search浏览器支持：最新版本的safari、chrome、Firefox以及opera支持某些HTML5特性。Int...
2018-07-05 14:39:57
2789
原创 前端面试-----HTTP协议
HTTP协议的主要特点：简单快速，灵活，无连接，无状态HTTP报文的组成部分：请求报文：请求行：请求方法 URL地址 协议名称或版本号 请求头: 键值对 服务端据此获取客户端的信息 空行: 分隔请求头和请求体 请求体: 通过请求体传值响应报文： 状态行： 说明所请求的资源情况 ...
2018-06-19 11:15:26
458
原创 前端面试-----DOM事件类
DOM事件的级别：DOM0 : element.onclick = function(){}DOM2 : element.addEventListener('click', function(){}, false)DOM3 : element.addEventListener('keyup', function(){}, false)DOM事件模型:捕获和冒泡DOM事件流描述DOM事件捕获的具体流...
2018-06-17 22:05:16
353
原创 前端面试-----CSS盒模型
标准模型和IE模型：box-sizing: content-box 标准模型box-sizing: border-box IE模型JS如何设置获取盒模型对应的宽和高：内敛属性：dom.style.width.height获取渲染后的属性：dom.currentStyle.width/height(IE支持) window.getCo...
2018-06-17 21:17:42
331
原创 前端面试-----页面布局
题目：假设高度已知，请写出三栏布局，其中左栏，右栏宽度各为300px，中间自适应：1.浮动解决方案：2.绝对定位解决方案：3.flexbox解决方案：4.表格布局：5.网格布局:他们的优缺点分析：浮动布局： 脱离文档流但兼容性好绝对定位： 脱离文档流导致子元素也脱离文档流但快捷flex布局： 较完美，ie8不兼容表格布局： 兼容性好...
2018-06-16 10:38:29
1098
原创 前端布局-----Grid布局
1.什么是网格：1.固定的位置和弹性的轨道的大小：可以使用固定的轨道尺寸创建网格，比如使用像素单位，也可以使用比如百分比或者专门为此目的创建的新单位fr来创建弹性尺寸的网格。2.元素位置：可使用行号行名来标定一个网格区域来精确定位元素2.网格容器：我们通过在元素上声明display： grid或者display：inline-grid来创建一个网格容器。所有的直系子元素将成为网格元素。3.网格轨道...
2018-06-15 10:37:34
651
原创 前端布局-----flex布局
1.flex布局是什么：flex布局意为弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。设为flex布局后，子元素的float，clear，vertical-align属性将失效2.容器的属性：1.flex-direction：决定主轴的方向2.flex-wrap属性：默认情况下，项目都排在一条线上，属性定义如果一条轴线排不下，如何换行...
2018-06-14 21:44:07
988
转载 编码规范-----react
基本规范原则上每个文件只写一个组件, 多个无状态组件可以放在单个文件中. eslint: react/no-multi-comp.推荐使用 JSX 语法编写 React 组件, 而不是 React.createElement创建组件的三种方式Class vs React.createClass vs stateless如果你的组件有内部状态或者是refs, 推荐使用 class extends R...
2018-05-26 13:58:06
517
原创 前端框架之React-----CSS Module
在react开发中会遇到一系列css的相关问题：1.全局污染：css使用全局选择器的机制来设置样式，样式可能被错误覆盖2.命名混乱：为了避免全局污染，为了避免样式冲突，容易使命名混乱3.依赖管理不彻底：组件应该相互独立，引入一个组件应该只引入它所需要的css4.无法共享变量：复杂组件要使用JavaScript和css共同来处理样式，就会造成有些变量冗余，而预编译语言不能提供跨JavaScript和...
2018-05-25 16:00:12
533
原创 前端框架之React-----事件系统
1.事件委派：react不是把事件函数绑定到真实的节点上，而是把所有事件绑定到结构的最外层，使用一个统一的监听器，这个事件监听器上维持了一个映射来保持组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象，当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。...
2018-05-25 11:05:42
310
原创 JavaScript性能优化-----循环性能
1.减少对象成员及数组项的查找次数：只查找一次属性，并把值存储到一个局部变量，然后在控制条件中使用这个变量2.颠倒数组的顺序提高性能：通常数组项的顺序与所执行的任务无关，可以从最后一项开始处理。3.减少迭代次数： Duffs Device循环体展开技术,减少迭代次数能获得更加显著的性能提升...
2018-05-13 11:06:36
417
原创 JavaScript设计模式-----模板方法模式
1.模板方法模式的定义和组成：假如我们有一些平行的子类，各个子类之间有一些相同的行为，也有一些不同的行为，如果相同和不同的行为都混合在各个子类的实现中，说明这些相同的行为会在各个子类中重复出现。但实际上，相同的行为可以被搬移到另一个单一的地方，模板方法模式就是为了解决这个问题而生的，在模板方法模式中，子类的实现中的相同部分被上移到父类中，而将不同的部分留待子类来实现。这也很好的体现了泛化的思想。2...
2018-05-12 16:08:36
152
原创 深入浅出Redux
1.redux第一原则：所有在应用中的改变，包括数据和UI状态都包含在单一的对象里，我们把他称为状态或者状态树2.redux第二原则：状态树是只读的，你不能修改或者对他进行写入操作，唯一能改变树的方式就是分发一个动作，一个动作就是一个普通的JavaScript对象，他以最简单的方式描绘了应用里面发生的改变，无论是由网络请求还是用户交互发起的数据，要想进入到Redux应用内部，都只能通过动作来实现。...
2018-05-12 14:15:28
228
原创 JavaScript设计模式-----组合模式
1.组合模式的定义：组合模式就是用小的子对象来构建更大的对象，而这些小的对象本身也许是由更小的”孙对象“构成2.组合模式的用途：组合模式将对象组合成树形结构，以表示”部分-整体“的层次结构。除了用来表示树形结构之外，组合模式的另一个好处是通过对象的多态性表示，使得用户对单个对象和组合对象的使用具有一致性。3.更强大的宏命令：这个例子中，基本对象可以被组合成更复杂的组合对象，组合对象又可以被组合，这...
2018-05-05 14:16:18
211
原创 JavaScript性能优化-----数据存取
1.存储位置：可以通过改变数据的存储位置来获得最佳的读写性能，数据存储的位置信息关系到代码执行过程中数据的检索速度。访问字面量和局部变量的速度最快，相反，访问数组元素和对象成员相对较慢。2.管理作用域：在函数执行过程中，每遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取存取数据，搜索过程从作用域链头部开始，也就是当前运行函数的活动对象。在执行环境的作用域链中，一个标示符所在的位置越深，他的...
2018-04-23 11:30:26
235
原创 JavaScript性能优化-----加载和执行
多数浏览器使用单一进程来处理用户界面刷新和JavaScript脚本的执行，所以同一时刻只能做一件事。JavaScript执行时间耗时越久，浏览器等待响应的时间就越长。无论当前的JavaScript代码是内嵌的还是包含在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。1.脚本位置：由于脚本会阻塞页面其他资源的下载，因此推荐将所有的<script>标签尽可能放到<body&...
2018-04-20 11:05:34
223
原创 JavaScript设计模式-----命令模式
1.命令模式的应用场景：有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求的发送者和请求的接收者能够消除彼此之间的耦合关系。2.命令模式的实现：命令模式将过程式的请求封装在command对象的execute方法里，通过封装方法的调用，我们可以把运算块包装成形。command对象可以被四处传递，所以在调用命令时，cl...
2018-04-17 16:58:42
173
原创 JavaScript设计模式-----迭代器模式
1.迭代器模式的定义：迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示，迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式后，即不用关心对象的内部构造，也可以按顺序访问其中的每个元素。2.内部迭代器和外部迭代器：使用迭代器判断两个数组里元素的值是否相等内部迭代器：内部迭代器在调用的时候非常方便，外界不用关心内部迭代器的实现，但由于内部迭代器的...
2018-04-12 10:28:44
151
原创 JavaScript设计模式-----代理模式
1.代理模式的定义：代理模式是为一个对象提供一个代用品或占位符，以便控制对他的访问保护代理，代理B能帮A过滤掉一些请求。虚拟代理：把一些开销很大的对象延迟到真正需要它的时候才去创建2.虚拟代理实现图片的预加载：在开发中图片预加载是一种技术，先用一张loading的图片站位，然后用异步的方式加载图片，等图片加载好了把他填充到img节点里，这种场景就适合使用虚拟代理3.代理的意义：面向对象设计的原则：...
2018-04-10 20:07:51
174
原创 前端框架之React-----jsx
1.简介：jsx是xml的JavaScript的扩展，react里面用的也就是jsx2.jsx语法：使用一个父节点包裹： jsx中不能一次性返回零散的多个节点，如果有多个节点要包含在一个节点中注释： {/* 注释 */}样式 : 事件 ： 循环 ： 判断 ： jsx使用判断一般会用到三元表达式（表达式也是放在{}中的）...
2018-03-10 11:51:43
275
原创 前端工具的使用-----webpack打包
1.webpack简介由于浏览器解析JavaScript时，没有实现JavaScript的模块化，也就是如果一个文件想给另外的文件暴露一部分数据，或者一个变量，他只能将他定义在全局作用域下。但是随着文件的增多，可能导致全局变量的污染，或者冲突。在服务器端node就能解决这个问题，webpack的作用就是把node里面的代码变成浏览器能够编译的代码。2.webpack的安装与配置配置npm环境切换到...
2018-03-09 11:44:34
874
原创 前端工具的使用-----npm
1.简介npm是一个包管理工具，运行用户能从npm服务器下载别人编写的第三方包到本地使用，也可以将自己的第三方包上传到npm服务器供别人使用，可通过npm -v来测试是否安装成功。2.npm的使用初始化npm环境 ： 切换到目标目录 使用命令npm init -y 安装需要的包 ： npm install 要安装的包更新当前的包 ： npm update 要更新的包...
2018-03-08 10:16:53
245
原创 JavaScript设计模式-----策略模式
1.策略模式的定义：定义一系列的算法，将他们一个个封装起来，并且使他们可以互相替换，他的目的是将算法的使用和算法的实现分离开，通俗的讲就是：定义一系列算法，将他们各自封装成策略类，算法被封装在策略内部的方法里，在客户对context发起请求时，context总是把请求委托给这些策略对象中间的某一个进行计算2.JavaScript版的策略模式我们可以用一个名为calculate的函数来计算每个人的奖...
2018-03-07 10:22:19
164
原创 前端工具的使用-----git
1.git简介由于完成一个项目需要多次更改文件内容，但每次更改可能都不是完全正确的，想回到最起初的修改前的状态，并不能实现，但是可以通过git的版本控制实现，（每添加一个节点，就相当与留下一个可供更改的节点）git也能远程管理我们的代码，就不用担心代码遗失，git也能方便团队合作开发项目。2.git的配置(windows)配置用户 ： git config --global user.name "...
2018-03-06 20:57:15
791
原创 前端面试-----JavaScript内置函数
1.Date2.mathMath.random()3.数组APIforEach 遍历所有元素every 判断所有元素是否都满足条件some 判断是否至少有一个元素符合条件sort 排序map对元素重新组装，生成新数组filter过滤符合的条件...
2018-02-24 16:29:39
279
原创 前端面试-----JavaScript异步和单线程
JavaScript是单线程语言，但是ajax，事件监听是异步的，那么异步是怎么实现的呢(同步会阻塞代码的运行，而异步不会)同步与异步执行第一行，打印100执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）由于定时了1秒，这个函数会被封闭起来，在一秒后解封执行最后一行，打印300带程序执行完毕之后，会立马看没有储存起来的要执行的发...
2018-02-24 15:47:06
399
原创 JavaScript设计模式 ----- 单例模式
单例模式：保证一个类只有一个实例，并提供一个访问他的全局变量访问点1.实现一个单例类不复杂，用一个变量来标识当前是否为这个类创建过实例，如果是，则在下次获取该例的实例时，直接返回之前创建过的对象。2.惰性单例在需要的时候再创建对象实例。...
2018-02-21 17:24:26
167
原创 前端面试-----JavaScript作用域与闭包
1.执行上下文相当于将a=undefined和函数声明提前2.this的指向3.作用域不像强类型语言一样，JavaScript没有块级作用域，只有函数和全局作用域4.闭包的应用（闭包的更多引用会在我的其他博客中慢慢写到）...
2018-02-19 22:37:36
323
原创 前端面试-----JavaScript中原型链与原型
1.构造函数2.五条原型原则 (1).所有的引用类型（数组，对象，函数）都具有对象特性，即可自由扩展属性（除了null以外）(2).所有的引用类型（数组，对象，函数），都有一个_proto_属性，属性值是一个普通的对象 （隐式原型）(3).所有的函数，都有一个prototype属性，属性值也是一个普通的对象(4).所有的引用类型（数组，对象，函数），_proto_属性值值向他构造函数的...
2018-02-19 20:37:51
2588
原创 前端面试-----JavaScript中变量类型与计算
1.按储存方式区分变量类型 引用类型 (变量相当于是一个指针，不同的变量都指向于相同的内存单元) 值类型 (每个变量指向的都是不同的内存)2.变量计算，强制类型转换 字符串拼接 == 运算符 何时使用=== 何时使用== 除了这种情况，其余都写===3.js内置函数 (数据封装类对象)Object Function Array S...
2018-02-18 22:08:15
276
原创 实现JavaScript中的分时函数
在短时间中在页面中添加大量的dom节点让浏览器出现卡顿，解决的方案可以将1秒钟创建1000个节点，改为200ms创建8个节点，这样就实现了分时函数var timeChunk = function(arr, fn, count){//参数分别为传入的数据，执行的函数，每次执行的数量var obj;var t;var len = arr.length;var start = fun
2018-02-07 14:03:51
310
原创 实现JavaScript函数节流
为了避免函数被触发的频率太高，便用函数节流来实现控制触发频率var throttle = function(fn, interval){ var _self = fn;//保存需要运行的函数 var timer; //定时器 var firstTime = true;//用于判断是否第一次调用return function(){ var args = argume
2018-02-07 13:21:00
283
原创 实现JavaScript中uncurrying方法
Array.prototype的方法原本只能用来操作array对象，但用call和apply可以把任意对象当做this传入这个方法，从而实现泛化。Function.prototype.uncurrying = function(){ var self = this;//保留this指针return function(){ var obj = Array.prototype.sh
2018-02-04 13:37:08
177
原创 实现JavaScript中currying(函数柯里化)
currying：函数柯里化，俗称部分求值，一个curry函数首先接收一些参数，接收参数后，函数不会立即求值，而是继续返回一个函数，传入的参数在函数形成的闭包中保存，当真正需要求值时，之前的参数才会一次性用于求值。var currying = function(fn){ var args = [];//实现函数闭包，保存args的值 return function(){ if
2018-02-03 15:14:12
370
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人