凌冻缘佳

凌冻缘佳 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

凌冻缘佳 赞了文章 · 2019-07-08

Node中间层实践(四)——模板引擎pug

版权声明:此文首发于我的个人站Keyon Y,转载请注明出处。

pug是一个很简洁很灵活的模板引擎。配合express使用时,在启动文件(app.js)中配制

// 设置模板类型
app.set('view engine', 'pug');
// 设置模板文件路径
app.set('views', path.resolve(__dirname, 'src/Views'));

即可使用。

pug的继承

extends 和 block 实现了pug的继承。
把html中公共/重复的部分提出,写在 如layout.pug中,

// Shared/layout.pug
doctype html
html
    head
        meta(charset="UTF-8")
        title #{title}
        meta(name="keywords" content=keywords)
        meta(name="description" content=description)
        meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
        meta(name="renderer" content="webkit")
        link(rel='stylesheet' href='/Contents/base.css')    //- 公用样式
        block links
        script(type='text/javascript', data-original='/assets/jquery-1.10.2.min.js')
    body
        include header

        block content

        include footer

        include ../Include/toplink

        block scripts
        script(type='text/javascript', data-original='/Scripts/base.js')  //- 公用js
        block javascript
// Home/index.pug
extends ../Shared/layout

block links
    link(rel='stylesheet' href='/Contents/index.css')
block scripts
    script(type='text/javascript', data-original='/Scripts/index.js')

block content
    include ../Include/homeInclude
    
    .container
    .clear

Mixin—对html进行函数式编程

pug通过mixin便可以实现对html的函数式编程

//- include/homeInclude.pug
mixin homeBtnBox(num)
    //- num:  0-报名中  1-已结束
    .hr_btnBox
        a(href="/User" + targetId + "/Mas" class=num == 0 ? "active" : "") 报名中
        a(href="/User" + targetId + "/Mas/Require/Finish" class=num == 1 ? "active" : "") 已结束
        
//- home/home.pug
include ../include/homeInclude  //- 引入编写mixin的pug文件
+homeBtnBox(1)       //- 传参调用

判断并绑定多个classname的方法

.btn(class={"btn_t1": item.status == 0, "btn_t2": item.status == 1, "btn_t3": item.status == 2})

有木有很眼熟?用过ng,vue的同学都熟悉这种方式,在pug中也可以这样使用,但是只有class的属性可以使用这种判断方式,其他的属性, href、title、value等等 都不可以这么用。

逻辑运算后再绑定数据的方法

有时候从后端返回的数据需要进行处理,才可以使用,可以在node中间层里编写数据处理的方法,运算后再返回,或者 也可以试试如下的方法:
pug的通过一个 - 表示一段不输出的代码,提供一个js语法执行环境,运算js后再将运算结果绑定到pug模板中。

//- 时间格式化: 最长3个月前
mixin dateFormat(string)
    -
        var res = '';
        var time_zone = new Date().getTime() - new Date(string.replace('T', ' ')).getTime();
        if(time_zone < 0) {
            res= '<b>1</b>分钟前'
        }else if(time_zone < 1 * 60 * 60 * 1000) {
            res= '<b>' + Math.floor(time_zone / (1000 * 60)) + '</b> 分钟前';
        }else if(time_zone < 1 * 24 * 60 * 60 * 1000){
            res= '<b>' + Math.floor(time_zone / (1000 * 60 * 60)) + '</b> 小时前';
        }else if(time_zone < 1 * 30 * 24 * 60 * 60 * 1000) {
            res= '<b>' + Math.floor(time_zone / (24 * 60 * 60 * 1000)) + '</b> 天前';
        }else if(time_zone < 3 * 30 * 24 * 60 * 60 * 1000) {
            res= '<b>' + Math.floor(time_zone / (30 * 24 * 60 * 60 * 1000)) + '</b> 月前';
        }else {
            res= '<b>' + string.slice(0, 10) + '</b>';
        }
    span!= res  //- !=绑定一段不转义的代码

分享一下pug的中文文档:https://pug.bootcss.com/language/attributes.html




欢迎继续关注本系列博文的其他精彩文章
Node中间层实践(一)——基于NodeJS的全栈式开发
Node中间层实践(二)——搭建项目框架
Node中间层实践(三)——webpack配置
Node中间层实践(四)——模板引擎pug
Node中间层实践(五)——express-中间层的逻辑处理

查看原文

赞 4 收藏 2 评论 4

凌冻缘佳 收藏了文章 · 2019-07-05

前后端分离实践(一)

前言

最近这一段时间由于Nodejs的逐渐成熟和日趋稳定,越来越多的公司中的前端团队开始尝试使用Nodejs来练一下手,尝一尝鲜。

一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来,也有一些公司将NodeJS作为前后端分离的一个解决方案去施行。而像淘宝网这类的大型网站也很早的完成了前后端的分离,给我们这样的后来者提供了宝贵的经验。

同样,我们的大网盘团队也早在去年早早就开始了紧锣密布的准备工作,这目前工作也做的差不多了,现在我就来总结一下在过程中遇到的坑点以及注意事项。

认识前后端分离

在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。

由于前后端分离这个概念相对来说刚出现不久,很多人都是只闻其声,不见其形,所以可能会对它产生一些误解,误以为前后端分离只是一种web应用开发模式,只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。

其实前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式,我们在实施的过程中主要对以下四个方面来进行比较和重新认识。

前后端分离大概可以从四个方面来理解:

  1. 交互形式

  2. 代码组织方式

  3. 开发模式

  4. 数据接口规范流程

一、交互形式

架构图

在前后端分离架构中,后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,最终返回给浏览器。

二、代码组织方式

图片描述

在传统架构模式中,前后端代码存放于同一个代码库中,甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时,都必须把整个项目导入到开发工具中。

而前后端分离模式在代码组织形式上有以下两种:

  • 半分离
    前后端共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。

  • 分离
    前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险。

三、开发模式

我们之前的架构属于传统的MVC架构,整体没有进行前后端分离,在项目的开发阶段,前端工程师负责编写HTML,完成前端的页面设计并套页面,然后再使用模板技术将写好的前端代码转换为Smarty脚本,同时内嵌一些后端提供的模板变量和一些逻辑操作。应用运行期,将全部代码进行打包,和后端代码部署到同一服务器上,同时会进行简单的动静态分离部署。

此时,应用的开发流程如下图所示。

流程

而在实现前后端分离架构之后,前端工程师只需要编写HTML、js、CSS等前端资源,然后通 过HTTP请求调用后端提供的服务即可。除了开发期的分离,在运行期前后端资源也 会进行分离部署。

前后端分离之后,开发流程将如下图所示。

通过上面的两幅流程图,不难发现,在开发模式上,前后段分离不仅仅只是工程师的分工开发,更重要的意义在于实现了前后端的并行开发,简化了开发流程

四、数据接口规范流程

在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,其中前端工程师再开发完成之后可以独自进行mock测试,而后端也可以使用接口测试平台进行接口自测,然后前后端一起进行功能联调并校验格式,最终进行自动化测试。

分离的四个好处

前后端分离模式和传统的web应用架构相比有很大的不同,到底分还是不分,这还真是个问题。

从目前应用软件开发的发展趋势来看,主要有两方面需要注意:

  1. 越来越注重用户体验,随着互联网的发展,开始多终端化。

  2. 大型应用架构模式正在向云化、微服务化发展。

我们主要通过前后端分离架构,为我们带来以下四个方面的提升:

  • 为优质产品打造精益团队
    通过将开发团队前后端分离化,让前后端工程师只需要专注于前端或后端的开发工作,是的前后端工程师实现自治,培养其独特的技术特性,然后构建出一个全栈式的精益开发团队。

  • 提升开发效率
    前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。与此同时,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。

  • 完美应对复杂多变的前端需求
    如果开发团队能完成前后端分离的转型,打造优秀的前后端团队,开发独立化,让开发人员做到专注专精,开发能力必然会有所提升,能够完美应对各种复杂多变的前端需求。

  • 增强代码可维护性
    前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系。

应用代码将会变得整洁清晰,不论是代码阅读还是代码维护都会比以前轻松。

需要进行前后端分离的场景

任何一项技术以及架构都不是适用于任何场景,前后端分离同样也是如此。虽然前后端分离架构能带来许多的好处,但前提是建立在开发团队合适的基础上的。

而我们百度网盘就属于那种:

  1. 页面布局复杂,使用了主题和样式。

  2. 需要有较高的页面渲染效果

  3. 前端页面中包含复杂业务逻辑

  4. 页面需要渲染的数据量较大

像这种重前端的应用我们综合考虑了各种情况,最终决定采用前后端分离架构。

部署方案

