20180915 前端开发周报-前端开发博客

Vue面试中，经常会被问到的面试题/Vue知识点整理；记一次前端大厂面试 | 掘金技术征文；81道经典Vue试题总结（长期更新）；Vuex 源码深度解析；JavaScript 初学者教程（指南）；http请求头与响应头的应用；搭建Websocket简易聊天室；Web 安全漏洞之 SSRF

Vue面试中，经常会被问到的面试题/Vue知识点整理看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能凯凯而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还…
记一次前端大厂面试 | 掘金技术征文前言最近参加了几家杭州大厂的面试，顺利的拿到了自己心仪的offer，积累了一些高频面试题，记录给有需要的同学们。我把面试题归纳整理分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己
81道经典Vue试题总结（长期更新）写在前面 {代码…} 本文档基于vue-cli技术栈总结了 vue-cli工程 vue.js核心知识 vue-router路由 vuex状态管理器 axios等http请求移动端适配 Tab切换等常用功能 vue与原生app混合交互 vue生产环境部署 vue各项技…
Vuex 源码深度解析该文章内容节选自团队的开源项目 InterviewMap。项目目前内容包含了 JS、网络、浏览器相关、小程序、性能优化、安全、框架、Git、数据结构、算法等内容，无论是基础还是进阶，亦或是源码解读，你都能在本图谱中得到满意的答案，希望这个面试图谱能够帮助到大家
JavaScript 初学者教程（指南）JavaScript 是前端开发者使用的主要编程语言，随着前端技术的发展，这门语言的边界也得以不断扩展。我们在这里选择了与 JavaScript 相关的经典文章，可以让大家对如何学习这门语言有一些全面的认识。特别的，我们…
http请求头与响应头的应用本文要聊聊浏览器可爱的头头头……们。 Chap1 发现headers 当我们随便打开一个网址（比如大家经常拿来测试网络的百度）时，打开Network,会看到如下请求头，响应头：究竟这些headers都有什么用呢？咱们挨个探个究竟。 Chap2 head
搭建Websocket简易聊天室本文，我们通过Egret和Node.js实现一个在线聊天室的demo。主要包括：聊天，改用户名，查看其他用户在线状态的功能。大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部的输入框，可以输入自己想说的话，点击发布，信息呈现给所有在聊天的人的页面。用户可以实时修改自己的昵称，用户离线上线都会实时广播…
Web 安全漏洞之 SSRF 什么是 SSRF 大家使用的服务中或多或少是不是都有以下的功能：通过 URL 地址分享内容通过 URL 地址把原地址的网页内容调优使其适合手机屏幕浏览，即所谓的转码功能通过 URL 地址翻译对应文本的内容，即类似 Google 的翻译网页功能通过 …
JavaScript之实现一个简单的Vue vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue Object.defineProperty() 实现之前我们得先看一下 Object.defineProperty 的实现，因为vue主要是通过数据劫持来实现的，通过get、set来完成数据的读取和更新。 var obj = {…
JavaScript之Web Worker Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建，一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。 W…
Git指令大全git config –global user.name “githelper”git config –global user.email githelper@gmail.com
Babel 插件原理的理解与深入现在谈到 babel 肯定大家都不会感觉到陌生，虽然日常开发中很少会直接接触到它，但它已然成为了前端开发中不可或缺的工具，不仅可以让开发者可以立即使用 ES 规范中的最新特性，也大大的提高了前端新技术的普及（…
做面试的不倒翁：浅谈 Vue 中 computed 实现原理编者按：我们会不时邀请工程师谈谈有意思的技术细节，希望知其所以然能让大家在面试有更出色表现。也给面试官提供更多思路。虽然目前的技术栈已由 Vue 转到了 React，但从之前使用 Vue 开发的多个项目实际经历来看还是非常愉悦的，Vue 文档清晰规范，ap
前端程序员如何快速转型全栈工程师（基础版）前端与后端的思维专注点很不相同，前端聚焦在如何把内容以可视化的方式展现给用户，后端聚焦在如何利用IT基础设施实现业务逻辑。所以前端参与后端开发时（全栈工程师必备！）首先需要理解后端会做哪些事，其次才是如何才能做好这些事。所谓“利用IT基础设施实现业务逻辑”，意味着以下几个概念： IT基础…
#前端技术#【2018 前端常见题汇总】详见：一大波前端面试题来袭，涉及算法、HTML、CSS、JS、VUE 等问题与解答。
【原来JavaScript的闭包是这么回事！】正如标题所述，JavaScript 闭包对我来说一直是个谜。我阅读过很多篇相关文章，我在工作中也使用了闭包，有时候我自己使用了闭包却不自知。最近我参加了一个讲座，在那儿终于有人给我解释清楚了。详见
我是这样黑进你 Node.js 生产服务器的 TL,DR：这篇文章讲述了从一个黑客的角度，以渗透前端项目为目标，从生成 payload，混淆，隐藏 payload，发布 npm，社会工程学提 PR，运行脚本，反向连接到攻击主机，最终主机拿到服务器 shell 的故事。正片：前端工程师的口头禅是啥？npm install！这个命令从 np…
nodejs启动流程分析之前用过一段时间的 v8 ，也只是会初始化那个流程，最近想深入了解一下，所以想要通过学习 nodejs 来加深理解。这篇文章主要是讲讲 nodejs 的初始化流程，如有错误，烦请指教~。（本文分析基于 v10.9.0，本文会尽量避免大段源码，但是为了有理有据，还是会放上一些精简过并带有注释的代码上来）。 Hellowor…
Vue.js动画笔记1、Vue.js中的元素动画或页面跳转动画有多种实现方式比如： {代码…} 2、Vue.js官方提供了默认的动画组件 transition ，例子： {代码…} 3、transition过渡的类名 {代码…} 4、使用CSS动画 {代码…} 5、使用…
Redux 中间件实现原理什么是柯里化在了解 redux 中间件之前，有必要先了解一下什么是柯里化，redux 是基于此的，理解它你才能理解中间件是怎么工作的。这里是高级程序设计一书对于柯里化的解释，先看看就好，有个大概印象。它用于创建已经设置好了一个或多
使用Vuex解决Vue中的身份验证传统方式中，许多人使用本地存储，来管理通过客户端验证生成的tokens。一个大问题是如何有更好的方式，来管理验证tokens，从而允许我们来存储更大的用户信息。这就是Vuex的作用。 Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说，它
我从没理解过 JavaScript 闭包原文: I never understood JavaScript closures 作者: Olivier De Meulder 时间: Sep 7, 2017 译注：作者从 JavaScript 的原理出发，详细解读执行过程，通过“背包”的形象比喻，来解释闭包。我从没理解过 JavaScript 闭包直到有人这样跟我解释…… 正如标题所说，JavaScript 闭包对我来说一直是…
vue 面试时需要准备的知识点在任何系统总我们都会涉及到用户需要登录的验证才可以去访问某个页面,这里我的做法是借助vue的router组件,实现我的页面验证功能。在面试中,有可能面试…
前端实现html转pdf方法总结最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优缺，下面简单介绍。
5分钟即可掌握的前端高效利器：JavaScript 策略模式浅谈 JavaScript 中策略模式的使用：什么是设计模式什么是策略模式策略模式在 JavaScript 中的应用（使用策略模式封装百度AI识别调用）策略模式在 Vue 组件封装中的应用（使用策略模式封装Select组件）什么是设计模式设想
如何保障前端项目代码质量质量管理也很重要。
《Chrome 调试技巧》本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行！（by Faremax ）
Vue.js2.0基础学习笔记1、使用脚手架Vue-cli构建vue项目 {代码…} 2、申明式渲染 {代码…} 3、Vue实例 {代码…} 4、Vue的生命周期构子 new Vue()实例化一个vue对象初始化事件和生命周期 beforeCreate构子：组件创建之前，数据data…
vue父子组件间通信方式2 :props: { childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告}
【小结】初识CSS HoudiniHoudini实际是一个W3C工作小组，他们希望能够解决工程师们因为CSS兼容而带来的苦恼，这里也一般是认为是他们制定出来的一系列标准和API。
可视化埋点技术揭秘：流程四步走，包含WebSocket通信以及具体埋点过程关于可视化埋点的介绍，易观在前几期已经给大家介绍过几篇，此篇为结合易观的应用场景，在具体的实现技术细节以及交互流程方面给大家做一下介绍。 ▌可视化埋点的具体流程首先手机APP嵌入开启可视化功能的SDK，通过WebSocket的方式和服务器、前端进行相互通信，SDK会定时收到服务器下发的页面请求；然后会上报页面快…
《Vue 数据响应式原理》Vue.js 的核心包括一套“响应式系统”。 “响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。（by luobotang ）
前端优化：浏览器缓存技术介绍 0 前言在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。一个优秀的缓存策略可以缩
让你的 Webpack 起飞：考拉会员后台 Webpack 优化实战 Webpack 优化实战记录。
前端性能优化—js代码打包现在的 web 应用，内容一般都很丰富，站点需要加载的资源也特别多，尤其要加载很多 js 文件。js 文件从服务端获取，体积大小决定了传输的快慢；浏览器端拿到 js 文件之后，还需要经过解压缩、解析、编译、执行操…
【2018年8月份GitHub上最热门的开源项目】本篇文章为大家盘点了8月份最热门的GitHub 项目，一起来看看你都知道哪些，或者有哪些你已经在使用的了。详见
JavaScript 读写二进制数据类型化数组是 HTML5 中引入的API，它能够让开发者使用 JavaScript 直接操作二进制数据。在类型化数组出现之前，我们是无法直接通过 JavaScript 操作二进制数据，通常都是操作 JavaScript 中的数据类型，由运行时转化成二进制。这就多了一个转化的过程，尽管 JavaScript 对数据类型做了很多优化以提高效率，但相比直接操…
Node.js 中流操作实践Stream 是 Node.js 中的基础概念，类似于 EventEmitter，专注于 IO 管道中事件驱动的数据处理方式；类比于数组或者映射，Stream 也是数据的集合，只不过其代表了不一定正在内存中的数据。。Node.js 的 Stream 分…
Vue项目数据动态过滤实践这个问题是在下在做一个Vue项目中遇到的实际场景，这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -。-)，过程中会涉及到一些Vue源码的概念比如$mount、render watcher等，如果不太了解的…
弹弹弹，弹走鱼尾纹的弹出菜单（vue）上一篇面试的总结，大家看的还行，因为量很大，错误在所难免，希望大家发现错误了可以告诉我一声，我的邮箱是236490794@qq.com，一个小前端的希望。言归正传我们老样子直接先上效果图再开始今天的分享这个项目的github可以看一看组件分析界面组成逻辑分析最终实现 …
WEB实例：开发一个聊天室应用这篇文章介绍如何使用 Vue.js 以及chatkit 快速的开发一个聊天室应用，chatkit 提供了一系列 api 用以更方便的开发聊天功能，源码地址 . 创建Chatkit实例首先需要建立一个 Chatkit 实例，前往chatkit控制台建立，建好之后新建一个房间以及用户，将之后要用到的 instanceLocator , key 记录到本地 …
Git 内幕（一）前言 git 是一种程序员几乎每天都会用到的工具，给我们代码管理带去了极大的方便。以往的 git 介绍，多是介绍git 的高级命令，如git rebse、git cherry-picker、git bisect等，少有看到剖析git 内部原理的。原因也很简单，即使对 git 的原理不甚了解，也并不会影响我们熟练使用 git。但是很多事我们不光要知其然，…
Code Review 在丁香医生前端团队的实践时间过得很快，转眼间 Code Review 机制在丁香医生前端团队已经运作一年多了。今年4月初时，将团队在 Code Review 方面的一些经验在丁香园前端团队进行了分享，各个业务线的前端同学们逐步开始尝试 Code Review 机制，目前也有了一定的收
ES6 元编程资源集合关于 Proxy & Reflect & Symbol，关于 Meta Programming。
Javascript 是如何检查一个存在的、非空的字符串？如题你是怎么想的呢？这个很简单啊，typeof 一下，再判断length。 if(typeof unknownVariable ==='string' && unknownVariable.length){ …
JavaScript中Array方法的正确打开方式在过去的几个月，我发现我的拉取请求中存在四个完全相同的 JavaScript 错误。于是我写了这篇文章，总结了如何在 JavaScript 中正确使用地使用 Array 的方法！用 Array.includes 代替 Array.indexOf “如果你要在数组中查找元素，请使用 Array.indexOf”。我记得在学习 JavaScript 的时候，在教材中读到这样的一句话。…
CSS 变量和 JavaScript 让应用支持动态主题大家好！在这篇文章中我准备讲一讲我在 Web 应用中创建动态主题加载器的方法。我会讲一点关于 React、Create-React-App、Portals、Sass、CSS 变量还有其它有意思的东西。如果你对此感兴趣，请继续阅读！我正在开发的应用是一个音乐应用程序，它是 Spotify 的迷你克隆版。前端代码基于 Create-React-App 。添加了 no…
使用 webpack 进行 web 性能优化（一）：减小前端资源大小介绍原文地址： introduction 原文作者： Addy Osmani 译文地址：介绍译者：闫萌校对者：周文康、杨建现代 web 应用经常使用打包工具来创建生产环境的“打包”文件（脚本、样式等等），这些文件经过优化和压缩之后能够极快
深入了解Vue.js组件笔记由于浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop名需要使用其等价的 kebab-case (短横线分隔命名) 命名。prop可以是任何类型的数据、变量或对象，…
TypeScript AST 查看器这个网站左侧输入 TypeScript 代码段，右侧实时预览抽象语法树。
利用剪切板JS API优化输入框的粘贴体验这篇文章发布于 2018年09月9日，星期日，16:17，归类于JS实例。阅读 63 次, 今日 61 次 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8003 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、目前现在的体验问题输入框输入内容我们有时候为了方便…