Fork me on GitHub

随笔

字数统计: 8.1k字   |   阅读时长≈ 37分

随笔

使用node.js的process内置模块和fs文件模块创建了建议的命令行工具，能快速创建私人定制的h5项目(使用rem适配 + zepto.js + swiper.js + h5兼容代码)

js

技巧

  • 对象合并技巧

    若字段相等则会都被后一个的值覆盖

    • Object.assign(obj1, obj2)参数为简单类型则深拷贝，引用类型则浅拷贝。
    • {...obj1, ...obj2}

  • 数组转对象:

    • {...arr}

    • for(var key in arr){obj[key] = arr[key]}

  • 深拷贝

    • 判断类型+创建空数据递归赋值(还是最靠谱)
    • JSON.parse(JSON.strighfy(obj)) ,若元素有函数等非JSON格式对象，如正则、Error、NaN，则会丢失或出错，Data类型会成为字符串
  • 浅拷贝,除直接赋值外。元素为简单类型则深拷贝，引用类型则浅拷贝,本质上还是浅拷贝
    • 对象可用{...obj}，
    • 数组可用[...arr]、new Array(...arr)、Array.from(arr)，slice、concat

  • 指数运算

    • es5Math.pow(2, 10)
    • es72 ** 10

  • 浮点数转整数(位运算),都是向下取整

    • ~~6.95 ~按位非，就是每一位取反
    • 6.95 >> 0 >>位运算右移
    • 6.95 << 0 >>位运算左移
    • 6.95 | 0 |位运算或
    • 6.95 >>> 0 >>>带符号位的右移 不可取整负数

  • 隐式转换规则:

    • 运算, 如 +

      • 包装类型在运算的时候，会先调用valueOf方法，如果valueOf返回的还是包装类型，会默认再调用toString方法。**数组.toString** 默认会将数组各项使用逗号 “,” 隔开, 比如 [1,2,3].toSting 变成了"1,2,3",空数组 toString 就是空字符串

    • 比较, 如 == ，除开会进行上文运算过程，还有:

      • 如果非number与number比较，会将其转换为number。
      • 如果boolean与其他类型比较,那么会先将boolean转换为number
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    1 + '1' //'11'
    true + 0	//1
    {}+[]	//[Object Object] 包装类型被valueOf，而后toString
    4 + {} //'4[Object Object]'
    4 + [1] //'41'
    'a' + + 'b' //'aNaN'
    console.log ([] == 0) //true	先将[]转为0
    console.log (![] == 0) //true  ![]先转为false,false再转为0
    console.log ([] == ![]) //true ![]先转为false,false再转为0:0==[] =>true
    console.log ([] == [])	//false  直接比较内存地址
    console.log({} == !{})	//false  !{}先转为false,再转为0:{}==0 =>false
    console.log({} == {})	//false  直接比较内存地址

  • undefined隐式转换为number是NaN, null是0:

    2 * undefined = NaN 、 2 * null = 0

  • 在函数定义形参时若知道参数是对象，且清除它的属性,可以直接:

    1
    2
    3
    4
    function fn({attr}) {
      //相当于只接收obj.attr作为参数，使用时不用obj来调用
    }
    fn(obj)

  • es6的方法写法也可以结合async：

    1
    2
    3
    const obj = {
      async 方法名(){}
    }

  • JS不能通过number的单个.判断数字是否结束,因此:

    • 123.toString() //err
    • 123..toString() //ok
    • (123).toString() //ok
    • 123.0.toString() //ok

  • 复制到粘贴板

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    copy(content) {
      const select = window.getSelection();
      const cDom = document.createElement("div");
      const body = document.body;
      cDom.innerText = content;
      body.appendChild(cDom);
      //选中要粘贴的元素
      select.selectAllChildren(cDom);
      document.execCommand("Copy");
      //复制后取消选中
      select.removeAllRanges();
      body.removeChild(cDom);
    }

    若选中失败有可能是:

    1.selectAllChildren传入的元素不是原生dom元素

    2.点击事件冲突

    3.全局的css设置了-webkit-user-select:none;，将其设置为text、all即可

  • 用delete删除数组元素时数组长度不会发生变化，不会影响之后的索引位置

  • 瀑布流: 按列存放数据, 每次将数据添加到高度最小的一列的数据中。必要时可以根据图片和屏幕宽度用js计算每一列宽度和列数

    使用父元素flex布局会使短的一列跟长的一列高度相等，父元素添加属性align-items: flex-start;可解决，记住要给子元素分配flex:1或固定宽度

  • 关键字function比var预解析的变量提升更优先,且声明时赋值

  • offsetTop获取元素距离父元素顶部的距离

  • 函数内形参与var定义的参数重名、且var定义的参数未赋值时，取到的值不是undefined而是形参的值 (应该当作一个变量)

  • 函数this取决于它的调用者。即使从对象的方法中赋到值，调用时没有调用者this还是指向window

  • 任何对象转为布尔值，都为得到 true（切记！在 JS 中，只有 0，-0，NaN，""，null，undefined 这六个值转布尔值时，结果为 false,new Boolean(false)为true…..

  • setTimeout来自于window对象，不属于js全局函数

  • 数组扁平化: str为JSON.strigfy(arr)

    • arr.flat(Infinity)

    • str.replace(/\[|\]/g, '').split(',')，缺点是结果数组内元素都是字符串

    • str = '[' + str.replace((\[|\]/g, '') + ']',再JSON.parse(str)

    • 递归赋值

      1
      2
      3
      4
      5
      6
      //reduce + 递归
      function flatten(arr) {
        return arr.reduce((pre, cur) => {
          return [].concat(pre, Array.isArray(cur) ? flatten(cur) : cur)
        })
      }

    • 扩展运算符

      1
      2
      3
      4
      //扩展运算符
      while(arr.some(Array.isArray)) {
        arr = [].concat(...arr)
      }

    与数组的map方法对应，有flatMap方法，将返回的数组扁平化,适合递归对多级数组处理并返回扁平化的数组

  • 生成guid(全局唯一标识符)

    • 方式一

      1
      2
      3
      4
      5
      6
      function S4() {   
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);   
      }    
      function newGuid() {   
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());   
      }

    • 方式二

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      function newGuid() {
        var guid = "";
        for (var i = 1; i <= 32; i++){
          var n = Math.floor(Math.random()*16.0).toString(16);
          guid +=   n;
          if((i==8)||(i==12)||(i==16)||(i==20))
            guid += "-";
        }
        return guid;    
      }

  • 微软提供的网页端文件预览: https://view.officeapps.live.com/op/view.aspx?src=filePath 但是我用此地址预览PDF时提示找不到文件,其他暂未发现问题

  • 手写call方法：

    1
    2
    3
    4
    5
    6
    //apply只需要把形参arg前的`...`去掉    
    Function.prototype.myCall = function(context, ...arg) {
      const _this = context || window
      _this._fn = this	//获取调用的函数
      return _this._fn(...arg)
    }

  • 手写bind: 在call的基础上返回一个闭包函数，只有这样才能在调用时留住this指向的改变

    1
    2
    3
    4
    5
    6
    7
    Function.prototype.myBind = function(context, ...arg) {
      const _this = context || window
      _this._fn = this
      return function() {
        return _this._fn(...arg)
      }
    }

  • call、apply方法第一个参数传null或undefined，相当于普通调用，this取决于调用者

  • 不论对象、数组、字符串还是new String创建的包装类型字符串，其key值其实都是string类型，但是使用时内部没有全等判断所以也可以用number类型索引。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let a = new String('ssss')
    for (let key in a) {
    	if (key === '1') { //key是string类型，判断能成立
    		console.log(key)
    		a[key] = 'dd'		//无效。字符串不能索引赋值，严格模式会报错
    		console.log('success')
    	}
    }
    console.log(a)	//包装类型String {'ssss'}

  • url传参时，若有中文的参数，最好使用encodeURIComponent和decodeURIComponent进行编码和解码。由于游览器会自动作一次解码，需要使用两次encodeURIComponent才有效

  • str.padStart(num, str2) str小于num位时在前面补str2

  • str.endsWith(str2)str是否以str2结尾

  • 函数的声明提前有块级作用域(不会将函数直接提升到全局)，执行到函数这一步时才会将块级作用域内的该变量提升到全局:

    1
    2
    3
    4
    5
    6
    7
    8
    console.log(a);//undefined
    if (true) {
      a = 1;
      function a() {}//此时将a覆盖到全局,即使a已经是1不是函数了
      a = 5;//此时只是块级作用域内的改动,全局的a仍为1
      console.log(a);//5
    }
    console.log(a);//1

