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

前端到底是求职者的乐土还是日渐成为烫手的山芋？；Nginx实现反向代理 Node.js；扔掉Nginx，扔掉SwitchHosts，做纯粹的前端开发；五个最新的 CSS 特性以及如何使用它们；JS数组循环的性能和效率分析（for、while、forEach、map、for of）；Uber 开源 Fusion.js：一个基于插件架构的通用 Web 框架；Promise 的误区；实战Vue简易项目（5）模拟数据

前端到底是求职者的乐土还是日渐成为烫手的山芋？web前端技术是近年来一个新兴职业，是伴随着web兴起而细分进去的行业。web前端技术是由网页制作演变而来的，有鲜明的时代特性，Web前端在国内乃至国际上真正开始受到重视的时间不超过10年。
Nginx实现反向代理 Node.js 公司有项目前端是用node.js进行服务器渲染，然后再返回给浏览器，进而解决单页面的SEO问题。项目部署的时候，使用Nginx反向代理Node.js。具体的步骤如下：（Nginx、Node.js的安装和基本配置直接跳过）首先我们要在nginx.cnf文件中的http节点打开下面的配置： http { log_format main ‘$remote_addr – $re…
扔掉Nginx，扔掉SwitchHosts，做纯粹的前端开发什么是纯粹的前端开发首先我这里所说的纯粹的前端，指的是完全独立于服务端的开发，本地不需要有服务端的环境、不需要运行服务端的代码，单纯通过发送和接受请求来完成所有的交互。由于前后端分离的架构愈发流行，纯粹的前端开发也变的越来越多，那么本文就简单讲讲我
五个最新的 CSS 特性以及如何使用它们 @Daniel Crisp在他的博文中，探讨了CSS的五个新特性，介绍了这五个特性能做什么，以及如何将它们应用到你的项目中。
JS数组循环的性能和效率分析（for、while、forEach、map、for of）前言前端开发中经常涉及到数组的相关操作：去重、过滤、求和、数据二次处理等等。都需要我们对数组进行循环。为了满足各种需求，JS除了提供最简单的for循环，在ES6和后续版本中也新增的诸如：map、filter、some、reduce等实用的方法。因为各个方法作
Uber 开源 Fusion.js：一个基于插件架构的通用 Web 框架作者｜Addy Osmani 译者｜无明编辑｜覃云可能很多人都不知道，Uber 其实开发了很多基于 Web 的应用程序，可能有数百个，而且这个数字还在不断增加中，它们中的大部分被用在公司内部，用于管理各种业务。我们知道，Web 技术变化得很快，而最佳技术实践也在不断发展。为数百名 Web…
Promise 的误区 Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function. 一直在用Promise，但一直感觉自己没有真正彻底弄明白Promise，总差那么一点。最后发现原因很简单，是我脑内对 Promise 建立的模型错误了。于是写一篇短文。误区 const a = new Pro…
实战Vue简易项目（5）模拟数据我们先将项目中src/components/HelloWorld.vue删除，将src/router/index.js作如下修改：
观点｜蚂蚁金服玉伯：我们是如何从前端技术进化到体验科技的？小蚂蚁说：王保平，花名玉伯。熟悉前端和SeaJS的人一定对这个名字不陌生。作为前端领域的一枚大大大牛，他现在担任蚂蚁金服体验技术部负责人。本文，他分享了他从前端一路进阶升级到体验科技的个人思考，并详细介绍了体验科技的历史及未来发展，以及本次体验科技开放的愿景。
vue实现一个动效柱状图接手了一个需求的时候，其中有个 UI图是这样的：按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二
说一说javascript的异步编程众所周知javascript是单线程的，它的设计之初是为浏览器设计的GUI编程语言，GUI编程的特性之一是保证UI线程一定不能阻塞，否则体验不佳，甚至界面卡死。所谓的单线程就是一次只能完成一个任务，其任务的调度方式就是排队，这就和火车站洗手间门口的等待一样，
JavaScript数组的十八般武艺数组是值的有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。 JavaScript数组的索引是基于零的32位数值，第一个元素索引为0，数组最大能容纳4294967295（即2^32-1）个元素。 JavaScript数组是动态的，根据需要它们会增长或缩减，并且在创建数组时无需声明一个固定的大小或…
浅谈 HTTP Keep-Alive 背景是一次线上故障项目类型Vue SSR 与server的数据交互用的http内网域名方案在5月发生了一次线上CPU100%的问题，直接导致了NodeServer 500。最终解决办法是： 1、请求超时时间timeout 5s->1s 2、开启Keep-Alive。问题排查首先我们重…
JS中常用设计模式总结（带案列）写在前面设计模式，是一套经过前人总结、业务验证并适合于特定业务开发的代码组织方式，可能会有一些同学会认为设计模式没有用，我这里需要指出设计模式并不是万能的只适合于特定业务场景的开发（对我们的业务开发起到一定的指导作用，所有设计模式的目的都是让开发者编
react移动端终极适配方案先上github地址 https://github.com/gaohan1994/react-vw-layout 有空点个赞蛤~~ 2018-4-19日更新适配到安卓低版本的插件buggyfill（是我疏忽导致大家以为vw解决方案兼容范围过小，原第六步
webpack4介绍与总结由于web应用扩展地得极其迅猛，前端技术也是日新月异，前端的苦不是有多难学，而是我刚学完，这东西就被淘汰了（手动哭脸）。框架方面我们有vue、react、angular，我们需要写vue单文件，也需要写jsx语法；js方面我们有Typescript、es6(7、8、9)，现在是每年一个小版本的迭代，语法也是在不断更新和淘汰；模块方面我们有e…
新鲜出炉的8月前端面试题最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方…
前端重构整体规划前端重构整体规划(初稿) 前言前端技术发展很快，公司的项目面临前端大重构（前后端分离重做），很开心可以让我进行这次项目前端的重构方案编写，在思考的同时参考了网上很多资料，希望本篇重构方案有一定的完整性，可以带给大家一些在面临重构时有用的东西。原项目需要梳理页面结构核心功能逻辑第三方…
【Vue.js】Vue官方文档学习-组件一、注册组件 Vue.component(‘my-component-name’, { / … / }) 组件名称在组件的祖册中，第一个参数为组件的名称。命名方案：串联式命名驼峰式命名在引用其自定义元素时，两种方案都可以使用。但直接在DOM…
精读 The Cost of JavaScript In 2018 如今，JavaScript 仍然是我们向移动终端分发页面时成本最高的资源，因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题，用户实际访问页面的效果与感受又是如何，Google 开发 Lighthouse 的初衷以及其具体用途，JavaScript 的成本究竟有多高，如何降低 JavaScript 成本与优雅的持续集成实践等等…
常用JS方法整理本篇目录： 1.截取指定字节数的字符串 2.判断是否微信 3.获取时间格式的几个举例 4.获取字符串字节长度 5.对象克隆、深拷贝 6.组织结构代码证验证 7.身份证号验证 8.js正则为url添加http标识 9.URL有效性校验方法 10.自定义jsonp方法 11.cookie操作 12.生成随机字符…
前端异常监控、上报及js压缩代码定位最近在研究前端异常监控的问题，对查询的资料做了整理汇总，总体如下一、前端异常监控方式 1. window.onerror 异常处理 window.onerror 无论是异步还是非异步错误，onerror 都能捕获到运行时错误。 window.onerror
《Vue和微信小程序的区别、比较》写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别。（by 卖女孩的小火柴）
Vue 2.x 源码解析（十）：Patch 和 Diff 算法 diff 原则让我们回顾下，当vm上有更新发生时，会触发这一段代码： vm._update(vm._render(), hydrating) 在上一章我们知道了Vue是如何生成vnode的，也就是_render()函数的工作原理。这一章我们来看看Vue是如何把vnode渲染为真实DOM的，这一过程，我们称之为patch(补丁). _update函数的定义如下…
js 面向对象总结最近感觉，不知道该学点什么，老是觉的自己什么都不会，又感觉是会点什么，说是也知道面向对象，但是让系统的说一下这里面的东西，感觉连不上线，成不了太系统的了解，所以就看了一下这的知识点，当自己的搬运工，假装是发了一篇文章，等自己查看方便；创建对象工厂模式：用函数来封装，以特定接口创建对象…
聊聊Javascript的事件循环 JavaScript、浏览器、事件之间的关系 JavaScript程序采用了异步事件驱动编程（Event-driven programming）模型，维基百科对它的解释是：事件驱动程序设计（英语：Event-driven programming）是一种电脑
使用webpack4搭建一个基于Vue的组件库组内负责的几个项目都有一些一样的公共组件，所以就着手搭建了个公共组件开发脚手架，第一次开发 library，所以是参考着 iview 的配置来搭建的。记录如何使用webpack4搭建一个library的脚手架前言使用 webpack4，需要安装 webpa
【这可能是目前最好的中文Vue入门书！】在如今互联网快速发展的时代，许多互联网公司的前端人才缺口巨大。目前最热门的前端框架之一是2015年才发展起来的Vue，它的出现为开发者提供了一种快速构建并开发前端项目的新思维模式。详见
动手理解导航守卫（Vue）最近不是很忙，把自己不会的技术点看了一遍文档，然后动手敲了一下代码，加深自己理解。通过实战Demo，调试，结果分析，理解了官网的知识点。记录下来，第一是方便自己加深理解，第二是后续可以回顾，第三可以帮助像我这种小白的人一起学习。导航就是我们说的路由，当路由发生变化的时候，我们想要做的事情，这就是导…
web移动端布局的那些事儿 web移动端布局范畴很广，其中比较基础的几个话题：移动端适配 1px border 基础布局本文主要分享这三个话题一、移动端适配提起移动端适配，大家想到的肯定是rem、flexible.js，本文要分享的方案是 vw + rem 对移动端适配不熟悉