前端日记

面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？ 一、是什么响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 描述响应式界面最著名的一句话就是“Content is like water” 大白话便是“如果将屏幕看作容器，那么内容就像水一样” 响应式网站常见特点： 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大小和位置 二、实现方式响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport 1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”> 属性对应如下： width=devi ...

面试官：说说对Css预编语言的理解？有哪些区别? 一、是什么Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码 Css预处理器便是针对上述问题的解决方案 预处理语言扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便 本质上，预处理是Css的超集 包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件 二、有哪些Css预编译语言在前端里面有三大优秀的预编处理器，分别是： sass less stylus sass2007 年诞生，最早也是最成熟的 Css 预处理器，拥有 Ruby 社区的支持和 Compass 这一最强大的 Css 框架，目前受 LESS 影响，已经进化到了全面兼容 Css 的 Scss 文件后缀名为.sass与scss，可以严格按照 sass 的缩进方式省 ...

面试官：css选择器有哪些？优先级？哪些属性可以继承？ 一、选择器CSS选择器是CSS规则的第一部分 它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式 选择器所选择的元素，叫做“选择器的对象” 我们从一个Html结构开始 1234567891011<div id="box"> <div class="one"> <p class="one_1"> </p > <p class="one_1"> </p > </div> <div class="two"></div> <div class="two"></div> <div class="two"></div>&l ...

面试官：如何实现单行／多行文本溢出的省略样式？ 一、前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号 对于文本的溢出，我们可以分成两种形式： 单行文本溢出 多行文本溢出 二、实现方式单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现 实现方式也很简单，涉及的css属性有： text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容 overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略 white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础 text-overflow属性值有如下： clip：当对象内文本溢出部分裁切掉 ellipsis：当对象内文本溢出时显示省略 ...

面试官：CSS如何画一个三角形？原理是什么？ 一、前言在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮 通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？ 实现过程似乎也并不困难，通过边框就可完成 二、实现过程在以前也讲过盒子模型，默认情况下是一个矩形，实现也很简单 123456789<style> .border { width: 50px; height: 50px; border: 2px solid; border-color: #96ceb4 #ffeead #d9534f #ffad60; }</style><div class="border"></div> 效果如下图所示： 将border设置50px，效果图如下所示： 白色区域则为width、height，这时候只需要你将白色区域部分宽高逐渐变小，最终变为0，则变 ...

面试官：如何使用css完成视差滚动效果? 一、是什么视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验 我们可以把网页解刨成：背景层、内容层、悬浮层 当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果 二、实现方式使用css形式实现视觉差滚动效果的方式有： background-attachment transform:translate3D background-attachment作用是设置背景图像是否固定或者随着页面的其余部分滚动 值分别有如下： scroll：默认值，背景图像会随着页面其余部分的滚动而移动 fixed：当页面的其余部分滚动时，背景图像不会移动 inherit：继承父元素background-attachment属性的值 完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动 也就是说，背景一开始就已经被固定在初始的位置 核心的css代码如下： 123456 ...

面试官：ES6中数组新增了哪些扩展？ 一、扩展运算符的应用ES6通过扩展元素符...，好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列 12345678console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>] 主要用于函数调用的时候，将一个数组变为参数序列 12345678910function push(array, ...items) { array.push(...items);}function add(x, y) { return x + y;}const numbers = [4, 38];add(...numbers) // 42 可以将某些数据结构转为数组 1[...document.querySelectorAll('div ...

面试官：你是怎么理解ES6中 Decorator 的？使用场景？ 一、介绍Decorator，即装饰器，从名字上很容易让我们联想到装饰者模式 简单来讲，装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论。 ES6中Decorator功能亦如此，其本质也不是什么高大上的结构，就是一个普通的函数，用于扩展类属性和类方法 这里定义一个士兵，这时候他什么装备都没有 12class soldier{ } 定义一个得到 AK 装备的函数，即装饰器 123function strong(target){ target.AK = true} 使用该装饰器对士兵进行增强 123@strongclass soldier{} 这时候士兵就有武器了 1soldier.AK // true 上述代码虽然简单，但也能够清晰看到了使用Decorator两大优点： 代码可读性变强了，装饰器命名相当于一个注释 在不改变原有代码情况下，对原来功能进行扩展 二、用法Docorator修饰对象为下面两种： 类的装饰 ...

面试官：对象新增了哪些扩展？ 一、参数ES6允许为函数的参数设置默认值 1234567function log(x, y = 'World') { console.log(x, y);}console.log('Hello') // Hello Worldconsole.log('Hello', 'China') // Hello Chinaconsole.log('Hello', '') // Hello 函数的形参是默认声明的，不能使用let或const再次声明 1234function foo(x = 5) { let x = 1; // error const x = 2; // error} 参数默认值可以与解构赋值的默认值结合起来使用 12345678function foo({x, y = 5}) { console.log(x, y);}foo( ...

面试官：你是怎么理解ES6中 Generator的？使用场景？ 一、介绍Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同 回顾下上文提到的解决异步的手段： 回调函数 promise 那么，上文我们提到promsie已经是一种比较流行的解决异步方案，那么为什么还出现Generator？甚至async/await呢？ 该问题我们留在后面再进行分析，下面先认识下Generator Generator函数执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态 形式上，Generator 函数是一个普通函数，但是有两个特征： function关键字与函数名之间有一个星号 函数体内部使用yield表达式，定义不同的内部状态 12345function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';} 二、使用G ...