Canvas 画动态路径

这个函数是一个用于画 canvas 路径的,也就是把 canvas 画线的过程演示出来的一个东东。采用的是纯 js 和 canvas 描绘方法。当然前提是得有路径的点集,不然画不了。

阅读全文

Npm 常用命令

1、安装

npm i <package>

npm i <package> -g

npm i <package> --save-dev

npm install @myco/my-package

阅读全文

nodeJs 模块

nodeJS 模块化编程指的是将一些通用的功能转移到不同的文件里,每个文件作为一个模块,暴露给其他文件使用。这样可以使代码更容易维护,更具通用性。

阅读全文

正则

一、正则表达式是什么

正则表达式就是记录文本规则的代码。

// 匹配中国的电话号码
0\d\d-\d\d\d\d\d\d\d\d
0\d{2}-\d{8}

阅读全文

Webpack

一、安装

1. 本地安装

# webpack 4+ 版本
npm install --save-dev webpack-cli
npm install --save-dev webpack

# 安装指定版本
npm install --save-dev webpack@<version>

阅读全文

Github + Travis 自动构建 Vue 项目到 Gitpage

github + travis 自动构建 vue 项目到 gitpage

阅读全文

四个JS小技巧

一、尽早结束

function transformData(rawData) {
// check if no data
if (!rawData) {
return [];
}

// check for specific case
if (rawData.length == 1) {
return [];
}

// actual function code goes here
return rawData.map(item => item);
}

阅读全文

数组、对象的深拷贝

数组的深拷贝

function copyObjectArray(x) {
return [...JSON.parse(JSON.stringify(x))];
}

// example 1
const test = [
{
name: 'Amy',
age: 18,
},
];
let test1 = copyObjectArray(test);
test1[0].name = 'Jack';
console.log(test, test1);
// test: [ { name: 'Amy', age: 18 } ] test1: [ { name: 'Jack', age: 18 } ]

阅读全文

对象属性值监听

Demo

let data = {
title: 'hello world!',
};

function definePropertyData(obj, prop, value) {
Object.defineProperty(obj, prop, {
get: function() {
console.log(111);
return value;
},
set: function(newValue) {
value = newValue;
},
});
}

definePropertyData(data, 'title', data.title);

console.log(data.title); // 111 hello world!
data.title = 38;
console.log(data.title); // 111 38

阅读全文

代码优化

用 vue 进行前端开发,怎么做到函数式编程呢?

每次做完项目,都会发现自己在代码的解耦,接口的封装方面做的还不够,后期必定会多次进行优化,在优化的过程中,就想到,如何把零散的代码,编程整体性更强的代码,使人一看到就知道手脚在哪里。在这里我的总结是,按功能点进行函数的封装,一个大点是一个函数,这个大点里面又有很多小点,可以把函数赋值给变量,进行使用,这样就不用每次都跳来跳去了,维护起来也更方便快捷。

阅读全文