前后端分离之后,应用在部署时也需要进行前后端分离。在进行前后端分离方案选择时,需要结合项目的实际情况和用户来考虑。

分离之前的架构

前后端分离之前,网盘的后端架构是Nginx服务和后端的PHP服务以及前端的静态资源都是部署在同一台服务器上。当浏览器发起访问请求时,如何请求的是静态资源,Nginx直接把静态资源返回给服务器;如果请求的是页面或后端服务,则经Nginx将请求转发到后端的PHP服务器,完成响应后经Nginx返回到浏览器。

图片描述

注:此图中的Nginx属于后端机,主要针对前端机Nginx转发过来的请求进行识别弄转发给本机的PHP服务;前端机和后端机各有一个Nginx服务。

这个方案比较简单,易于实现,而且能到达前后端解耦的目的。而且很多公司目前都是基于这种架构或者一定的变形来实现的web应用。

但是对于页面量比较大,需要有良好SEO的应用来说,此方案缺点也较为明显。因为 Nginx只是向浏览器返回页面静态资源,而国内的搜索引擎爬虫只会抓取静态数据, 不会解析页面中的js,这使得应用得不到良好的搜索引擎支持。同时因为Nginx不会进行页面的组装渲染,需要把静态页面返回到浏览器,然后完成渲染工作,这加重了浏览器的渲染负担。

另外,由于这种架构使得前端工程师的工作范围只局限在了浏览器一侧,导致在进行一些特殊的性能优化时,前端工程师无法独立完成,还需要后端开发人员的配合,这也一定程度上影响了双方的进度。

分离之后的架构

前后端分离之后,我们在原先的架构只上再单独增加了一个Node Server作为中间层,将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务,负责与提供数据的后端服务进行通信。

并且还在这个基础上增加并使用了前端机(前端机是对所有的请求进行预处理和负载均衡,然后再转发给后端机。)的Nginx服务,浏览器发起的请求经过前端机的Nginx进行分发,URL请求统一分发到Node Server,在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;API请求则直接转发到后端服务器,完成响应。

图片描述

注:此图中的Nginx属于前端机。

前后端分离方案对比

图片描述

实现和部署

下一篇将为大家分享百度网盘前后端分离中的Node Server基础架构、前端路由管理、模板数据交互以及运维和环境部署相关内容。

结语

前后端分离并非仅仅只是前后端开发的分工,而是在开发期进行代码存放分离、前后 端开发职责分离,前后端能够独立进行开发测试;在运行期进行应用部署分离,前后 端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比,能为我们 提升开发效率、增强代码可维护性,让我们有规划地打造一个前后端并重的精益开发 团队,更好地应对越来越复杂多变的Web应用开发需求。

查看原文

凌冻缘佳 关注了专栏 · 2019-07-05

张亚涛

个人的技术总结

关注 982

凌冻缘佳 收藏了文章 · 2019-07-05

前后端分离实践(一)

前言

最近这一段时间由于Nodejs的逐渐成熟和日趋稳定,越来越多的公司中的前端团队开始尝试使用Nodejs来练一下手,尝一尝鲜。

一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来,也有一些公司将NodeJS作为前后端分离的一个解决方案去施行。而像淘宝网这类的大型网站也很早的完成了前后端的分离,给我们这样的后来者提供了宝贵的经验。

同样,我们的大网盘团队也早在去年早早就开始了紧锣密布的准备工作,这目前工作也做的差不多了,现在我就来总结一下在过程中遇到的坑点以及注意事项。

认识前后端分离

在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。

由于前后端分离这个概念相对来说刚出现不久,很多人都是只闻其声,不见其形,所以可能会对它产生一些误解,误以为前后端分离只是一种web应用开发模式,只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。

其实前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式,我们在实施的过程中主要对以下四个方面来进行比较和重新认识。

前后端分离大概可以从四个方面来理解:

  1. 交互形式

  2. 代码组织方式

  3. 开发模式

  4. 数据接口规范流程

一、交互形式

架构图

在前后端分离架构中,后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,最终返回给浏览器。

二、代码组织方式

图片描述

在传统架构模式中,前后端代码存放于同一个代码库中,甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时,都必须把整个项目导入到开发工具中。

而前后端分离模式在代码组织形式上有以下两种:

  • 半分离
    前后端共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。

  • 分离
    前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险。

三、开发模式

我们之前的架构属于传统的MVC架构,整体没有进行前后端分离,在项目的开发阶段,前端工程师负责编写HTML,完成前端的页面设计并套页面,然后再使用模板技术将写好的前端代码转换为Smarty脚本,同时内嵌一些后端提供的模板变量和一些逻辑操作。应用运行期,将全部代码进行打包,和后端代码部署到同一服务器上,同时会进行简单的动静态分离部署。

此时,应用的开发流程如下图所示。

流程

而在实现前后端分离架构之后,前端工程师只需要编写HTML、js、CSS等前端资源,然后通 过HTTP请求调用后端提供的服务即可。除了开发期的分离,在运行期前后端资源也 会进行分离部署。

前后端分离之后,开发流程将如下图所示。

通过上面的两幅流程图,不难发现,在开发模式上,前后段分离不仅仅只是工程师的分工开发,更重要的意义在于实现了前后端的并行开发,简化了开发流程

四、数据接口规范流程

在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发,其中前端工程师再开发完成之后可以独自进行mock测试,而后端也可以使用接口测试平台进行接口自测,然后前后端一起进行功能联调并校验格式,最终进行自动化测试。

分离的四个好处

前后端分离模式和传统的web应用架构相比有很大的不同,到底分还是不分,这还真是个问题。

从目前应用软件开发的发展趋势来看,主要有两方面需要注意:

  1. 越来越注重用户体验,随着互联网的发展,开始多终端化。

  2. 大型应用架构模式正在向云化、微服务化发展。

我们主要通过前后端分离架构,为我们带来以下四个方面的提升:

  • 为优质产品打造精益团队
    通过将开发团队前后端分离化,让前后端工程师只需要专注于前端或后端的开发工作,是的前后端工程师实现自治,培养其独特的技术特性,然后构建出一个全栈式的精益开发团队。

  • 提升开发效率
    前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。与此同时,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。

  • 完美应对复杂多变的前端需求
    如果开发团队能完成前后端分离的转型,打造优秀的前后端团队,开发独立化,让开发人员做到专注专精,开发能力必然会有所提升,能够完美应对各种复杂多变的前端需求。

  • 增强代码可维护性
    前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系。

应用代码将会变得整洁清晰,不论是代码阅读还是代码维护都会比以前轻松。

需要进行前后端分离的场景

任何一项技术以及架构都不是适用于任何场景,前后端分离同样也是如此。虽然前后端分离架构能带来许多的好处,但前提是建立在开发团队合适的基础上的。

而我们百度网盘就属于那种:

  1. 页面布局复杂,使用了主题和样式。

  2. 需要有较高的页面渲染效果

  3. 前端页面中包含复杂业务逻辑

  4. 页面需要渲染的数据量较大

像这种重前端的应用我们综合考虑了各种情况,最终决定采用前后端分离架构。

部署方案

前后端分离之后,应用在部署时也需要进行前后端分离。在进行前后端分离方案选择时,需要结合项目的实际情况和用户来考虑。

分离之前的架构

前后端分离之前,网盘的后端架构是Nginx服务和后端的PHP服务以及前端的静态资源都是部署在同一台服务器上。当浏览器发起访问请求时,如何请求的是静态资源,Nginx直接把静态资源返回给服务器;如果请求的是页面或后端服务,则经Nginx将请求转发到后端的PHP服务器,完成响应后经Nginx返回到浏览器。

图片描述

注:此图中的Nginx属于后端机,主要针对前端机Nginx转发过来的请求进行识别弄转发给本机的PHP服务;前端机和后端机各有一个Nginx服务。

这个方案比较简单,易于实现,而且能到达前后端解耦的目的。而且很多公司目前都是基于这种架构或者一定的变形来实现的web应用。

但是对于页面量比较大,需要有良好SEO的应用来说,此方案缺点也较为明显。因为 Nginx只是向浏览器返回页面静态资源,而国内的搜索引擎爬虫只会抓取静态数据, 不会解析页面中的js,这使得应用得不到良好的搜索引擎支持。同时因为Nginx不会进行页面的组装渲染,需要把静态页面返回到浏览器,然后完成渲染工作,这加重了浏览器的渲染负担。

另外,由于这种架构使得前端工程师的工作范围只局限在了浏览器一侧,导致在进行一些特殊的性能优化时,前端工程师无法独立完成,还需要后端开发人员的配合,这也一定程度上影响了双方的进度。

分离之后的架构

