# count-up-y

> A Vue.js project

Latest version **1.0.7** (published 2017-07-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install count-up-y
pnpm add count-up-y
yarn add count-up-y
bun add count-up-y
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-07-21 |
| First published | 2017-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | A_heng |
| Maintainers | eliaztray |
| Keywords | vue, count-up |

## Links

- npm: https://www.npmjs.com/package/count-up-y
- npm.io page: https://npm.io/package/count-up-y

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.4.1
- [count-up-y](https://npm.io/package/count-up-y.md) ^1.0.6

## Recent versions

- 1.0.7 (latest) — 2017-07-21
- 1.0.6 — 2017-07-21
- 1.0.5 — 2017-07-21
- 1.0.4 — 2017-07-21
- 1.0.2 — 2017-07-21
- 1.0.1 — 2017-07-21
- 1.0.0 — 2017-07-19

## README

# count-up-y

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


## AMD & CMD & UMD & CommonJs & CommonJs2

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

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

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

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

```js
(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](https://github.com/danro/jquery-easing/blob/master/jquery.easing.js)

```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](https://www.kirupa.com/html5/animating_with_easing_functions_in_javascript.htm)

简单的动画实现.
```js
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/vue@2.4.1.min.js"></script>`

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

``` 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

---
_Source: https://npm.io/package/count-up-y · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._