前端代码规范 - CSDN
精华内容
参与话题
  • 前端代码规范(阿里) --- Javascript

    千次阅读 2020-05-17 20:27:03
    以下来自B站的学习视频:前端必备-阿里大厂前端开发规范! 五、Javascript规范 (一) 命名 采用小写驼峰命名 lowerCameCase,代码命名均不能以下划线开头,也不能以下划线或美元符号结尾 反例:_name / name_ / ...

    程序员写好看的代码,不亚于写一行好看的字
    好看的代码总是让人心旷神怡,
    不好,不规范的代码,让人看了想说mmp,
    那我们就来学习一下规范的代码怎么写的吧

    以下来自B站的学习视频:前端必备-阿里大厂前端开发规范!

    五、Javascript规范

    (一) 命名

    • 采用小写驼峰命名 lowerCameCase,代码命名均不能以下划线开头,也不能以下划线或美元符号结尾

    反例:_name / name_ / name$

    • 方法名、参数名、成员变量、局部变量统一采用驼峰命名风格

    正确命名:localValue / getHttpMessage()

    错误命名:localvalue / gethttpmessage()

    • 方法名 必须是 动词 或者 动词+名词 形式
    • 增删查改,统一使用如下 5 个单词
    add  /  update  /  delete  /  get  /  detail
    

    附:函数常用方法的动词:

    get 获取       / set 设置
    add 增加       / remove 删除
    create 创建    / destory 移除
    start 启动     / stop 停止
    open 打开      / close 关闭
    read 读取      / write写入
    load 载入      / save 保存
    begin 开始     / end 结束
    backup 备份    / restore 恢复
    import 导入    / export 导出
    split 分割     / merge 合并
    inject 注入    / extract 提取
    
    • 常量全部大写,单词之间用下划线隔开,力求语义表达完整清楚,不要嫌名字长

    (二) 代码格式

    • 使用两个空格进行缩进
    if (x < y) {
    	x += 10;
    } else {
    	x += 1;
    }
    
    • 不同逻辑,不同语义,不同业务之间插入一个空行分隔

    (三) 字符串

    统一使用单引号'',不使用双引号"",这对创建HTML字符串非常有好处

    let str = 'foo';
    let testDiv = '<div id="test"></div>'
    

    (四) 对象声明

    • 使用字面量创建对象

    推荐:

    let user = [];
    

    不推荐:

    let user = new Object();
    
    • 使用字面量来代替对象构建器

    推荐:

    let user = {
    	age: 0
    }
    

    不推荐:

    let user = new Object();
    user.age = 0;
    

    (五) 优先使用ES6、ES7、ES8的语法

    简化程序,使代码更加灵活和可复用

    如:箭头函数、await/async、解构、let、for…of 等

    (六) 括号

    下列关键词必须有大括号(即使代码只有一行):if / else / for / while / try / catch / finally / with

    推荐:

    if (isTrue) {
    	doSomeThing();
    }
    

    不推荐:

    if (isTrue) doSomeThing();
    

    (七) undefined判断

    永远不要直接使用undefined进行变量判断;使用typeof 和字符串 'undefined'对变量进行判断

    推荐:

    if (typeof person === 'undefined') {
    	...
    }
    

    不推荐

    if (person === undefined) {
    	...
    }
    

    (八) 条件判断和循环最多三层

    条件判断能使用 三目运算符 和 逻辑运算符的,就不要使用条件判断。

    如果超过三层的 ,抽成函数,并写清楚注释

    (九) this的转换命名

    对上下文 this的引用只能使用 self来命名

    let self = this;
    

    (十) 慎用 console.log

    console.log会有性能问题,生产环境下请清除console.log

    展开全文
  • 前端代码风格规范

    千次阅读 2018-07-25 09:54:45
    规范目的:为了提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构。 规范基本准则:符合web标准,使用具有语义的标签...

    规范目的:为了提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构。

    规范基本准则:符合web标准,使用具有语义的标签,使结构、表现、行为分离,兼容性优良。页面性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。

    一、文件规范

    1.1 HTML部分

      1.1.1 建包问题

        文件均归档至约定的目录中,建包格式如下:针对 Vue + iView技术栈

        

               注意:所有的页面、cssimagesassless文件放在components文件夹下,在该文件夹下再做细分,404等统一的错误页面放到error文件夹中,路由文件放到router文件夹下,服务层接口调用放在services文件夹下,工具类封装放在utils文件夹下

      1.1.2 HTML头部编写

        (1) 编码:所有编码均采用xhtml/html,标签必须闭合,编码统一为UTF-8,在多语言的网站建议添加<html lang="zh-CN">,说明内容是以中文显示和阅读为基础的

        (2) 语义化:正确使用标签,充分利用无兼容性问题的html自身标签

        (3) 文件头部head内容:

          • title: 需要添加标题

          编码: charset=UTF-8

          • meta: 可以添加descriptionkeywords内容

    1.2 CSS部分

      1.2.1 CSS种类及其命名

        可以将CSS样式表分为三类:全局样式表、模块通用样式表和独立样式表

          • 全局样式表常用命名:public.css

          • 模块通用样式表命名:模块名_basic.css

          • 独立样式表:模块名_页面名.css

      1.2.2 CSS引入

        CSS文件引入可通过外联或者内联方式引入

      • 外联方式

      • 内联方式

        

        注意:linkstyle标签都应该放入head中,原则上,不允许在html上直接写样式。避免在CSS中使用@import,嵌套不要超过一层。

     

    二、注释规范

    2.1 顶部文档注释(推荐使用)

    1 /*

    2 * @description: 中文说明

    3 * @author: name

    4 * @update: name(xxxx-xx-xx xx:xx)

    5 */

     

     

     

    2.2 属性注释 

    1 /*Header*/

    2 /*Nav*/

    3 /*Container*/

    4 ...

    5 /*Footer*/

    2.3 功能模块注释

    1 /* module: module1 by 小王 */

    2 ...

    3 /* module: module2 by 小李 */

    2.4 特殊注释

     

     1 /*Color codes

     2 --------------------------------

     3     Red: #e03d3d;

     4     Dark: #424242;

     5     Light: #c3c5c0;

     6     blue #e03d3d;

     7 */

     8

     9 /*

    10    默认宽度为1128px

    11 */

    12

    13 /*@group Reset Css*/

    14 /*@group General Definitions*/

    15

    16 /*---------------Typography-----------------*/

    17 /*------------------Sprite--------------------*/

     

      注意:

        每一个文档对应一个文档注释(主要注释内容包括:文档创建人、创建时间、主要内容描述等)

        属性注释说明:可以分CSS属性来进行命名(如:margin/padding值、CSS Hack、全局Hover等)

        功能模块注释说明:分模块来编写CSS样式(如:头部、导航、按钮、页脚等等)

     

     

    三、命名规范

    3.1 如何命名

      • css最好用class来命名,jsid来命名,已做区分

      • idclass的命名应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名

    3.2 命名示例

    • .div1{} /* 不推荐;无意义 */
    • .a_green{} /* 不推荐;无意义 */
    • .menu{} /* 推荐;特殊性*/
    • .header{} /* 推荐;通用性*/

    3.3 命名精简

      idclass命名越精简越好,只要足够表达意思,这样有助于理解,同时也能提高代码效率

    • .navigation{} /* 不推荐 */
    • .login_box_inside_con{} /* 不推荐 */
    • .nav{} /* 推荐 */

    3.4 命名嵌套问题

      书写css要注意先后顺序和嵌套问题,从性能上考虑尽量减少选择器的层级

    • .nav ul.list{} /* 不推荐 */
    • .nav .list{} /* 推荐 */

    3.5 注意事项

    • 规则命名中,一律采用小写加下划线的方式
    • 命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合
    • 命名注意缩写,但是不能盲目缩写
    • 不允许通过123等序号进行命名
    • 避免classid重名
    • id注意用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id
    • class用于标识某一个类型的对象,命名必须言简意赅
    • 尽可能提高代码模块的复用,样式尽量用组合的方式
    • 规则名称中不应该包含颜色、定位等与具体显示效果相关的信息,应该用意义命名,而不是结果名称

     

    四、书写规范

    4.1 排版规范

    • 使用4tab来缩进
    • 规则可以写成单行。或者多行,但是整个文件内的规则排版必须统一

      书写风格:

    • 每一个属性值必须添加分号
    • 如果多个属性公用一个样式集,则多个属性必须写成多行形式

    4.2 属性编写顺序(一般遵循显示属性 -> 自身属性 -> 文本属性 -> 其他属性的书写格式)

    • 显示属性:display/list-style/position/float/clear...
    • 自身属性(盒模型):width/height/margin/padding/border
    • 背景:background
    • 行高:line-height
    • 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
    • 其他:cursor/z-index/zoom/overflow...
    • CSS3属性:transform/transition/animation/box-shadow/border-radius
    • 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照-webkit-/-moz-/-ms-/-o-/std的顺序进行添加,标准属性写在最后
    • 链接的样式请严格按照如下顺序添加:a:link -> a:visited -> a:hover -> a:active

      

    4.3 代码性能优化

    • 合并marginpaddingborder-top/-right/-bottom/-left的设置,尽量使用短名称
    • 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置
    • 禁止在css中使用*选择符
    • 0后面不需要单独,比如0px可以省略成00.8px可以省略成.8px
    • 如果可以颜色尽量用三位字符表示,比如#ccc
    • 如果没有边框时,不要写成border:0;应该写成border:none
    • 在保存代码解耦的前提下,尽量合并重复的样式
    • backgroundfont等可以缩写的属性,尽量使用缩写形式
    • 能以背景形式呈现的图片,尽量都写入CSS样式中

    4.4 CSS Hack的使用

      尽量少使用浏览器检测和CSS Hacks,先试试别的解决办法。考虑到代码高效率和易管理,虽然这两种办法能快速解决浏览器解析差异,但应被视为最后的手段。在长期的项目中,允许使用hack只会带来更多的hack,所以尽量少用

    • IE6: _property:value
    • IE6/7: *property:value
    • IE6/7/8/9: property:value\9

    4.5 IE兼容性

      IE支持通过特定的<meta>标签来确定绘制当前页面所应该采用的IE版本,除非有强烈的特殊需求,否则最好是设置edge mode,从而通知IE采用其所支持的最新的模式

        <!-- IE8及以上的版本都会以最高版本IE来渲染页面 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

      注意:X-UA-Compatible这个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

           <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">中的chrome=1效果是如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染

    4.6 字体规则

    • 为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei)、宋体(SimSun)、微软雅黑(Microsoft Yahei)
    • 字体粗细采用具体数值,粗体bold写成700,正常normal写成400
    • font-size必须以px为单位
    • 为了对font-family取值进行统一,更好的支持各个操作系统上各个浏览器的兼容性,font-family不允许在业务代码中随意设置

       

     

    五、其他规范

    • 不要轻易改动全站级CSS和通用CSS库,改动后,要经过全面测试
    • 避免使用filter
    • 避免在CSS中使用expression
    • 避免过小的背景图片平铺
    • 尽量不要在CSS中使用!important
    • 绝对不要在CSS中使用"*"选择符
    • 层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999),不同弹窗气泡之间可在三位数之间调整,普通区块为10-9010的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比
    • 背景图片在情况允许,尽可能使用sprite技术,减小http请求,考虑到多人协作开发,sprite按照模块、业务、页面来划分
    • 页面内部尽量避免使用style属性,CSS放在head标签中,由link标签引入,使页面的结构与表现分离
    • 尽量减少使用floatposition等影响性能的属性,这样可以避免新手在布局时出现的混乱
    • 尽量少使用<br />来断行
    • 不要连续出现多个 (空格),也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用text-indentmaring/padding等方法来实现
    • 排版如果遇到需要首行缩进的处理,可以使用text-indent:2em;
    • 图片如果需要加载就在页面上用img标签写出,并指明宽高,重要的图片必须加上alt属性,给重要的元素和截断的元素上加上title
    • 如果有跳转的地方,统一使用a标签,<a href="#"></a>,需要跳转到新页面,则还需要加上targent="_blank"属性,如果点击的是空链接(#),则会自动将当前页面重置到首端,可以使用"javascript:void()"来替代原来的"#"
    • 分清楚什么情况下jpg/gif/png图片

     

    六、 自适应页面布局(响应式布局,暂不考虑低版本IE兼容性)

    6.1 布局细节

    • 首先头部head中加入meta新标签 

        <!-- viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放,一般主流的web app都是这样设置 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

    • position:不能使用绝对定位
    • width/height/margin/padding: 不能使用px,应该使用百分比、autoem
    • font: 不能使用绝对大小,应使用em

    6.2 CSS3引入的Media Query模块,可自动探测屏幕宽度

    • 加载相应的CSS文件,建议根据不同的屏幕分辨率,选择应用不同的CSS规则,如:@media screen and (max-width:799px) {...}
    • 图片自适应:img{max-width:100%;}

     

    七、帮助文档

    7.1 全局样式写法(reset css

    7.2 清浮动

      需要清除浮动的地方有:

    • 若子元素浮动,而父元素内容塌陷(也就是没有包住)
    • 布局出现混乱,譬如下一层的跑到上一层去了

      解决办法(四种方法)

    • 给父元素同样适用浮动,保证子元素与父元素浮动后还是在同一层
    • 正确使用overflow:hidden;总所周知,overflow:hidden主要意思是溢出隐藏的意思,但是同样有清浮动的效果
    • 在需要的元素下面添加<div class="clear"></div>CSS中:clear{clear:both;}(不推荐,增加代码,冗余)
    • 使用clearfix来清除浮动(推荐),相当于创建一个隐形的内容为空的块的目标元素来清除浮动

        .clearfix{*zoom:1;} /* 针对IE7 hack,触发IE7haslayout,以清除浮动 */
        .clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
        .clearfix:after{clear:both;}

    7.3 各大网站的字体样式:

    • Google: font-family:arial, sans-serif;
    • Yahoo: font:13px/1.25 "Helvetica Neue",Helvetica,Arial;
    • Apple: font:12px/18px "Lucida Grande", "Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
    • Baidu: font:12px arial;
    • taobao: font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
    • Weibo: font:12px/1.125 Arial,Helvetica,sans-serif;
    • Tencent: font:12px "宋体","Arial Narrow",HELVETICA;
    • Sina Weibo: font:12px/1.3 "Arial","Microsoft YaHei";
    • Sina: font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA;
    • JD: font:12px/150% Arial,Verdana,"宋体";
    • zhihu: font-family:'Helvetica Neue', Helvetiva,Arial,Sans-serif;

      默认字体样式:

    • 兼容性好:font-family:Helvetica,Tahoma,Arial,Sans-serif;
    • 更接近设计:font-family:Geogia,"Times New Roman",Times,serif;

    7.4 文本多行显示添加省略号(文本溢出省略)

      给需要的标签添加具体宽度限制、white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

    7.5 input框的具体样式

      input框行高问题,一般不需要写line-height,但是在IE8/IE7需要写hack

     

    展开全文
  • 前端代码规范(静态检查)工具

    万次阅读 2016-06-12 13:04:16
    CSSLint官网:http://csslint.netCSSLint是一个用来帮你找出CSS代码中问题的工具,它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题,规则是...使用方法:进入官网首页,粘贴你的代码,你的错误和不正

    一、CSS代码规范处理工具

    • CSSLint
    • PrettyCSS
    • recess
    • ckstyle
    • stylelint
    • CSSHint

    1.1CSSLint

    官网:http://csslint.net

    概述

    CSSLint是一个用来帮你在线上分析并检测找出CSS代码中问题的工具,它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题,规则是可以扩展的

    使用方法

    使用方法很简单,只需要把 CSS 内容复制贴上,最后按下 LINT!按钮就可以检查。底下有一些设定项目可以调整检测的项目和规则,预设是全部勾取,如果没有特别的需求可以不用更动,完成之后 CSS Lint 会告诉使用者该样式表哪些部分发生问题,只要依照网站的指示修改就可以得到比较没有问题的 CSS 样式表啰!

    一些规则

    1. 修复解析错误(Parsing errors should be fixed)
    2. 避免使用多类选择符(Don’t use adjoining classes)
    IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确,参考IE6下的多类选择符一文。
    3. 移除空的css规则(Remove empty rules)
    这个规则不包含任何属性,类似:

    .foo { }

    空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

    4. 正确使用display的属性(Use correct properties for a display)
    由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:

    display:inline后不应该再使用width、height、margin、padding以及float。
    display:inline-block后不应该再使用float。
    display:block后不应该再使用vertical-align。
    display:table-*后不应该再使用margin或者float。
    

    5. 不滥用浮动(Don’t use too many floats)*
    虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告

    6. 不滥用web字体(Don’t use too many web fonts)
    对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

    7.不声明过多的font-size(Don’t use too may font-size declarations)
    这是设计层面的问题,设计精良的页面不会有过多的font-size声明。

    8. 不在选择符中使用ID标识符(Don’t use IDs in selectors)
    主要考虑到样式重用性以及与页面的耦合性。

    9. 不给h1~h6元素定义过多的样式(Don’t qualify headings)
    10. 全站统一定义一遍heading元素(Heading styles should only be defined once)
    若需额外定制样式,可使用其他选择符作为代替。
    11. 值为0时不需要任何单位(Zero values don’t need units)
    12. 标准化各种浏览器前缀(Vendor prefixed properties should also have the standard)
    通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:

    .foo {-moz-border-radius: 5px;border-radius: 5px; }

    13. 使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require all browser prefixes)
    14. 避免让选择符看起来像正则表达式(Avoid selectors that look like regular expressions)
    css3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。
    15. 遵守盒模型规则(Beware of broken box models)

    上述某些规则也许不是最佳实践,可根据项目需求自行添加修改,这也符合CSS Lint pluggable的宗旨

    优缺点

    优点:
    1.规则可以自定义
    缺点:
    1.在线,需要网络
    2.点了Lint按钮没有反应

    JS代码规范工具

    • JSLint
    • JSHint
    • ClosureLinter
    • JSCS
    • ESLint
    • YUI Compressor
    • UglifyJS

    当写js代码的时候,一个校验工具可以帮助我避免愚蠢的错误。尽管我有许多年的经验,但是我仍然有变量命名不正确、产生语法错误以及忘记正确处理错 误。在我浪费时间,尤其是客户时间之前,一个好的校验工具或校验器可以告诉我这些问题。好的校验工具可以确保一个项目遵循代码规范。

    存在五个可以使用的js校验器,但是怎么选择使用哪一个呢?接下来让我们看看这五种种流行方案的特点、优点和不足:JSLintJSHintJSCSESLintUglifyJS

    五种工具用相同的基本方式工作。他们都有一套用户分析、报告js文件错误的规则。他们都可以通过npm安装。他们都可以通过命令行使用、作为Grunt插件使用、也可以集成到编辑器中。他们五种均支持使用注释进行配置。

    但是相似点结束了。每个工具都有各自的优点和缺点–优点是通过比较得到的。

    JSLint

    JSLint是其中最老的工具。在2002年 Douglas Crockford开发了该工具,根据其经验,强制使用js语言中精粹的部分。如果你同意这些精粹,JSLint能成为一个好的工具。

    JSLint的缺点是不能配置和拓展。你根本不能禁掉需要特性,并且很多缺少文档。官方文档非常不友好,例如缺少如何将其集成到编辑的信息。

    优点
    参数配置完成,可以直接使用
    缺点
    JSLint不存在配置文件,如果想改变参数设置,那就存在问题
    有限的配置选项,许多规则不能禁掉
    不能增加个性化规则
    没有文档记录规则
    很难弄清楚哪个规则引起的错误

    JSHint

    作为一个可配置的JSLint版本,JSHint被开发出来。你可以配置每个规则,将其放到一个配置文件中,这样在大项目中可以容易使用。JSHint对每个规则有好的文档,所以可以准确知道每个规则的作用。将其集成到编辑器也是简单的。

    JSHint的一个小缺点是里面的松散默认配置。也即是你在使其可用之前必须将其启动。和ESLint相比,确定哪个规则用户开启或关闭错误信息,JSHint是更加困难。

    优点
    大多是参数可以配置
    支持配置文件,在大项目中容易使用
    已经支持需要类库,像jQuery、QUnit、NodeJS、Mocha等
    支持基本的ES6
    缺点
    难于知道哪个规则产生错误
    存在两类选项:强制选项和松散选项。使得配置有些混乱
    不支持自定义规则

    JSCS

    JSCS不同于其他,因为如果不给它一个配置文件或告诉它一个配置项,JSCS不会做任何事情。可以存他们的网站现在配置项,所以这不是个大问题,并且有许多配置项,例如jQuery代码风格配置项、Google配置项。

    它有超过90个不同的规则,通过插件可以创建自定义规则。当和其他工具集成需要特定格式时,JSCS也支持自定义报告使得变得非常容易。

    JSCS是一个代码风格检查器。这意味着它仅仅匹配代码格式的问题,不匹配潜在的bugs、errors。因此,跟其他工具相比缺少灵活性,但是如果你仅仅强制检查代码风格,JSCS也是一个好的工具。

    优点
    支持自定义报告,更容易与其他工具集成
    如果你遵循一种可用的代码风格,配置项和准备好的配置文件使其容易启动
    在报告中存在标记包含规则名字,所以很容易指出哪个规则造成了错误
    通过自定义插件进行拓展
    缺点
    仅仅检查代码风格的问题。JSCS不检查潜在存在的bugs,例如不适用的变量、偶然的全局变量等等
    四个工具中最慢,但是在使用中不是一个问题

    ESLint

    ESLint是最新出来的工具。它被设计的容易拓展、拥有大量的自定义规则、容易的通过插件来安装。它给出准确的输出,而且包括规则名,这样可以知道哪个规则造成了错误。

    ESLint文档多少有些混乱。规则容易查找,以及被分为逻辑组,但是配置指南在有些地方容易弄混。然而它可以在一个地方提供链接去编辑集成、插件和样例。

    优点
    灵活,任何规则都可以开启闭合,以及有些规则有些额外配置
    很容易拓展和有需要可用插件
    容易理解产出
    包含了在其他检查器中不可用的规则,使得ESLint在错误检查上更有用
    支持ES6,唯一支持JSX的工具
    支持自定义报告
    缺点
    需要一些配置
    速度慢,但不是主要问题

    UglifyJS

    UglifyJS是基于 NodeJS 的Javascript语法解析/压缩/格式化工具

    官网:http://lisperator.net/uglifyjs/
    安装
    $ npm install uglify-js -g

    我的推荐

    我的选择是ESLint。JSHint是严格和不可配置的,而JSHint缺少拓展机制。JSCS如果仅仅用于代码风格检验是一个好的选择,但是ESLint不仅可以进行代码风格的检验,而且可以检查代码中的bug和其他问题。

    如果使用ES6,ESLint也是明显的选择。在上面提到的工具中,ESLint对ES6支持的最广泛。

    如果你像尝试ESLint,我已经创造了5步快速开始指南。你可以 download the ESLint 5-step quickstart guide form my website

    JSHint是第二选择。如果不需要ESLint先进的特点,JSHint一旦配置就可以捕获需要好的问题。带有许多规则的JSCS,如果出了代码风格外不进行其他检查,将是一个好的选择。

    我非常犹豫去推荐JSLint。其他工具做同样地事情,但是不强制用户遵守这些规则。唯一的例外是你碰巧统一那些强制规则,那是值得深入研究的情况。

    一个检验工具是捕获问题的很好一步,但是仅仅能看到它规则的错误。为了更进一步的bug自动捕获,我推荐使用单元测试。code view也有助于达到该目的。

    展开全文
  • 前端代码规范

    2020-10-12 19:10:22
    一、HTML规范 (1)DOCTYPE声明 html文件必须加上DOCTYPE声明,并统一使用HTML5的文档声明: < ! DOCTYPE html > (2)页面语言 推荐使用 cmn-Hans-CN(简体,中国大陆),但考虑...(4)代码缩进 统一使用四

    一、HTML规范

    (1)DOCTYPE声明
    html文件必须加上DOCTYPE声明,并统一使用HTML5的文档声明:

    < ! DOCTYPE html >
    

    (2)页面语言
    推荐使用 cmn-Hans-CN(简体,中国大陆),但考虑浏览器和操作系统的兼容性,目前仍然使用zh-CN

    < html  lang="zh-CN">
    

    (3)charset 字符集合
    一般情况统一使用 “UTF-8” 编码

    < meta charset=“UTF-8”>
    

    (4)代码缩进
    统一使用四个空格进行代码缩进,也就是一个 Tab

    (5)代码嵌套
    元素嵌套规范,每个块状元素独占一行,内联元素可选。
    段落元素与标题元素只能嵌套内联元素。

    二、图片规范

    (1)内容图
    内容图多以商品图等照片类为主,颜色较为丰富,文件体积较大

    • 优先考虑 JPEGG 格式,条件允许的话优先考虑 Webp 格式。
    • 尽量不要使用PNG格式,PNG8色位太低,PNG24压缩率低,文件体积大。
    • PC平台单张的图片大小不应大于 200KB

    (2)背景图
    背景图多为图标等为主,颜色比较简单,文件体积不大,起修饰作用的图片

    • PNG 与 GIF 格式,优先考虑 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩。
    • 图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免使用 JPEG
    • 图像颜色丰富而且图片文件不太大的(40KB一下)或有半透明效果的优先考虑 PNG24格式
    • 图像颜色丰富而且文件比较大的(40KB-200KB)优先考虑 JPEG格式
    • 条件允许的,优先考虑Webp 代替 PNG 和 JPEG 格式

    三、CSS规范

    (1)代码格式化
    样式书写一般有两种:紧凑格式、展开格式,统一使用展开格式
    (2)选择器

    • 尽量少用通配符选择器 *
    • 不使用 ID 选择器
    • 不使用无具体语义定义的标签选择器

    四、命名规范

    (1)ClassName命名
    ClassName命名应该尽量精短、明确,必须以字母开头命名,单词之间统一使用下划线连接。
    注意:ad、banner、gg、guanggao等有机会和广告挂钩的字,不建议用来做ClassName,因为有些浏览器插件(谷歌的广告拦截插件等)会直接过滤这些类名

    展开全文
  • 前端代码规范

    2019-10-11 10:50:59
    前端代码规范规范概述基本信息通用约定1.文档目录结构2.分离3.文件命名4.缩进5.编码6.小写7.注释8.待办事项9.省略嵌入式资源协议头HTML语法HTML5 doctype语言属性IE 兼容模式字符编码引入 CSS 和 JavaScript 文件...
  • 本文档包含了Isobar公司的创意技术部(前端工程)开发web应用的规范。现在我们把它开放给任何希望了解我们迭代过程最佳实践的人。 编写本文档的主要驱动力是两方面: 1) 代码一致性 以及 2) 最佳实践。 通过...
  • 1.项目名称全部采用小写,以下划线分割。如my_project 2.目录命名全部采用小写,以下划线分割。... 不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的); 不要忽略可选的关闭标签,例...
  • 前端代码规范手册

    千次阅读 2018-08-15 15:43:15
    前端代码规范手册       Web Coding Guidelines     前言 本手册的愿景是码出高效,码出质量。现代软件架构都需要协同开发完成,高效 协作即降低协同成本,提升沟通效率,所谓无规矩不成方圆,无规范不...
  • 文章目录html代码规范基本结构语义化标签的使用自闭和标签分块 html代码规范 基本结构 TIP:主要注重head里的代码编写 <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8">...
  • 前端代码注释模板

    万次阅读 2020-06-04 10:18:20
    前端代码注释 /** * @name 名字 * @abstract 申明变量/类/方法 * @access 指明这个变量、类、函数/方法的存取权限 * @author 函数作者的名字和邮箱地址 * @category 组织packages * @copyright 指明版权信息 * @...
  • 关于前端命名规范的一些心得

    千次阅读 2017-11-01 16:43:26
    一名刚入行或者入行没多久的前端,最开始接触到的问题可能就是规范了。而规范里,又数命名最重要,至少我个人是这么认为的。 在企业中,一个项目往往都需要由一个团队来完成,在多人合作中,个性往往会成为阻碍。...
  • Java的编译方式

    万次阅读 2017-11-15 17:27:02
    Java主流编译体系采用了前端编译+JIT编译的方式:1、前端编译把Java源码文件(.java)编译成Class文件(.class)的过程;也即把满足Java语言规范的程序转化为满足JVM规范所要求格式的功能; 优点:许多Java语法新特性...
  • Web前端开发标准规范总结

    万次阅读 2018-07-15 07:32:40
    Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细...
  • 前端工程化-规范化篇

    千次阅读 2020-08-13 20:24:40
    这一篇文章主要是关于前端规范化的内容,前端规范化是我们践行前端工程化过程中的重要的组成部分 有利于项目维护,以及二次开发,减低维护成本,便于后续人员接手 为什么要有规范化 1、软件开发需要多人协同 2、...
  • 最近几年,Web前端的发展非常迅速,并呈现出一片...国内Web前端开发者普遍不重视代码规范以及网站前端性能,很多网站甚至连最基本的前端代码压缩和合并都没有。本书立足于Web前端开发的基础,介绍如何编写符合W3C...
  • 前端工程师如何定位自己等级层次

    万次阅读 2018-08-21 21:28:20
    初级前端开发工程师 中级前端开发工程师 高级前端开发工程师 资深前端开发工程师 前端技术专家 层级 P3 P4(aliwork) P5 P6 P7 主要职责 1、完成前端的日常需求。  2、根据...
  • 大三前端实习日志

    万次阅读 多人点赞 2016-08-19 15:13:35
    大三暑期选择实习:工作内容:前端web实习 实习地点:武汉光谷 公司规模:创业型公司,前端开发人数为9人,实习生5名1.实习内容总结:1.前端html+css页面结构培训实习内容:为完成UI设计稿到页面的实现。使用Photo...
  • 前端资源教程大总结

    万次阅读 2017-12-01 16:55:03
    前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通...
  • Java代码规范

    万次阅读 2019-12-23 08:54:07
    但是经常可能会出现跨模块调用其他人写的代码的情况,或者说是工作交接或者交叉原因,你要去看别人的代码,熟悉他的代码。这个时候就很头疼了,因为不同的人的代码习惯或者风格又不一样,你可能很看不惯...
  • 记一次中小公司的研发问题

    万次阅读 2019-01-25 18:39:59
    前期可以先重构,先从技术上把前端代码和后端代码分离,然后专注规范和优化前端(包括html、js和css),同时相应地简单重构后端。 后期划分人员职责,前端代码交由专门的前端开发工程师维护,新...
1 2 3 4 5 ... 20
收藏数 119,448
精华内容 47,779
热门标签
关键字:

前端代码规范