- 博客(26)
- 收藏
- 关注
RSS订阅
原创 React组件的数据——prop和state
React组件数据分为两种，prop和state，无论prop或state改变，都可能引发组件的重新渲染，那么，设计一个组件的时候，什么时候选择用prop什么时候选择用state呢？其实原则很简单，prop是组件的对外接口，state是组件的内部状态，对外用prop，内部用state。一、React中的prop在React中，prop是从外部传递给组件的数据，一个React组件通过定义自己能够接受...
2018-05-07 22:09:36
2562
原创 实例解读DOM结点操作
DOM提供了丰富的方法来支持对结点的基本操作，即创建、添加、修改和删除结点。一、创建元素结点document.createElement('div'); //创建一个div元素 当使用createElement方法创建元素后，元素并没有被立即加入到当前的DOM树中，而是被存放在内存中。只有在使用添加结点的相关方法进行操作，才能真正将元素加入DOM树中。二、创建文本节点 使用createTe...
2018-05-31 17:08:52
503
原创 实例解读DOM结点的引用
DOM，Document Object Module文档对象模型，今天主要介绍DOM中对结点的引用操作。根据id属性引用结点根据name属性引用结点根据标签名引用结点引用父结点引用子结点引用相邻的结点一、根据id属性引用结点 通过document对象的getElementById方法来查找拥有指定id属性值的结点。<!DOCTYPE html><html lang="en"&...
2018-05-31 11:39:31
661
原创 想成为“牛人”的你，知道这些“壁垒”吗？——论技术壁垒、时间壁垒和成果壁垒
编者按:此文是Dian团队新掌门钟国辉老师在11月29日Dian团队例会上的讲话，因公外出的刘玉老师返校看到讲话记录后，给予了极高评价，强烈推荐团队简报全文刊登，并建议所有新老队员都应认真细读，必有很大启发。以下便是经钟国辉老师本人审阅后的讲话全文。--------------------------------------------------------------------- 我相...
2018-05-26 21:43:15
4647
原创 JavaScript中的深拷贝和浅拷贝
在说深拷贝与浅拷贝前，我们先看两个简单的案例：//案例1var num1 = 1, num2 = num1;console.log(num1) //1console.log(num2) //1num2 = 2; //修改num2console.log(num1) //1console.log(num2) //2//案例2var obj1 = {x: 1, y: 2}, obj2 = obj1;co...
2018-05-26 21:10:59
240
转载 上帝视角解读MVC、MVP、MVVM
大概是二三十年前， 人类逐渐从命令行界面时代走出来，进化到了GUI时代。注： GUI（Graphic User Interface），即图形用户接口。（一个命令行程序）（一个带有图形界面的桌面应用程序 ，自己画的，有点丑啊）每当人类努力地开发新的桌面GUI程序的时候， 至少要搞定下面几类工作：1. 界面（以及界面中元素的）布局。这是一件挺费劲的工作， 要尽可能地美观漂亮，要不然就卖不出去。2. 界...
2018-05-26 19:58:26
244
转载 JS中哪些操作会造成内存泄露？
内存泄漏：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。1、JS的回收机制JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的...
2018-05-26 18:56:16
2940
转载 Node.JS面试题
Node.js面试题列表什么是错误优先的回调函数？如何避免回调地狱？如何用Node来监听80端口？什么是事件循环？哪些工具可以用来保证一致的编程风格？运算错误与程序员错误的区别？使用NPM有哪些好处？什么是stub？举个使用场景？什么是测试金字塔？对于HTTP API，如何利用测试金字塔？你最喜欢的HTTP框架，并说明原因？ 现在，我们依次来解答这些问题吧。 什么是错误优先的回调函数？ 错误...
2018-05-26 17:10:43
4299
原创 浅谈MVC和MVVM
面试中被问到MVVM，结果只是知道有这个东西，具体原理不清楚，下来在网上找了各位大神的讲解，总结如下，希望能对大家有帮助。一、MVCMVC框架是业界广泛接受的一种前端应用框架类型，这种框架把应用分为三个部分：Model（模型）负责管理数据，大部分业务逻辑也应该放在Model中；View（视图）负责渲染用户界面，应该避免在View中涉及业务逻辑；Controller（控制器）负责接受用户输入...
2018-05-23 11:22:25
571
原创 彻底弄懂React-Redux组件通信
为了方便使用，Redux的作者封装了一个React专用的库React-Redux，讲解之前，先来了解一下什么是容器组件和傻瓜组件？ React-Redux把组件分为容器组件和傻瓜组件（UI组件）。一、容器组件容器组件，负责和Redux Store打交道的组件，处于外层。功能：和Redux Store打交道，读取Store的状态，用于初始化组件的状态，同时还要监听Store的状态改变；...
2018-05-22 21:06:18
4702
原创 从Flux到Redux，再到React-Redux
要想知道Flux是什么，我们先从MVC框架说起。在MVC（Model-View-Controller）的世界里，React相当于V（也就是View）部分，只涉及页面的渲染一旦涉及应用的数据管理部分，还是交给Model和Controller，不过，Flux并不是一个MVC框架，事实上，Flux认为MVC框架存在很大问题，它推翻了MVC框架，并用一个新的思维来管理数据流转。一、MVC框架的缺陷MVC框...
2018-05-22 11:30:14
934
原创 JSON与XML的区别
一、JSON JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，具有良好的可读性，便于快读编写，可在不同平台之间进行数据交换。二、XML XML（Extensible Markup Language），扩展标记语言，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。XML使用DTD...
2018-05-21 21:56:09
369
原创 JSONP跨域请求原理及示例
一、JSON和JSONP？ JSON（JavaScript Object Notation）和JSONP（JSON with Padding）虽然只有一个字母的差别，但其实根本不是一回事：JSON是一种轻量级的数据传输格式，而JSONP是一种依靠开发人员的聪明才智创造出来的一种非官方跨域数据交互协议。打个比喻：JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递...
2018-05-21 20:59:51
482
原创 浅析BFC原理及作用
一、常见布局模式在讲BFC之前，我们先来看一下常见的CSS三种布局模型：CSS中的三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）。详解在我的另一篇博文中讲到，CSS中的三种布局模型。二、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了...
2018-05-21 17:34:33
12205
1
原创 原生JavaScript实现div拖拽效果
实现思路：（1）首先改变被拖动元素的布局属性为“position：absolute”，其父框为“position：relative”；（2）捕捉鼠标事件“mousedown”、“mousemove”、“mouseup”；（3）当触发“mousedown”时，记录下当前鼠标在元素中的相对位置，_x，_y；（4）紧接着处理“mousemove”事件，通过改变元素的top和left属性来移动元素；（5）...
2018-05-19 21:16:25
1822
1
原创 AJAX的GET与POST请求方式的区别
在前端面试中，常常会问到GET与POST请求的区别，现简单总结如下：（1）GET请求将参数在URL后进行传递，POST请求则是作为HTTP消息的实体内容发送给Web服务器。（2）GET方式对传输的数据大小有限制，通常不能大于2KB，而POST方式传递的数据量要比GET大很多，理论上不受限制。（3）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，如账号密码...
2018-05-19 20:55:26
859
原创 CSS3渐变Gradients
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）-...
2018-05-17 10:30:50
331
原创 手把手教你使用Webpack打包React项目
什么是Webpack？ webpack是一个前端资源加载/打包工具，前端的常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码打包整合起来。先来认识一下webpack的基本配置现在开发搭建开发环境第一步：在react-music-player文件目录下，执行npm init创建package.json文件。这时，代码当中的配置文件就已生成啦：第二步：现在配置文件中...
2018-05-10 15:27:11
20894
1
原创 阿里巴巴2018实习生-前端开发工程师笔试题
今天晚上7点到8点刚经历过阿里的前端笔试，时间60分钟，总共10道选择（5道单选，5道多选），2道问答，1道编程。 不得不说阿里的门槛真高，看到选择题的时候就懵逼了，“这是啥这是啥？？”好多都没见过，可能我太菜啦，瞬间感觉知识于我就像宇宙于我般渺茫，后边继续加油吧，这次只当经历一把阿里大佬的考试，特来与大家一起分享，欢迎大家前来添加解析，一起交流学习~ 11、在Web开发中，通常我们...
2018-05-09 21:02:34
4437
1
原创 用css3实现求婚小动画
昨天在微信公众号中看到这一篇文章，瞬间觉得css太强大了，只要你想做，everything is possible！首先放张效果图然后一步步分析一下：首先是刚出现的新郎的动画.w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: toWoman 0.5s ease .5s both;}@keyframe...
2018-05-08 10:52:49
1154
原创 JavaScript实现用户登录验证进阶篇
最近刷到有关实现简单的用户登录验证的前端题，由于平时基础实践较少，大多使用框架，特总结此博客：一、先来看一段简单的用户登录验证：body{ text-align: center;}#content{ /*水平居中外盒子*/ display: inline-block; margin-top: 200px;}#login{ /*登录模块水平垂直居中*...
2018-05-08 10:25:25
4765
1
原创 详述React生命周期函数
React严格定义了组件的生命周期，分为如下三个过程：装载过程（Mounting）：也就是组件第一次在DOM树中渲染的过程；更新过程（Updating）：当组件重新渲染的过程；卸载过程（Unmounting）：组件从DOM中删除的过程。一、装载过程：我们先来看装载过程，当组件第一次被渲染的时候，依次调用的函数是如下这些：constructorgetInitialStategetDefaultPro...
2018-05-07 16:31:09
454
原创 详解TCP三次握手和四次挥手
TCP，即传输控制协议（Transmission Control Protocol），是一种面向连接的、可靠的、基于字节流的运输层协议。是专门为了在不可靠的互联网络上提供一个可靠的端到端字节流而设计的。每一次TCP连接都需要三个阶段：连接建立、数据传送和连接释放。“三次握手”就发生在连接建立阶段。一、TCP报文TCP报文格式图：上图中有几个字段需要重点介绍下： 序列号seq：占4个字节，用...
2018-05-03 10:09:29
347
原创 浅析JavaScript事件捕获与事件冒泡
一、什么是事件流？事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接收事件的顺序。一个事件被触发后，一般会有三个不同的阶段：捕获阶段、目标阶段和冒泡阶段。捕获阶段：从文档的根节点开始流到目标节点。——由外到内目标阶段：当到达目标节点时，进入目标阶段。——由内到外冒泡阶段：冒泡正好跟捕获的方向相反，它会沿着捕获的路径往回走，直至根节点。 1、一个完整的JS事件流是从w...
2018-05-02 17:11:28
243
原创 JavaScript经典排序算法——计数排序
计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。就是遍历数组记录数组下的元素出现过多次，然后把这个元素找个位置先安置下来，简单点说就是以原数组每个元素的值作为新数组的下标，而对应小标的新数组元素的值作为出现的次数，相当于是通过下标进行排序。动图演示： JavaScript代码实现：functio...
2018-05-02 11:21:21
1568
1
原创 JavaScript经典排序算法——归并排序
“归并”的意思是将两个或两个以上的有序表组合成一个新的有序表。假如初始序列含有n个记录，则可看成是n个有序的子序列，每个子序列的长度为1，然后两两归并，得到[n/2]（向上取整）个长度为2或1的有序子序列；再两两归并，……，如此重复，直到得到一个长度为n的有序序列为止，这种排序方法称为2-路归并排序。步骤解析：1、把长度为n的输入序列分成两个长度为n/2的子序列；2、对这两个子序列继续分为m/2的...
2018-05-02 10:26:18
1765
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人