架构设计前端杂货铺Web开发

要成为一个web前端面试官，你至少需要了解...

2018-06-22  本文已影响181人  Johnny_

HTML布局

HTML有三种布局：

流动布局

  1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%（div、ul、h1~h6、table、p等）
  2. 内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）（br、img、input、label、sub等）
  3. 可变元素是基于以上两者随环境而变化的，它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别，它就遵循块元素或者内联元素的规则限制（button、map、object、applet等）

但是通过css display，完全可以摆脱HTML原生标签的限制，display属性规定应该生成的框的类型。

可选的值：

  1. none：此元素不会被显示
  2. block：此元素将显示为块级元素，此元素前后会带有换行符
  3. inline：默认值，此元素显示为内联元素，元素前后没有换行符
  4. inherit：此元素从父元素继承display属性的值

浮动布局

块状元素这么霸道都是独占一行，如果现在想让两个块状元素并排显示，就需要使用float来实现

层模型

如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed

  1. absolute
    此属性会将元素从文档流中抽离，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

  2. relative
    相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

  3. fixed
    fixed跟absolute类似，只是fixed是相对于当前视图固定，它不会随浏览器窗口的滚动条滚动而变化，除非改变浏览器窗口的大小或移动浏览器窗口的位置。

需要注意的是，只有使用了层模型（设置了position属性）的元素，设置z-index才有效

webpack

作用：webpack是把项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件。

一些关键配置项：

entry：定义入口文件，它将是整个依赖关系的根

var baseConfig = {
        entry: './src/index.js'
    }

当我们需要多个入口文件的时候，可以把entry写成一个对象

var baseConfig = {
        entry: {
            main: './src/index.js'
        }
    }

output:即使入口文件有多个，但是只有一个输出配置

var baseConfig = {
      output: {
            filename: 'main.js',
            path: path.resolve('./build')
        }
    }

loader：实现对不同格式的文件的处理，比如将scss或less转换为css，或者将typescript转换为js，通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理

module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }

几个常用loader：

plugins：plugins和loader很容易搞混，说都是外部引用有什么区别呢？ 事实上他们是两个完全不同的东西。这么说loaders负责的是处理源文件的如css、jsx，一次处理一个文件。而plugins并不是直接操作单个文件，它直接对整个构建过程起作用

var baseConfig = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
    }

几个常用plugin：

nodejs

nodejs 开发技能图解：


image14.jpg

什么是错误优先的回调函数？

错误优先的回调函数用于传递错误和数据。第一个参数始终应该是一个错误对象， 用于检查程序是否发生了错误

如何避免回调地狱?

回调地狱指的是在回调里进行回调，多次循环带来的代码阅读和理解上的困难。，比如：

getData(function(a){  
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
            getMoreData(c, function(d){ 
                getMoreData(d, function(e){ 
                    ...
                });
            });
        });
    });
});

解决方法：

什么是事件循环

Node采用的是单线程的处理机制（所有的I/O请求都采用非阻塞的工作方式），至少从Node.js开发者的角度是这样的。 而在底层，Node.js借助libuv来作为抽象封装层， 从而屏蔽不同操作系统的差异，Node可以借助libuv来来实现多线程。下图表示了Node和libuv的关系。

[图片上传失败...(image-f4bb97-1529672710679)]

Libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个事件循环， 每一个I/O都需要一个回调函数——一旦执行完便推到事件循环上用于执行。
[图片上传失败...(image-95372e-1529672710679)]

哪些工具可以用来保证一致性的代码风格？

使用NPM有哪些好处？

通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。 对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本， 以及指明项目依赖的具体版本，这可以大大提高代码的复用。

js创建类的方法

js实现继承的方法

js实现多继承

构造函数继承或属性复制（复制多个父类的属性）

js函数作用域

js的函数作用域，就是一个变量在全函数里有效．比如有个变量p1在函数最后一行定义，第一行也有效，但是值是undefined。

apply、call、bind的区别

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。
call 和 apply二者的作用完全一样，只是接受参数的方式不太一样。

bind是绑定，执行需要再次调用。

闭包

什么是闭包

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：

  1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
  2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

nodejs实现一个事件通知

继承EventEmitter

如何理解node的同步和异步

node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的。

程序总是崩溃，怎样找出问题在哪里?

  1. node --prof 查看哪些函数调用次数多
  2. memwatch和heapdump获得内存快照进行对比，查找内存溢出

