Css 布局篇

一、布局

1、居中

(1) 水平居中

A、子元素行内元素

1
2
3
<div class="parent">
<span class="child">子元素为行内元素</span>
</div>

阅读全文

统计函数

1、统计数组中每个元素出现的次数

1
2
3
4
5
6
7
8
9
const nums = [3, 5, 6, 22, 1, 4, 3, 5, 22, 0];

const result = nums.reduce((tally, amt) => {
tally[amt] ? tally[amt]++ : tally[amt] = 1;
return tally;
}, {});

console.log(result);
//{ '1': 1, '3': 2, '4': 1, '5': 2, '6': 1, '82': 2 }

阅读全文

nodeJs

一、模块化编程

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

阅读全文

Egg

一、入门

1、初始化项目

1
2
3
4
5
6
// 利用脚手架初始化项目
mkdir egg-example
cd egg-example
npm init egg --type=simple
npm i
yarn dev

阅读全文

正则

一、正则表达式是什么

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

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

阅读全文

Webpack

一、安装

1. 本地安装

1
2
3
4
5
6
# webpack 4+ 版本
npm install --save-dev webpack-cli
npm install --save-dev webpack

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

阅读全文

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

一、设置 vue.config.js,my-project 对应的是 github 上的项目名称

1
2
3
4
5
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'
}

阅读全文

四个JS小技巧

一、尽早结束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
}

阅读全文

数组、对象的深拷贝

数组的深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

1
2
3
4
5
6
7
8
9
10
let len = 5;

// method1
let arr = Array(len)
.fill(null)
.map((v, i) => String.fromCharCode(65 + i));
// method2
let arr = Array.apply(null, { length: len }).map((v, i) => String.fromCharCode(65 + i));

console.log(arr); //[ 'A', 'B', 'C', 'D', 'E' ]

阅读全文