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

平庸前端码农之蜕变：AST；ES6 完全使用手册；给萌新的Flexbox简易入门教程；从谷歌的JavaScript编写风格中，13 点值得我们注意的；用 webpack 写个现代的 JavaScript 包；根据浏览器的工作原理整理前端知识体系；ES6的Symbol竟然那么强大，面试中的加分点啊；这是今年前端最常见的面试题，你都会了吗？

平庸前端码农之蜕变：AST 前言首先，先说明下该文章是译文，原文出自《AST for JavaScript developers》。很少花时间特地翻译一篇文章，咬文嚼字是件很累的事情，实在是这篇写的太棒了，所以忍不住想和大家一起分享。 OK，我们直接进入正题。为什么要谈AST（抽象语法树）? 如果你查看目前任何主流的项目中的devDepende…
ES6 完全使用手册前言这里的 “ES6” 泛指 ES5 之后的新语法这里的 “完全” 是指本文会不断更新这里的 “使用” 是指本文会展示很多 ES6 的使用场景这里的 “手册” 是指你可以参照本文将项目更多的重构为 ES6 语法此外还要注意这里…
《给萌新的Flexbox简易入门教程》近几年，CSS领域出现了一些复杂的专用布局工具如Flexbox（弹性盒子布局模块，Flexible Box Layout Module），用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。（by 葡萄城官网）
从谷歌的JavaScript编写风格中，13 点值得我们注意的对于那些还不熟悉JavaScript的编写风格的人，谷歌提供了编写JavaScript的编写风格指南，谷歌风格指南其中列出了编写干净、可理解代码的最佳风格实践。
用 webpack 写个现代的 JavaScript 包 webpack 作为目前主流的构建工具，其较快的版本迭代和复杂的配置方式，使得每次开发前不得不规划相当部分时间来调试。这里将记录整个环境的搭建过程，为新手提供基础思路。就像我在开发vue-sitemap时一样，构建工具往往需要达到下面几个需求：构建生成 CommonJS/UMD/ES Modules 三种模式的代码提供给…
根据浏览器的工作原理整理前端知识体系做前端的同学都知道，前端技术目前需要学习的知识太多了，各种框架，技术层出不穷，但只要我们自己有自己的一套知识体系，打好基础，再学习新东西就会很容易。在这里，我根据浏览器的工作原理整理了一套自己的知…
ES6的Symbol竟然那么强大，面试中的加分点啊symbol是es6出的一种类型，他也是属于原始类型的范畴(string, number, boolean, null, undefined, symbol)
这是今年前端最常见的面试题，你都会了吗？作者｜Harshal Patil译者｜无明在面试或招聘前端开发人员时，期望、现实和需求之间总是存在着巨大差距。面试其实是一个交流想法的地方，挑战人们的思考方式，并客观地分析给定的问题。可以通过面试了解人们如何做出决策，了解一个人对技术和解决问题的热情程度，也是在了解未来可能一起共事的同事。以…
HTML5 图片上传解决方案前端做图片上传时，经常会遇到图片压缩、图片预览等需求。而这个过程中，会遇到一个个的坑。下面就来看一看 HTML5 实现图片上传的整个过程。基本结构图片上传是使用 input 标签来选择图片的： <input type="file" accept="image/*"> 这里可能遇到一个坑：可…
Vue一次性简洁明了引入所有公共组件-在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余这里是通过req…
JavaScript 遍历、枚举与迭代的骚操作（上篇）相信大部分搬砖工作者都写过类似的代码： var arr = ; for (var i = 0, len = arr.length; i < len; i++) { console.log(arr ); } // element1 // element2 // element3 复制代码这是一段标准的for循环代码，通过变量i去追踪数组arr的索引…
Web前端之“神秘”的跨域方式什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 …
面试官问：能否模拟实现JS的call和apply方法其中模拟bind方法时是使用的call和apply修改this指向。但面试官可能问：能否不用call和apply来实现呢。意思也就是需要模拟实现call和apply的了。
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等。
做一个好前端必须要知道的事——浏览器的线程与进程浏览器是指chrome，没心情关心其他的进程和线程直接上总结，想深入理解的可以查阅文末的链接进程是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体线程是程序执行中一个单一的顺序控制流程…
Vue中用props给data赋初始值遇到的问题前段时间做一个运营活动的项目，上线后产品反馈页面埋点不对，在排查过程中发现，问题竟然是由于Vue中的data初始值导致，而data的初始值来自于props。为方便描述，现将问题抽象如下：
javascript防抖和节流函数防抖（debounce）：是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次，比如说用手指一直按住一个弹簧，它将不会弹起直到你松手为止。函数节流（thr…
前端算法题 | 这道题效率最高的算法，你可能不知道？寻找最长的不含有重复字符的子串可能看标题不会明白这个题到底什么意思，来看看下面的例子： abcabcbb ➡ abc ➡ 3 bbbb ➡ b ➡ 1 pwwkew ➡ wke ➡ 3 看了栗子是不是明白了呢？其实需求很简单，实现的方法也很多，…
做一个好前端必须要知道的事——JS语言Java、scala 则是先编译成字节码，然后解释执行字节码（可以理解为编译型语言也可以理解为解释型语言）。准确的理解，java 是编译型语言，源代码整个编译成字节码，java 字节码，是解释型语言。
webpack4 一点通webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块…
webpack性能优化(下) 在webpack性能优化(上) 中，我们从代码分离，Loader， webpack解析(resolve)， webpack 外部扩展(Externals) ，Dlls 优化构建速度，等方面分析了优化手段，这篇文章让我们接着来撸。图片等静态文件 dev prod 通常来说，我们会通过使用file-loader,url-loader等loader来处理项目中的静态文件，如图片字体等文件 …
Vue触发式全局组件构建在开发中总会遇到一些全局组件,如果通过import导入,components挂载就显得冗余,而一些UI框架(诸如 elementUi、iview等)通过调用触发的形式就显得很便捷,本文就是简单的构建一个类似组件
【ES6的这些操作技巧，你会吗？】全文=> 　　ES6出来已经有好几年了，同时很多新特性可以被巧妙地运用在项目中。本文就讲述ES6的这些操作技巧，你会吗？　　1. 强制要求参数　　ES6提供了默认参数值机制，允许你为参数设置默认值，防止在函数被调用时没有传入这些参数。在下面的例子中，我们写了一个required()函数作为参数a和b的默认值。这意…
基于Vue组件化的日期联动选择器我们的社区前端工程用的是element组件库，后台管理系统用的是iview，组件库都很棒，但是日期、时间选择器没有那种“ 年份 – 月份 -天数 ” 联动选择的组件。虽然两个组件库给出的相关组件也很棒，但是有时候确实不是太好用，不太明白为什么很多组件库都抛弃了日期联动选择。因此考虑自己动手做一个。将时间戳转换成日期…
Vue.js的复用组件开发流程本节我们主要要完成这样一个列表功能，每一行的列表是一个组件，列表内可能出现按钮组件或者箭头组件，点击按钮组件可以自定义事件，同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表。
理解JavaScript闭包——新手指南
webpack产物解析当我们在开发一个前端工程的时候，我们不可避免的会使用到webpack作为打包工具，而有时候为了定位问题，不得不去看打包完成之后的js文件，这个时候就需要我们对webpack的构建产物有一定的了解才行了。最简单的构建我们先来看一个最简单的工程结构。 index.js文件： let test = require(‘./src/t…
[Vue2.0]手撸手淘H5购物车组件最近一直在写React，Vue有段时间没写了，所以趁这个时间设计个Vue的小项目练练手。年轻时在电商的公司实习过，所以还是打算写一个电商相关的小项目，也算是一个总结。因此这次就拿手淘H5购物车开刀。项目GitHub 数据都是来自手淘的真实数据，也是观测了一段时间才定义好数据结构。整个项目下来还是有不少收获…
Proxy实现vue MVVM实践 vueconf(2018hangzhou)大会刚刚过去，vue作者尤大大向我们展示了vue3.0的进展，并介绍vue3.0的一些改动，其中最令我期待的就是重写数据监听机制。回顾vue2.x的双向数据绑定谈起vue的双向数据绑定，我们首先能想到的就是ES5中 Object.defineProperty ，利用重写属性的 get 、 set ，我们可以完成数据劫持监听，使…
只用 CSS 就能做到的像素画/像素动画这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。
像呼吸一样自然：React Hooks + RxJS RxJS 搭配 React Hooks，这手段如何？
【JS执行上下文和堆栈】本文分享了JavaScript基础的两个方面：执行上下文和调用堆栈。每当JavaScript代码运行时，它都在执行上下文中运行；调用栈则可以在脚本调用多个函数时，跟踪每个函数在完成执行时应该返回的控制点。
原有 Vue 项目接入 TypeScript 作者 | 陈龙为什么要接入typescript javascript由于自身的弱类型，使用起来非常灵活。这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓，主要是对外接口和公共方法，对接起来非常头疼。主要表现在几方面：参数类型没有校验，怎么传都有…
JavaScript 完整手册 JavaScript 是世界上最流行的编程语言之一，现在也广泛用于浏览器之外的场景中。近几年，Node.js 的崛起解锁了长期以来被 Java, Ruby, Python, PHP 等传统服务端语言统治的后端开发领域。这本 JavaScript 完整手册遵循二八定律（the 80/20 rule）：在 20% 的时间里了解 80% 的 JavaScript 知识。快来了解所有你需…
Howler.js：用于现代 Web 的音频库 Howler.js 提供了一个现代音频库，支持 Web Audio API 和 HTML5 Audio 的回退机制。该项目致力于简化与使用 JavaScript 开发跨平台音频相关的开发工作。 Howler.js 为通过 JavaScript 使用音频提供了一致的 API，可以控制常见的音频模式，包括播放、暂停、搜索速率、淡入淡出和循环播放。在可能的情况…