[郑州|结业弟子]JS-徐海达|2018年07月24日的日报-技能树.IT修真院

发表于： 2018-07-24 20:48:59

2 580

今天完成的事情：今天完成了任务十二还有深度思考还有任务总结，然后看了一下任务十三，看了一下js的基本语法.

明天计划的事情：明天写任务十三。

遇到的问题：

底部，用flex的时候定高了，所以并没有垂直居中，然后把高去掉使用align-items: center;解决问题.

收获：

js基础知识.

JavaScript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

深度思考：

1.开发过程中应该遵守哪些编码规范和class命名规范？

1、好的编码规范可以尽可能的减少一个软件的维护成本，并且几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护；

2、好的编码规范可以改善软件的可读性，可以让开发人员尽快而彻底地理解新的代码；

3、好的编码规范可以最大限度的提高团队开发的合作效率；

4、长期的规范性编码还可以让开发人员养成好的编码习惯，甚至锻炼出更加严谨的思维。

符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

html规范

1、页面的第一行添加标准模式声明<!DOCTYPE html>

2、代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）

3、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写

4、建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"

5、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">

6、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部

7、尽可能减少div嵌套

8、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中

9、对于属性的定义，确保全部使用双引号，绝不要使用单引号

10、背景图片请尽可能使用sprite技术,减小http请求

11、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能

12、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。

CSS规范

排版规范

1、如果是在html中写内联的css，则必须写成单行

2、每一条规则的大括号{前后加空格

3、属性名冒号之前不加空格，冒号之后加空格

4、每一个属性值后必须添加分号，并且分号后加空格

5、多个selector共用一个样式集，则多个selector必须写成多行形式

class命名

1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

3、不允许通过1、2、3等序号进行命名；避免class与id重名

4、class用于标识某一个类型的对象，命名必须言简意赅

5、尽可能提高代码模块的复用，样式尽量用组合的方式

6、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

2.那种规范才是最好的规范？

减少网站解析时的负担，尽可能的减少一个软件的维护成本

例如css书写顺序;

css样式书写顺序

（1）定位属性：position display float left top right bottom overflow clear z-index

（2）自身属性：width height padding border margin background

（3）文字样式：font-family font-size font-style font-weight font-varient color

（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

（5）css3中新增属性：content box-shadow border-radius transform……

按照上述1 2 3 4 5的顺序进行书写。

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

原理：浏览器的渲染流程为——

①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构

②构建render树：DOM树和CSS树合并之后形成的render树。

③布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。

④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

css样式解析到显示至浏览器屏幕上就发生在②③④步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染正如按照这样的书写书序：

width: 100px;

height: 100px;

background-color: red ;

position: absolute;

css-12任务总结;

任务完成时间3天，未超出预期。

任务链接：https://wjxhd.github.io/task/html/task12.html

脑图：