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

平庸前端码农之蜕变：AST；ES6 完全使用手册；给萌新的Flexbox简易入门教程；用 webpack 写个现代的 JavaScript 包；NPM生态报告，React和Vue的差距居然这么大？；两分钟让你知道，前端开发是用Vue.js还是Angular；前端开发常用的函数；根据浏览器的工作原理整理前端知识体系

平庸前端码农之蜕变：AST 前言首先，先说明下该文章是译文，原文出自《AST for JavaScript developers》。很少花时间特地翻译一篇文章，咬文嚼字是件很累的事情，实在是这篇写的太棒了，所以忍不住想和大家一起分享。 OK，我们直接进入正题。为什么要谈AST（抽象语法树）? 如果你查看目前任何主流的项目中的devDepende…
ES6 完全使用手册前言这里的 “ES6” 泛指 ES5 之后的新语法这里的 “完全” 是指本文会不断更新这里的 “使用” 是指本文会展示很多 ES6 的使用场景这里的 “手册” 是指你可以参照本文将项目更多的重构为 ES6 语法此外还要注意这里…
《给萌新的Flexbox简易入门教程》近几年，CSS领域出现了一些复杂的专用布局工具如Flexbox（弹性盒子布局模块，Flexible Box Layout Module），用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。（by 葡萄城官网）
用 webpack 写个现代的 JavaScript 包 webpack 作为目前主流的构建工具，其较快的版本迭代和复杂的配置方式，使得每次开发前不得不规划相当部分时间来调试。这里将记录整个环境的搭建过程，为新手提供基础思路。就像我在开发vue-sitemap时一样，构建工具往往需要达到下面几个需求：构建生成 CommonJS/UMD/ES Modules 三种模式的代码提供给…
NPM生态报告，React和Vue的差距居然这么大？作者爬取了www.npmjs.com 上所有公开仓库的数据。从这些数据中分析了过去一年下载量最大的npm包排名；常见前端框架热、构建工具下载热度对比；以及各种常见框架的生态现状。这些数据帮助我们了解Npm现有生态，也帮助我们进行前端技术选型。 NPM这个东西大家每天都在使用。我们每天都在考虑使用哪个包，不使用哪个…
两分钟让你知道，前端开发是用Vue.js还是Angular 引言 Vue.js 是开源的JavaScript框架，能够帮助开发者构建出美观的Web界面。当和其它网络工具配合使用时，Vue.js的优秀功能会得到大大加强。如今，已有许多开发人员开始使用Vue.js来取代Angular和React.js。那么对于Angular和Vue.js，开发者该如何选择呢?下面千锋武汉HTML5培训小编会对这两种框架进行介绍和深度对比。…
前端开发常用的函数在项目实例中，难免要做一些容错处理或者是对实例的类型判断，那么就可以把这部分的判断整理成公共的js文件，供全局使用。
根据浏览器的工作原理整理前端知识体系做前端的同学都知道，前端技术目前需要学习的知识太多了，各种框架，技术层出不穷，但只要我们自己有自己的一套知识体系，打好基础，再学习新东西就会很容易。在这里，我根据浏览器的工作原理整理了一套自己的知…
ES6的Symbol竟然那么强大，面试中的加分点啊symbol是es6出的一种类型，他也是属于原始类型的范畴(string, number, boolean, null, undefined, symbol)
这是今年前端最常见的面试题，你都会了吗？作者｜Harshal Patil译者｜无明在面试或招聘前端开发人员时，期望、现实和需求之间总是存在着巨大差距。面试其实是一个交流想法的地方，挑战人们的思考方式，并客观地分析给定的问题。可以通过面试了解人们如何做出决策，了解一个人对技术和解决问题的热情程度，也是在了解未来可能一起共事的同事。以…
Vue一次性简洁明了引入所有公共组件-在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余这里是通过req…
HTML5 图片上传解决方案前端做图片上传时，经常会遇到图片压缩、图片预览等需求。而这个过程中，会遇到一个个的坑。下面就来看一看 HTML5 实现图片上传的整个过程。基本结构图片上传是使用 input 标签来选择图片的： <input type="file" accept="image/*"> 这里可能遇到一个坑：可…
Web前端之“神秘”的跨域方式什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 …
JavaScript 遍历、枚举与迭代的骚操作（上篇）相信大部分搬砖工作者都写过类似的代码： var arr = ; for (var i = 0, len = arr.length; i < len; i++) { console.log(arr ); } // element1 // element2 // element3 复制代码这是一段标准的for循环代码，通过变量i去追踪数组arr的索引…
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等。
做一个好前端必须要知道的事——浏览器的线程与进程浏览器是指chrome，没心情关心其他的进程和线程直接上总结，想深入理解的可以查阅文末的链接进程是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体线程是程序执行中一个单一的顺序控制流程…
Vue中用props给data赋初始值遇到的问题前段时间做一个运营活动的项目，上线后产品反馈页面埋点不对，在排查过程中发现，问题竟然是由于Vue中的data初始值导致，而data的初始值来自于props。为方便描述，现将问题抽象如下：
前端JS 异常处理实践前端JS 异常处理实践前端异常处理,常见的场景是在“异步请求”的操作过程当中,所谓“异常”—就是“不正常”,程序的运行不符合我们的预期。程序“…
前端算法题 | 这道题效率最高的算法，你可能不知道？寻找最长的不含有重复字符的子串可能看标题不会明白这个题到底什么意思，来看看下面的例子： abcabcbb ➡ abc ➡ 3 bbbb ➡ b ➡ 1 pwwkew ➡ wke ➡ 3 看了栗子是不是明白了呢？其实需求很简单，实现的方法也很多，…
三行代码实现 JS 柯里化最近有看到一些柯里化的文章，怎么说呢，感觉很奇怪。一篇是阿里云的译文，文章末尾给出了这样一个 "curry"： function curry(fn, …args) { return (…_arg) => { return fn(…args, …_arg); } } 复制代码作者前面明明例举了柯里化和部分应用的区别，结果最后说我们实现下柯里…
做一个好前端必须要知道的事——JS语言Java、scala 则是先编译成字节码，然后解释执行字节码（可以理解为编译型语言也可以理解为解释型语言）。准确的理解，java 是编译型语言，源代码整个编译成字节码，java 字节码，是解释型语言。
javascript防抖和节流函数防抖（debounce）：是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次，比如说用手指一直按住一个弹簧，它将不会弹起直到你松手为止。函数节流（thr…
详解react、redux、react-redux之间的关系本文介绍了react、redux、react-redux之间的关系，分享给大家，也给自己留个笔记，具体如下：
VUE CONF大会之后的感想(非技术) 应该不止一次参加这样全国规模的前端会议了，从六年前踏入前端到今天依然在带一个前端小组在夜以继日的写业务代码。在会议中会因为切实的大佬对技术的独到观点而兴奋而替他们高兴、会因不同团队对前端轮子创造的充实和自豪感、会因他们对技术前驱的倡导而膜拜。是的，我整个会议议程听下来是这三种感觉的混杂。也有对…
webpack4 一点通webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块…
Vue触发式全局组件构建在开发中总会遇到一些全局组件,如果通过import导入,components挂载就显得冗余,而一些UI框架(诸如 elementUi、iview等)通过调用触发的形式就显得很便捷,本文就是简单的构建一个类似组件
Vue.js的复用组件开发流程本节我们主要要完成这样一个列表功能，每一行的列表是一个组件，列表内可能出现按钮组件或者箭头组件，点击按钮组件可以自定义事件，同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表。
webpack产物解析当我们在开发一个前端工程的时候，我们不可避免的会使用到webpack作为打包工具，而有时候为了定位问题，不得不去看打包完成之后的js文件，这个时候就需要我们对webpack的构建产物有一定的了解才行了。最简单的构建我们先来看一个最简单的工程结构。 index.js文件： let test = require(‘./src/t…
[Vue2.0]手撸手淘H5购物车组件最近一直在写React，Vue有段时间没写了，所以趁这个时间设计个Vue的小项目练练手。年轻时在电商的公司实习过，所以还是打算写一个电商相关的小项目，也算是一个总结。因此这次就拿手淘H5购物车开刀。项目GitHub 数据都是来自手淘的真实数据，也是观测了一段时间才定义好数据结构。整个项目下来还是有不少收获…
理解JavaScript闭包——新手指南
只用 CSS 就能做到的像素画/像素动画这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。
JavaScript阴沟里翻船之运算符优先级写了两年的JavaScript的我，原以为是不会在语法上阴沟里翻船的，可是事实上被打脸，最近在产品开发中组里的一个帅小伙找我讨论一个问题，为了方便大家阅读，我将这个问题的模型抽象出来: var provider = { test: { $get: function(){ return function anonymous(config){ }; …
vuex 渐进式教程（一） vuex 渐进式教程，从入门级带你慢慢深入使用vuex。 Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex官网： vuex.vuejs.org/zh/guide/ 安装安装vue-cli: 1.cnpm in…
Vue中的methods、watch、computed看到这个标题就知道这篇文章接下来要讲的内容，我们在使用vue的时候methods、watch、computed这三个特性一定经常使用，因为它们是非常的有用，但是没有彻底的理解它们的区别和各自的使用场景，也很难用好它们，希…