前后端分离之后,我们在原先的架构只上再单独增加了一个Node Server作为中间层,将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务,负责与提供数据的后端服务进行通信。

并且还在这个基础上增加并使用了前端机(前端机是对所有的请求进行预处理和负载均衡,然后再转发给后端机。)的Nginx服务,浏览器发起的请求经过前端机的Nginx进行分发,URL请求统一分发到Node Server,在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;API请求则直接转发到后端服务器,完成响应。

图片描述

注:此图中的Nginx属于前端机。

前后端分离方案对比

图片描述

实现和部署

下一篇将为大家分享百度网盘前后端分离中的Node Server基础架构、前端路由管理、模板数据交互以及运维和环境部署相关内容。

结语

前后端分离并非仅仅只是前后端开发的分工,而是在开发期进行代码存放分离、前后 端开发职责分离,前后端能够独立进行开发测试;在运行期进行应用部署分离,前后 端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比,能为我们 提升开发效率、增强代码可维护性,让我们有规划地打造一个前后端并重的精益开发 团队,更好地应对越来越复杂多变的Web应用开发需求。

查看原文

凌冻缘佳 赞了文章 · 2019-01-31

前端面试题大集合:来自真实大厂的532道面试题(只有题,没有答案)

答案自己谷歌或百度找。

一、来源背景

面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。

二、532道前端真实大厂面试题

express和koa的对比,两者中间件的原理,koa捕获异常多种情况说一下

你项目里用到第三方登录涉及的oAuth(JWT)协议的实现原理,以及你本地的实现原理,第三方登录怎么样保证安全性

说下快排完整性

react和vue的区别,你开发如何选择技术栈

express里面登录的session服务怎么样实现分布式服务

vue的理解

vue的双向数据绑定的原理

vue怎么样实现数组绑定

js的继承

call和apply的区别

ajax是同步还是异步,怎么样实现同步

ajax实现过程

闭包的作用理解,以及那些地方用过闭包,以及闭包的缺点,如何实现闭包

跨域方法以及怎么样实现的与原理

工作中做的项目有什么亮点

webpack工程构建工具怎么样用

数组去重

快排和冒泡原理

http状态码

nodejs了解多少

为什么css样式初始化,目的是为了什么

为什么浏览器会产生同源策略

axios有什么特点

cookie和webstrage的区别以及cookie怎么样使用?原生cookie怎么样封装

三次握手

对跨域了解吗。jsonp的限制

浏览器那些地方用到了异步

css弹性布局,那些地方用到过

position属性有哪些值,分别有什么含义

ES6用过吗,新增了那些东西,你用到过什么

const和let的区别,可以改变const定义对象某个属性吗

箭头函数,箭头函数的特点

js的this理解, 如何改变this的指向

cookie有什么限制

js的事件机制

settimeout的机制

遇到过兼容性的问题吗,要如何处理

项目中使用过构建工具吗

平时如何学习前端的,最近在看的一本书

内存泄露的排除定位和解决方法

垃圾回收机制

websocket实现原理

http状态码301 302的区别,304是啥

缓存机制,协商协议

定时器setTimeout的运行机制

事件循环机制 eventloop

异步es5 es6 es7分别怎么样解决

js的继承的实现方法

清除浮动的方法

常见布局的方法

从输入一个url到浏览器页面展示都经历了哪些过程

new生成了一个对象的过程(核心return this)

请简单说明什么是事件冒泡和事件捕获以及事件委托

实现一个两边宽度固定中间自适应的三列布局,圣杯布局,双飞燕

flex布局有没有了解

请简述一下js原型链

es6有了解吗,请简单说一下promise机制,异步的承诺机制,顺势说一下解决回调地狱的问题

手写一下深拷贝,答案提示:JSON.parse(JSON.stringify(obj)) 用JSON实现深拷贝

== 和 === 的却别,,typeof null的结果是什么

同步和异步的执行顺序

get和post的请求区别

什么情况算是跨域,如何解决跨域问题

一个有序的数组如何进行查找操作

手写一个快速排序

事件委托理解,原理,好处,应用场景

前端框架用过什么?

vue和react的区别

vue的原理

闭包

let和var的区别,let的产生背景?

定宽定高,如何垂直居中,那不定宽定高呢?

https的请求过程

代码规范

项目中遇到过什么难点,如何解决的

尾递归问题

电脑里有很多大小不一样的照片,我现在要复制到U盘上,但是U盘容量固定,让你写一个程序,挑选一组照片,让U盘的剩余空间最小。

后端会哪些语言

讲下如何负载均衡

cookie和session的区别和联系

nodejs是单线程还是多线程的,为什么能去开很多异步请求去访问其他接口

一般你是如何操作数据库的?会哪些数据库

mysql的底层引擎,发布

mysql语言写的如何,怎么样判断sql语句的性能?如何优化?

如何去除数组中的重复的项?

遍历数组处理用for循环还有什么方法吗

浏览器出于安全考虑有?(同源策略)

登录原理

让我设计一个页面,选择男或女,搜索出相对性

发送请求有哪些?

web的安全问题?

自我介绍

JS如何计算浏览器的渲染时间的

浏览器的缓存

var的变量提升底层原理是什么?

event loop讲讲

JS的回收机制说一下

数组常用的方法有哪些

websock的底层原理讲讲

你的聊天室项目,如果数据传输出错了怎么办?

现在有一大段文字,如何在页面中设置一个窗口滚动播出这段文件(轮播),轮播图如何解决卡顿问题,有手写过轮播图你,原理是什么

垂直水平居中的方式

实现三栏布局,中间自适应有几种方法

算法:给你一个无序数字数组,里面是随机的书,并给出一个目标值,求这个数组的两个数,这个数的和等于目标值,要求这两个数并给出下标,
你能想到最优的办法是什么吗(提示:快排,双指针)

算法:给一个无序的数组,让我分割成m组,这个m组里和最大的一组是所有可能的分割情况最小的(二分答案法)

webpack的原理

proto 和prototype分别是什么

原型链原理

在原型链上Object再往上是什么

new和Object.create的区别

哪种情况下__proto__和prototype的指向是同一个?

typeof array null undefined NaN分别是什么

把undefined和null转成Number分别是什么

如何判断是否为数组?(instanceOf和constructor可以,但是有原型链断裂的风险,Object.toString.call()最稳定)

instanceOf和constructor的区别

原型链断裂了以后的结果是什么

如果让你实现一个promise怎么样实现

如何学前端的,看了哪些书

博客写了多少篇

你的技术亮点在哪里

写一下实现合理化

你对三大框架的理解是什么

前端性能理解,优化有哪些

nodejs了解多少

你遇到的最有难度的技术问题是什么

redux原理讲讲

了解web移动开发吗,移动端适配方案有哪些

你有Native开发经验吗,讲下Android如何调用页面的资源

行内元素和块级元素有哪些,img属于什么元素

margin坍塌

BFC原理

写一下清除浮动

写一下不知道宽高元素垂直水平居中方法

写一下节点的增删改

如何获取元素的父节点和兄弟节点

JS如何获得用户来源(navigator.userAgent)

跨域方法说一下

jsonp的原理是什么,处理script标签还可以通过什么实现?(静态资源标签)

原型链说一下

谈谈对原型链继承

前端缓存

给你一个乱序数组,你怎么样排序

你的项目有什么亮点

你的文件上传方案是什么

写一个方法提取一下search里面的参数

写一个API实现insertAfter

CSS3哪些用的比较多

CSS动画会吗,怎么样用CSS实现一个loading效果

如何处理CSS兼容问题

webpack有个插件可以解决css兼容性问题你知道吗(postcss-loader)

ES6新特性说说

ES6的代理是什么
let和var的区别讲讲

箭头函数和ES5和this的指向区别讲讲

前端安全这块了解多少

写一个API,实现jQuery的$(selector)选择器,要求兼容IE6

浏览器是如何实现通过你的代码去找到指定的元素的

用JS模拟一个双向链表

前端工程化思想

模块化思想

你为什么选择前端

cookie,session,localStorage和sessionStorage的区别

Nodejs的线程管理

JS设计模式有哪些

跨域的方法有哪些

说说bind,apply,call的区别以及bind的实现

算法:反转二叉树以及时间复杂度

链表找环

react的virtual DOM和Diff算法

React的生命周期

Vue的生命周期

boostrap的底层原理

图片压缩的原理

如何处理高并发的情况下,用户顺序问题

说一下web安全,xss,csrf防范
csrf流程,举例子

session+cookie的登录机制

token香港,浏览器缓存

vue双向绑定原理,vue-loader做了什么

webpack的插件大致流程

编程题:给出一个字符串(“obj.a”),返回对象属性obj.a,类似eval的效果

前端路由会不会发请求

