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

苏宁 Nodejs 性能优化实战；Immutable 操作在 React 中的实践；前端应该了解的PWA；大型Angular项目最佳实践；你真的完全掌握了promise么？；CSS Grid VS Flexbox：实例比较；解密vue-router: 从源码开始；VeeValidate在vue项目里表单校验应用案例

苏宁 Nodejs 性能优化实战作者｜李浩编辑｜覃云 Nodejs 项目背景介绍自 2016 年以来，苏宁大规模的使用了基于 Nodejs 渲染的项目，架构使用 Nginx+Nodejs+PM2 组合，其中 Nodejs 版本从最初的 6.0+ 升级到如今的 8.0+，Nodejs 框架从 Express 过度到 Koa2，而 Nodejs 的性能优化作为其中的核心，苏宁在其性能提升…
Immutable 操作在 React 中的实践作者简介 Amy 蚂蚁金服·数据体验技术团队最近在需求开发的过程中，踩了很多因为更新引用数据但是页面不重新渲染的坑，所以对这块的内容总结了一下。在谈及 Immutable 数据之前，我们先来聊聊 React 组件是怎么渲染更新的。 React 组件的更新方式 state 的直接改变 R…
前端应该了解的PWA 一、传统web 应用当前web应用在移动时代并没有达到其在桌面设备上流行的程度，下面有张图来对比与原生应用之间的差别。究其原因，无外乎下面不可避免的几点：移动设备网络限制-不可忽略的加载时间 web应用依赖于浏览器作为入口体验与原生的差距假如能
大型Angular项目最佳实践这里说的大型项目，是说一个项目，包含多个app，多个app之间会共享组件。例如我们可能有多个管理系统，分别用于整个平台的运营系统、第三方商户的销售管理系统、库存及发货管理系统等等，这些系统可能有统一的风格样式，有很多service组件都是通用的，例如订单服务，用于从服务器获取订单，在第三方的销售管理系统，和平…
你真的完全掌握了promise么？最近在整理js中异步编程方法时，回顾了一下promise，又发现了一些遗漏的重要知识点，比如promise.resolve()传递不同参数的含义？比如当一个promise依赖另一个promise时事件执行顺序？比如当catch捕获到了错误后，会不会继续执行后面
CSS Grid VS Flexbox：实例比较不久以前，所有 HTML 页面的布局还都是通过 tables、floats 以及其他的 CSS 属性来完成的。面对复杂页面的布局，却没有很好的办法。然而 Flexbox 的出现，便轻松的解决了复杂的 Web 布局。它是一种专注于创建稳定的响应式页面的
解密vue-router: 从源码开始前几天笔者看到一个问题：你真的了解vue-router的吗？你知道vue-router的运行原理吗？抱着这样的问题，笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码，而是跟着笔者画的流程图来简析每一步的运行流程。剖析运行流程笔者根据源码的结构和自己的理解事先画好了一张流程图，乍一看这张运行流程图可…
VeeValidate在vue项目里表单校验应用案例 VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则。它基于模板，因此它与HTML5验证API相似并且很熟悉。您可以验证HTML5输入以及自定义Vue组件。它也是以本地化为基础构建的，实际上我们有大约44种语言由精彩的社区成员支持和维护。本文包含VeeValidate包含以下几点应用： 1、基本安装使用 …
分析 Babel 转换 ES6 module 的原理写这篇分析是为了追踪 Babel 的一处模块化转换 bug，暂时还没有理清头绪，所以写下此详细分析，等分析出结果再更新此文。以下内容仅讨论 Babel 与 CMD 模块风格，当然 Babel 也可以使用 AMD 风格转换模块。模块导出
vue实现2048 用vue-cli搭建项目，对这个项目可能有点笨重，但是也懒的再搭一个 4X4的方格用一个二维数组存放，绑定好后只关心这个二维数组，其他事交给vue 监听键盘事件 2048的核心部分就是移动合并的算法，因为是一个4X4的矩阵，所以只要实现左移的算法，其他方向的移动只需要将矩阵旋转，移动合并，再旋转回来，渲染do…
值得了解的webpack高级技能在只要这几步，webpack速成不是事儿一文中, 笔者简单介绍了webpack的常见用法。能满足最基本的开发需求。在这篇文章中，再来谈谈一些较高级的应用。 1. 配置不同环境的构建脚本之前构建都是通过 npx webpack … 这样的方式执行构建命令。可能你会觉得这样的方式不够高效。甚至在某些特定的情况下还需要设置 No…
node.js 命令行工具(cli) 一. 先了解一下package.json每个项目的根目录都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息,下面是一个比较完整的package.json文件{ "name": "vue-cli", "version
Angular 6.0 正式版发布，都有哪些新功能在Angular 5发布半年之后，Angular 6在昨天正式发布，那么在这个版本有哪些新功能呢？新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外，这次更新还包括框架包（@angular/core、@angular/common、@angular/compiler 等）、Angular CLI、Angular Material + CDK等。 ng update ng…
LeetCode 算法题刷题心得（JavaScript）花了十几天，把《算法》看了一遍然后重新 AC 了一遍 LeetCode 的题，收获颇丰。这次好好记录下心得。我把所有做题的代码都放在 github 上以供参考。项目地址：https://github.com/violetjack/LeetCodeACByJ
我又写了一本书《深入浅出RxJS》
Vue组件通信深入Vuex 建议：博客中的例子都放在vue_blog_project工程中，推荐结合工程实例与博客一同学习上一篇博客（Vue组件通信深入）中，介绍了多种方法来实现组件之间的通信，但是涉及到深层嵌套和非直接关联组件之间的通信时，都会遇到无法追踪数据和调试的问题，而
JS进阶(3)：人人都能懂的继承在上一篇文章中，我们主要介绍了 JavaScript 中原型对象的概念。这篇文章我们来聊一聊 JavaScript 中的继承。一、继承的基本概念相对于 JavaScript 来说，在其他一些面向对象的编程语言中，继承主要指的是父类和子类的一些关系。而在 J
React&Redux实战介绍在读完程墨老师的《深入浅出React和Redux》后，结合自己的理解，构建一个显示天气的应用进行总结。执行: npm insatll npm start 运行效果图: 目录
React Native 项目升级与降级首先，必须知道如何查看项目当前版本，cd到项目目录 react-native –version 会看到当前版本：0.55.3 其次，你要知道现在React Native的最新版本 npm info react-native 喏 latest知道什么意思吧假设现在拿到一个已经在很久以前写好…
打造跳跃音波播音乐放器(Electron+Nodejs+React) Electron可以让我们使用html,css,javascript来搭建跨平台（Windows、macOS、Linux）的桌面应用。下面通过Electron+Nodejs+React来实现一个支持播放在线音乐及本地音乐的播放器。播放器设计风格为windows
babel原理及插件开发摘要如今的前端界已经离不开ES6，然而老旧浏览器并不支持，项目中特别是国内公司又需要兼容低版本的老旧浏览器，多亏了babel这个神奇的工具，可以让我们的ES6代码运行在旧浏览器中。大部分前端开发人员只是配置一下babel，根据需要装个插件之类，我想肯定少有
【2018年4月份GitHub上最热门的开源项目】又到了为大家盘点4月份GitHub最热门的开源项目的时候了，一起来看看你都知道哪些，或者有哪些你已经在使用的了。详见
详解配置VS Code/Webstorm来调试JavaScript 译者按：本文介绍了使用Node Inspector来调试 JavaScript和TypeScript应用。原文: Debugging JavaScript/TypeScript Node apps with Chrome DevTools, VS Cod
老树发新芽—使用 mobx 加速你的 AngularJS 应用原文： https://github.com/kuitos/kuitos.github.io/issues/38 1月底的时候，Angular 官方博客发布了一则消息： AngularJSis planning one more significant release, version 1.7, and on July 1, 2018 it will enter a 3 year Long Term Support period. 即在 7月1日 AngularJS 发布 1.7.0 版本之后，Angul…