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:

  • babel-loader:让下一代的js文件转换成现代浏览器能够支持的js文件

  • css-loader,style-loader:用来解析css文件

  • file-loader:生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名

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

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

几个常用plugin:

  • HtmlWebpackPlugin:依据一个简单的index.html模版,生成一个自动引用你打包后的js文件的新index.html

  • HotModuleReplacementPlugin:它允许你在修改组件代码时,自动刷新实时预览修改后的结果

nodejs

nodejs 开发技能图解:

image14.jpg

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

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

如何避免回调地狱?

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

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

解决方法:

  • 将回调函数分割为独立的函数

  • 使用Promises

  • 使用async/await

  • 使用yield

什么是事件循环

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

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

Libuv库负责Node API的执行。它将不同的任务分配给不同的线程,形成一个事件循环, 每一个I/O都需要一个回调函数——一旦执行完便推到事件循环上用于执行。

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

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

  • JSLint

  • JSHint

  • ESLint

  • JSCS

使用NPM有哪些好处?

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

js创建类的方法

  • 构造函数法

  • 原型法(prototype)

  • Json法

js实现继承的方法

  • 原型链继承(prototype )

  • 特点:

  1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例

  2. 父类新增原型方法/原型属性,子类都能访问到

  • 缺点:

  1. 要想为子类新增属性和方法,必须要在子类prototype赋值之后执行,不能放到构造器中

  2. 无法实现多继承

  3. 创建子类实例时,无法向父类构造函数传参

  4. 来自原型对象的引用属性是所有实例共享的

  • 构造函数继承(SuperType.Call(this))

  • 特点:

  1. 创建子类实例时,可以向父类传递参数

  2. 来自原型对象的引用属性不是所有实例共享的

  3. 可以实现多继承(call多个父类对象)

  • 缺点:

  1. 实例并不是父类的实例,只是子类的实例

  2. 只能继承父类的实例属性和方法,不能继承原型属性/方法

  3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

  • 组合继承(最常用的继承模式)

  • 特点:

  1. 利用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承

  2. 这样,既通过在原型上定义方法实现了函数复用,又能保证每个实例都有自己的属性

js实现多继承

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

js函数作用域

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

apply、call、bind的区别

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。

call 和 apply二者的作用完全一样,只是接受参数的方式不太一样。

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

闭包

什么是闭包

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

  1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。

  2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

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

  • 好处

  1. 缓存

  2. 面向对象中的对象

  3. 实现封装,防止变量跑到外层作用域中,发生命名冲突

  4. 匿名自执行函数,匿名自执行函数可以减小内存消耗

  • 坏处

  1. 内存消耗( 通常来说,函数的活动对象会随着执行期上下文一起销毁,但是,由于闭包引用另外一个函数的活动对象,因此这个活动对象无法被销毁)

  2. 性能问题(使用闭包时,会涉及到跨作用域访问,每次访问都会导致性能损失。因此在脚本中,最好小心使用闭包,它同时会涉及到内存和速度问题。不过我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响)

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>
  • 第一部分:状态行,由HTTP协议版本号, 状态码, 状态消息 三部分组成。

  • 第一行为状态行,(HTTP/1.1)表明HTTP版本为1.1版本,状态码为200,状态消息为(ok)

  • 第二部分:消息报头,用来说明客户端要使用的一些附加信息第二行和第三行为消息报头,Date:生成响应的日期和时间;Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8

  • 第三部分:空行,消息报头后面的空行是必须的

  • 第四部分:响应正文,服务器返回给客户端的文本信息

rem布局

定义

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

flex布局

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

网页链接

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

概括视频:网页链接

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

v-if和v-show的区别

  • v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

  • v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

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

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

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

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

vue生命周期?

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

  • 创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。

  • 载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

  • 更新前/后:当data变化时,会触发beforeUpdate和updated方法。

  • 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

封装 vue 组件的过程

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

关于怎么快速学web前端开发,有什么方法,这个问题,想必大家都已经心中有数了,打算深入了解这个行业的朋友,可以加下小编的web前端开发学习群(374941052)不管你是小白还是大牛,小编我都欢迎,不定期分享干货,包括小编自己整理的一份2018最新的web前端开发资料和0基础入门教程,欢迎初学和进阶中的小伙伴。

前端面试题 vue的更多相关文章

  1. 前端面试题---vue部分

    1.vue的两大核心思想 组件化和数据驱动 2.如何理解vue中的MVVM模式 Model-View-ViewModel(简称为mvvm)是一种设计思想,model层代表数据模型,也可以再model中 ...

  2. 2019前端面试题汇总(主要为Vue)

    摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...

  3. Vue 前端面试题

    Vue 前端面试题 1. 说一下 Vue 的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合“发布者 - 订阅者”模式的方式,通过 Object.defineProperty() ...

  4. 前端面试题汇总(主要为 Vue)

    前端面试题汇总 1. 谈谈你对MVVM开发模式的理解 MVVM分为Model.View.ViewModel三者. 1)Model:代表数据模型,数据和业务逻辑都在Model层中定义: 2)View:代 ...

  5. vue前端面试题知识点整理

    vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  6. Vue 前端面试题[转]

    https://mp.weixin.qq.com/s/Uxhx2dJ1Xbm6N3Gl7wNZNw Vue 前端面试题 游荡de蝌蚪 前端开发 1周前 作者:游荡de蝌蚪 https://segmen ...

  7. 前端面试题(VUE)

    (前端面试题大全,持续更新) vue:v-model 双向绑定的原理 依赖收集 虚拟DOM的作用 vue@3.0中的preset配置? 父组件A和其子组件B/子组件C,B/C进行通信的方式(怎么通信) ...

  8. 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解

    1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...

  9. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

随机推荐

  1. boost::algorithm用法详解之字符串关系判断

    http://blog.csdn.net/qingzai_/article/details/44417937 下面先列举几个常用的: #define i_end_with boost::iends_w ...

  2. js中连写两个?:三元运算符语法解释

    在angular 源码中有连写两个三元运算符的代码: var hash = isString(hash) ? hash : isNumber(hash) ? hash.toString() :$loc ...

  3. [Book Content]Python进阶

    python进阶 原书内容https://github.com/eastlakeside/interpy-zh 通过记录书本目录和大概内容做一个记录,方便以后回顾检索. Chapter Title B ...

  4. Java中一些知识的归纳总结

    1.包装类型与基本数据类型的区别. Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这使得Java在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据 ...

  5. 图论:KM算法

    如果,将求二分图的最大匹配的所有匹配边的权重看做1 那么用匈牙利算法求二分图的最大匹配的问题也可以看成求二分图的最大权匹配 如果边权是特例,我们就要使用KM算法来做了 这个算法其实还是比较难的,会用就 ...

  6. bzoj4430 [Nwerc2015]Guessing Camels赌骆驼

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4430 [题解] 把每只骆驼在第一个人.第二个人.第三个人的位置找出来,然后做三维偏序即可. ...

  7. 转:Python网页解析:BeautifulSoup vs lxml.html

    转自:http://www.cnblogs.com/rzhang/archive/2011/12/29/python-html-parsing.html Python里常用的网页解析库有Beautif ...

  8. requests-html的js执行功能简单使用

    #!/usr/bin/env python # encoding: utf-8 import asyncio from requests_html import HTMLSession import ...

  9. 【 Linux】脚本导入格式

    在从windows文本(*.txt)格式导入到Linux中时,需要注意. 如果是直接将*.txt 导入到Linux系统,然后重命名使用会有问题,建议在linux系统中创建文件,然后直接复制内容到lin ...

  10. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...