画布濡染有了解吗

前端监控,pm2,如果我服务器挂了,如何快速发现并且定位错误

pm2除了监控还能干什么,如何实现

express中间件如何实现

了解TCP吗,数据结构简单介绍一下以及你的想法

webpack项目太大了怎么办

深拷贝

如果弹出的菜单位置过于贴近边框,如何调整这个元素的位置

计算50个人至少有2个生日相同的概率

一个升序数组,求两个元素的和为一个指定数

vue的生命周期

vuex的状态管理的原理是什么

如何在浏览器端和原生端的代码复用,讲到weex又简单讲了它的原理

跨域如何解决

前端性能优化问题

csrf攻击原理以及防御手段

平衡二叉树

如何在上亿规模的数据中找到最大的一个数

最近看过的技术文章和一遍非技术文章(考察表达能力,和主动学习新知识的习惯)

算法题:二叉树层序遍历

JS的全排列

get和post的区别

301和302的区别

如何避免301跳转https

tcp建立连接三次握手的区别

操作系统进程和线程的区别

线程的哪些资源共享,哪些资源不共享

设计模式有哪些

Linux命令用的多吗,怎么样进行进程间通信

kill指令了解过吗

如何画一个三角形

CSS中对溢出的处理

CSS选择器有哪些,优先级呢?

ES6中用过什么

promise的状态有哪些

讲讲JS的闭包

你有用到express吗

express和koa2的区别

讲讲JS的语言特性吗

最近在学啥

项目用到JAVA,反射来讲

你用过什么数据库

MySQL里面的索引用过吗

B+树了解过吗

mongoDB有哪些特点

实现一个两列等高布局,思路

清除浮动的方法

如何让一个元素消失

重排和重绘

HTTP状态码

讲讲304

浏览器缓存机制

强缓存,协商缓存什么时候用哪个

如何判断一个数组

你说到typeof,能不能加一个限制条件typeof只能判断是object,可以判断一下是否拥有数组的方法

JS的如何实现倒计时,为什么不准,校正方式

JS实现跨域

React的特性

nodejs的时间方法讲讲看

nodejs的特性,适合处理什么场景

IO多路复用

前端优化

实现一个ajax,兼容

如何有一个很多的列表,像头条的新闻列表,用户看得多了,列表越来越大,怎么样处理,思考一下

如果有这样的场景:一个模块A作为输出,BCD等扩展模块可以在A做更改后展示A的原来内容或者驾驶CSS后的内容,想想思路

同一个网站,在上海打开慢,在北京打开快,怎么样分析原因,(DNS解析和CDN)

vue react jquery比较,有测试过性能吗

对大前端的理解,前端会发展怎么样

算法:两个排序好的数组,怎么样找他的中位数

React虚拟DOM,生命周期

react父子通信

nodejs如何require一个包

es6和es5的区别

Nodejs加载原生的包与自己定义的包路径如何查找

HTTP2.0的优势

flex弹性布局裂解,移动端适配方案有哪些

页面缓存

页面性能优化

css性能优化,就动画效果,如何从js,cs角度减少回流?

webpack的plugin和loader的区别

es5如何转为es5-babel

了解webpack如何打败

原型基础

BFC

原型链与作用域链

jQuery的源码看过没

移动端开发经验

css会吗

怎么样学前端

遇到问题如何解决

正则如何将一个数千分化表示

js设计模式知道哪些,单例详细说

函数式编程-柯里化

es6的变量定义和es5的区别

JS事件流

七层网络协议,每层干嘛的

tcp三次握手,四次挥手

排序算法有哪些,时间复杂度,选择排序怎么样搞

数据结构有哪些,红黑树和二叉树的区别,二叉搜索树与二叉平衡树

项目经验

树数据多少非常多怎么样办(懒加载)

页面优化方法

设计模式

cookie和session的却别

如果现在重新做这个项目,有什么想优化的

多长时间开始独立做前端,这段时间是如何学习的

学习生涯最失败的事情是什么,怎么样走出来的

如何看待竞争

项目里最难的事情,如何克服

职业规范是怎么样的

是独生子女吗

别人对你的项目认可度,项目做的怎么样

block元素和inline元素的区别

position有哪些,特性

css选择器有哪些

es5和es6:let,const打包后如何变-块级作用域

JS基本数据类型

作用域链

递归

react生命周期

react通信机制

js事件流

redux

flex弹性布局

this

promise如何从then转为catch的

介绍你做过的项目

promise函数

es6模块新特性

浏览器内存泄露,闭包内存泄露如何解决

怎么样让页面加载更快

兼容过IE的方法

缓存

会pc换还是移动端

观察者模式如何实现

行元素,块级元素的却别

css选择器的优先级

水平垂直居中布局

前端性能优化

闭包的概念,平时如何实现

es6的特性以及这些特性如何实现的

事件冒泡,事件捕获,事件委托的原理,如何实现委托,事件,委托的有点是什么,事件监听

输入URL浏览器是如何工作的

requirejs组件化

jQuery和vue的区别

vue的特点

vue的双向绑定原理

谈谈js设计模式

如何实现订阅者发者模式

MVVM实现原理

vue生命周期

vue跨组件通信实现

vue的props和slot的使用,区别

vuex的原理

详细说明解决跨域的方式

前端安全(资源枚举,XSS共计,DOS攻击,CSRF攻击)

HTTP状态码

重排重绘

谈谈JS的异步机制

项目中是是如何优化页面的

如何实现移动端布局,适配方案

call apply bind的区别

深拷贝的实现

jQuery原理,平时用jQuery都做过什么

用过webpack吗,谈一下webpack打包

给了一个settimeout代码输出的顺序

git命令

Linux命令

JS基础有几种

流式布局

对前端的了解和个人规划

html5的新特性

float和position的区别

如何获取当前日期

html语义化,好处

计算器

清除浮动

盒子模型

border-box和content-box

css伪元素有哪些

打开连接到网页呈现的流程

HTTP请求头,响应头里面有哪些

异步加载JS

JS原型

看哪些技术网站

觉得自己的不足

cookie实现

cookie长度限制

http状态码

301 302

性能优化

一个网页很多很多页面,怎么样让用户体验好一点

一个项目可能要延期,怎么样处理

URL长度限制

缓存

什么时候用local,什么时候用session和 storage

长连接

有没有抓过包

有没有用过代理

DNS

图片压缩

gzip

浏览器兼容

webpack css兼容

css性能

垂直居中,水平居中

盒子米线

last-modifined,etg怎么样判断

css动画优化

401状态码

reflow和repaint

应用层协议有哪些

TCP和UDP

有哪些状态码

Ajax如何实现的

Ajax返回204算是成功吗

settimeout异步

tcp ip分成

vue diff算法

vue的生命周期

pwa

vue-router不能解决情况和边界情况

transition生命周期

线程和进程的区别

什么是异步

promise是如何解析异步操作的

如果给a,b,c,d四个时间,执行时间分别为1,2,3,4,怎么样做才能在abc都在执行完后再执行d,除了使用promise还能使用什么方法

数组去重方法

函数节流和函数防抖知道吗,区别是什么

TCP和UDP的区别

HTTP1.0和HTTP1.1相关我让你听

强缓存和协商缓存知道吗

为什么HTTP1.1中使用Cache-Control代替Expires

HTTP1.1中Etg和f-None-Match哪个权重比较大

排序的几种方法知道吗,是如何实现的

栈和队列有什么区别,具体的应用场景

hashmap原理

react中props和state的区别

组件怎么样拿到redux的数据

给你一个DOM元素,用CSS的方式让他呈现两个的想过,只有一个DOM元素

一个数组只有1和2,排序,1在前面,2在后面

js事件模型,捕获和冒泡,阻止冒泡

preventDefault和stopPropagation的区别

HTTP缓存

https

react的事件绑定和原生有什么区别吗

一个数组,有很多数字存在2次,只有一个数字寸一次,怎么样找出这个数字

关于iframe内部和外部变量的读取是如何的

前端防连击throttle和debounce

ES6 generator async/await了解吗

HTTP/2有什么新特性

哈希的原理

如何反转链表

二叉搜索树的原理

给定两个文本文件,找出他们中相同的行都有哪些

对JS单线程的理解

页面共享数据的方法有哪些

amd,cmd规范

用户页面打开很慢,有哪些优化方式

react的虚拟DOM了解什么,这些类型的框架和传统的jd操作dom的优势

koa generator能讲一下吗

如何做单侧,单侧和开发占比应该是多少

hybrid

v-model参数

mvvm,mvc,mvp区别

cdn

网络安全xss,csfr是什么,怎么样解决安全

https怎么样校验证书有效性

websocket协议,nodejs中有哪些实现了这个协议

