编写高质量代码 | 笔记

小鱼儿 2023-02-26 06:23 175阅读 0赞

**目录**

一、开发中待解决问题

二、高质量的HTML

1.标签的语义化

2.如何确定标签是否语义良好

3.常见模块你真的了解吗

三、高质量的CSS

1.怪异模式和DTD

2.如何组织CSS

3.推荐的base.css

4.模块化CSS——在CSS中引入面向对象编程思想

5.低权重原则——避免滥用子选择器

6.CSS sprite

7.CSS的常见问题

四、高质量的JS

1.养成良好的编程习惯

2.JS的分层概念和JS库

3.编程实用技巧

4.面向对象编程

5.其他

--------------------

# 一、开发中待解决问题 #

1.糟糕的页面实现，头疼的维护工作

2.高内聚低耦合页面实现方式

3.团队合作中的相关问题

①注释：清晰地写明注释

②提高重用性：公共组件和私有组件的维护中，公共组件交由专人来维护。

4.实现分离的同时，做到：精简、重用、有序

# 二、高质量的HTML #

## 1.标签的语义化 ##

合理使用H等标签，搜索爬虫会先查找页面中的H标签来定位内容，便于seo优化。img标签要加上alt属性，便于图片不显示的时候，展示信息。

为保证页面去样式后的可读性，并且符合W3C标志，应注意以下问题：

①不要滥用无语义标签div，span；

②在既可以用div又可以用p的地方，尽量用p，因为p在去掉样式后可读性更高；

③不要使用纯样式标签，如b、font等。

## 2.如何确定标签是否语义良好 ##

利用火狐插件WebDeveloper来检验去掉CSS样式后，页面是否可读。

## 3.常见模块你真的了解吗 ##

①当页面内标签无法满足设计需要时，才会适当添加div和span等无意义标签来辅助实现。

②表单域要用fieldset标签包起来，并用legend标签说明表单的用途。

③表格注意事项

在使用表格时，要注意使用合适的标签，表格标题用caption，表头要用thead包围，主体部分用tbody包围，尾部用tfoot包围，表头要和一般单元格区分开，表头用th，一般单元格用td。

# 三、高质量的CSS #

## 1.怪异模式和DTD ##

## 2.如何组织CSS ##

base.css+common.css+page.css

base层：最底层，提供CSS reset功能和粒度最小的通用类——原子类

common层：位于中间，提供组件级的CSS类，与common相关的是样式的模块化

page层：位于最高层，提供页面级的样式

## 3.推荐的base.css ##

