网站前端开发的代码排版风格

2019/7/3 阅读:665次 来源:官网

虽然任何一种语言都没有任何约定的风格,但也总有一些不成文且喜闻乐见的习俗。以你的代码为例,给以下几个风格上的建议:
  • 每个function之间多一空行,是的,除去注释外再多一空行;
  • 适当加空格,比如if和后面的括号之间的空格、小括号和花括号之间的空格、冒号和function之间的空格等等;
  • 风格上保持一致,你的代码里面有的地方+号和运算数之间有空格,有的则没有;
  • 少用下划线开头的变量命名;
  • 一段代码里,var语句可以合并在一起;
  • 暂时不会再修改的function或object,先用编辑器折叠起来,看上去也会整洁很多;
  • 黑色背景的editor风格不错,不过关键字、注释、运算符等颜色上可以再调整,主要是为了防止审美疲劳,换个色调换个心情;
  • 使用成熟的javascript库

    如果没看错的话,你可能是使用了jquery吧(至少也有一个类似sizzle或更简单的解析器,证据在倒数第十行左右)。所以,就尽可能避免使用原生的javascript.dom操作。

    jquery的符号,以cssselector风格统一取代了各种getelement(s)byxxx的接口,并且扩展性非常强,是很多设计模式思想的综合运用。

    当然原生dom也有自己的优势(主要是执行效率),但是大部分时候,在开发效率、代码质量、执行效率的tradeoff中,jquery还是最佳选择。此外也推荐下javascript.mvc库、jqueryui库等等。

    代码整理
    构思清楚,再写代码,你已经做到了。
    但是,谁能保证代码是一成不变、一劳永逸的呢?
    所以,「重构」的时候,除非是时间紧迫,永远不要松懈代码质量。
    web前端爱好者toobug对楼主的代码也进行了详细的点评,并且也给出了一些非常有意义的指导:

    代码中逻辑没有分块、没有空行、没有注释、看起来很累,建议对代码进行分块,比如将变量集中在头部定义,然后处理一些赋值,最后执行一些其它的函数。具体到这个例子,有很多不恰当的地方,比如可以先var_height;然后在条件分支中进行赋值,比如在一堆赋值语句中间夹杂了一个parsetemplate。

  • “_”用得太多,this._var这个可以理解,因为要区分是否私有变量,但是var_height这个完全没有必要加,加得太多反而看着很累,而且也没有任何区分的意义。
  • 没有将常用的变量缓存,这里最应该缓存的是this._options,要不然看起来很乱,而且缓存起来对性能也是有好处的。
  • 对象的规划(命名)不清晰,比如this._options和this.opts什么关系?我反正是看不明白。
  • 代码风格不统一。
  • 函数内变量名混乱(和第四点很像),比如第二个函数中id和_id什么关系?为什么不用aaaid和bbbid?cre又是什么,难道是createelement缩写?变量尽量起有意义的,可区分的名字。
  • 函数名称表义不明,命名不符合大部分规范约定。第一眼看到_ishavetable,我第一反应是,这应该是类似returntrue或者returnfalse之类的吧。结果一看,这么长,难道返回在后面?又往后看了一眼,这根本就没有返回啊!那为什么要用_ishavetable啊?_is开头的函数明明白白就应该返回一个true或者false啊。
  • 作者:dukeyi2018标签:
    Web
    前端
    function


    baidu
    互联网 www.mrtx.cn
    ...
    今日值班

    精灵,YR-ECMS的共同所有者,专注Web服务器/用户体验设计师和前端开发,梦幻般的设计,注重细节蓝精灵...

    联系我们 结算方式
    站点管理
    文档