TCP/IP体系结构以及每层的主要协议

TCP的三次握手

HTTP各版本比较

数据结构学过什么

js如何实现一个栈

哈希表是怎么样的结构

说说操作系统的内存管理

怎么样实现一个服务器

如何删除一个dom节点

浏览器如何渲染页面的

GitHub的项目问

看过什么书

你是如何理解HTML语义化的

HTML的黑钻模型有哪些构成的,盒子模型有哪些,默认是哪些

盒子模型有没有办法把宽度设置为包含padding

浮动元素有没有什么特性

清除浮动的所有方法

ji基本数据类型

typeof去判断数据类型返回值有哪些

说说事件代理利用的是什么原理

阻止冒泡的函数是什么

cookie有什么特征

加入访问A.com存进了一个cookie,在另外一个页面用ajax向A的域名发请求会携带cookie吗

cookie的其他解决方案

localStorage存储数据格式是什么

怎么样把一个数组存进localSorage

storage有哪些存储方法

html5有哪些新的特性

假设两台电脑之间同步画板如何实现

promise的两个方法,具体实现

es6用的多的有哪些

箭头函数

如果一个页面做辛夷花,从哪些方面考察,从哪些地方优化

vue开发模式和jQuery模式有哪些不同,有哪些优缺点

假设一个object A里面的值n为1,怎么样知道n改变了,有事件绑定吗

react是如何实现数据绑定的

给数字加千位分隔符

HTTP1 SPDY HTTP2的对比

webkit内核渲染页面过程

简单介绍一下backbone

react首次渲染过程

redux和vuex的区别

了解过weex吗

typescript和es6的区别

知道xss吗,介绍一下,如何避免

跨域方式

如何理解html语义化

浏览器如何处理未知的的tab

html5有什么新的tag,canvas…

nodejs的优势,用过nodejs的哪些模块

预约系统如何解决高并发的问题

kut如何优化react的diff,有去提pr吗,为什么

简单说一下ICP UDP

Socks5代理是如何实现的,读过协议吗

http状态码,307是什么,401和403的区别

酸酸是如何实现穿墙的

如何实现文件上传的功能

垂直居中的实现

react和vue的区别

介绍一下盒子模型

实现css动画有哪些

jsonp如何实现,过程

知道哪些http状态码

200和304实现缓存的区别

localstorage和cookie的区别,如何设置cookie

表单提交和ajax的区别

calc属性

symbol

事件监听

常见的请求方式

tcp和http的区别

css的定位属性,怎么样定位的

情景题:给你一个ul列表,找到点击的li对象,把点击到的对象的字符串翻转,讲出思路并且写出代码

只能用获取到对象的属性

小程序的生命周期

小程序的Onlaunch周期不支持同步获取信息之后再执行到下一个生命周期

你怎么样维持用户登录状态的

给你一颗树,如何找到其公共的父节点

你最荣耀的事情

你怎么样知道我们公司的,为什么来我们公司

rem,px,em的区别

协同开发需要注意什么

作者:梁凤波
链接:http://www.imooc.com/article/...
来源:慕课网

查看原文

赞 271 收藏 207 评论 12

凌冻缘佳 收藏了文章 · 2019-01-31

前端面试题大集合:来自真实大厂的532道面试题(只有题,没有答案)

答案自己谷歌或百度找。

一、来源背景

面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。

二、532道前端真实大厂面试题

express和koa的对比,两者中间件的原理,koa捕获异常多种情况说一下

你项目里用到第三方登录涉及的oAuth(JWT)协议的实现原理,以及你本地的实现原理,第三方登录怎么样保证安全性

说下快排完整性

react和vue的区别,你开发如何选择技术栈

express里面登录的session服务怎么样实现分布式服务

vue的理解

vue的双向数据绑定的原理

vue怎么样实现数组绑定

js的继承

call和apply的区别

ajax是同步还是异步,怎么样实现同步

ajax实现过程

闭包的作用理解,以及那些地方用过闭包,以及闭包的缺点,如何实现闭包

跨域方法以及怎么样实现的与原理

工作中做的项目有什么亮点

webpack工程构建工具怎么样用

数组去重

快排和冒泡原理

http状态码

nodejs了解多少

为什么css样式初始化,目的是为了什么

为什么浏览器会产生同源策略

axios有什么特点

cookie和webstrage的区别以及cookie怎么样使用?原生cookie怎么样封装

三次握手

对跨域了解吗。jsonp的限制

浏览器那些地方用到了异步

css弹性布局,那些地方用到过

position属性有哪些值,分别有什么含义

ES6用过吗,新增了那些东西,你用到过什么

const和let的区别,可以改变const定义对象某个属性吗

箭头函数,箭头函数的特点

js的this理解, 如何改变this的指向

cookie有什么限制

js的事件机制

settimeout的机制

遇到过兼容性的问题吗,要如何处理

项目中使用过构建工具吗

平时如何学习前端的,最近在看的一本书

内存泄露的排除定位和解决方法

垃圾回收机制

websocket实现原理

http状态码301 302的区别,304是啥

缓存机制,协商协议

定时器setTimeout的运行机制

事件循环机制 eventloop

异步es5 es6 es7分别怎么样解决

js的继承的实现方法

清除浮动的方法

常见布局的方法

从输入一个url到浏览器页面展示都经历了哪些过程

new生成了一个对象的过程(核心return this)

请简单说明什么是事件冒泡和事件捕获以及事件委托

实现一个两边宽度固定中间自适应的三列布局,圣杯布局,双飞燕

flex布局有没有了解

请简述一下js原型链

es6有了解吗,请简单说一下promise机制,异步的承诺机制,顺势说一下解决回调地狱的问题

手写一下深拷贝,答案提示:JSON.parse(JSON.stringify(obj)) 用JSON实现深拷贝

== 和 === 的却别,,typeof null的结果是什么

同步和异步的执行顺序

get和post的请求区别

什么情况算是跨域,如何解决跨域问题

一个有序的数组如何进行查找操作

手写一个快速排序

事件委托理解,原理,好处,应用场景

前端框架用过什么?

vue和react的区别

vue的原理

闭包

let和var的区别,let的产生背景?

定宽定高,如何垂直居中,那不定宽定高呢?

https的请求过程

代码规范

项目中遇到过什么难点,如何解决的

尾递归问题

电脑里有很多大小不一样的照片,我现在要复制到U盘上,但是U盘容量固定,让你写一个程序,挑选一组照片,让U盘的剩余空间最小。

后端会哪些语言

讲下如何负载均衡

cookie和session的区别和联系

nodejs是单线程还是多线程的,为什么能去开很多异步请求去访问其他接口

一般你是如何操作数据库的?会哪些数据库

mysql的底层引擎,发布

mysql语言写的如何,怎么样判断sql语句的性能?如何优化?

如何去除数组中的重复的项?

遍历数组处理用for循环还有什么方法吗

浏览器出于安全考虑有?(同源策略)

登录原理

让我设计一个页面,选择男或女,搜索出相对性

发送请求有哪些?

web的安全问题?

自我介绍

JS如何计算浏览器的渲染时间的

浏览器的缓存

var的变量提升底层原理是什么?

event loop讲讲

JS的回收机制说一下

数组常用的方法有哪些

websock的底层原理讲讲

你的聊天室项目,如果数据传输出错了怎么办?

现在有一大段文字,如何在页面中设置一个窗口滚动播出这段文件(轮播),轮播图如何解决卡顿问题,有手写过轮播图你,原理是什么

垂直水平居中的方式

实现三栏布局,中间自适应有几种方法

算法:给你一个无序数字数组,里面是随机的书,并给出一个目标值,求这个数组的两个数,这个数的和等于目标值,要求这两个数并给出下标,
你能想到最优的办法是什么吗(提示:快排,双指针)

算法:给一个无序的数组,让我分割成m组,这个m组里和最大的一组是所有可能的分割情况最小的(二分答案法)

webpack的原理

proto 和prototype分别是什么

原型链原理

在原型链上Object再往上是什么

new和Object.create的区别

哪种情况下__proto__和prototype的指向是同一个?

typeof array null undefined NaN分别是什么

把undefined和null转成Number分别是什么

如何判断是否为数组?(instanceOf和constructor可以,但是有原型链断裂的风险,Object.toString.call()最稳定)

instanceOf和constructor的区别

原型链断裂了以后的结果是什么

如果让你实现一个promise怎么样实现

如何学前端的,看了哪些书

博客写了多少篇

你的技术亮点在哪里

写一下实现合理化

你对三大框架的理解是什么

前端性能理解,优化有哪些

nodejs了解多少

你遇到的最有难度的技术问题是什么

redux原理讲讲

