vim保存去除^M

1
2
3
augroup fmt
autocmd BufWritePre *.ts silent! %s/^M//g|''
augroup END

*.ts 这里匹配了所有ts为后缀的文件

slient! 如果没有匹配到不显示提示

|’’ 替换完返回原先位置

vim

学习一门新的语言的学习顺序

  • 基础语法
  • 了解特性
  • 交互(http请求,数据库应用等)
  • 错误处理机制
  • 缓存机制
  • 进阶语法 (只是让你更快的编程)
  • 更好的组织架构

从es6开始学习javascript

es6之前拒绝学习js的话,目前已经爱上了js

  1. 基础语法 (变量,字符串, 数组, 函数, 对象)
  2. 特性 (set , map , promise & async, symbol, Generator, Decorator, module)
  3. 交互
  4. 错误处理机制 (try…catch , Error)
  5. 理解变量内存地址
  6. 进阶(Reflect ,Proxy)
  7. 学习redux (我认为一个前端程序员对redux的使用的熟练度,和编程思想的应用是直接的技术体现)

javascript 引用

对于javascript不熟悉的同学应该好好认识一下它的引用机制

内存泄漏

关于内存泄漏,请直接复制黏贴搜索文章查看

声明变量存储一个对象的实质

1
2
3
4
5
6
7
8
9
10
11
12
let a = {
c: 1,
b: 2
};
let c = a;
c.c = 3;
console.log('now a is ', a)
//now a is Object {c: 3, b: 2}

可以看出c变量只是对a变量的引用, 改变c的同时也改变了a。
即它们在内存中存储地址是一致的

仅仅在一个层级上做复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let a = {
c: 1,
b: 2,
d: {
e: 1
}
};
let c = {...a};
c.d.e = 3;
console.log('now a is ', a)
//e:3

即…运算符只是做了浅拷贝, 并没有做深度拷贝
那么正确的做法是

1
let c = {...a, d: { ...a.d} };

注意 Object.assign 也是浅拷贝类型

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
//demo 1
let a = {
c: 1,
b: 2,
d: {
e: 1
}
};
let c = Object.assign({}, a);
c.b = 5;
c.d.e = 3;
console.log('now a is ', a)
// c.b = 2
// c.e = 3
//demo2
let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
let b = [...a];
b[6].c = 2;
console.log(b);
console.log(a);
[ 1, 2, 3, 4, 5, 6, { c: 2 } ]
[ 1, 2, 3, 4, 5, 6, { c: 2 } ]

数组的更新

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
let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
let b = a;
b[1] = 20;
console.log(b);
console.log(a);
//log
[ 1, 20, 3, 4, 5, 6, { c: 2 } ]
[ 1, 20, 3, 4, 5, 6, { c: 2 } ]
let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
let b = a;
b[1] = 20;
b = [1, 2, 3, 4];
console.log(b);
console.log(a);
//log
[ 1, 2, 3, 4 ]
[ 1, 20, 3, 4, 5, 6, { c: 8 } ]
let a = [1, 2, 3, 4, 5, 6, { c: 8 }];
let b = a.slice();
b[1] = 20;
b[6].c = 10;
console.log(b);
console.log(a);
//log
[ 1, 20, 3, 4, 5, 6, { c: 10 } ]
[ 1, 2, 3, 4, 5, 6, { c: 10 } ]

可见只要是对象那么就需要进行全拷贝

以上在编程过程中一定要注意

javascript内存泄漏问题

javascript主要在于对象引用的使用中产生内存泄漏

如果引用对象被清空后,所有引用都自动清除的话

如:

1
2
3
4
5
6
7
8
9
10
let a = {c :1 }
let c = [a, 'hello world'];
a = null;
console.log(c)
//可以看到结果
[Object, 3]

为了解决这个问题,通常要手动清除该对象

1
c[0] = null;

这是平时编程需要注意到的地方或者可以使用es6中的WeakMap来自动清空

搭建angular4 + webpack

官方推荐基础包

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
### mkdir ap && cd ap
wget -O webpack.zip https://angular.cn/resources/zips/webpack/webpack.zip
unzip webpack.zip
npm install
npm i --save-dev html-webpack-plugin style-loader css-loader babel-loader eslint-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-1 babel-plugin-transform-class-properties eslint babel-eslint postcss-loader
npm install --save babel-runtime
### vim src/tsconfig.json
add "allowJs": true
under "compilerOptions"
### vim config/webpack.common.js
### at module.rules add
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'eslint-loader',
options: {}
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'stage-1'],
plugins: ['transform-runtime', 'transform-class-properties']
}
}
}

hstart

###介绍

因为每次建测试环境都需要重复安装插件配置webpack等于是开发了一个简单的工具

1
npm i -g hstart

use

1
2
3
4
hstart -d your_project
//work with react
hstart -d your_project --react

create frontend environment with webpack

  • allow import css
  • allow import less
  • allow import html with art-template-loader
  • this tool is just create configs and start demo
  • allow es6 with babel

art-template

1
2
3
4
5
6
7
8
//index.js:
import list from './list.html';
list({title: 'hello world'});
//list.html
<h3>{{title}}</h3>

build

1
npm run build

develope

1
npm run dev

各语言开发必备插件faker

背景

当前开发经常需要大量的随机数据,如果这些随机数据是真实的,那么就太好了,于是faker就出现了, 并且当前几乎所有开发语言都有faker插件

应用

  • 多国语
  • 随机性强
  • 可生成随机图片链接
  • 生成信用卡信息
  • uuid
  • 等等…