1. promise有三个状态:等待,完成,拒绝
我的具体实现如下所示。
1 | // 判断变量否为function |
##
文艺青年的IT技术分享
我的具体实现如下所示。
1 | // 判断变量否为function |
##
Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),vdom是树状结构,其节点为vnode,vnode和浏览器DOM中的Node一一对应,通过vnode的elm属性可以访问到对应的Node。
vdom因为是纯粹的JS对象,所以操作它会很高效,但是vdom的变更最终会转换成DOM操作,为了实现高效的DOM操作,一套高效的虚拟DOM diff算法显得很有必要。
Vue的diff算法是基于snabbdom改造过来的,感兴趣的朋友可以选择查阅。
这是一张很经典的图,出自《React’s diff algorithm》,Vue的diff算法也同样,即仅在同级的vnode间做diff,递归地进行同级vnode的diff,最终实现整个DOM树的更新。那同级vnode diff的细节又是怎样的呢?正是本文所要讲的。
我们在下文中将使用这个简化的例子来讲述diff的过程
如上图的例子,更新前是1到10排列的Node列表,更新后是乱序排列的Node列表。罗列一下图中有以下几种类型的节点变化情况:
(1)、头部相同、尾部相同的节点:如1、10
(2)、头尾相同的节点:如2、9(处理完头部相同、尾部相同节点之后)
(3)、新增的节点:11
(4)、删除的节点:8
(5)、其他节点:3、4、5、6、7
简单的diff算法可以这样设计:
逐个遍历newVdom的节点,找到它在oldVdom中的位置,如果找到了就移动对应的DOM元素,如果没找到说明是新增节点,则新建一个节点插入。遍历完成之后如果oldVdom中还有没处理过的节点,则说明这些节点在newVdom中被删除了,删除它们即可。
仔细思考一下,几乎每一步都要做移动DOM的操作,这在DOM整体结构变化不大时的开销是很大的,实际上DOM变化不大的情况现实中经常发生,很多时候我们只需要变更某个节点的文本而已。
接下来我们看一下Vue的diff实现
上图例子中我画上了oldStart+oldEnd,newStart+newEnd这样2对指针,分别对应oldVdom和newVdom的起点和终点。起止点之前的节点是待处理的节点,Vue不断对vnode进行处理同时移动指针直到其中任意一对起点和终点相遇。处理过的节点Vue会在oldVdom和newVdom中同时将它标记为已处理(标记方法后文中有介绍)。Vue通过以下措施来提升diff的性能。
(一)、优先处理特殊场景
(1)、头部的同类型节点、尾部的同类型节点
这类节点更新前后位置没有发生变化,所以不用移动它们对应的DOM
(2)、头尾/尾头的同类型节点
这类节点位置很明确,不需要再花心思查找,直接移动DOM就好
处理了这些场景之后,一方面一些不需要做移动的DOM得到快速处理,另一方面待处理节点变少,缩小了后续操作的处理范围,性能也得到提升
(二)、“原地复用”
“原地复用”是指Vue会尽可能复用DOM,尽可能不发生DOM的移动。Vue在判断更新前后指针是否指向同一个节点,其实不要求它们真实引用同一个DOM节点,实际上它仅判断指向的是否是同类节点(比如2个不同的div,在DOM上它们是不一样的,但是它们属于同类节点),如果是同类节点,那么Vue会直接复用DOM,这样的好处是不需要移动DOM。再看上面的实例,假如10个节点都是div,那么整个diff过程中就没有移动DOM的操作了。
“原地复用”在Vue的官方文档中有提到,虽然带来了好处,但是也会产生一些问题,朋友们可以复习一下
https://cn.vuejs.org/v2/guide/list.html#key
https://cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素
more >>上周电话面试某游戏公司,开局第一个问题就是 圣杯布局与双飞翼,我以前看过,不过没放在心上,当面试官问我的时候,我只能想起 是左右定宽,中间自适应, 我知道有5种实现该布局的方式,但是不知道圣杯与双飞翼是哪一种,哎,回去看了这两个布局的资料,诶,发现,圣杯与双飞翼 是另外两种。
反正不管是圣杯还是双飞翼,最后结果都是如上图所示。
1 | <div class="container"> |
DOM上, 中间的放首位,然后是左边,右边。
操作步奏:
1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到)
2.middle部分 width:100%占满
3.此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%
4.这时left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,所以在外围container加上 padding:0 220px 0 200px
5.middle内容拉回来了,但left也跟着过来了,所以要还原,就对left使用相对定位 left:-200px 同理,right也要相对定位还原 right:-220px
6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px
由于middle 宽度100%
CSS 代码:
1 | .left, |
在父元素container 中通过设置 padding 值来显示left 与right。
父元素设置overflow:hidden,这个可是有讲究的,这是为了将整个块设置为BFC ,在计算BFC高度时,浮动元素也参与运算。
双飞翼布局是阿里提出来的,与 圣杯有以下三点区别
最近做了一个vue 的webapp项目 ,这不是重点,重点是 自己用cordova打包安卓APP了,部门也是用的cordova技术,去年就给自己定了一个技术积累开发任务,其中一个就是手机APP。
项目 简介:仿照好食期 手机 APP 做的 web 应用,包括商品展示,购物车添加,滑动刷新。前端页面框架使
用 vue,打包使用 webpack,后台使用 expess,数据来自好食期 APP。
项目已发布上线: http://vueappserver.catac.cn ,由于本项目 主要是为了实现webapp,所以 后台 完全是为了转发数据。
请求:axios
1 | 1. 下载文件 |
文件上传与下载
1 | 先在页面上写入文件上传按钮 |
原理:
1.给一个div,宽和高都为0的时候,盒子什么都没有看起来。为空白
2.给一个宽高为0的盒子给一遍像素给100px的上边,下边和右边,
1 | .jiao{ |
这样左边没有,就会缩成一个点
效果:
把上边框与下边框设置为透明时,
1 | .jiao{ |
如下图所示
这样一个实心的三角新就出来了,
空心的三角形呢同理,在当前的三角形后面添加一个一个实心三角形,然后将这个三角形绝对定位到当前三角行的位置切割
1 | .jiao:after{ |
效果:
1. 如果是行级元素,对其父元素设置 text-align:center
2. 块级元素:margin:auto
3. 块级元素还可采用绝对定位的方式来实现
1 | { |
4.对于自适应的块级元素来说,前面两种方法可能无效,需要用到 css3的transform(变形)
1 | { |
在translateX变形函数中使用百分比,是以该元素自身的宽度为基准进行换算的,所以即使元素宽度不固定,也能实现水平居中,达到自适应的效果。
1. 单行文本垂直居中:设置高度和行高一致即可
1 | <div class="cs">单行文本垂直居中</div> |
2. 多行文本框
不固定高度的垂直居中:设置padding:50%
1 | <div class="cs">天上白玉京,十二楼五城,仙人抚我顶,结发授长生。</div> |
固定高度的多行文本, 把父元素的dispaly设置为table,把自身设置为表格中的一个单元格,再配合vertical-align来实现。
1 | <div class="pa"> |
方法4:基于flexbox的解决方案(弹性布局)
more >>tag:
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true