了解web移动开发吗,移动端适配方案有哪些

你有Native开发经验吗,讲下Android如何调用页面的资源

行内元素和块级元素有哪些,img属于什么元素

margin坍塌

BFC原理

写一下清除浮动

写一下不知道宽高元素垂直水平居中方法

写一下节点的增删改

如何获取元素的父节点和兄弟节点

JS如何获得用户来源(navigator.userAgent)

跨域方法说一下

jsonp的原理是什么,处理script标签还可以通过什么实现?(静态资源标签)

原型链说一下

谈谈对原型链继承

前端缓存

给你一个乱序数组,你怎么样排序

你的项目有什么亮点

你的文件上传方案是什么

写一个方法提取一下search里面的参数

写一个API实现insertAfter

CSS3哪些用的比较多

CSS动画会吗,怎么样用CSS实现一个loading效果

如何处理CSS兼容问题

webpack有个插件可以解决css兼容性问题你知道吗(postcss-loader)

ES6新特性说说

ES6的代理是什么
let和var的区别讲讲

箭头函数和ES5和this的指向区别讲讲

前端安全这块了解多少

写一个API,实现jQuery的$(selector)选择器,要求兼容IE6

浏览器是如何实现通过你的代码去找到指定的元素的

用JS模拟一个双向链表

前端工程化思想

模块化思想

你为什么选择前端

cookie,session,localStorage和sessionStorage的区别

Nodejs的线程管理

JS设计模式有哪些

跨域的方法有哪些

说说bind,apply,call的区别以及bind的实现

算法:反转二叉树以及时间复杂度

链表找环

react的virtual DOM和Diff算法

React的生命周期

Vue的生命周期

boostrap的底层原理

图片压缩的原理

如何处理高并发的情况下,用户顺序问题

说一下web安全,xss,csrf防范
csrf流程,举例子

session+cookie的登录机制

token香港,浏览器缓存

vue双向绑定原理,vue-loader做了什么

webpack的插件大致流程

编程题:给出一个字符串(“obj.a”),返回对象属性obj.a,类似eval的效果

前端路由会不会发请求

画布濡染有了解吗

前端监控,pm2,如果我服务器挂了,如何快速发现并且定位错误

pm2除了监控还能干什么,如何实现

express中间件如何实现

了解TCP吗,数据结构简单介绍一下以及你的想法

webpack项目太大了怎么办

深拷贝

如果弹出的菜单位置过于贴近边框,如何调整这个元素的位置

计算50个人至少有2个生日相同的概率

一个升序数组,求两个元素的和为一个指定数

vue的生命周期

vuex的状态管理的原理是什么

如何在浏览器端和原生端的代码复用,讲到weex又简单讲了它的原理

跨域如何解决

前端性能优化问题

csrf攻击原理以及防御手段

平衡二叉树

如何在上亿规模的数据中找到最大的一个数

最近看过的技术文章和一遍非技术文章(考察表达能力,和主动学习新知识的习惯)

算法题:二叉树层序遍历

JS的全排列

get和post的区别

301和302的区别

如何避免301跳转https

tcp建立连接三次握手的区别

操作系统进程和线程的区别

线程的哪些资源共享,哪些资源不共享

设计模式有哪些

Linux命令用的多吗,怎么样进行进程间通信

kill指令了解过吗

如何画一个三角形

CSS中对溢出的处理

CSS选择器有哪些,优先级呢?

ES6中用过什么

promise的状态有哪些

讲讲JS的闭包

你有用到express吗

express和koa2的区别

讲讲JS的语言特性吗

最近在学啥

项目用到JAVA,反射来讲

你用过什么数据库

MySQL里面的索引用过吗

B+树了解过吗

mongoDB有哪些特点

实现一个两列等高布局,思路

清除浮动的方法

如何让一个元素消失

重排和重绘

HTTP状态码

讲讲304

浏览器缓存机制

强缓存,协商缓存什么时候用哪个

如何判断一个数组

你说到typeof,能不能加一个限制条件typeof只能判断是object,可以判断一下是否拥有数组的方法

JS的如何实现倒计时,为什么不准,校正方式

JS实现跨域

React的特性

nodejs的时间方法讲讲看

nodejs的特性,适合处理什么场景

IO多路复用

前端优化

实现一个ajax,兼容

如何有一个很多的列表,像头条的新闻列表,用户看得多了,列表越来越大,怎么样处理,思考一下

如果有这样的场景:一个模块A作为输出,BCD等扩展模块可以在A做更改后展示A的原来内容或者驾驶CSS后的内容,想想思路

同一个网站,在上海打开慢,在北京打开快,怎么样分析原因,(DNS解析和CDN)

vue react jquery比较,有测试过性能吗

对大前端的理解,前端会发展怎么样

算法:两个排序好的数组,怎么样找他的中位数

React虚拟DOM,生命周期

react父子通信

nodejs如何require一个包

es6和es5的区别

Nodejs加载原生的包与自己定义的包路径如何查找

HTTP2.0的优势

flex弹性布局裂解,移动端适配方案有哪些

页面缓存

页面性能优化

css性能优化,就动画效果,如何从js,cs角度减少回流?

webpack的plugin和loader的区别

es5如何转为es5-babel

了解webpack如何打败

原型基础

BFC

原型链与作用域链

jQuery的源码看过没

移动端开发经验

css会吗

怎么样学前端

遇到问题如何解决

正则如何将一个数千分化表示

js设计模式知道哪些,单例详细说

函数式编程-柯里化

es6的变量定义和es5的区别

JS事件流

七层网络协议,每层干嘛的

tcp三次握手,四次挥手

排序算法有哪些,时间复杂度,选择排序怎么样搞

数据结构有哪些,红黑树和二叉树的区别,二叉搜索树与二叉平衡树

项目经验

树数据多少非常多怎么样办(懒加载)

页面优化方法

设计模式

cookie和session的却别

如果现在重新做这个项目,有什么想优化的

多长时间开始独立做前端,这段时间是如何学习的

学习生涯最失败的事情是什么,怎么样走出来的

如何看待竞争

项目里最难的事情,如何克服

职业规范是怎么样的

是独生子女吗

别人对你的项目认可度,项目做的怎么样

block元素和inline元素的区别

position有哪些,特性

css选择器有哪些

es5和es6:let,const打包后如何变-块级作用域

JS基本数据类型

作用域链

递归

react生命周期

react通信机制

js事件流

redux

flex弹性布局

this

promise如何从then转为catch的

介绍你做过的项目

promise函数

es6模块新特性

浏览器内存泄露,闭包内存泄露如何解决

怎么样让页面加载更快

兼容过IE的方法

缓存

会pc换还是移动端

观察者模式如何实现

行元素,块级元素的却别

css选择器的优先级

水平垂直居中布局

前端性能优化

闭包的概念,平时如何实现

es6的特性以及这些特性如何实现的

事件冒泡,事件捕获,事件委托的原理,如何实现委托,事件,委托的有点是什么,事件监听

输入URL浏览器是如何工作的

requirejs组件化

jQuery和vue的区别

vue的特点

vue的双向绑定原理

谈谈js设计模式

如何实现订阅者发者模式

MVVM实现原理

vue生命周期

vue跨组件通信实现

vue的props和slot的使用,区别

vuex的原理

详细说明解决跨域的方式

前端安全(资源枚举,XSS共计,DOS攻击,CSRF攻击)

HTTP状态码

重排重绘

谈谈JS的异步机制

项目中是是如何优化页面的

如何实现移动端布局,适配方案

call apply bind的区别

深拷贝的实现

jQuery原理,平时用jQuery都做过什么

用过webpack吗,谈一下webpack打包

给了一个settimeout代码输出的顺序

git命令

Linux命令

JS基础有几种

流式布局

对前端的了解和个人规划

html5的新特性

float和position的区别

如何获取当前日期

html语义化,好处

计算器

清除浮动

盒子模型

border-box和content-box

css伪元素有哪些

打开连接到网页呈现的流程

HTTP请求头,响应头里面有哪些

异步加载JS

JS原型

看哪些技术网站

觉得自己的不足

cookie实现

cookie长度限制

http状态码

301 302

性能优化

一个网页很多很多页面,怎么样让用户体验好一点

一个项目可能要延期,怎么样处理

URL长度限制

缓存

什么时候用local,什么时候用session和 storage

长连接

有没有抓过包

有没有用过代理

DNS

图片压缩

gzip

浏览器兼容

webpack css兼容

css性能

垂直居中,水平居中

盒子米线

last-modifined,etg怎么样判断

css动画优化

401状态码

reflow和repaint

应用层协议有哪些

TCP和UDP

有哪些状态码

Ajax如何实现的

Ajax返回204算是成功吗

