前端日记

面试官：说说对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 ...

面试官：说说你对策略模式的理解？应用场景？ 一、是什么策略模式（Strategy Pattern）指的是定义一系列的算法，把它们一个个封装起来，目的就是将算法的使用与算法的实现分离开来 一个基于策略模式的程序至少由两部分组成： 策略类，策略类封装了具体的算法，并负责具体的计算过程 环境类Context，Context 接受客户的请求，随后 把请求委托给某一个策略类 二、使用举个例子，公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍 若使用if来实现，代码则如下： 1234567891011121314var calculateBouns = function(salary,level) { if(level === 'A') { return salary * 4; } if(level === 'B') { return salary * 3;  ...