pdf转图片

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 2.9.359以上版本才修复显示签章的技术问题，当前使用2.12.313
// 2.8.335之后引入报错，可以尝试从legacy目录
import * as PDFJS from 'pdfjs-dist/legacy/build/pdf';
import PDFJSWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry.js';
PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker;
// 使用vue-pdf处理字体缺失导致内容不显示
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";

// pdf地址转图片
export async function pdf2ImgUrl(preUrl) {
    if (!preUrl) return '';
    try {
        const response = await fetch(preUrl);
        const contentType = response.headers.get('Content-Type') || '';
        const pdf = contentType.indexOf('application/pdf') > -1;
        if (!pdf) return preUrl;
        const stream = await response.blob();
        const rawFile = new File([stream], 'viewer.pdf');
        const pdfUrl = URL.createObjectURL(rawFile); // 将File对象转换为URL对象
        const {pdfInstance, pdfPages} = await getPdfInfo({ url: pdfUrl, CMapReaderFactory });

        return await createCanvas(pdfInstance, pdfPages);
      } catch (error) {
        console.error('Error fetching file:', error);
        return preUrl;
      }
}

async function getPdfInfo(cMapReaderFactory) {
    const loadingTask = PDFJS.getDocument(cMapReaderFactory);
    const pdfInfo = await loadingTask.promise; // 获取pdf实例
    return {
        pdfInstance: pdfInfo,
        pdfPages: pdfInfo.numPages
    }
}

