东航电商前端技术周刊第三期20180615

东航电商前端技术周刊第三期如约而至，本期主要内容如下：

1.如何理解react中的diff算法

2.阿里云OSS填坑录

3.如何在Vue中实现动画效果

4.v-if和v-show的区别

5.v-once的用途

1.如何理解react中的diff算法

a.diff算法是干啥的

我们都知道react中每次执行render，都是返回一个新的虚拟dom，然后让新的虚拟dom跟旧的虚拟dom进行对比，发现哪里改变了，就让反映到真实的dom当中。降低dom操作也是react性能高的原因。

那么这里新旧虚拟dom的不同，就是用的diff算法来计算得来的。
b.diff算法是怎么算的

如果把新旧两个虚拟dom看成两颗树，那么diff算法是怎么比较两颗树的，分三种情况

第一种，当树干节点是不同类型，比如<div className="test"></div>变成了<p className="test"></p>,则把这树干全部拆掉重新长出新的枝干。

第二种，当树干节点是相同类型，则比较树叶（属性）的变化，则只更新相应的树叶（属性）。

第三种，当树干里面又有很多树干（组件），则按照第一种第二种更新模式递归计算。

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感谢孙爱祥老师热情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

2.阿里云OSS填坑录

本周得到需求要将项目使用的静态资源转移到阿里云OSS对象存储。原本并不复杂，实际处理时还是有些坑需要注意。

区分大小写

        由于之前静态资源存放在Windows平台IIS服务器，早期Windows为了兼容DOS，文件系统是不区分大小写的，这也导致了IIS在处理URL的时，同样不区分大小写。而阿里云OSS使用的是Linux，Linux的文件系统是严格区分大小写的。此时，之前在Windows平台正常展示的静态资源，都会由于不规范的资源链接地址以及命名暴露无疑。比如，链接URL为大写，而实际资源文件为小写命名，只会得到一个404 Not Found。

服务区禁止与浏览器拦截

        在迁移过程中，有一些特殊文件，如字体的iconfont出现了不能展示的问题。根据以往经验，出现这种情况，多半是由于服务器并没有启用此MIME类型，而在阿里云OSS中，当通过浏览器新窗口直接打开资源链接时，文件正常下载，这也就说明虽然在OSS中字体文件的MIME类型，也就是在HTTP响应头中的Content-Type设置的并不是标准的“application/x-font-woff”或者“font/x-woff”等，但实际上服务器并没有禁止此类型文件传送到客户端浏览器。

        当禁用Chrome浏览器的安全限制后，所有的iconfont均能正常展示。所以问题明朗，由于CSS文件是通过href链接到页面里的，类似JSONP浏览器并不会拦截此类get请求，而字体文件在CSS中被引用，又一个典型的跨域问题。此时，为了实现跨域资源共享（CORS），打开阿里云OSS管理后台，基础设置－跨域设置，设置规则将允许跨域共享的域名填入，再次打开浏览器，“Access-Control-Allow-Origin”正常设置，问题被解决。

总结：作为一名前端，是需要了解一些运维知识的，否则真的有蛮多坑要填。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感谢严明坤老师热情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.如何在Vue中实现过渡效果

Vue中有一个自带的transition组件，就是用来实现过渡效果的，具体怎么使用呢，很简单，其实就两个步骤：

①用transition组件，把要做过渡效果的元素包起来

②写上相应的过渡效果的css

是不是很简单，比把大象装冰箱还简单。然而，并没有，在这两个步骤中，我们要遵守一定的规则：

在第一步中，我们要给transition组件写一个name，例如

<div id="box" class="box">
　　<div @click="showFn" class="green">
　　　　<transition name="red"><div v-show="show" class="red"></div></transition>
　　</div>
</div>

相对应的css也是有规则的，要根据transition是name属性延伸出来：[name]-enter、[name]-enter-active、[name]-leave、[name]-leave-active；

这四个属性分别是什么意思呢？

[name]-enter：显示或加载元素时的过渡效果的初始样式（在元素被插入之前生效，在元素被插入之后的下一帧移除）

[name]-enter-active：显示或加载元素时的过渡效果的动画样式（在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。）

[name]-leave：隐藏或删除元素时的过渡效果的初始样式（在离开过渡被触发时立刻生效，下一帧被移除）

[name]-leave-active：隐藏或删除元素时的过渡效果的动画样式（在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。）

下面，上代码：

.red{
    width: 100%;
    height: 100%;
    background-color: red;
    /*下面的样式可以不写，这里为了方便理解*/
    opacity: 1;
    margin-left:0;
}
.red-enter{
    opacity: 0;
    margin-left:100%;
}
.red-enter-active,.red-leave-active{
    transition: all 1s;
}
.red-leave{
    /*对于简单动画来说，[name]-leave也可以不写，多数情况下，此处的样式和元素正常显示是的样式是相同的*/
    opacity: 1;
    margin-left:0;
}
.red-leave-active{
    opacity: 0;
    margin-left:100%;
}

这样，在控制transition内的div标签显示隐藏时，就有了过渡效果了，是不是很简单。

4.v-if和v-show的区别

v-if和v-show这两个指令，在效果上来说，都是控制元素的显示与否，在很多情况下也可以相互替代，那么，它们有哪些区别，到底用哪个指令更好一些呢？

区别：在原理上来说，v-if是通过插入或删除元素，来实现元素的显示与否，而v-show则是通过修改元素的样式（display），来控制元素的显示与否。

所以，在使用时，对于一些会频繁显示隐藏的元素，我们可以用v-show来控制，这样浏览器就不用对同一个元素去进行重复的样式渲染，提高效率，对于一些不会频繁去修改元素，则更适合用v-if去控制，可以减少dom的数量。

（angular中的ng-if/ng-show也是如此）

5.v-once的用途

v-once，一个貌似不常用的Vue指令，对于只需要一次加载，此后不再改变的元素或组件来说，是一个非常好的指令。

既能不受后续数据改变的影响，也能让随后的渲染过程视其为静态内容，利于优化更新性能。