性能优化方向

  1. 减少HTTP请求
  2. 使用浏览器缓存
  3. 服务端启用压缩
  4. CSS放在页面最上面、JavaScript放在页面最下面
  5. 精简CSS和JS文件
  6. 减少对DOM的操作
  7. 正确理解Repaint和Reflow

Repaint 和 Reflow 也就是重绘和重排，Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

  1. 使用JSON格式进行数据交换
  2. 减少Cookie传输
  3. 使用CDN加速

HTTP协议

image15.png

特点：

  1. 支持客户/服务器模式。支持基本认证和安全认证。
  2. 简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
  3. 灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
  4. HTTP 0.9和1.0使用非持续连接：限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接。HTTP 1.1使用持续连接(keep-alive)：不必为每个web对象创建一个新的连接，一个连接可以传送多个对象，采用这种方式可以节省传输时间。
  5. 无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。

请求格式:

分为请求行、请求头部、空行、请求内容，以post为例：

POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley

第一部分：请求行，第一行明了是post请求，以及http1.1版本。

第二部分：请求头部，第二行至第六行。

第三部分：空行，第七行的空行。

第四部分：请求数据，第八行。

响应格式

分为状态行、消息报头、空行和响应正文

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8

<html>
      <head></head>
      <body>
            <!--body goes here-->
      </body>
</html>

rem布局

定义

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
http://www.runoob.com/w3cnote/flex-grammar.html

require.js

因为自身设计的不足，JavaScript 这门语言实际上并没有模块化这种概念与机制，所以想实现如JAVA，PHP等一些后台语言的模块化开发，那么我们必须借助 requireJS 这个前端模拟模块化的插件。

koa

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。

koa 1

Express的API很简单，但是它是基于ES5的语法，要实现异步代码，只有一个方法：回调。如果异步嵌套层次过多，代码写起来就非常难看。随着新版Node.js开始支持ES6，Express的团队又基于ES6的generator重新编写了下一代web框架koa 1.0，但是generator的本意并不是异步。

koa 2

基于ES7开发了koa2，和koa 1相比，koa2完全使用Promise并配合async来实现异步.

vue

概括视频：https://player.youku.com/embed/XMzMwMTYyODMyNA==?autoplay=true&client_id=37ae6144009e277d

一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

v-if和v-show的区别

<keep-alive></keep-alive>的作用是什么

用于包裹动态组件，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染

Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue生命周期？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

封装 vue 组件的过程

使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件，可以采用emit方法。

highcharts & echarts

  1. 学习容易程度：只要懂JS，那么相信你能很快上手。两者打分相同。但是百度出品的Echarts对于国内城市已经有了相应的配置，调用非常方便。因此在绘制地图方面，Echarts略胜一筹。
  2. 大数据表现力：有网友说，当数据量达到万条的级别时，Highcharts的多表联动、自动缩放具有更强的优势，而Echarts则会出现明显的卡顿，需要设置datazoom。因此Hightcharts完胜。
  3. 文档友好程度：Echarts是百度的，Highcharts是国外的。另外，Echarts的文档像是说明书，而Highcharts的文档像是博客。个人仍偏向于说明书一样的文档，容易定位，因此我为Echarts转身。
  4. 图表美观程度：看看两家的实例Echarts、Highcharts，Echarts完爆啊（上面的对比雷达图就是用Echarts做的）！而且Echarts基于Canvas，对于3D绘图有绝对优势，能画出极漂亮的图形。
  5. 图表配置的自由度：Highcharts基于SVG，方便定制，同类型的图表，Highcharts能玩出100种花样。极高的自由度非常适用于定制商业化的大屏。
  6. 图表的丰富程度：两方面，一是图表种类，二是3D表现力。Echarts丰富的图表种类，和惊艳的3D效果，吊打Highcharts。

最后，更为关键的是，Echarts免费，Highcharts用于商业用途时还需要授权，个人用时虽然免费，但会在图表上显示logo，有洁癖的话就只能绕道了。

karma & Jasmine

Karma：一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。

Jasmine：一个单元测试框架。

docsify

特点：

  1. 无需构建，写完 markdown 直接发布
  2. 支持自定义主题
  3. 容易使用并且轻量

类似gitbook

Angular

Angular js 1.x 的问题

学习难度更大，诟病的性能问题，落后于当前web发展理念（如组件开发方式），手机端支持不够友好