// 整合每页pdf合并成一张图片
async function createCanvas(pdfInstance, pdfPages) {
    const screenshots = [];
    for (let i = 1; i <= pdfPages; i++) {
        const page = await pdfInstance.getPage(i);
        const canvas = document.createElement('canvas');
        const viewport = page.getViewport({ scale: 2 });

        canvas.width = viewport.width;
        canvas.height = viewport.height;

        const ctx = canvas.getContext('2d');
        const renderTask = page.render({ canvasContext: ctx, viewport: viewport });
        await renderTask.promise;

        screenshots.push(canvas);
    }

    const combinedCanvas = document.createElement("canvas");
    combinedCanvas.width = Math.max(
      ...screenshots.map((shot) => shot.width)
    );
    combinedCanvas.height = screenshots.reduce(
      (sum, shot) => sum + shot.height,
      0
    );

    let yPosition = 0;
    screenshots.forEach(function (shot) {
      combinedCanvas.getContext("2d").drawImage(shot, 0, yPosition);
      yPosition += shot.height;
    });


    const imgData = combinedCanvas.toDataURL('image/jpeg');
    return imgData;
}

css

扩散动画

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
&.active .circle {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  background-color: hsl(354, 81%, 63%);
  content: '';
  border-radius: 100%;
  opacity: .3;
  animation: spred-out .6s cubic-bezier(0, 1, .5, 1) forwards;
  &::after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #fff;
    animation: spred .6s cubic-bezier(0, 1, .5, 1) forwards;
    content: '';
    border-radius: 100%;
  }
}
@keyframes spred {
 to {
   transform: translate(-50%, -50%) scale(1.02);
 }
}
@keyframes spred-out {
  to {
    transform: translate(-50%, -50%) scale(1.3);
  }
}

尖角圆弧正方形

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
.box {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 50px auto;
  border-radius: 35%;
  box-shadow: 40px 40px 10px 10px rgba(0 , 0, 0, .3);
  &::before {
    position: absolute;
    left: 10px;
    top: 20px;
    width: 180px;
    height: 160px;
    background-color: #fff;
    border-top-left-radius: 20px 100px;
    border-top-right-radius: 20px 100px;
    border-bottom-left-radius: 20px 100px;
    border-bottom-right-radius: 20px 100px;
    content: '';
  }
  &::after {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 160px;
    height: 180px;
    background-color: #fff;
    border-top-left-radius: 100px 20px;
    border-top-right-radius: 100px 20px;
    border-bottom-left-radius: 100px 20px;
    border-bottom-right-radius: 100px 20px;
    content: '';
  }
}

