第三方

TIP

列举从事前端到现在,用到的框架和第三方

最后更新时间:2019年05月14日16:36:55

字数:6848

Bootstrap

简洁、直观、强悍的前端开发框架,让web开发更迅速、简单

Bootstrap中文网 菜鸟教程Bootstrap

html2canvas

特点

  • 能够实现在用户浏览器端直接对整个或部分页面进行截屏
  • 这个html2canvas脚本将当页面渲染成一个Canvas图片
  • 通过读取DOM并将不同的样式应用到这些元素上实现

资料

安装

npm install --save html2canvas

yarn add html2canvas
1
2
3

vuejs中使用

<template>
    <div class="result" id="result">
       <!-- 图片预览 -->
        <div>
            <div  id="imgBox">
                <img :src="dataURL" alt="">
            </div>
		</div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';
export default {
    data() {
        return{
            // 生成图片的url
            dataURL:""
        }
    },
    created(){
    	this.supervision()
    },
    methods: {
        
        supervision(){

            // 2. 生成图片
            let that = this
            let result = document.getElementById('result')
            let option = {
                tainttest:true,
                useCORS: true
                // width: 3.2, //dom 原始宽度(rem无效)
            }
            html2canvas(result,option).then(function(canvas) {
                // 添加到元素上canvas
                // let el = document.getElementById('imgBox')
                // el.appendChild(canvas);
                
                // 将突破的base64赋值给img的src
                that.dataURL = canvas.toDataURL()
                
                // 如果是rem,必须在设置成功后,DOM操作修改样式rem
                // canvas.style.width = "3.2rem";
            });
        }
    }

}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

vue-qr

特点

vuejs中生成二维码的组件

  • 简单实用
  • 支持内嵌logo
  • 功能丰富

安装

npm install vue-qr --save
1

使用

import VueQr from 'vue-qr'
 
export default {
    components: { VueQr },
}

template中
<vue-qr 
	:bgSrc='config.logo' 
	:logoSrc="config.logo" 
	:text="config.value" 
	:size="200">
</vue-qr>

script中的data配置
data() {
    return {
        config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: require('../assets/logo.png')//中间logo的地址
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

throttle-debounce

函数节流和函数防抖

特点

  • throttle-debounce提供了 throttle 和 debounce 两个函数:

    • throttle 的含义是节流
      • 在用户动作时每隔一定时间(如200ms)执行一次回调
    • debounce 的含义是防抖动
      • 时段内,如果无新的请求,在时间结束后,响应结果。
      • 如果有新的请求,从新开始记时
  • 通过它们可以限制函数的执行频率,共同点就是将多次回调的触发合并成一次执行,避免短时间内函数多次执行造成性能问题

资料

安装

npm install throttle-debounce --save
1

JavaScript中使用

import { throttle, debounce } from 'throttle-debounce';

throttle(300, () => {
    // Throttled function
});
 
debounce(300, () => {
    // Debounced function
});
1
2
3
4
5
6
7
8
9

vuejs中使用

<template>
    <div class="rootDiv">
        <input type="text" @input="fn1">
        <input type="text" @input="fn2">
    </div>
</template>

<script>
import { throttle, debounce } from 'throttle-debounce'
export default {
    methods: {
        // 如果用户输入间隔是200毫秒以上,会触发,200毫秒以内不会触发
        // 直到,用户停止输入200毫秒后为止
        fn1:debounce(200,(e)=>{
            console.log(e)
        }),
        // 在固定的间隔时间200毫秒执行回调函数,不管用户输入多块,200毫秒执行一次
        fn2:throttle(500,(e)=>{
            console.log('throttle',e)
        })
    }
}
</script>

<style lang="less" scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

js-base64

特点

是 Base64 的 JavaScript 实现

资料

安装

npm install --save js-base64

#es5实用
npm install --save babel-preset-env
1
2
3
4

使用

var Base64 = require('js-base64').Base64;
# 或者
import { Base64 } from 'js-base64';

# 实用
Base64.encode('dankogai');  // ZGFua29nYWk=
Base64.encode('小飼弾');    // 5bCP6aO85by+
Base64.encodeURI('小飼弾'); // 5bCP6aO85by-
 
Base64.decode('ZGFua29nYWk=');  // dankogai
Base64.decode('5bCP6aO85by+');  // 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors
Base64.decode('5bCP6aO85by-');  // 小飼弾
1
2
3
4
5
6
7
8
9
10
11
12
13

js-md5

特点

  • JavaScript中MD5的实现

  • MD5是不能解密的加密算法

资料

安装

npm install --save js-md5
1

使用

import md5 from 'js-md5';

md5(''); // d41d8cd98f00b204e9800998ecf8427e
md5('The quick brown fox jumps over the lazy dog'); // 9e107d9d372bb6826bd81d3542a419d6
md5('The quick brown fox jumps over the lazy dog.'); // e4d909c290d0fb1ca068ffaddf22cbd0

// It also supports UTF-8 encoding
md5('中文'); // a7bac2239fcdcb3a067903d8077c4a07

// It also supports byte `Array`, `Uint8Array`, `ArrayBuffer`
md5([]); // d41d8cd98f00b204e9800998ecf8427e
md5(new Uint8Array([])); // d41d8cd98f00b204e9800998ecf8427e

// Different output
md5(''); // d41d8cd98f00b204e9800998ecf8427e
md5.hex(''); // d41d8cd98f00b204e9800998ecf8427e
md5.array(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
md5.digest(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
md5.arrayBuffer(''); // ArrayBuffer
md5.buffer(''); // ArrayBuffer, deprecated, This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

loadsh

特点

  • Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
  • Lodash 的模块化方法 非常适用于:
    • 遍历 array、object 和 string
    • 对值进行操作和检测
    • 创建符合功能的函数

资料

安装

# 浏览器环境
<script src="lodash.js"></script>

# npm
$ npm i -g npm
$ npm i --save lodash

# nodejs
// Load the full build.
var _ = require('lodash');


# webpack-es6-vue,必须安装loader
npm install --save lodash
npm install --save-dev babel-plugin-lodash

.babelrc 文件
{
    "presets":[
        "react", 或者vue
        "es2015",
        "stage-0"
    ],
    "plugins":[
        "lodash"
    ]
}

# 实用
import _ from 'lodash';
import { add } from 'lodash/fp';

const addOne = add(1);
_.map([1, 2, 3], addOne);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Element-UI

Mint-UI

Ant Design

jQuery

jQuery UI

font-awesome

vue

React

Angular

animate