[萌新|结业弟子]JS-张嘉豪|2019年04月25日的日报-技能树.IT修真院

发表于： 2019-04-25 21:43:06

1 817

今天完成的事情：今天根据输入的人数来用洗牌算法进行分配身份

明天计划的事情：明天准备完成js2
遇到的问题：

文本框输入事件：onchange 、onblur 、onkeyup 、oninput

onchange

在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 且必须值变化才触发

onblur

与onchange基本相同，唯一的区别是不管值是否变化，都触发

onkeyup

只要输入框内容发生变化即可触发，但是无法检测复制粘贴

oninput

只要输入框内容发生变化即可触发

fill() 方法用于将一个固定值替换数组的元素。

语法

array.fill(value, start, end)

参数

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

技术细节

返回值:	数组
JavaScript 版本:	ECMAScript 6

收获：了解了js总fill的作用，填充数组，又了解了一遍洗牌算法

任务十二总结

任务耗时2天

任务总结：任务12的话基本上没什么问题。感觉这个任务就是让你熟练掌握sass的嵌套继承和混合，就行了。没什么难点，主要的问题应该还是背景图片插入把，因为前面用背景图片插入的很少。这个任务刚好可以巩固一下

深度思考

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

基本准则

符合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.那种规范才是最好的规范？

自我感觉class命名规范里面语意化命名最好

任务十三总结

任务耗时3天

任务总结：这个任务主要就是了解一下侧边栏。还有点击侧边栏出现后主页的颜色发生改变。这个只需要了解~和+这两个符号的用法就行了。这些都掌握了的话其实这个任务没有什么难度。这个任务可以让你进一步熟练运用sass

深度思考

1.如何做默认样式重置？resetting 和 normalizing 之间有什么区别？

（1）CSS Reset简单来讲就是根据我们自己编写页面的需求重新设置css属性（废话，这个当然大家都知道！可是我重点想说的是css reset的原因耶~）css reset主要是因为html标签在浏览器中都有各自的默认样式，比如： p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

resetting:直接重置所有格式，没有任何前提性质的。

normalizing：重置部分格式的。

2.任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？

感觉没有什么冲突，反正我没有遇见什么冲突的地方- -

3.移动端有哪些常见布局方式？

固定布局

固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。其他地方根据 PC 端来布局。缺点:大屏手机显示网页比较宽,固定布局宽度参照永远是 320px,导致左右两边会有空白。

.box{

width: 320px;

height: 650px;

margin: 0 auto;

background-color: #29b078;

color: white;

}

demo

流体布局

流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。

.box1{

width: 38%;

float: left;

margin: 5%;

}

demo

bootstrap布局

bootstrap是一个比较流行的响应式前端框架，利用bootstrap的栅格系统可以实现响应式的移动端布局。

bootstrap的栅格是基于百分比的，在使用的时候，我们给相应的div设置col-sm-4, col-md-6,col-lg-12。

class="c1 col-lg-2 col-md-3 col-sm-4 col-xs-6"

demo

多列布局