settimeout异步

tcp ip分成

vue diff算法

vue的生命周期

pwa

vue-router不能解决情况和边界情况

transition生命周期

线程和进程的区别

什么是异步

promise是如何解析异步操作的

如果给a,b,c,d四个时间,执行时间分别为1,2,3,4,怎么样做才能在abc都在执行完后再执行d,除了使用promise还能使用什么方法

数组去重方法

函数节流和函数防抖知道吗,区别是什么

TCP和UDP的区别

HTTP1.0和HTTP1.1相关我让你听

强缓存和协商缓存知道吗

为什么HTTP1.1中使用Cache-Control代替Expires

HTTP1.1中Etg和f-None-Match哪个权重比较大

排序的几种方法知道吗,是如何实现的

栈和队列有什么区别,具体的应用场景

hashmap原理

react中props和state的区别

组件怎么样拿到redux的数据

给你一个DOM元素,用CSS的方式让他呈现两个的想过,只有一个DOM元素

一个数组只有1和2,排序,1在前面,2在后面

js事件模型,捕获和冒泡,阻止冒泡

preventDefault和stopPropagation的区别

HTTP缓存

https

react的事件绑定和原生有什么区别吗

一个数组,有很多数字存在2次,只有一个数字寸一次,怎么样找出这个数字

关于iframe内部和外部变量的读取是如何的

前端防连击throttle和debounce

ES6 generator async/await了解吗

HTTP/2有什么新特性

哈希的原理

如何反转链表

二叉搜索树的原理

给定两个文本文件,找出他们中相同的行都有哪些

对JS单线程的理解

页面共享数据的方法有哪些

amd,cmd规范

用户页面打开很慢,有哪些优化方式

react的虚拟DOM了解什么,这些类型的框架和传统的jd操作dom的优势

koa generator能讲一下吗

如何做单侧,单侧和开发占比应该是多少

hybrid

v-model参数

mvvm,mvc,mvp区别

cdn

网络安全xss,csfr是什么,怎么样解决安全

https怎么样校验证书有效性

websocket协议,nodejs中有哪些实现了这个协议

TCP/IP体系结构以及每层的主要协议

TCP的三次握手

HTTP各版本比较

数据结构学过什么

js如何实现一个栈

哈希表是怎么样的结构

说说操作系统的内存管理

怎么样实现一个服务器

如何删除一个dom节点

浏览器如何渲染页面的

GitHub的项目问

看过什么书

你是如何理解HTML语义化的

HTML的黑钻模型有哪些构成的,盒子模型有哪些,默认是哪些

盒子模型有没有办法把宽度设置为包含padding

浮动元素有没有什么特性

清除浮动的所有方法

ji基本数据类型

typeof去判断数据类型返回值有哪些

说说事件代理利用的是什么原理

阻止冒泡的函数是什么

cookie有什么特征

加入访问A.com存进了一个cookie,在另外一个页面用ajax向A的域名发请求会携带cookie吗

cookie的其他解决方案

localStorage存储数据格式是什么

怎么样把一个数组存进localSorage

storage有哪些存储方法

html5有哪些新的特性

假设两台电脑之间同步画板如何实现

promise的两个方法,具体实现

es6用的多的有哪些

箭头函数

如果一个页面做辛夷花,从哪些方面考察,从哪些地方优化

vue开发模式和jQuery模式有哪些不同,有哪些优缺点

假设一个object A里面的值n为1,怎么样知道n改变了,有事件绑定吗

react是如何实现数据绑定的

给数字加千位分隔符

HTTP1 SPDY HTTP2的对比

webkit内核渲染页面过程

简单介绍一下backbone

react首次渲染过程

redux和vuex的区别

了解过weex吗

typescript和es6的区别

知道xss吗,介绍一下,如何避免

跨域方式

如何理解html语义化

浏览器如何处理未知的的tab

html5有什么新的tag,canvas…

nodejs的优势,用过nodejs的哪些模块

预约系统如何解决高并发的问题

kut如何优化react的diff,有去提pr吗,为什么

简单说一下ICP UDP

Socks5代理是如何实现的,读过协议吗

http状态码,307是什么,401和403的区别

酸酸是如何实现穿墙的

如何实现文件上传的功能

垂直居中的实现

react和vue的区别

介绍一下盒子模型

实现css动画有哪些

jsonp如何实现,过程

知道哪些http状态码

200和304实现缓存的区别

localstorage和cookie的区别,如何设置cookie

表单提交和ajax的区别

calc属性

symbol

事件监听

常见的请求方式

tcp和http的区别

css的定位属性,怎么样定位的

情景题:给你一个ul列表,找到点击的li对象,把点击到的对象的字符串翻转,讲出思路并且写出代码

只能用获取到对象的属性

小程序的生命周期

小程序的Onlaunch周期不支持同步获取信息之后再执行到下一个生命周期

你怎么样维持用户登录状态的

给你一颗树,如何找到其公共的父节点

你最荣耀的事情

你怎么样知道我们公司的,为什么来我们公司

rem,px,em的区别

协同开发需要注意什么

作者:梁凤波
链接:http://www.imooc.com/article/...
来源:慕课网

查看原文

凌冻缘佳 收藏了文章 · 2018-09-30

constructor, prototype, __proto__ 详解

本文为了解决以下问题:

  • __proto__(实际原型)和prototype(原型属性)不一样!!!

  • constructor属性(原型对象中包含这个属性,实例当中也同样会继承这个属性)

  • prototype属性(constructor.prototype原型对象)

  • __proto__属性(实例指向原型对象的指针)

首先弄清楚几个概念:

什么是对象

若干属性的集合

什么是原型?

原型是一个对象,其他对象可以通过它实现继承。

哪些对象有原型?

所有的对象在默认情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型(只有一种例外,默认的对象原型在原型链的顶端)

任何一个对象都可以成为原型

接下来就是最核心的内容:

constructor 属性

constructor属性始终指向创建当前对象的构造函数。

    var arr=[1,2,3];
    console.log(arr.constructor); //输出 function Array(){}
    var a={};
    console.log(arr.constructor);//输出 function Object(){}
    var bool=false;
    console.log(bool.constructor);//输出 function Boolean(){}
    var name="hello";
    console.log(name.constructor);//输出 function String(){}
    var sayName=function(){}
    console.log(sayName.constrctor)// 输出 function Function(){}
    
    //接下来通过构造函数创建instance
    function A(){}
    var a=new A();
    console.log(a.constructor); //输出 function A(){}

以上部分即解释了任何一个对象都有constructor属性,指向创建这个对象的构造函数

prototype属性

注意:prototype是每个函数对象都具有的属性,被称为原型对象,而__proto__属性才是每个对象才有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例会继承prototype上的属性和方法

    //constructor : A
    //instance : a
    function A(){}
    var a=new A();

    A.prototype.name="xl";
    A.prototype.sayName=function(){
        console.log(this.name);
    }
    
    console.log(a.name);// "xl"
    a.sayName();// "xl"
    
    //那么由constructor创建的instance会继承prototype上的属性和方法

constructor属性和prototype属性

每个函数都有prototype属性,而这个prototypeconstructor属性会指向这个函数。

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    
    var person=new Person("xl");
    
    console.log(person.constructor); //输出 function Person(){}
    console.log(Person.prototype.constructor);//输出 function Person(){}
    console.log(Person.constructor); //输出 function Function(){}

如果我们重写(重新定义)这个Person.prototype属性,那么constructor属性的指向就会发生改变了。

    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    }
    
    console.log(person.constructor==Person); //输出 false (这里为什么会输出false后面会讲)
    console.log(Person.constructor==Person); //输出 false
    
    console.log(Person.prototype.constructor);// 输出 function Object(){}  
    //这里为什么会输出function Object(){}
    //还记得之前说过constructor属性始终指向创建这个对象的构造函数吗?
    
    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    }
    //这里实际上是对原型对象的重写:
    Person.prototype=new Object(){
        sayName:function(){
            console.log(this.name);
        }
    }
    //看到了吧。现在Person.prototype.constructor属性实际上是指向Object的。
    
    //那么我如何能将constructor属性再次指向Person呢?
    Person.prototype.constructor=Person;

接下来解释为什么,看下面的例子

    function Person(name){
        this.name = name;
    }
    
    var personOne=new Person("xl");
    
    Person.prototype = {
        sayName: function(){
            console.log(this.name);
        }
    };
    
    var personTwo = new Person('XL');
    
    console.log(personOne.constructor == Person); //输出true
    console.log(personTwo.constructor == Person); //输出false   
    //大家可能会对这个地方产生疑惑?为何会第二个会输出false,personTwo不也是由Person创建的吗?这个地方应该要输出true啊?
    //这里就涉及到了JS里面的原型继承
    //这个地方是因为person实例继承了Person.prototype原型对象的所有的方法和属性,包括constructor属性。当Person.prototype的constructor发生变化的时候,相应的person实例上的constructor属性也会发生变化。所以第二个会输出false;
    //当然第一个是输出true,因为改变构造函数的prototype属性是在personOne被创建出来之后。

