前端日记

面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？ 一、是什么响应式网站设计（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 ...

面试官：说说你对工厂模式的理解？应用场景？ 一、是什么工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂 其就像工厂一样重复的产生类似的产品，工厂模式只需要我们传入正确的参数，就能生产类似的产品 举个例子： 编程中，在一个 A 类中通过 new 的方式实例化了类 B，那么 A 类和 B 类之间就存在关联（耦合） 后期因为需要修改了 B 类的代码和使用方式，比如构造函数中传入参数，那么 A 类也要跟着修改，一个类的依赖可能影响不大，但若有多个类依赖了 B 类，那么这个工作量将会相当的大，容易出现修改错误，也会产生很多的重复代码，这无疑是件非常痛苦的事； 这种情况下，就需要将创建实例的工作从调用方（A类）中分离，与调用方解耦，也就是使用工厂方法创建实例的工作封装起来（减少代码重复），由工厂管理对象的创建逻辑，调用方不需要知道具体的创建过程，只管使用，而降低调用者因为创建逻辑导致的错误； 二、实现工厂模式根据抽象程度的不同可以分为： 简单工厂模式（Simple Factory） 工厂方法模式（Fact ...

面试官：说说你对发布订阅、观察者模式的理解？区别？ 一、观察者模式观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新 观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯 例如生活中，我们可以用报纸期刊的订阅来形象的说明，当你订阅了一份报纸，每天都会有一份最新的报纸送到你手上，有多少人订阅报纸，报社就会发多少份报纸 报社和订报纸的客户就形成了一对多的依赖关系 实现代码如下： 被观察者模式 123456789101112131415161718192021class Subject { constructor() { this.observerList = []; } addObserver(observer) { this.observerList.push(observer); } removeObserver(observer) { const index = this.obs ...

面试官：说说你对代理模式的理解？应用场景？ 一、是什么代理模式（Proxy Pattern）是为一个对象提供一个代用品或占位符，以便控制对它的访问 代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要时，提供一个替身对象来控制这个对象的访问，客户实际上访问的是替身对象 在生活中，代理模式的场景是十分常见的，例如我们现在如果有租房、买房的需求，更多的是去找链家等房屋中介机构，而不是直接寻找想卖房或出租房的人谈。此时，链家起到的作用就是代理的作用 二、使用在ES6中，存在proxy构建函数能够让我们轻松使用代理模式： 1const proxy = new Proxy(target, handler); 关于Proxy的使用可以翻看以前的文章 而按照功能来划分，javascript代理模式常用的有： 缓存代理 虚拟代理 缓存代理缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果 如实现一个求积乘的函数，如下： 12345678var muti = function () { con ...

面试官：说说你对单例模式的理解？如何实现？ 一、是什么 单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建 在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象，如下图所示： 从定义上来看，全局变量好像就是单例模式，但是一般情况我们不认为全局变量是一个单例模式，原因是： 全局命名污染 不易维护，容易被重写覆盖 二、实现在javascript中，实现一个单例模式可以用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可，如下： 1234567891011121314151617181920212223// 定义一个类function Singleton(name) { this.name = name; this.instance = null;}// 原型扩展类的一个方法getName()Singleton.prototyp ...