三线旋转加载动画

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
.load {
  --bd1-color: #9370db;
  --bd2-color: #ba55d3;
  --bd3-color: #f0f;
  --size: 50px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border: 2px solid transparent;
  border-top-color: var(--bd1-color);
  border-radius: 50%;
  animation: rotate 3s linear infinite;
  &::before,
  &::after {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid transparent;
    border-radius: 50%;
    content: '';
  }
  &::before {
    width: 90%;
    height: 90%;
    border-top-color: var(--bd2-color);
    animation: rotate 2s linear infinite;
  }
  &::after {
    width: 80%;
    height: 80%;
    border-top-color: var(--bd3-color);
    animation: rotate 1.5s linear infinite;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

双球加载动画

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.load {
  --bd1-color: #9370db;
  --bd2-color: #ba55d3;
  --bd3-color: #f0f;
  position: relative;
  width: var(--size);
  height: var(--size);
  .before,
  .after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: '';
  }
  .before::before,
  .after::before {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      content: '';
      border-radius: 50%;
      transform: scale(.5);
  }
  .before {
    left: 0;
    width: 40%;
    height: 40%;
    animation: move 1s ease-in-out infinite alternate, zIndex 2s ease-in-out infinite;
    &::before {
      background-color: var(--bd1-color);
      animation: zoom 1s ease-in-out infinite alternate;
      animation-delay: -.5s;
    }
  }
  .after {
    right: 65%;
    width: 40%;
    height: 40%;
    animation: move 1s ease-in-out infinite alternate-reverse, zIndex 2s ease-in-out infinite reverse;
    &::before {
      background-color: var(--bd3-color);
      animation: zoom 1s ease-in-out infinite alternate-reverse;
      animation-delay: -.5s; //跳过刚开始0.5S的动画
    }
  }
}
@keyframes move {
    100% {
        transform: translateX(160%);
    }
}
@keyframes zoom {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes zIndex {
    25% {
        z-index: 1;
    }
    75% {
        z-index: -1;
    }
}

动态修改样式(伪元素)

​ 本质上就是利用 行内样式+css3变量

  1. 给祖先元素动态添加行内样式定义css变量如: --color: red
  2. 在样式表中使用css变量: background: var(--color)

css变量(var函数)

除了传一个参数使用变量外，var()函数还可以有更多用法:

  • var()第二个参数第二个参数表示默认值，若变量不存在就使用此默认值
  • 如何变量值是字符串，可以直接与其他字符串拼接: '字符串'var(--变量)
  • 若变量值有单位，不能加''写成字符串

css变量作用域就在定义变量的元素内，权重类似选择器

table-cell实现居中

  • 设置元素样式:

    1
    2
    3
    4
    //其行内子元素会被居中，子元素不确定宽高和数量时，特别实用
    display: table-cell;	
    vertical-align: middle;
    text-align: center;

  • 设置父元素样式

    1
    2
    3
    //若不设置display: table;宽度设置可能影响不了子元素
    display: table;
    width: 100%;

clip-path剪裁图形

  • clip-path: polygon(x1 y1, x2 y2...) 绘制多边形

  • clip-path: circle(半径 at 圆心x 圆心y) 圆型

  • clip-path: circle(x半径 y半径 at 圆心x 圆心y) 椭圆

  • clip-path: inset(距上 距下 距左 距右 round 左上圆角 右上圆角 右下圆角 左下圆角) 圆角

  • 在兄弟元素中，其中一兄弟的子元素层级设置到普通文档流之上时，另一个兄弟单独讲子元素设置层级再高也无法覆盖，需要给这另一个兄弟元素自身提高层级

整站黑白

1
2
3
4
5
6
7
8
html {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	_filter: none;
}

网络请求

  • https默认端口443， http默认80，在端口为默认端口时也就不会跨域

vue

关于数据响应

当组件data中的数据是Object，若初始时未赋该属性，新添加该属性需要$set。还有一种方式是初始赋空该属性，在实例创建时就会开始监听该属性。

代理跨域

  • vue-cli2.x.x config->index.js->dev中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    proxyTable: {
          '/api': { 
             target: 'http://api.certificate.uuudoo.com', //接口源地址 
             changeOrigin: true, //是否跨域
             secure: true,  
             pathRewrite: { 
               '^/api': '' //路径重写 
               } 
            } 
        },

  • vue-cli3.x.x vue.config.js中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    module.exports = {  
      devServer: {	  
        port: 8000,    
        proxy: {      
          "/api": {        
              target: 'http://api.certificate.uuudoo.com'，
              changeOrigin: true, //是否跨域
              secure: true,  
              pathRewrite: { 
              '^/api': '' //路径重写 
              } 
            } 
    		  }    
        },
      },
    };

之后请求的接口由vue开启的服务代理，以/api开头请求，无需其他操作:

1
Axios.defaults.baseURL = '/api'

vue-cli3配置别名

  • vue.config.js中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.exports = {  
      configureWebpack: {
        resolve: {
          alias: {
            'components': '@/components' 
          }
        }
      }
    }

vue-cli3关闭prettier代码格式化

  • package.json=>eslintConfig=>: 

    1
    2
    3
    "rules": {
      "prettier/prettier": "off"
    }

  • 或者在vue.config.js中:

    1
    2
    3
    module.exports={
      lintOnSave: false
    }

添加sass-loader

  • 安装node-sass@4.14.1,sass-loader@8.0.2。目前这两个版本稳定，最新版互相不兼容

  • webpack.base.config.js的module中配置loader规则:

    1
    2
    3
    4
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    },

样式穿透