Angular 2 vs Angular 1.x

  1. Angular 2 不兼容 Angular 1.x
  2. 移除了controller+$scope设计，改用组件式开发
  3. 性能更好（渲染更快，变化检测效率更高）
  4. 优先为移动应用设计
  5. 更加贴合未来的标准
  6. 提供对Angular 1的无缝升级方案（ApgradeAdapter）

Angular 2 主要特性

image18.png

组件树中，父组件通过属性绑定传递数据到子组件，子组件通过事件绑定传递数据到父组件，通过这两种机制即可实现Angular 2的双向绑定


image16.png

注入的服务有继承特性，即子组件默认会具有父组件中注入的服务，由于服务是单例的，所以当子组件需要一个定制化的相同服务时，需要采用分层注入的方式：


image17.png

Angular vs Vue vs React

  1. Vue-多样化的 JavaScript 框架

Vue更加专注于View层

  1. Angular：动态框架

Angular是一个功能齐全的框架，支持 Model-View-Controller 编程结构，非常适合构建动态的单页网络应用程序。

  1. React
    React推崇的是函数式编程和单向数据流：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）。
    React和Vue都可以配合Redux来管理状态数据。

Angular React 和 Vue的比较

backbone.js

Backbone.js是一个web端javascript的MVC框架，算是轻量级的框架。它能让你像写Java（后端）代码组织js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。

重要模块：

  1. Model：Model是js应用的核心，包括基础的数据以及围绕着这些数据的逻辑：数据转换、验证、属性计算和访问控制
  2. collection是model对象的一个有序的集合，也可以理解为是model的容器
  3. 类似Redux的路由
  4. Backbone的View是用来显示你的model中的数据到页面的，同时它也可用来监听DOM上的事件然后做出响应。但是这里要提一句的是，相比于Angularjs中model变化之后页面数据自动变化的特性，Backbone要手动来处理

优点：

  1. 轻、快
  2. 清晰的结构和概念：
    • Model：储存数据的对象。
    • Template：通常跟一个Model相关。其数据来自模型对象或者是控制器。
    • Router：导航功能，处理SPA应用的导航，导航定义了应该显示哪个模版，并为这个导航生成一个对应的控制器对象。
    • View：视图，处理浏览器事件，把事件处理的结果发送给控制器对象。
    • Controller：控制器，为模版提供数据。
  3. 第三方的模版引擎：underscore

缺点：

  1. 没有双向绑定，数据必须显示修改
  2. 视图直接操作DOM，难以编写测试代码

mocha

前端单元测试框架

chai

js断言库

Native.js

Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。如果说Node.js把js扩展到服务器世界，那么Native.js则把js扩展到手机App的原生世界。HTML/JS/Css全部语法只有7万多，而原生语法有几十万，Native.js大幅提升了HTML5的能力。NJS突破了浏览器的功能限制，也不再需要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。NJS编写的代码，最终需要在HBuilder里打包发行为App安装包，或者在支持Native.js技术的浏览器里运行。目前Native.js技术不能在普通手机浏览器里直接运行。

PhoneGap

PhoneGap是一个基于HTML、CSS、JS创建跨平台移动应程序的快速开发平台。与传统Web应用不同的是，它使开发者能够利用iPhone、Android等智能手机的核心本地功能，比如GPS、传感器、震动。有了PhoneGap，Web开发人员便可以利用他们非常熟悉的JavaScript、HTML和CSS技术，或者结合移动Web UI框架jQuery Mobile、Sencha Touch来开发跨平台移动客户端，还能非常方便地发布程序到不同移动平台上

Phonegap与Cordova的区别、联系

特点

HBuilder

盒模型和怪异模型（IE盒子模型）

两种模型的区别仅仅是在计算元素宽度时是仅包含Content，还是包含Content+padding+border


image20.png

此时，盒子（块）的宽度=width+padding+border+margin

![image20.png](https://img.haomeiwen.com/i3797511/c6295810fa14befb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

此时，盒子（块）的宽度=width+margin

决定使用哪种模型可以通过在文档首部添加doctype申明来配置，目标手机端主要使用怪异模型。

浏览器缓存机制

HTTP状态码

Electron

用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。

特点：

主进程(Main Process)

package.json中的main指定的脚本是主进程

渲染进程(Renderer Process)

每一个Web页面都运行在各自的进程中，这里的进程就是渲染进程

进程间通信

主进程与渲染进程：ipcRenderer和ipcMain

渲染进程和渲染进程：使用主进程中转或remote

上一篇下一篇

猜你喜欢

热点阅读