---
title: 我个人的coding风格
date: 2017-11-26 13:46:13
tags: [CodingStyle, 未完成 ]
categories: web前端
---

我一直在探索属于我自己独一无二的代码风格

## 识别度高的 HTML

## 简洁大方的 CSS

## 可维护性强的 js

> 最近在看这本书，书中有很多技巧让我受益颇多

### 基本格式

* 缩进保持 4 个空格
* if else 语句和上一个 if 语句中间留个空行
* 注释另起一行
* 不写分号，保持样式简洁
* 符号与字符串之间要空行
* 中文和英文之间用空格拆开
* 单行代码长度不超过 80 个字符
* 如果一行代码超过最大限度，换行的给两个默认缩进，增加辨识度
* 另外，换行缩进不要带符号换行
* 命名方式：
        1· 方法函数是驼峰命名
        2· 构造函数是首字母大写命名
        3· 常量采取全大写命名
        4· js 中不要省略小数点前的 0 （css可以）
* 多次申明 单var
* if 语句即使再短，也不要写在一行
* 申明在调用的前面
* 函数调用，参数要左右空格，以突出参数
* 立即执行函数若赋值给某个对象，给该函数加一个圆括号
* 尽量不使用 === 和 != (强转换机制)
* css 和 JavaScript 的松耦合
* 避免使用全局变量
* 组件式开发时，_ 开头为私有方法，监听事件前缀为 handle，事件监听传递时，属性名用 on 开头
* react组件内容编写顺序：
        1. static 开头类的属性，eg：defaultProps， propTypes
        2. 构造函数 constructor
        3. getter/setter
        4. 组件生命周期
        5. _开头的私有方法
        6. 事件监听方法
        7. render* 开头的方法
        8. render

> EXP(以 react 为例):

```js 
    //组件
    class Exp extends Component {
        //初始化
        static propTypes = {
            onSubmit: PropTypes.func
        }

        //构造函数
        constructor () {
            super()
            this.state = {
                test: '1'
            }
        }

        // getter/setter
        getter() {

        }
        // 即将挂载
        componentWillMount () {
            localStorage.getItem('username')
        }

        // 已挂载
        componentDidMount () {

        }

        // 私有方法
        _selfFunction (username) {
            localStorage.setItem('username', username)
        }

        // 监听方法
        function1 () {
            //第一个 if 语句
            if () {
                var test = 'abc',
                    first = 1,
                    //立即执行函数
                    secound = (function () { return 0}())

                //第二个 if 语句
                if (allNumber || first || secound || third || monday || sunday || 
                        satarday) {
                    //第三个 if 语句
                    if () {
                        function act (ppt) {}

                        act( ppt )
                        }
                    }
            } else {
            }
        }
    }
```