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来自动清空

javascript node

搭建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']
           }
         }
       }
webpack angular4

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
node

各语言开发必备插件faker

背景

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

应用

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