@charset "utf-8";
    
    /*CSS reset*/
    html{color:#000;background:#FFF;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
    del,ins{text-decoration:none;}
    li{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    q:before,q:after{content:'';}
    abbr,acronym{border:0;font-variant:normal;}
    sup{vertical-align:baseline;}
    sub{vertical-align:baseline;}
    legend{color:#000;}
    input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
    input,button,textarea,select{*font-size:100%;}
    a {color: inherit;text-decoration: none;}
    
    /*文字排版*/
    .f14{font-size:14px;}
    .f16{font-size:16px;}
    .f18{font-size:20px;}
    .fb{font-weight:bold}
    .fn{font-weight:normal;}
    .t2{text-indent:2em;}
    .lh150{line-height:150%;}
    .lh180{line-height:180%;}
    .lh200{line-height:200%;}
    .no_dct{text-decoration:none;}
    
    /*定位布局*/
    .tl{text-align:left;}
    .tc{text-align:center;}
    .tr{text-align:right;}
    .mlr0{margin-left:0;margin-right:0;}
    .fl{float:left;}
    .fr{float:right;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    .vm{verticle-align:middle;}
    .pr{position:relative;}
    .pa{position:absolute;}
    .zoom{zoom:1;}
    .hidden{visiility:hidden;}
    .none{display:none;}
    .oh{verflow: hidden;}
    
    /*长度高度*/
    .w10{width:10px;}
    .w20{width:20px;}
    .w30{width:30px;}
    .w40{width:40px;}
    .w50{width:50px;}
    .w60{width:60px;}
    .w70{width:70px;}
    .w80{width:80px;}
    .w90{width:90px;}
    .w100{width:100px;}
    .w200{width:200px;}
    .w300{width:300px;}
    .w400{width:400px;}
    .w500{width:500px;}
    .w600{width:600px;}
    .w700{width:700px;}
    .w800{width:800px;}
    .w{width:100%}
    .h30{height:30px;}
    .h100{height:100px;}
    .h{height:100%}
    
    /*边距*/
    .m10{margin:10px;}
    .m15{margin:15px;}
    .m30{margin:30px;}
    .mt5{margin-top:5px;}
    .mt10{margin-top:10px;}
    .mt15{margin-top:15px;}
    .mt20{margin-top:20px;}
    .mt30{margin-top:30px;}
    .mt50{margin-top:50px;}
    .mt100{margin-top:100px;}
    .mb5{margin-bottom:5px;}
    .mb10{margin-bottom:10px;}
    .mb15{margin-bottom:15px;}
    .mb20{margin-bottom:20px;}
    .mb30{margin-bottom:30px;}
    .mb50{margin-bottom:50px;}
    .mb100{margin-bottom:100px;}
    .ml5{margin-left:5px;}
    .ml10{margin-left:10px;}
    .ml15{margin-left:15px;}
    .ml20{margin-left:20px;}
    .ml30{margin-left:30px;}
    .ml50{margin-left:50px;}
    .ml100{margin-left:100px;}
    .mr5{margin-right:5px;}
    .mr10{margin-right:10px;}
    .mr15{margin-right:15px;}
    .mr20{margin-right:20px;}
    .mr30{margin-right:30px;}
    .mr50{margin-right:50px;}
    .mr100{margin-right:100px;}
    .p10{padding:10px;}
    .p15{padding:15px;}
    .p30{padding:30px;}
    .pt5{padding-top:5px;}
    .pt10{padding-top:10px;}
    .pt15{padding-top:15px;}
    .pt20{padding-top:20px;}
    .pt30{padding-top:30px;}
    .pt50{padding-top:50px;}
    .pt100{padding-top:100px;}
    .pb5{padding-bottom:5px;}
    .pb10{padding-bottom:10px;}
    .pb15{padding-bottom:15px;}
    .pb20{padding-bottom:20px;}
    .pb30{padding-bottom:30px;}
    .pb50{padding-bottom:50px;}
    .pb100{padding-bottom:100px;}
    .pl5{padding-left:5px;}
    .pl10{padding-left:10px;}
    .pl15{padding-left:15px;}
    .pl20{padding-left:20px;}
    .pl30{padding-left:30px;}
    .pl50{padding-left:50px;}
    .pl100{padding-left:100px;}
    .pr5{padding-right:5px;}
    .pr10{padding-right:10px;}
    .pr15{padding-right:15px;}
    .pr20{padding-right:20px;}
    .pr30{padding-right:30px;}
    .pr50{padding-right:50px;}
    .pr100{padding-right:100px;}

## 4.模块化CSS——在CSS中引入面向对象编程思想 ##

①如何划分模块——单一职责

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70][]

拆分技巧：

1）模块和模块之间尽量不要包含相同的部分,如果有相同部分,应将他们提取出来,拆分成一个独立的模块

2）模块应在保证数量尽可能少的原则下,做到尽可能简单,以提供重用性

②CSS的命名——命名空间的概念

驼峰命名法用于区别不同单词，划线用于表明从属关系

用工程师姓名首字母缩写作为标识符

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70 1][]

③挂多个class还是新建class——**多用组合，少用继承**

遵循面向对象设计的“单一职责”原则，在面向对象编程里，有个很重要的原则“多用组合，少用继承”，避免产生类爆炸。

**总结：**如果不确定模块的上下margin的稳定性，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用编剧的原子类（例如：mt10、mt20）。而且为了避免上下margin重合的出现，统一使用margin-top或者margin-bottom，不要混用margin-top和margin-bottom。

## 5.低权重原则——避免滥用子选择器 ##

当不同选择符样式有冲突时，会选择权重高选择符的样式。权重相同时，遵循就近原则，会选择最后定义的样式。

少用子选择器，为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。

## 6.CSS sprite ##

将多张背景图片合成一张大图，当修改图片时在最后新增图片，而不要重新修改图片的定位，以减少修改难度。

使用雪碧图会减少了http请求数，但会“降低开发效率”和“增加维护难度”，是否使用取决于网站的流量大小。

## 7.CSS的常见问题 ##

**①CSS的编码风格**

一行式

![20200715103155173.png][]

**②id和class**

尽量使用class，少用id，因为id不能重用，会限制网站的扩展性。

**③CSS hack**

**IE条件注释法**

![20200715103435755.png][]

优点：兼容性最好。

缺点：将同一选择符分散到三个文件中去控制，增加了开发和维护成本。

**选择符前缀法**

![20200715103503411.png][]

相较于IE注释法，样式可集中起来，维护性增强。但不能用于内联样式。

**样式属性前缀法**

前缀只在特定浏览器下有效，例如：“\_”只在IE6下生效，“\*”在IE6和IE7下生效。

样式属性前缀法比选择符前缀法聚合程度更高，代码更简洁，可维护性更强。

**④超链接访问后hover样式不出现问题**

简单好记原则：love hate

l(link)ov(visited)e h(hove)a(active)te

# 四、高质量的JS #

## 1.养成良好的编程习惯 ##

**①团队合作——如何避免JS冲突**

用匿名函数避免冲突

匿名函数之间的通信：

*  全局变量
 *  hash对象

用命名空间解决冲突问题，根据功能声明不同的命名空间，以及定义生成命名空间的函数

添加注释,可大大提高代码的可维护性，相关注释如下：

// 功能A
    
    // 工程师甲
    
    // email:
    
    // 2009-11-04

让JS不产生冲突，需要避免全局变量的泛滥，合理使用命名空间及为代码添加必要的注释。

**②给程序一个统一的入口——window.onload和DOMReady**

onload事件要求网页内所有的元素全部加载完毕后才会触发，JS框架提供的DOMReady只判断页面内所有的DOM节点是否已经全部完成

**③CSS放在页头，JS放在页尾**

**④引入编译的概念——文件压缩**

## 2.JS的分层概念和JS库 ##

**①JS如何分层**

JS也可分为base层、common层、page层。

**②base层**

属于框架级代码。应加上命名空间。可分三块：操作DOM；操作事件；模仿其他语言提供原生JS不提供的函数

职责：解决不同浏览器下的差异；扩展JS底层提供的接口。

功能：给common和page提供接口。

document.all是IE支持的属性

JS兼容问题：透明度，event对象，冒泡，on、attachEvent和addEventListener

自定义常用用法弥补原生JS的不足

**③common层**

依赖base层提供的接口，提供可复用的组件。

像cookie，drag，Tab

**④page层**

完成页面功能需求

**⑤JS库**

## 3.编程实用技巧 ##

**①弹性**

**②getElementById、getElementsByTagName和getElementsByClassName**

**③可复用性**

**同一个页面里id只能出现一次，所以如果你的程序需要被多出复用，就一定不能使用id作为JS作为获取DOM借点的挂钩。**

**④避免产生副作用**

**⑤通过传参实现定制**

如果一个函数内某个因素很不稳定，可以将它从函数内部分离出来，以参数的形式传入，从而实现将不稳定因素和函数解耦。

**⑥控制this关键词的指向**

在某些情况下，this在不同浏览器下的指向不同。

JS伪协议和内联事件对this的指向不同。

![20200715152644750.png][]

setTimeout、setInterval会改变this的指向，this指向window。

![20200715152740499.png][]

![20200715152754796.png][]

DOM节点DomNode调用函数时，this指向该Dom节点

![20200715152856220.png][]

setTimeout、setInterval和DOM节点DomNode改变的都是直接调用函数里的this的指向，使用匿名函数将我们的处理函数封装起来，可以将我们的处理函数由直接调用变为匿名函数间接调用。匿名函数调用方式，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70 2][]

call和apply也可改变this的指向，在JS中使用继承就会用到call和apply方法。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70 3][]

**⑦预留回调接口**

当某些操作不在函数的主流程中执行，而是通过某些操作来触发的时候，可以通过设置回调函数来实现。

添加回调的接口可增加函数的可扩展性。

**⑧编程中的DRY规则**

在编程里有一个很出名的规则叫DRY——don't repeat yourself，强调不要将相同的代码重复编写多次。

**⑨用hash对象传参**

function test(config)\{

var oA=config.a || 1,oB=config.b || 2,oC=config.c || 3;

test(\{a:4,b:5,c:6\})

test(\{b:5,c:6\})

## 4.面向对象编程 ##

**①面向过程编程和面向对象编程**

**②编程**

类定义

公有和私有

继承

## 5.其他 ##

编写高质量代码 | 笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关编写高质量单片机代码

相关编写高质量代码 | 笔记

相关编写高质量代码06--16

相关编写高质量代码(7)

相关编写高质量代码(6)

相关编写高质量代码(5)

相关编写高质量代码(4)

相关编写高质量代码（3）

相关编写高质量代码（2）

相关编写高质量代码（1）