legend2---开发日志11（如何提高终极开发效率）

legend2---开发日志11（如何提高终极开发效率）

一、总结

一句话总结：

实在没必要摸索着做，直接学了做，用专门的东西来做，岂不是要省时省事很多。岂不美哉。

1、vue中的滚动字幕动画效果如何实现（那六个状态怎么确定，active激活态又是什么）？

进入时：在enter中设置初始状态，在enter-to中设置最终状态，在enter-active设置初始状态到最终状态的动画

退出时：在leave中设置初始状态，在leave-to中设置最终状态，在leave-active设置初始状态到最终状态的动画

可以通过vue变量的true和false来触发enter和leave动画

transform: translateX(100%)可做水平移动，表示右移100%

如下代码是滚动字幕的代码

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all 7.0s linear;
    }
    .slide-fade-enter {
        transform: translateX(100%);
    }
    .slide-fade-enter-to ,.slide-fade-leave{
        transform: translateX(-100%);
    }
</style>

2、css动画中的easy，linear这些是什么属性（就是他们上级的名字）？

transition-timing-function 属性

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

 

3、legend2系统的设计理念是什么？

以加强【好玩性】为主

4、js判断数据是否为空？

if(a === undefined) { // 只能用 === 运算来测试某个值是否是未定义的

if(a == null) { // 等同于 a === undefined || a === null

if(a == "" || a == null || a == undefined){ // "",null,undefined

if(!a){ // "",null,undefined,NaN

if(!$.trim(a)){ // "",null,undefined

if(a.length == 0){ // "",[]

//    var a = "";
//    var a = " ";
//    var a = null;
//    var a = undefined;
//    var a = [];
//    var a = {};
//    var a = NaN;
    
    if(a === undefined) { // 只能用 === 运算来测试某个值是否是未定义的
        console.log("为undefined");
    }
    
    if(a == null) { // 等同于 a === undefined || a === null
        console.log("为null");
    }

    
    // String    
    if(a == "" || a == null || a == undefined){ // "",null,undefined
        console.log("为空");
    }
    if(!a){ // "",null,undefined,NaN
        console.log("为空"); 
    }
    if(!$.trim(a)){ // "",null,undefined
        console.log("为空");
    }

    // Array
    if(a.length == 0){ // "",[]
        console.log("为空");
    }
    if(!a.length){ // "",[]
        console.log("为空");
    }

    // Object {}
    if($.isEmptyObject(a)){ // 普通对象使用 for...in 判断，有 key 即为 false
        console.log("为空");
    }

5、js中如何区别是json对象还是数组？

bottom_broadcast.broadcast instanceof Array   数组返回true，json对象返回false

6、thinkphp中if标签或者关系的多个条件用什么关键词，用'||'可以么？

不可以

要用OR，条件通括号括起来，{if condition="($name == 1) OR ($name > 100) "}

{if condition="($name == 1) OR ($name > 100) "} value1
{elseif condition="$name eq 2"/}value2
{else /} value3
{/if}

7、vue控制的html里面，jquery函数例如$('#commonly_day_day_blog').change(function ()函数不起作用怎么办？

把jquery函数移出vue的控制区域即可

8、当广播部分挡住做题按钮部分，做题按钮无法点击怎么解决？

想办法把广播移到不会和按钮重叠的地方--这种方法不好

用另外一个vue变量来控制文字部分的显示隐藏就好了，不能用和滚动同样的变量，会导致无法滚动

    <div v-if="marquee_show_begin" class="broadcast" style="100%;height: 35px;line-height:35px;position: fixed;top: 60px;padding: 0 3px;">
        <!--用js函数来实现好的多-->
        <div style="position:absolute;left: 17px; 100%;height: 35px;line-height:35px;">
            <transition name="slide-fade">
                <p v-if="marquee_show"><span v-html="broadcast.sn_content"></span></p>
            </transition>
        </div>
    </div>

    $(function () {
        //控制【弹出奖励的】的vue代码
        bottom_broadcast = new Vue({
            el: '#bottom_broadcast',
            data: {
                broadcast: window.broadcast,
                marquee_show: false,
                marquee_show_begin:false,
            }
        });
        if(bottom_broadcast.broadcast instanceof Array) bottom_broadcast.marquee_show=false;
        else bottom_broadcast.marquee_show=true;
        console.log(bottom_broadcast.broadcast);
    });

9、如何让vue实现的广播7s运行一条广播，15s向服务器请求一次，并且广播内容不会在运动完后还静止显示在哪8s？

vue的动画的钩子函数，比如进去前做什么，进入后做什么

在自己的代码中试不出来效果，可以找标准代码来试，比如菜鸟学院上

在菜鸟学院的vue钩子的代码中，vue的css和js效果共存的时候，里面加了一句v-bind:css="false"，

<transition name="slide-fade" v-on:before-enter="beforeEnter" v-bind:css="false">

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

<!--
Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

10、在广播中，下面的代码里面为什么marquee_show要设置为false，marquee_show_begin要设置为true才有一直的广播的滚动效果？

marquee_show_begin设置为true为广播滚动提供了条件

marquee_show设置为false，是因为请求到数据，marquee_show会为true，而false到true才会触发滚动效果的动画

|||-begin

    //每次一条，7秒请求一次,运行7秒
    setInterval(function () {
        bottom_broadcast.broadcast=[];
        bottom_broadcast.marquee_show=false;
        bottom_broadcast.marquee_show_begin=true;
        require_broadcast();
    },7000);

|||-end

二、内容在总结中