count-up-y

一个由CountUp.js包装的vue插件。

AMD & CMD & UMD & CommonJs & CommonJs2

AMD的风格,浏览器环境使用的。异步加载，requireJs。全部加载，预先配置 define

CommonJs风格,nodejs环境使用，主要是服务器环境，一般是同步加载。（有本地文件）

CMD也是异步方式，国内的seajs就是其中的代表，即用即加载.

UMD通用的模块定义方式.结合AMD和CommonJs还有commonjs2的风格。相当于就是三种的结合的代码形式，see below.

(function webpackUniversalModuleDefinition(root, factory) {
  // commonjs2
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    // amd
    else if(typeof define === 'function' && define.amd)
        define("vue-countup-y", [], factory);
    else if(typeof exports === 'object')
  // commonjs
        exports["vue-countup-y"] = factory();
    else
  // 挂在到window. script的方式引入
        root["vue-countup-y"] = factory();
})(this, function() { 
    //xxxxxxxxxx
}

数字变化是一个怎样的过程

平时写的最多的是通过赋值操作改变数字的状态，不存在一帧一帧的改变，那如何通过某种操作，让这个变化显示出来，并且具有动画效果（数据的变化速度）呢？

requestAnimationFrame + easing Function

缓动函数

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线

平时见到三次贝塞尔曲线，cubic-bezier,在css3中得animation中频繁使用，我们所使用得ease,ease-in，ease-in-out 都是它取一些特殊值而得到得函数.

• Robert Penner's Easing Functions easing.js

// 当前时间，开始时间, 结束时间和开始时间的差值，总的动画时间
function easeOutExpo(t, b, c, d) {
    return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
}
// 当前的进度值，开始变化的数值，变化中的数值，进度总值
function easeOutCubic(currentIteration, startValue, changeInValue, totalIterations) {
    return changeInValue * (Math.pow(currentIteration / totalIterations - 1, 3) + 1) + startValue;
}
 

使用requestAnimationFrame去执行一个动画

see below

easy demo

简单的动画实现.

function moveThing (timestamp) {
        console.log(timestamp)
        angle += 0.05
        xPos = 200 + 100 * Math.cos(angle)
        yPos = 200 + 100 * Math.sin(angle)
        img.style.left = xPos + 'px'
        img.style.top = yPos + 'px'
        requestAnimationFrame(moveThing)
    }
    moveThing()

默认配置项(line:89) => props

一个插件都会具有一些配置，通常的做法是，库里面有默认配置，同时提供外部传入的options，然后通过遍历默认配置，将传入中与默认配置键名一致的键覆盖,这就是extend.

用函数实现。 Object.assign(selfOptions, options)。（异常的话，会中断拷贝）

在vue里面的实现就等同于props的传递.props一般实现为单项的数据流，通过父组件往子组件中传值,虽然有.sync(也是利用computed来实现)的存在，但是尽量不要通过子组件修改到父组件的状态(特殊情况需要.popup弹出层,父组件能通过一个标记关闭子组件的弹出，子组件也可以自己关闭自己，然后将数据传递出去)

接收到这些默认的props时(非引用类型)，有些数据会频繁更新，需要使用组件自身的属性去接收，不能直接修改props的值.

然后子组件如何通知父组件，自身的一些状态的改变呢，通过vue的事件机制.在子组件emit事件，在父组件用on接收.

组件自身的方法.

在countup插件中，它具有一些方法是vue中不需要的。比如initialize，还有update这些 initialize这些是改变一些状态，对应vue中对数据的初始化。（变种）

this.$refs.element.methods()

输出UMD风格的包.(没做压缩)

• Externals属性

外部依赖不需要打包进 bundle，当我们想在项目中 require 一些其他的类库或者 API ，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。 比如：在页面里通过 script 标签引用了 vue <script src="//unpkg.com/[e-mail]"></script>

其实就是不是通过require或者import引入的，而是直接写在html中的js地址。

externals: {
    vue: {
        root: 'Vue',
        commonjs: 'vue',
        commonjs2: 'vue',
        amd: 'vue'
    }
}

题外话(es6)

let a = [1, 2, 3] let b = [2, 3, 4]

// 针对元素是非引用类型. a ∪ b = ? a ∩ b = ? a - b = ? b - a = ?

[1,2,3,4] [2, 3] [1] [4]

a.filter((ele) => b.find(obj => ele === obj)) a.filter((ele) => !b.find(obj => ele === obj)) b.filter((ele) => !a.find(obj => ele === obj))

Set 部署了iterator接口，可以使用...扩展符。

a = new Set(a) b = new Set(b)

var c = new Set([...a,...b]) return [...c]

[...a].filter((ele) => b.has(ele))

[...a].filter((ele) => !b.has(ele))

[...b].filter((ele) => !a.has(ele))

如果做过todoList xxx