这是我参与「第四届青训营」笔记创作活动的第8天

关于前端开发:起源架构变迁

关于 w3c 的标准,会员

前端架构和变迁

计算机网络诞生于上个世纪60年代，标志性通信协议是TCP/IP

1989年诞生时，web由三种技术构成，分别是：HTML、HTTP、URL

CSS和JavaScript是在几年之后才出现的

上面的一笔带过就行了，这个查资料也有的，笔记重点不在这里

变迁

只读时代 1989-2004 代表技术：HTML、CSS、JavaScript

体验时代 2005-2010 代表技术：Ajax、Web api、jQuery

敏捷时代 2010-2021 代表技术：fetch、deno、vite3、vue3、nuxt3

WEB前端规范

此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。
此规范为参考规范，不全是硬性要求，部分硬性约定见下一条书写规范，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够得到沉淀，减少重复劳动。

重构步骤约定

index.html 全部样式附着于 class="xxx" 注： 此时文件中不包含任何一个 id="xxx"
为上一步书写 CSS style
[至此重构完成]
开始书写js交互文件，使用 ID 和 Class 定位被操作句柄
向 index.html 中需要的地方添加 id="xxx" 及 data-xxx="xxx"
[至此交互效果完成]

命名规范

文件及文件夹: 全部英文小写字母+数字或连接符"- , _ "，不可出现其他字符
如：../css/style.css, jquery.1.x.x.js
文件：调用 /libs 文件需包含版本号，压缩文件需包含min关键词，其他插件则可不包含
如：/libs/jquery.1.9.1.js /libs/modernizr-1.7.min.js fileuploader.js plugins.js
ID: 匈牙利命名法 & 小駝峰式命名法
如：firstName topBoxList footerCopyright
Class: [减号连接符]
如：top-item main-box box-list-item-1
尽量使用语义明确的单词命名，避免 left bottom 等方位性的词语

格式&编码

文本文件： .xxx UTF-8_(无BOM)_ 编码
图片文件： .png (PNG-24) .jpg (压缩率8-12)
动态图片： .gif
压缩文件： .tar.gz .zip

CSS 细化规范

CSS 文件结构

--- ../css/
 |---- css/libs/reset.css                  CSS reset文件
 |---- … … 
 |---- css/images/                         主 CSS-sprite 图片     
 |---- css/style.css                       主 CSS 样式表
 |---- … … 
 |---- css/images/xxx/sprite.png           xxx 的 CSS-sprite 图片
 |---- css/xxx-style.css                   xxx 的 样式表

CSS(含Less) 文件结构

--- ../css/
 |---- css/libs/reset.less            CSS reset文件
 |---- css/libs/elements.less         Less 函数复用文件
 |---- … … 
 |---- css/images/                         主 CSS-sprite 图片     
 |---- css/style.less                      主样式Less
 |---- css/style.css                       less -> css 自动生成
 |---- … … 
 |---- css/images/xxx/sprite.png           xxx 的 CSS-sprite 图片
 |---- css/xxx-style.less                  xxx 的 Less
 |---- css/xxx-style.css                   less -> css 自动生成

使用Less

在 .less文件头部引入 reset.less & elements.less，之后调用如下属性传参即可，具体使用说明见 -> Lesselements 官方文档

@import "libs/reset.less";  
@import "libs/elements.less";

.gradient
.bw-gradient
.bordered
.drop-shadow
.rounded
.border-radius
.opacity
.transition-duration
.rotation
.scale
.transition
.inner-shadow
.box-shadow
.columns
.translate

CSS reset

CSS reset 文件使用：reset.css 或 reset.less

reset文件用于重设各个浏览器的默认样式方案，解决其引起的耦合问题。
也可使用 .clearfix 清除浮动

CSS 注释格式约定

/*
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@require: reset.css
@author: Andy Huang(andyahung@geekpark.net)
*/

其中，@require为可选项

CSS换行制表：使用 2 或4 个空格，而非[Tab]
书写格式：
- CSS名称+冒号+属性
  如：.box1 {float:left;}
- 建议保留{左侧空格，字体名用``包含
  如：.box1,.box2,.box3 {font-family:Courier,'Courier New';}
- 避免中文，或使用转义，推荐前者
  如：font-family: "Microsoft YaHei"; font-family:\5fae\8f6f\96c5\9ed1;

CSS各属性的排列顺序：不做硬性要求

如：以下2种顺序均可

.box {
  /* 顺序1 */
  background: none repeat scroll 0 0 transparent;
  bottom: 11px;
  position: relative;
  width: 22px;
  z-index: 33;
}
.box {
  /* 顺序2 */
  z-index: 33;
  width: 22px;
  bottom: 11px;
  background: transparent none repeat scroll 0 0 ;
  position: relative;
}

CSS嵌套规则

/* 推荐嵌套层级 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-nav .ui-list{}
.ui-table .ui-list{}

/* 不推荐 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-list{}
.ui-nav{}

CSS格式化

勿格式化，保留下面这种格式，增加可读性和可维护性，后期后台程序(如：PHP/Python)会将CSS压缩成一行输出：

.box{
  /* 勿格式化，增加可读性 */
  background: none repeat scroll 0 0 transparent;
  bottom: 11px;
  position: relative;
  width: 22px;
  z-index: 33;
}

Web 标准与前端开发 | 青训营笔记

关于前端开发:起源 架构 变迁