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

vue中async-await的使用误区；深度讲解：web前端性能优化；2019怎么样打造自己的“前端品牌”；8张图帮你一步步看清 async/await 和 promise 的执行顺序；前端请求的那些事儿；JavaScript开发的40+个经典技巧；你想知道关于package-lock.json的一切，但是太害怕了问了？；前端工程工作流规范

vue中async-await的使用误区曾经见过为了让钩子函数的异步代码可以同步执行，而对钩子函数使用async/await，就好像下面的代码： // exp-01 export default { async created() { const timeKey = ‘cost’; console.time(timeKey); console.log(‘start created’); this.list = await this.getList(); console.log(this.list…
深度讲解：web前端性能优化课程目标理解减少http请求数量和减少请求资源大小两个优化要点掌握压缩与合并的原理掌握通过在线网站和 fis3 两种实现压缩与合并的方法 ####浏览器的一个请求从发送到返回都经历了什么动态的加载静态的资源 1、dns是否可以通过缓存减少dns查询时间 2、网络请求的过程…
2019怎么样打造自己的“前端品牌”这个年底相信对于很多程序猿来说都不算太好过，是的，资本的寒冬已经到来。无论是传言某厂停止社招还是某商城末尾淘汰，亦或者某知名论坛因为“现金流”问题大裁员。这个年底，已经听到了很多知名公司裁员的消息了。
8张图帮你一步步看清 async/await 和 promise 的执行顺序11张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章？测试一下自己有没有必要看需要具备的前置基础知识主要内容对于async await的理解画图一步步看清宏任务、微任务的执行过程为什…
前端请求的那些事儿
JavaScript开发的40+个经典技巧 JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框，也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码…
你想知道关于package-lock.json的一切，但是太害怕了问了？如果你已经将节点包管理(npm)更新到版本5.x.x，看起来一切似乎都很顺利。等等，这是什么?用 npm 初始化项目的会自动创建了一个新文件 package-lock.json。如果打开它，它看起来有点像 package.json 的依赖项，但…
前端工程工作流规范在日常开发过程中，前端工程工作流程规范主要包括代码检查规范以及代码提交规范。而代码检查主要两个部分：语法检查及类型检查；代码提交规范主要是Git Commit Log规范。本文主要分享日常工作中，实现自动化工作流规范的几种工具： 1、JavaScript语法检查 – ESLint 2、JavaScript类型检查 – Flow 3、自动化代码…
前端 SPA（单页面应用）性能优化，交互体验加成 SPA简介：单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作…
前端er，你真的会用 async 吗？现在已经到 8102 年的尾声了，前端各方面的技术发展也层出不穷，VueConf TO 2018 大会也发布了 Vue 3.0的计划。而在我们（我）的日常中也经常用 Vue 来编写一些项目。那么，就少不了 ES6 的登场了。那么话说回来，你真的会用 ES6 的 async 异步函数吗？ 1、async 介绍先上 MDN 介绍： developer.mozilla.org/zh-C…
从Webpack源码探究打包流程，萌新也能看懂～上一篇讲述了如何理解tapable这个钩子机制，因为这个是webpack程序的灵魂。虽然钩子机制很灵活，而然却变成了我们读懂webpack道路上的阻碍。每当webpack运行起来的时候，我的心态都是佛系心态，祈祷中间不要出问题，不然找问题都要找半天，还不如不打包。尤其是loader和plugin的运行机制，这两个是在什么时候触发的，作…
快速利用 vue 或者 react 开发 chrome 插件原文链接： github.com/lzwaiwai/bl… 最近写了一个可以利用 vue 或者 react 快速开发 chrome 插件的 boilerplate，只需要使用我之前写的 bigroom-cli 工具，就可快速简单地进行启动、打包、编译等，同时也支持保存代码后，插件自动更新，页面自动刷新。 boilerplate 生成：首先我们安装 bigroom…
通用、封装、简化 webpack 配置现在，基本上前端的项目打包都会用上 webpack，因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候，总是免不了要配置 webpack，很是麻烦。
彻底理解JavaScript函数的调用方式和传参方式——结合经典面试题了解函数的调用过程有助于深入学习与分析JavaScript代码。在JavaScript中，函数是一等公民，函数在JavaScript中是一个数据类型，而非像C#或其他描述性语言那样仅仅作为一个模块来使用。函数有四种调用模式，分别是：函数调用形式、方法调用形式、构造器形式以及apply和call调用形式。这里所有模式中，最主要的区别在…
Web 后端开发者也需要了解的跨域问题 Web 后端开发者很少会去充分了解跨域问题，原因是他们很少和 JavaScript 打交道。但是作为一个 Web 开发者，知道跨域请求和如何解决跨域问题可以和前端开发者在沟通上变得更为顺畅。这篇文章会介绍和跨域请求相关的一些概念，以及如何在后端（Python）解决浏览器的跨域请求问题。一、什么是跨域请求…
用 vue + d3 画一棵树 github pages vue 和 d3 的角色画图可分为两步：元素坐标计算数据绑定坐标计算只需要一些 api，本文使用 d3。数据绑定既可以借助 d3，也可以使用 vue。d3 通过操作 dom 实现，有点像 jQuery，d3 针对数据和 dom 的状态提出了三个概念：Update、Enter、Exit，感兴趣的可以看官网。本…
浏览器事件循环机制与Vue nextTick的实现先上一段简单的代码 console.log(‘aa’); setTimeout(() => { console.log(‘bb’)}, 0); Promise.resolve().then(() => console.log(‘cc’)); 复制代码执行结果总是如下： aa cc bb 复制代码为什么呢？为什么同样是异步，Promise.then 就是比 setTimeout 先执行呢。这就涉及到浏览器事件循环机制…
【20181202 前端开发周报】平庸前端码农之蜕变：AST；ES6 完全使用手册；给萌新的Flexbox简易入门教程；用 webpack 写个现代的 JavaScript 包；NPM生态报告，React和Vue的差距居然这么大？；两分…详情→
5个Vuex插件，让你下一个VueJS项目开发速度提升3倍使用Vuex管理Vue.js应用程序的状态有很多充分的理由。首先，使用Vuex插件添加超酷功能非常容易。Vuex社区的开发人员已经创建了大量免费插件供您使用，其中包含您可以想象的许多功能，以及一些您可能无法想象的功能。下面展示使用Vuex插件轻松解决下一个项目的五个功能。会话保持同步标签语言本地化 …
【斩获 BAT 等 7 家 Offer！GitHub 4 万 Star 项目作者的面试经历】开发者 CyC2018 在 GitHub 上有一个高达 40 k+ star 的项目 CS-Notes，该项目记录了关于计算机科学方方面面的学习笔记，同时，作者在项目中分享了他 2018 年的校招面试经验，该面经目前在原始发布网站上已经获得  全文
KPC：金山云出品的支持多框架的前端高质量组件库 README.md 特性支持多框架 Intact / Vue / React 完全可自定义的主题系统 360°全方位定位系统声明式表单验证完善的文档和单元测试文档 …
了解JavaScript中的Memoization以提高性能,再看React的应用英文: Understanding Memoization in JavaScript to Improve Performance 中文: 了解JavaScript中的Memoization以提高性能–react的应用(欢迎star) 我们渴望提高应用程序的性能， Memoization 是 JavaScript 中的一种技术，通过缓存结果并在下一个操作中重新使用缓存来加速查找费时的操作。 …
Html5 Canvas动画基础（碰撞检测）在Canvas中进行碰撞检测，大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能，好奇的你有思考过它们的内部运行机制吗？下面将针对基本的碰撞检测技术进行讲解： 1、基于矩形的碰撞检测所谓碰撞检测就是判断物体间是否发生重叠，这里我们假设讨论的碰撞体都是矩形物体。下面示…
关于JavaScript函数式编程的思考前几天看到掘金上有两篇关于JavaScript函数式编程的争论，有人建议不用for循环，有的人又说太过函数式不好。我自己也是一个喜欢函数式编程的人，所以写了这篇文章想和大家分享一些我个人喜欢的建议，最后也有一些我自己的思考。第一次在掘金发文章，各位同行手下留情，有错误欢迎指出。 1、给函数清晰的命名，写好…
骚年，Koa和Webpack了解一下？前言日常开发中，我们用的都是使用Webpack这类构建工具进行模块化开发。或者使用基于create-react-app和vue-cli等脚手架进行开发。如果这个时候我们需要Node作为后端，React或者Vue作为前端，Webpack作为构建工具，那岂不是我们需要手动启动两个服务？所以这里选用Koa和Webpack作为例子，启动koa服务…
前端技术周刊 2018-12-03：DOMChrome 71 开始将试用 SXG 功能，它是由 IETF 提出，Web Package 协议规范下的 Signed HTTP Exchanges 功能的缩写。该技术使得一个第三方服务器可以直接向用户提供可靠资源，且不用与原站共享 HTTPS 证书密钥。
为什么我会选择 React + Next.js，而不是 Vue 或 Angular？作者｜TimZaložnik译者｜谢丽本文的目的不是要对 React、Vue 和 Angular 三者进行比较，已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比，我更喜欢使用 React 构建用户界面。在我解释了为什么之后，也许你也会切换到 React，如果你现在还没有用它的话。 …
如何优雅处理前端异常？前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。一、为什么要处理异常？异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。 1.增强用户体验； 2.远程定位问题； 3.未雨…
彻底弄懂JS原型与继承本文由浅到深，循序渐进的将原型与继承的抽象概念形象化，且每个知识点都搭配相应的例子，尽可能的将其通俗化，而且本文最大的优点就是：长（为了更详细嘛）。一、原型首先，我们先说说原型，但说到原型就得从函数说起，因为原型对象就是指函数所拥有的 prototype 属性(所以下文有时说原型，有时说 prototype ，…
【微软终于在浏览器上认输了？】全文=> 　　微软终于在浏览器上认输了？在用 Edge 取代多年的 IE 之后，如今 Edge 也低下了头颅，承认了 Chrome 的胜利。　　Microsoft Edge 浏览器在 2015 年 1 月 21 日公布，并在3 月 30 日发布了第一个预览版，并在之后成为 Windows 10 的默认浏览器，采用 EdgeHTML 渲染引擎并在体验上相比 IE 有着多项改进。但现在&n…
http中web前后端的跨域本文详见 github: [链接] server文件夹 server.js 提供主server api服务 node server/server.js 开启服务 staticServer.js 提供一个静态html容器 node server/staticServer.js 开启服务 www文件夹 cross-domain.h…
小白带你学习Vuex 在做一些Vue项目时，如果遇到嵌套多层的组件间的数据同步和通信将会非常麻烦，另外如果一些数据交互是分散在各个组件的，很可能会重复获取数据，或者接口数据的返回有更改时，不能及时的定位，所以如果能在全局对数据进行统一的状态管理将会非常方便。 Vuex是Vue官方推荐的状态管理利器。基础知识 Vuex…
前端进阶（第一期）-调用堆栈笔记 var a = 20; var b = ‘abc’; var c = true; var d = { m: 20 } 复制代码值类型数据和引用数据类型的复制值类型数据是值的复制，开辟新的存储空间来存储值，复制前后的数据之间无联系。引用类型数据仅仅是地址的复制，开辟新的存储空间来存储地址指针，复制前后的地址指针指向堆中同一个值。 …