我个人的coding风格

Author Avatar
Feax 11月 26, 2017
  • 在其它设备中阅读本文章

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

识别度高的 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 为例):

    //组件
    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 {
            }
        }
    }

转载请注明出处,谢谢!


本文链接:http://blog.jzxer.cn/我个人的coding风格.html