记录一些有用的代码片段

javascript

• 比较一个大的对象中的除了某一个子对象的其他对象是否相等

  1 2 3 4 5 6 7 8

  componentWillReceiveProps (nextProps) { const staticNextProps = lodash.cloneDeep(nextProps) delete staticNextProps.columns const { columns, ...otherProps } = this.props const isEqual = lodash.isEqual(staticNextProps, otherProps)); ...... }

点评
很巧妙的在不破坏原数据(nextProps)的情况下深拷贝出来一个对象staticNextProps,因为不需要比较columns这个子对象，然后删除这个子对象，最后更巧妙地是使用ES6的rest运算符…otherProps将this.props中除了cloumns子对象的其他对象包装成一个新的对象，最后使用lodash的isEqual深比较方法进行比较，非常犀利的思路！
此段代码来自antd-admin示例代码

react中state定义的3种方式

大家都知道的在react组件中，我们通过props和state来控制数据，props是在父组件中被指定的
而且一经指定，在被指定的组件的生命周期内是不能够进行改变的，对于需要改变的数据，只能依托
state来进行处理了，所以就引申出了一个话题，如何初始化state呢？
我根据react的发展历程来进行总结出3中写法。

ES5 在getInitialState中进行设置

1
2
3
4
5
6
7
8
9
10

var MyComponent = React.createClass({
    getInitialState:function(){
        disable:false
    }
    render:function(){
        return (
            <button disable={this.state.disable}>submit<\/button>
        )
    }
})

这种写法是es5的写法，比较老了，不推荐使用这种方式写，当时出现这种方式主要是因为webpack和 babel还未兴起，现在他们大行其道，自然大家更倾向于es6的写法了。

ES6 在constructor中进行设置

1
2
3
4
5
6
7
8
9
10
11
12
13

class MyComponent extends PureComponent {
    constructor(props){
        super(props)
        this.state = {
            disable:false
        }
    }
    render(){
        return (
            <button disable={this.state.disable}>submit<\/button>
        )
    }
}

es6提出了class的概念，constructor作为一个类的入口，每次初始化的时候都会执行constructor中的代码，所以我们可以将state写在构造函数中，这个也是react官方推荐的写法。

ES7 定义实例属性

1
2
3
4
5
6
7
8
9
10

class MyComponent extends PureComponent {
    state = {
        disable:false
    }
    render(){
        return (
            <button disable={this.state.disable}><\/button>
        )
    }
}

ES6中不支持在class中定义类的属性，只能定义方法，例如：

1
2
3
4
5
6
7

class Foo{
    name:a,
    method(){
        console.log(this.name)
    }
}
Foo.name     //undefined

而在ES7的提案中允许通过“=”赋值的方法设置类的实例属性。

<完>

配置云服务器

配置清单
供应商：京东云服务平台
镜像：centos 6.8 64位
CPU：1核
内存：1GB
系统盘：30G

1、SSH方式连接服务器

1

$ ssh root@ip

根据提示已经将这台服务器的指纹添加到known hosts,然后提示输入密码，密码正确就显示：

1

[root@username ~]#

2、断开服务器的连接

1

$ logout

3、本地文件上传到服务器

1

$ scp /path/filename username@servername:/path,

例如：

1

$ scp ./ssh.md root@192.168.1.3:/root/phobal/test/

把本机当前目录下的shh.md拷贝到服务器/root/phobal/test/文件夹下

4、上传文件夹

1

