• 东航电商前端技术周刊第三期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指令,对于只需要一次加载,此后不再改变的元素或组件来说,是一个非常好的指令。

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

  • 相关阅读:
    linux的lsof命令
    linux find
    linux 查看磁盘空间大小
    eclipse运行时编码设置
    WebService工作原理
    Java获取字符串编码方式
    JavaScript,base64加密解密
    如何用javascript 的eval动态执行一个需要传对象参数的函数
    struts2结果类型
    执行maven-build.cmd失败
  • 原文地址:https://www.cnblogs.com/yuebai/p/9184890.html
Copyright © 2020-2023  润新知