在vue中定义scoped后样式产生作用域，但是一些ui组件需要我们局部修改样式，在scoped内修改经常不生效。除了新增一个没有scoped的style标签外，还可以选择穿透scoped：

  • .parent >>> .ui-component

    1
    2
    3
    4
    5
    6

    - 有些Sass 之类的预处理器无法正确解析 `>>>`。更建议使用 `/deep/`或`::v-deep` :

      ```css
      .parent /deep/ .ui-component
      .parent ::v-deep .ui-component

注意：穿透不是成为全局样式，新增没有scoped的style标签才会成为全局样式污染全局。因此穿透仅在父子关系时在父组件使用有效，兄弟组件无效

热更新配置

在package.json=>scripts=>dev中：

  • npm run dev后自动在游览器开启: --open
  • 开启服务,可在同一wifi下的PC和移动端游览器查看: --host 192.168.0.144
  • 开启服务的端口 --port 3000(vue-cli项目直接在config=>index.js=>dev=>port设置更好)

过渡动画

默认前缀是v,给transition组件添加name如：slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//路由切换时从最右往左平移动画
//给父元素overflow:hidden;去除滚动条且防止内容溢出,且内容宽度不要超出
//父元素但不能设置固定高否则内容可能被隐藏
.slide-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-leave-to {
  position: absolute;
  width: 100%;    //组件切换时由于absolute可能导致leave时宽度瞬间变短
  transform: translateX(-100%);
  opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
1
2
3
4
5
6
7
8
9
10
11
12
//底部弹出框
.pop-enter {
  transform: translateY(100%);
}
.pop-leave-to {
  position: absolute;
  transform: translateY(100%);
}
.pop-enter-active,
.pop-leave-active {
  transition: all 0.5s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//切换路由时上下淡入淡出动画,父元素y方向最好不要超出隐藏
.fade-enter,
.fade-leave-to {
  transform: translateY(40px);
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all .5s;
}
.fade-enter-to,
.fade-leave {
  transform: translateY(0);
  opacity: 1;
}
1
2
3
4
5
6
7
8
/* 弹出框左上角缩放显示 */
.pop-enter {
  transform: scale(.4);
}
.pop-enter-active {
  transition: all 0.2s;
  transform-origin: top left;
}

还可以使用animate.css，改变transition的enter-active-class属性设置入场，改变leave-active-class设置离场动画(还是需要给父元素overflow:hidden):

1
2
3
4
5
6
<transition duration="1000"
  enter-active-class="animate__animated animate__fadeInRight"
  leave-active-class="animate__animated animate__fadeOutLeft"
>
  <router-view/>
</transition>

封装Axios请求

vue中使用axios发起post请求要么每次请求都要配置header,要么必须使用urlencoded格式传参:a=1&b=2，可封装为表单序列化的post请求:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//axios挂载到vue原型方式
import Vue from "vue"
export default {
  /**
   * @param {String} url 
   * @param {Object} data 
   * @param {Function} callback 
   */
  post(url, data, callback) {
    const ret = []
    Object.keys(data).forEach(ele => ret.push(`${ele}=${data[ele]}`))
    Vue.prototype.axios.post(url, ret.join('&')).then(res => callback(res.data))
  }
}
//axios.create创建请求分支实例方式
//拦截post请求并转换参数
import axios from 'axios'
//create方法创建请求分支，不同分支可设置不同的默认参数。比全局axios配置更灵活,只是不能取消请求和批量请求,其他语法全部一致
const interfaceOne = axios.create({
  baseURL: '/api'
})
interfaceOne.interceptors.request.use(config => {
  const data = config.data
  if (config.method === 'post' && data) {
    const ret = []
    Object.keys(data).forEach(ele => ret.push(`${ele}=${data[ele]}`))
    config.data = ret.join('&')
  }
  return config
})
//文件上传的axios实例
//input框上传时都是用append进FormData实例再将实例作为data
export function uploadFile(config) {
  const inter = axios.create({
    baseURL: '/api',
    timeout: 5000
  })

  inter.interceptors.request.use(config => {
    load = Vue.prototype.$loading({
      lock: true
    })

    config.method = 'post'  
    config.headers = {'Content-Type':'multipart/form-data'}
    console.log(config)
  
    return config
  })
  inter.interceptors.response.use(res => {
    closeLoad()
    return res.data
  })

  return inter(config)
}

//请求结束后关闭加载效果
function closeLoad() {
  if (!timer) {
    load.close()
  } else {
    clearTimeout(timer)
    timer = setTimeout(() => {
      load.close()
      clearTimeout(timer)
      timer = null
    }, 400)
  }
}

组件通信方法

父子组件

  • props和$emit(常用)

  • v-model

    父组件通过v-model传递值给子组件时，会自动传递一个value的prop，在子组件中用props接收，并通过this.$emit(‘input',val)自动修改v-model绑定的值。涉及到双向绑定原理如input:

    input动态绑定一个value，通过input事件动态修改这个value

    在vue2.2以后，新增了model选项来自定义v-model绑定的prop和事件:

    1
    2
    3
    4
    model: {
      prop: "val", //将不会使用默认的value
      event: "change" //将不会使用默认的input
    }

  • $parent和$children

  • ref操作子组件

  • $attrs和$listeners – 祖先

    • 组件实例.$attrs获取祖先组件传递来的所有未被props接收的属性

      可以通过给下一个后代组件v-bind="$attrs"将未接收的属性继续传递下去

    • 组件实例.$listerners获取祖先组件传递来的所有自定义方法

      可以通过给下一个后代组件v-on="$listeners"祖先组件传来的自定义方法继续传递下去，后代组件就可以直接通过$emit调用

  • provide和inject(vue 2.2+) – 祖先

    父组件中通过provide（obj）来提供变量，然后在子组件中通过inject(arr)来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。缺点就是修改祖先提供的值不方便

    • provide的普通数据并不是响应式的,。将已经定义好的响应数据对象传入，然后此数据内部才能响应

    • 若provide定义为对象，里面this是拿不到vue实例的,必须定义为方法且返回提供的数据对象

      1
      2
      3
      4
      5
      6
      //obj是data中的响应数据，其内部的属性是响应的。直接传内部的普通数据不会响应，必须将obj整个传入,子组件注入后使用其属性
      provide() {
        return {
          provideData: this.obj
        }
      }

非父子组件间也适用

  • 中央事件总线

    新建一个Vue实例bus，然后通过bus.$emit触发事件，bus.$on监听触发的事件。

    若组件通过router-view切换后被销毁，可使用keep-alive保留状态

  • vuex

    1. 使用前需要Vue.use(Vuex)

    2. 创建仓储对象：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      var store=new Vuex.Store({   
        state: {相当于data属性存储数据}，  
        mutations: {相当于methods存储方法
        //mutations中的方法最多有两个参数: 1.state属性  2.传入的参数 
        },
        actions: {
          fn(context,传入的参数){
            context.commit('mutations中的方法')//自定义触发mutations中的方法，使其可异步
      	  }                
        },                     
        getters:{   //包装state中的数据
          自定义方法: function(state){    
            return 包装后的数据
      	  }
      	},
        //模块化管理模式。
        modules:{	
         a: {
             state: {},
             getters: {}...
           }
       } 
      })

  1. 再将仓储对象挂载vue实例的store属性

    • 组件中访问store中的数据必须this.$store.state.数据

  • 调用mutations中的方法必须this.$store.commit('方法名', 传入的参数)

  • 使用getters包装后的数据通过this.$store.getters.自定义方法

    getters只对外包装数据，修改实际state数据还是找mutations

    如果用到state的数据，用到的数据被修改会立即重新计算包装

    • 使用actions中的方法通过this.$store.dispatch('方法名', 传入的参数)

      • actions中方法第一个参数为context,第二个参数为传入的参数。可通过context.commit(mutations中的方法)配合异步操作修改数据，如Promise+async / await(mutations内不能异步操作),

    • Vuex 允许我们将 store 分割成模块,每个模块拥有自己的 state、mutation、action、getter, modules。使用modules如下：

      • 组件内调用a模块的状态:this.$store.state.a.数据
      • mutations和actions使用方式与非模块相同,actions中context.state是模块状态，context.rootState才是根节点状态
      • mutations和getters中的方法第一个参数是模块自身的state
      • getters第三个参数是rootState

  • mapGetters和mapActions映射

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //通过import从vuex中引入:
    import {mapGetters} from 'vuex'
    import {mapActions}	from 'vuex'
    //在computed中使用:		将对应getter直接当做组件计算属性使用
    ...mapGetters(['getterName'...])
    ...mapGetters({'getterNewName': 'getterName'})	//重命名
    //在methods中使用:		将对应action直接当做组件方法使用
    ...mapActions(['actionName'...])
    ...mapActions({'actionNewName': 'actionrName'})	//重命名

    此外还有mapState=>computed，mapMutations=>methods用法和效果类似

多行文本截断

vue-clamp实现多行文本截断并在末尾同一行最后加入按钮等元素，支持插槽。

如果需要自己实现，可以通过:

  • 最外部块级元素。文本容器应该是行内元素(文本跟末尾/头部按钮也要包在一个行内元素内)。
  • 计算内容需要的总高度: 最外部总高度 = 内容行高 * 行数。要特别注意:
    • 末尾/头部按钮高度如果大于行高，会影响该行的高度
    • 最外部如果设置了padding，高度需要算上paddingTop和paddingBottom
    • 以上计算可以使用getComputedStyle拿到实际样式值
  • 文本容器内尾部/头部加入的按钮等元素，设置display: inline-block才能和文本文字同一行
  • 设置文本容器visibility: hidden，并循环文本字符串逐个添加到文本容器(尾部可能加上...等省略符)，直到实际总高度超过之前计算的总高度，就取上一次的字符串
  • 最后再设置文本容器visibility: visible展示。

已通过vue实现该组件，需要源码的可以联系我，乐意分享

浅谈富文本

除表单元素外，其他元素默认不可编辑。html5提供了contenteditable属性定义元素为可编辑状态，可借此实现富文本编辑器。

  • 定义contenteditable后聚焦时默认会出现外边框使用css取消:

    1
    [contenteditable]:focus{outline: none;}

  • 没有change事件，通过元素的keyup事件监听修改

  • 使用getSelection()获取光标起始位置信息，其getRangeAt方法获取range对象,addRange 和 removeAllRanges向当前选取添加一个 range 对象和 删除所有 range 对象

    1
    let range = selection.getRangeAt(0);

    range对象的主要属性:

    • startContainer: range 范围的起始节点。

    • endContainer: range 范围的结束节点

    • startOffset: range 起点位置的偏移量。

    • endOffset: range 终点位置的偏移量。

    • commonAncestorContainer: 返回包含 startContainer 和 endContainer 的最深的节点。

    • collapsed: 返回一个用于判断 Range 起始位置和终止位置是否相同的布尔值。

      操作range节点的主要方法:

    • setStart(): 设置 Range 的起点

  • setEnd(): 设置 Range 的终点

    • selectNode(): 设定一个包含节点和节点内容的 Range

  • collapse(): 向指定端点折叠该 Range

    • insertNode(): 在 Range 的起点处插入节点。

  • cloneRange(): 返回拥有和原 Range 相同端点的克隆 Range 对象

vue-quill-editor使用

  1. 安装: npm i -S vue-quill-editor

  2. 样式引入:

    1
    2
    3
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

  3. 注册

    • 全局

      1
      2
      import VueQuillEditor from 'vue-quill-editor'
      Vue.use(VueQuillEditor, {placeholder: '请输入'})

    • 组件内

      1
      2
      3
      4
      5
      import {quillEditor, Quill} from 'vue-quill-editor'
      //实例内
      components: {
        quillEditor
      }

  4. 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //工具栏配置
    const toolbarOptions = [
      ["bold", "italic", "underline", "image"], // toggled buttons
      [{ header: 1 }, { header: 2 }],
      [{ color: [] }]
    ]
    //data中:
    content: '内容',
    editorOption: {
      modules: {
        toolbar: {
          container: toolbarOptions, // 工具栏
          handlers: {
            image: function() {
              //监听工具栏图片点击
            }
          }
        }
      }
    }

  5. 使用

    1
    <quill-editor class="quil" ref="QuillEditor" v-model="content" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
    • 使用v-model+change事件可自定义富文本展示的内容，此外还有focus、blur事件

使用quill-image-extend-module上传插件总会使新图片插入在最前面,光标也在最前面，因此打算用input自定义图片的上传和插入，见下文

  • input文件上传并插入

  1. 图片上传按钮触发:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //工具栏中配置handler
    toolbar: {
      container: toolbarOptions, // 工具栏
      handlers: {
        image: function(value) {
          if (value) {
            document.querySelector('#upload').click()
          } else {
            this.quill.format('image', false)
          }
        }
      }
    }

  2. html添加隐藏的文件input:

    1
    <input type="file" name="img" id="upload" @change="up" style="display:none;">

  3. 给隐藏的文本input添加change事件监听上传

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    inputChange(e) {
      let formData = new FormData()
      formData.append('file', e.target.files[0])
      this.axios.post('/upload', formData)
      .then(res=>{
            this.upSuccess(res.data.data.url)
       })
    },
    //上传成功后在富文本最后添加对应url的图片标签
    upSuccess(url) {
      let quill = this.$refs.QuillEditor.quill
      let length = quill.getSelection().index
      quill.insertEmbed(length, 'image', url)
      quill.setSelection(length + 1)
    }

vue中使用ueditor

使用

  • 在public下的static目录存放UEditor目录

  • npm i vue-ueditor-wrap@2.x v2只支持vue2

  • 引入组件并使用:

    • template中

      1
      2
      3
      4
      5
      6
      <vue-ueditor-wrap
        :config="editorConfig"
        v-model="richText"
        @beforeInit="初始化前回调"
        @ready="初始化完成回调"
      />

    • 模板中

      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
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      import VueUeditorWrap from "vue-ueditor-wrap";

      //组件option中注册
      components: {
        "vue-ueditor-wrap": VueUeditorWrap
      },
      //data中添加
      editorConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 语言
        lang: "zh-cn",
        // 设置自带工具栏
        toolbars: [
          [
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
            "|",
            "pagebreak",
            "|",
            "horizontal",
            "date",
            "time",
            "spechars",
            "|",
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "splittocells",
            "splittorows",
            "splittocols",
            "|",
            "preview",
            "searchreplace"
          ]
        ],
        // 上传接口地址
        serverUrl: "",
        // UEditor资源目录
        UEDITOR_HOME_URL: "./static/UEditor/"
      },

    • 添加自定义图片上传按钮

      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
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      //beforeInit回调传入下面方法自定义图标,手动触发隐藏的文件域点击并上传图片
      beforeInitHandle: function(editorId) {
        // console.log(`${editorId}的配置参数：${JSON.stringify(config)}`);
        window.UE.registerUI(
          //按钮标识，上传图片后需要这个标识调用editor.execCommand插入图片
          this.editorInsertImage, 
          (editor, uiName) => {
            this.editor = editor;
            // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
              execCommand: (name, data) => {
                editor.execCommand("insertimage", {
                  src: data.imgUrl,
                  height: "100"
                });
              }
            });
            // 创建按钮
            const btn = new window.UE.ui.Button({
              // 按钮的名字
              name: uiName,
              // 提示
              title: "插入图片",
              // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
              cssRules:
                background-image: url(../images/icons.png); background-position: -380px 0px;"
              // 单击
              onclick: () => {
                const ueditorSelectImg = this.$refs["ueditorSelectImg"];
                if (ueditorSelectImg) {
                  ueditorSelectImg.click();
                }
              }
            });
            // 当点到编辑内容上时，按钮要做的状态反射
            editor.addListener("selectionchange", () => {
              const state = editor.queryCommandState(uiName);
              if (state === -1) {
                btn.setDisabled(true);
                btn.setChecked(false);
              } else {
                btn.setDisabled(false);
                btn.setChecked(state);
              }
            });
            return btn;
          },
          // 指定添加到工具栏上的哪个位置，默认时追加到最后
          49,
          // 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮
          editorId
        );
      },
      //隐藏文本域的change事件
      editorFileChangeHandle: function(e) {
        const files = e.target.files;
        if (files.length === 0) {
          return;
        }
        const file = files[0];
        const right = checkUploadImg(file, this.checkImageCallBack);
        if (!right) {
          return;
        }
        const loaded = res => {
          // 清空富文本编辑器文件
          this.clearEditorFile();
          //上传图片
          this.editorUploadImage = true;
          const params = {
            base64: res,
            group: "richText"
          };
          saveImg(params).then(res => {
            this.editorUploadImage = false;
            const code = dataIsNullNumber(res.code);
            if (code === 0) {
              const imgFileUrl = dataIsNullStr(res.data);
              if (this.editor && this.editor.execCommand) {
                //上传后将返回的图片插入到编辑器
                this.editor.execCommand(this.editorInsertImage, {
                  imgUrl: `${GETIMG}${imgFileUrl}`
                });
              }
            }
          });
        };
        const loadfailed = msg => {
          // 清空富文本编辑器文件
          this.clearEditorFile();
          this.$root.showMessage("error", msg);
        };
        // 获取图片base64
        getImageBase64(file, loaded, loadfailed);

在vue-ueditor-wrap内部初始化之前修改v-model绑定的数据可能导致出现不止一个富文本编辑器，造成页面和数据错误。需要在ready事件中异步获取数据

回流和重绘

  • reflow回流，如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。下面情况会导致reflow发生

    • 改变窗口大小

    • 改变文字大小

    • 内容的改变，如用户在输入框中敲字

    • 激活伪类，如:hover

    • 操作class属性

    • 脚本操作DOM

    • 计算offsetWidth和offsetHeight

    • 设置style属性

  • repaint重绘，重绘速度快于reflow。只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint

VSCode

霓虹灯主题

windows下:

  • 安装 SynthWave ‘84
  • ctrl + shift + P 输入 Enable custom CSS and JS 并点击
  • 再次 ctrl + shift + P 输入 Enable Neon Dreams 点击
  • 重启vscode

打字特效

  • 安装 Power Mode

  • 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    "powermode.enabled": true,
    //样式
    // 火焰
    // "powermode.presets": "flames",
    // 炸裂
    // "powermode.presets": "exploding-rift",
    // 爆炸
    // "powermode.presets": "simple-rift",
    // 粒子
    "powermode.presets": "particles",
    // 烟花
    // "powermode.presets": "fireworks",
    // 魔法
    // "powermode.presets": "magic",
    // 回形针
    // "powermode.presets": "clippy",
    // 时间间隔
    "powermode.comboTimeout": 0,
    // 抖动
    "powermode.enableShake": false,
    // "powermode.shakeIntensity": 3
    // 随字体颜色变化
    // "powermode.backgroundMode": "mask"
赏

谢谢你请我吃糖

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
前端开发、Hexo博客、Vue、微信小程序爱好者