接下解释__proto__prototype属性
同样拿上面的代码来解释:

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    var person=new Person("xl");
    person.sayName(); //输出 "xl"

    //constructor : Person
    //instance : person
    //prototype : Person.prototype

首先给构造函数的原型对象Person.prototype赋给sayName方法,由构造函数Person创建的实例person会继承原型对象上的sayName方法。

为什么会继承原型对象的方法?

因为ECMAscript的发明者为了简化这门语言,同时又保持继承性,采用了链式继承的方法。

constructor创建的每个instance都有个__proto__属性,它指向constructor.prototype。那么constrcutor.prototype上定义的属性和方法都会被instance所继承.

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    
    var personOne=new Person("a");
    var personTwo=new Person("b");
    
    personOne.sayName(); // 输出  "a"
    personTwo.sayName(); //输出 "b"
    
    console.log(personOne.__proto__==Person.prototype); // true
    console.log(personTwo.__proto__==Person.prototype); // true
    
    console.log(personOne.constructor==Person); //true
    console.log(personTwo.constructor==Person); //true
    console.log(Person.prototype.constructor==Person); //true
    
    console.log(Person.constructor); //function Function(){}
    console.log(Person.__proto__.__proto__); // Object{} 

图片描述

参考文章:

  1. 强大的原型和原型链

  2. js原型链看图说明

  3. 理解javascript原型

  4. javascript类和继承:constructor

  5. javascript探秘:构造函数

查看原文

凌冻缘佳 赞了文章 · 2018-09-30

constructor, prototype, __proto__ 详解

本文为了解决以下问题:

  • __proto__(实际原型)和prototype(原型属性)不一样!!!

  • constructor属性(原型对象中包含这个属性,实例当中也同样会继承这个属性)

  • prototype属性(constructor.prototype原型对象)

  • __proto__属性(实例指向原型对象的指针)

首先弄清楚几个概念:

什么是对象

若干属性的集合

什么是原型?

原型是一个对象,其他对象可以通过它实现继承。

哪些对象有原型?

所有的对象在默认情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型(只有一种例外,默认的对象原型在原型链的顶端)

任何一个对象都可以成为原型

接下来就是最核心的内容:

constructor 属性

constructor属性始终指向创建当前对象的构造函数。

    var arr=[1,2,3];
    console.log(arr.constructor); //输出 function Array(){}
    var a={};
    console.log(arr.constructor);//输出 function Object(){}
    var bool=false;
    console.log(bool.constructor);//输出 function Boolean(){}
    var name="hello";
    console.log(name.constructor);//输出 function String(){}
    var sayName=function(){}
    console.log(sayName.constrctor)// 输出 function Function(){}
    
    //接下来通过构造函数创建instance
    function A(){}
    var a=new A();
    console.log(a.constructor); //输出 function A(){}

以上部分即解释了任何一个对象都有constructor属性,指向创建这个对象的构造函数

prototype属性

注意:prototype是每个函数对象都具有的属性,被称为原型对象,而__proto__属性才是每个对象才有的属性。一旦原型对象被赋予属性和方法,那么由相应的构造函数创建的实例会继承prototype上的属性和方法

    //constructor : A
    //instance : a
    function A(){}
    var a=new A();

    A.prototype.name="xl";
    A.prototype.sayName=function(){
        console.log(this.name);
    }
    
    console.log(a.name);// "xl"
    a.sayName();// "xl"
    
    //那么由constructor创建的instance会继承prototype上的属性和方法

constructor属性和prototype属性

每个函数都有prototype属性,而这个prototypeconstructor属性会指向这个函数。

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    
    var person=new Person("xl");
    
    console.log(person.constructor); //输出 function Person(){}
    console.log(Person.prototype.constructor);//输出 function Person(){}
    console.log(Person.constructor); //输出 function Function(){}

如果我们重写(重新定义)这个Person.prototype属性,那么constructor属性的指向就会发生改变了。

    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    }
    
    console.log(person.constructor==Person); //输出 false (这里为什么会输出false后面会讲)
    console.log(Person.constructor==Person); //输出 false
    
    console.log(Person.prototype.constructor);// 输出 function Object(){}  
    //这里为什么会输出function Object(){}
    //还记得之前说过constructor属性始终指向创建这个对象的构造函数吗?
    
    Person.prototype={
        sayName:function(){
            console.log(this.name);
        }
    }
    //这里实际上是对原型对象的重写:
    Person.prototype=new Object(){
        sayName:function(){
            console.log(this.name);
        }
    }
    //看到了吧。现在Person.prototype.constructor属性实际上是指向Object的。
    
    //那么我如何能将constructor属性再次指向Person呢?
    Person.prototype.constructor=Person;

接下来解释为什么,看下面的例子

    function Person(name){
        this.name = name;
    }
    
    var personOne=new Person("xl");
    
    Person.prototype = {
        sayName: function(){
            console.log(this.name);
        }
    };
    
    var personTwo = new Person('XL');
    
    console.log(personOne.constructor == Person); //输出true
    console.log(personTwo.constructor == Person); //输出false   
    //大家可能会对这个地方产生疑惑?为何会第二个会输出false,personTwo不也是由Person创建的吗?这个地方应该要输出true啊?
    //这里就涉及到了JS里面的原型继承
    //这个地方是因为person实例继承了Person.prototype原型对象的所有的方法和属性,包括constructor属性。当Person.prototype的constructor发生变化的时候,相应的person实例上的constructor属性也会发生变化。所以第二个会输出false;
    //当然第一个是输出true,因为改变构造函数的prototype属性是在personOne被创建出来之后。

接下解释__proto__prototype属性
同样拿上面的代码来解释:

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    var person=new Person("xl");
    person.sayName(); //输出 "xl"

    //constructor : Person
    //instance : person
    //prototype : Person.prototype

首先给构造函数的原型对象Person.prototype赋给sayName方法,由构造函数Person创建的实例person会继承原型对象上的sayName方法。

为什么会继承原型对象的方法?

因为ECMAscript的发明者为了简化这门语言,同时又保持继承性,采用了链式继承的方法。

constructor创建的每个instance都有个__proto__属性,它指向constructor.prototype。那么constrcutor.prototype上定义的属性和方法都会被instance所继承.

    function Person(name){
        this.name=name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name);
    }
    
    var personOne=new Person("a");
    var personTwo=new Person("b");
    
    personOne.sayName(); // 输出  "a"
    personTwo.sayName(); //输出 "b"
    
    console.log(personOne.__proto__==Person.prototype); // true
    console.log(personTwo.__proto__==Person.prototype); // true
    
    console.log(personOne.constructor==Person); //true
    console.log(personTwo.constructor==Person); //true
    console.log(Person.prototype.constructor==Person); //true
    
    console.log(Person.constructor); //function Function(){}
    console.log(Person.__proto__.__proto__); // Object{} 

图片描述

参考文章:

  1. 强大的原型和原型链

  2. js原型链看图说明

  3. 理解javascript原型

  4. javascript类和继承:constructor

  5. javascript探秘:构造函数

查看原文

赞 11 收藏 94 评论 9

凌冻缘佳 关注了用户 · 2018-09-28

a2774206 @a2774206

You can't forget your role at all times

关注 15

凌冻缘佳 提出了问题 · 2018-09-28

解决js闭包作用域

最近在看设计模式中,遇到一个关于闭包的问题,有点想不通啊,求助,代码如下:

function foo(){
    var a = 10;
    function bar(){
        a*= 2;
        return a;
    }
    return bar;
}

var baz = foo();
console.log(baz.toString());


var blat = foo();
console.log(blat.toString());

console.log(baz==blat)

打印出来的结果:

clipboard.png

后来,我用单独写了一个函数:

function b (){
    var tt = 10;
    return tt++
}
var aa = b;

var cc = b;

console.log(aa.toString());
console.log(cc.toString());

console.log(aa==cc)

打印出来结果:

clipboard.png

对于第二段的代码,我可以理解,因为函数也是对象,aa和cc都指向同一个引用地址,但是为啥第一段代码,在闭包中,baz和blat不也是指向同一个引用嘛?为啥不相等?求大神指点

关注 6 回答 5

认证与成就

  • 获得 1 次点赞
  • 获得 9 枚徽章 获得 0 枚金徽章, 获得 2 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-25
个人主页被 426 人浏览