20180818 前端开发日报-前端开发博客

JS面试理论题；前端每日实战：107# 视频演示如何用纯 CSS 创作一只单眼怪兽；前端异常监控之 Sentry的部署和使用；当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来；前端 VSCode 插件推荐；彻底搞懂 JavaScript 中的 this 指向问题；ES6深入浅出 Generator；职位推荐：阿里影业-淘宝票务招聘高级前端开发工程师

JS面试理论题变量类型和计算值类型&&引用类型 1.值类型 {代码…} 2.引用类型（对象数组函数）无限制扩展属性 {代码…} typeof运算符 {代码…} 强制类型转换逻辑运算符 {代码…} JS中的内置函数 ObjectArrayB…
前端每日实战：107# 视频演示如何用纯 CSS 创作一只单眼怪兽效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
前端异常监控之 Sentry的部署和使用由于最近在整理前端异常监控相关内容，所以自己在虚拟机搭建部署了一下Sentry，把搭建过程及一些自己踩得坑整理如下一、Sentry部署 Sentry搭建有两种方式：通过Python安装教程地址通过Docker容器安装教程地址我本地是用Dock
当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来写在前面当大多数人Vue理解的炉火纯青的时候，是不是应该思考一下怎么让vue页面骚气起来，下面就我个人在接触Vue实际工作中门户网站在前端页面交互应用和小技巧，炒几道“小菜”给大家分享一下，我把它封装成一个项目vue-portal-webUI（github源码
前端 VSCode 插件推荐前言工欲善其事，必先利其器 vscode 是开源的跨平台编辑器，前端开发利器，配合丰富的插件，更是如虎添翼，效率飞升。这里推荐一些目前在用的 vscode 插件，适合前端开发者。 Auto Close Tag 输入 HTML/XML 的开始标签，自动完成对应的闭合标签 Auto Rename Tag 修改 HTML/X…
彻底搞懂 JavaScript 中的 this 指向问题 JavaScript中的this是让很多开发者头疼的地方，而this关键字又是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。想要理解this，你可以先记住以下两点： 1：this永远指向一个对象； 2：this的指向完全取决于函数调用的位置；针对以上的第一点特别好理解，…
ES6深入浅出 GeneratorES6深入浅出之Generator生成器。本人对生成器的印象是语法难以理解，又没有什么实际的应用场景。为啥要学习一下呢？可能未来某些高级的业务会用到，还有万一面试官问的话，我得能侃几句，显得我牛。
职位推荐：阿里影业-淘宝票务招聘高级前端开发工程师工作地点：杭州学历要求：不限经验要求：3-5年月薪范围：30-50k 岗位描述负责产品的 HTML5 页面架构设计和开发工作；根据产品需求，分析并给出最优的页面前端结构解决方案；应用新技术，设计开发…
从 0 开始构建 webpack 项目【Webpack Book 翻译】在开始之前，请确保你使用的是 Node 的最新版本。至少是最新的 LTS（长期支持）版本，本书的配置基于 LTS 版本所写，你的终端需要有 node 和 npm 命令，Yarn 也是一个不错的选择，也适用于本教程。
使用Node.JS批量查找替换目录下文本文件中图片地址内容最近想起来 adsense 的广告费好久没领了，就登陆了查看了一下。发现最近几个月 ourjs 的流量下降地很厉害。然后登陆 google analytics 仔细查看，发现流量量几乎降低了一半。然后分析里面的一些文章，发现很多图片不能显示了。仔细研究下发现，以前用的 github page 图床被墙了，所有引用 github.io 的图片都打…
在 React 中使用 Redux 很多 Redux 入门教程一上来就提各种概念，举例子也会用官方文档中的 todo 案例，概念和页面涉及的过多不太利于新手学习它。本文会通过三种方式实现一个简单到不能呼吸的计数器小例子，先用 React 实现，再慢慢引入 Redux 的内容，来了解什么是 Re
qrcode和Websocket实现在线支付收营员选择收款方式（现金/支付宝/微信），如果是支付宝/微信，服务端会传给前端一个交易码，前端用 qrcode 生成二维码给客户扫并且支付， websocket 建立持久的连接直到收到服务端返回的true，前端提示交易成功。 HTML5 WebSocket 1.简介我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什…
vue2实现搜索结果中的搜索关键字高亮 // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') {
JavaScript性能优化之函数去抖（debounce）和函数节流（throttle）以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿或者服务器压力大甚至浏览器崩溃。 window对象的resize、scroll事件拖拽时的mousemove事件射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup、onchange事件函数去抖（debounce）和函数节流…
快速入门 TypeScript React Starter 工程 WLM-TypeScript-React-Starter WLM-TypeScript-React-Starter 是一个 TypeScript Starter 项目，集成了 [ React + React-Router +
判断Node.JS TCP Socket当前连接状态 Node.JS 官方文档中并没有获取当前 socket 连接状态的说明。不过打印 socket 可以看出，可以通过 socket._handle 属性来判断，当socket end或 destroy后，此属性被设为null。 Socket { connecting: false, _hadError: false, _handle: TCP { bytesRead: 0, _externalStream: {}, fd: -1, …
复杂 React 应用中的TypeScript 3.0实践有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。首页发现话题登录加入
从 RegExp 构造器看 JS 字符串转义设计多年前我第一次入职腾讯的时候，DC 从杭州给我寄来了一本他刚翻译出炉的《高性能 JavaScript 》。那段时间为了帮忙校对，我仔细阅读了书中的每一个段落，结果积累了不少 JavaScript 基础知识。现在还依稀记得书中提到的几个知识点： IE7 浏览器在大字符串处理时的极致性能优化；位运算符用于 config 配置的各种 trick；…
jsonpGet，跨域如此简单我们经常在项目中遇到跨域问题，比如有时候在做个人项目的时候，我们需要请求第三方的一些数据，比如请求豆瓣公开api的数据，或则qq音乐开放api 的数据等等。但是毫无疑问，在我们的web应用中直接请求这些api将出现跨域问题。所以笔者心血来潮写了个插件—— js
《Webpack 之 treeShaking》webpack 2.0 开始引入 tree shaking 技术，tree shaking 是 DCE 的一种方式，它可以在打包时忽略没有用到的代码。（by easonyq）