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

前端重构整体规划；浅谈 HTTP Keep-Alive；Nginx实现反向代理 Node.js；Vue 2.x 源码解析（十）：Patch 和 Diff 算法；react移动端终极适配方案；观点｜蚂蚁金服玉伯：我们是如何从前端技术进化到体验科技的？；漫谈JS中的prototype；手摸手，带你用合理的姿势使用webpack4（下）

前端重构整体规划前端重构整体规划(初稿) 前言前端技术发展很快，公司的项目面临前端大重构（前后端分离重做），很开心可以让我进行这次项目前端的重构方案编写，在思考的同时参考了网上很多资料，希望本篇重构方案有一定的完整性，可以带给大家一些在面临重构时有用的东西。原项目需要梳理页面结构核心功能逻辑第三方…
浅谈 HTTP Keep-Alive 背景是一次线上故障项目类型Vue SSR 与server的数据交互用的http内网域名方案在5月发生了一次线上CPU100%的问题，直接导致了NodeServer 500。最终解决办法是： 1、请求超时时间timeout 5s->1s 2、开启Keep-Alive。问题排查首先我们重…
Nginx实现反向代理 Node.js 公司有项目前端是用node.js进行服务器渲染，然后再返回给浏览器，进而解决单页面的SEO问题。项目部署的时候，使用Nginx反向代理Node.js。具体的步骤如下：（Nginx、Node.js的安装和基本配置直接跳过）首先我们要在nginx.cnf文件中的http节点打开下面的配置： http { log_format main ‘$remote_addr – $re…
Vue 2.x 源码解析（十）：Patch 和 Diff 算法 diff 原则让我们回顾下，当vm上有更新发生时，会触发这一段代码： vm._update(vm._render(), hydrating) 在上一章我们知道了Vue是如何生成vnode的，也就是_render()函数的工作原理。这一章我们来看看Vue是如何把vnode渲染为真实DOM的，这一过程，我们称之为patch(补丁). _update函数的定义如下…
react移动端终极适配方案先上github地址 https://github.com/gaohan1994/react-vw-layout 有空点个赞蛤~~ 2018-4-19日更新适配到安卓低版本的插件buggyfill（是我疏忽导致大家以为vw解决方案兼容范围过小，原第六步
观点｜蚂蚁金服玉伯：我们是如何从前端技术进化到体验科技的？小蚂蚁说：王保平，花名玉伯。熟悉前端和SeaJS的人一定对这个名字不陌生。作为前端领域的一枚大大大牛，他现在担任蚂蚁金服体验技术部负责人。本文，他分享了他从前端一路进阶升级到体验科技的个人思考，并详细介绍了体验科技的历史及未来发展，以及本次体验科技开放的愿景。
漫谈JS中的prototype 1. 引言继承(inheritance)、封装(encapsulation)和多态(polymorphism)是面向对象机制的主要特性。在JS中没有“class”的概念，自然也无法直接进行JAVA、C++常用到的extends、implements等操作。但从某种意义上来说，JS是纯粹的“面向对象”编程语言，因为JS中处处皆是对象(函数也是对象)，而且作为函数式脚本语言，天生…
手摸手，带你用合理的姿势使用webpack4（下）本文作者来自华尔街见闻技术团队 – 花裤衩推荐先阅读 webpack 入门教程之后再来阅读本文。 Webpack 4 和单页应用入门手摸手，带你用合理的姿势使用 webpack4 （上）本文为手摸手使用 webpack4（下），主要分…
Nginx + Lets’encrypt 实现HTTPS访问七牛空间资源不知道有没有小伙伴会像我一样担心一年七牛的SSL证书不免费了怎么办？每个域名每年都要几千块的支出对于个人和小企业来说还是一笔不小的数目。
新鲜出炉的8月前端面试题最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方…
手摸手，带你用合理的姿势使用webpack4（上）前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章 webpack 4.0 to 4.16: Did you know?(需翻墙)，总结了一下webpack 4发布以来，做了哪些调整和优化。并且说自己正在着手开发 webpack 5。
一个 HTTPS 问题的排查，谁的锅？上周三临下班的时候，收到一个用户不能打开企业邮箱页面的投诉，最终发现是 HTTPS 的问题，这篇文章完整记录了处理过程，解决投诉后，我也在思考问题产生的原因。收到投诉后，我们的运维同事使用 QQ 远程连接用户桌面（最有效、最快速的问题排查手段）的功能了解具体的情况，初步情况如下： …
HTML5 manifest离线缓存离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。
前端每日实战：98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 [链接] …
常见的Javascript获取时间戳最近在做项目的时候，发现获取时间戳的需求挺多的，通常是在做日期选择的时候，要拿开始时间和结束时间的时间戳。每次都得google一下，还不如自己搞一搞！
HTTP PUT 方法利用的几种方式 HTTP PUT方法利用在本文中，我们将会利用metasploitable2靶机上的HTTP PUT漏洞。通过此漏洞你可以轻而易举的向服务器上传恶意文件，并可以在meterpreter shell中获得整个服务器的访问权限。上一篇文章我们讲过了如何使用Curl，Nmap和OpenSSL来测试HTTP方法。如果服务器启用了HTTP PUT方法，我们就…
前端日拱一卒D10——ES6笔记之新特性篇前言余为前端菜鸟，感姿势水平匮乏，难观前端之大局。遂决定循前端知识之脉络，以兴趣为引，辅以几分坚持，望于己能解惑致知、于同道能助力一二，岂不美哉。本系列代码及文档均在此处依然很忙，继续啃老本。。。 lesson1 Symbol 概述 javaScr
multiple web workers的实现
《CSS世界》笔记三：内联元素与对齐在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已。在这一篇博客（《css世界》第五章）中，张大大从深层次解释了垂直对齐的原理，并为内联元素的…
JavaScript进阶（一）–执行上下文在下工科生一枚，自认为文笔烂大街！本着总结JavaScript原理知识，提升自我写作水平的目的，提笔写下这几篇文章，喷子们高抬贵手。写作过程中本系列过程中，我会尽快写完全部内容，再回过头来优化补充，希望本系列文章将来能成为不错的前端学习材料。前言如果
JavaScript进阶（二）–变量对象计划20180808完成
《微信小程序开发05-日历组件的实现》我们这里继续实现我们的日历组件，这个日历组件稍微有点特殊，算是相对复杂的组件了，然后一般的日历组件又会有很多的变化！（by 叶小钗）
DvaJS的学习之路1 —— dva+umi官网例子学习前置知识 dva roadhog umi dva知识地图使用 umi 改进 dva 项目开发 umi + dva，完成用户管理的 CURD 应用本文主要是在 dva 作者 @sorrycc 的例子 umi + dva，完成用户管理的 CURD 应用
【这可能是目前最好的中文Vue入门书！】在如今互联网快速发展的时代，许多互联网公司的前端人才缺口巨大。目前最热门的前端框架之一是2015年才发展起来的Vue，它的出现为开发者提供了一种快速构建并开发前端项目的新思维模式。详见
可视化搭建前端工程：阿里飞冰了解一下每次新做一个项目，无论大小都要干这些事：框架选型初始化脚手架（比如使用 create-react-app 或者 vue-cli）也可能你选择了开源脚手架，克隆仓库四处找轮子安装各种依赖新建页面，写逻辑设计菜单…
你真的懂模块化吗？教你CommonJS实现你真的懂模块化吗加紧学习，抓住中心，宁精勿杂，宁专勿多。 —— 周恩来模块简史早期的 JavaScript 往往作为嵌入到 HTML 页面中的用于控制动画与简单的用户交互的脚本语言，我们习惯这样写。 <!–html–> <s
《三款 Linux 下的 Git 图形客户端》了解这三个 Git 图形客户端工具如何增强你的开发流程。（by Linux中国/tarepanda1024 ）