$ scp /path/folder/* username@servername:/path

例如：

1

$ scp /websites/machine/* root@192.168.1.3:/root/phobal/test/

5、从服务器上下载文件

1

$ scp username@servername:/path/filename

例如：

1

$ scp root@222.187.245.173:/root/phobal/test/hello.js

6、从服务器下载整个文件夹
参考 http://www.2cto.com/os/201304/205467.html

7、用户管理

• 添加用户

  1	$ adduser XXX

• 为上面添加的用户添加密码或者对已经建立好的用户修改密码

  1	$ passwd XXX

• 删除用户

  1	$ userdel XXX

• 为用户添加root权限

修改/etc/sudoers 文件，找到下面一行，在root下面添加一行，如下所示：

1
2
3
4
5

##Allow root to run any commands anywhere
root    ALL=(ALL)     ALL
XXX   ALL=(ALL)     ALL

修改完毕，现在可以用 XXX 帐号登录，然后用命令sudo ，即可获得root权限进行操作

• 当使用 vim 编辑一个文件的时候出现权限不够文件保存不了的时候可以使用下面的命令解决

1

:w !sudo tee %

然后根据提示输入 L

React绑定事件的方法总结

在使用react进行组件化开发过程中，对组件中的某一个元素进行绑定事件是一个经常做的工作，比如：提交表单按钮click事件、文本框输入值后的onchange事件等等。以下总结下我在平常开发中常用的4种方法。

1、在元素中写bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from 'react';
export default class Component extends React.Component {
    constructor(props){
        super(props)
    }
    onClick(e){
        console.log(e)
    }
    render(){
        return (
        <button onClick = {this.onClick.bind(this)} />
        )
    }
}

2、在constructor中写bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React from 'react';
export default class Component extends React.Component {
    constructor(props){
        super(props)
        this.onClick = this.onClick.bind(this)
    }
    onClick(e){
        console.log(e)
    }
    render(){
        return (
        <button onClick = {this.onClick} />
        )
    }
}

3、使用箭头函数

箭头函数可以绑定this对象，大大减少显式绑定this对象的写法(call,apply,bind)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from 'react';
export default class Component extends React.Component {
    constructor(props){
        super(props)
    }
    onClick(e){
        console.log(e)
    }
    render(){
        return (
        <button onClick = {() => this.onClick} />
        )
    }
}

4、使用函数绑定运算符’::’

箭头函数并不是适合运用于所有的场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用

函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from 'react';
export default class Component extends React.Component {
    constructor(props){
        super(props)
    }
    onClick(e){
        console.log(e)
    }
    render(){
        return (
        <button onClick = {::this.onClick} />
        )
    }
}

传递参数

将bind中的第二个参数作为需要传递的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from 'react';
export default class Component extends React.Component {
    constructor(props){
        super(props)
    }
    onClick(name,e){
        console.log(name) //{'name':'Jack'}
    }
    render(){
        return (
        <button onClick = {this.onClick.bind(this,{'name':'Jack'})} />
        )
    }
}

开发相关

1、前端开发环境搭建

• 1.1、node环境安装
  1.1.1、NVM 安装
  为避免各个项目中使用到的node版本不一致的问题，所以推荐使用NVM来进行管理node的版本，需要哪 版本的node就切换哪个版本，比较方便。
  安装方式参照https://segmentfault.com/a/1190000004404505
  1.1.2、查看远程可以下载的nodejs版本

  1	$ nvm ls-remote

  1.1.3、下载需要的版本号

  1	$ nvm install v7.2

  1.1.4、设置默认的版本号

  1	$ nvm alias default 7.2

• 2.1 nginx安装
  2.1.1、使用brew安装nginx

  1	$ brew install nginx

brew 又叫Homebrew,是Mac系统中用来安装软件包的包管理器
2.1.2、启动nginx

1

$ nginx

默认开启8080端口
2.1.3、停止nginx

1

$ nginx -s stop

2.1.4 查看所有nginx服务

1

$ ps -ef | grep nginx

• 3.1 mac 查看端口
  3.1.1 查看所有被使用的端口号

  1

  $ lsof

  3.1.2 查看某个端口号是否被占用

  1	$ lsof -i:yourport(如：8080)

  3.1.3 查看某个端口具体是哪个应用程序占用了的可以用:

  1	$ ps aux | grep yourport

• 4.1 用Python启动一个小型的服务器

  1	python -m SimpleHTTPServer 9992

• 5.1 ssh断开Linux使进程一直开启

  1	$ nohup python -m SimpleHTTPServer 9992 &

• 6.1 复制一个文件到另外一个文件夹下

  1	$ cp -Rf 源路径/ 目标路径/

例如：

1

$ cp -Rf ./build/* user/sites/

• 7 Python断点调试
  ①在需要调试的位置加上以下代码

  1	import pdb; pdb.set_trace()

②在控制台运行该脚本文件

1

$ python -m pdb XXX.py

然后就会在第①步的地方停止

1

(Pdb)

这时按‘c’继续,并且可以在控制台打印需要显示的值

• 8 查看文件大小

  1 2	df -h # 查看磁盘大小 du -h # 查看文件夹的大小

• 9 创建文件夹并进入

  1	mkdir folder_name && $_

• 10 查看动态日志

  1 2 3

  tail -f xx.log # 或者 -d表示高亮不同的地方，-n表示多少秒刷新一次 watch -d -n 1 cat xx.log

开发无关

*1、node转换base64

1
2

$ node //进入node环境
> new Buffer('Y0Bmb295by5zZw','base64').toString()

vim 常用命令

1. 全选

   1

   ggVG

gg 让光标移动到首行
V 进入Visual模式
G 光标移动到最后一行
选中内容以后就可以对选择的内容做其他处理了，比如:
d 删除选择内容
y 复制选择内容到 0 号寄存器
“+y 复制内容到 + 寄存器中，也就是系统粘贴板，可以供其他程序用

该博客系统使用开源博客工具Hexo搭建 官网Hexo! 介绍 github地址 GitHub.

快速入门

创建新文档

1

$ hexo new "My New Post"

更多信息: Writing

运行服务

1

$ hexo server

更多信息: Server

生成静态文件

1

$ hexo generate

更多信息: Generating

部署到远程站点

1

$ hexo deploy

更多信息: Deployment

VisualStudio Code extension List

1、JS-CSS-HTML-Formatter

自动格式化js、css、html代码插件，最新版本0.2.1有点儿恶心，没输入完一个字母都会去格式化
体验不是很好

2、React Redux ES6 Snippets

Redux 代码片段插件，很实用，比如写mapStateToProps方法，只需要输入mstop+Tab键，就可以
自动生成如下代码：

1
2
3
4
5
6

const mapStateToProps = (state, ownProps) => {
  return {
    prop: state.prop
  }
}

3、Reactjs code Snippets

react 常用的代码片段插件

4、Python

支持编写python环境的插件

5、Easy LESS

将less文件自动编译为css文件

目的

弥补chrome浏览器只能在书签管理器中才能进行对书签进行搜索，该插件可以直接在浏览器顶部进行搜索已有书签

简单的效果图

简单的目录结构

文件说明：

images 文件夹主要拿来存放插件中需要用到的图片文件
main.js是整个插件的逻辑代码
manifest.json插件的配置文件
popup.html插件的页面结构文件
styles.css样式文件

写扩展最主要的就是配置manifest.json文件中的permissions属性获取chrome浏览器的权限
参考chrome开发者文档https://developer.chrome.com/extensions
360浏览器对chrome开发文档做了一个翻译http://open.chrome.360.cn/extension_dev/overview.html

测试

chrome浏览器-》菜单-》更多工具-》扩展程序-》勾选开发者模式-》加载已解压的扩展程序
加载后就可以开始测试了，如果需要断点调试可以新建一个tab页面，然后输入chrome-extension://你的扩展id/popup.html

具体代码见github
https://github.com/phobal/b-note/tree/master/bookmarks

目的

为了减少每次编写插件时都去重新建一次目录

yeoman项目的目录结构

generators目录下的文件结构

templates存放最终生成的文件结构（下图的样子）
index.js 逻辑代码

最终生成的目录结构

Yeoman

有一种技术可以提高我们的工作效率，可以让我们专心做我们擅长的事，可以屏蔽复杂性，可以规范我们的架构和我们的代码，可以让我们的享受编程的乐趣。Yeoman可以做到。

很多年以前，rails刚刚出世，伴随着一个新的名词“脚手架(scaffolding)”出现了。脚手架是一种提高开发效率的工具的代名词。随后，各种编程语言都开始实现自己的“脚手架”工具。Maven重新构造了Java的世界，改变了几千万的开发者对于Java项目构建的认识。Yeoman在Javascript领域正做着同样的事情。

官网 http://yeoman.io/

使用方法

1、全局安装

1

$ npm install yo  -g

2、本地安装

1

$ npm install yeoman-generator --save

3、生成package.json文件

1

$ npm init

最终代码应该是这样的

1
2
3
4
5
6
7
8
9
10
11
12

{
  "name": "generator-yo-chrome-extension",
  "version": "0.1.0",
  "description": "",
  "files": [
    'generators'
  ],
  "keywords": ["yeoman-generator"],
  "dependencies": {
    "yeoman-generator": "^0.24.1"
  }
}

• 关键点：
  a、files 就是生成项目的文件，这个必须的有,我这里文件名是generators（这里必须得一致才行，不然在往npm上传的时候不会将这个文件夹给上传上去)
  b、keywords 关键字中必须得包含yeoman-generator
  c、dependencies项目必须依赖yeoman-generator
  4、编写脚手架核心代码
  index.js核心代码

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

  writing() { this.fs.copy( this.templatePath('main.js'), this.destinationPath('main.js') ); this.fs.copy( this.templatePath('styles.css'), this.destinationPath('styles.css') ); this.fs.copy( this.templatePath('manifest.json'), this.destinationPath('manifest.json') ); this.fs.copy( this.templatePath('popup.html'), this.destinationPath('popup.html') ); mkdirp('images'); } });

5、本地测试
在package.json同级的目录下通过link的方式

1

$ npm link

将脚手架工具安装到安装到本地，任意新建一个文件夹，在该文件夹下测试是否能成功生成

1

$ yo your-generator-name

比如

1

$ yo yo-chrome-extension

6、发布

当测试没有问题了，可以上传到npm上

步骤

• a、创建用户
  在https://www.npmjs.com/注册

• b、添加用户

  1	$ npm adduser

• c、上传

  $ npm publish
  

源码：https://github.com/phobal/b-note/tree/master/generator-yo-chrome-extension

完