前言

vue的实现原理是一个很值得探讨的话题，无论是从实现机制还是实现思想都很有借鉴意义，对于个人也是一个很好的提升。
以下便是对于vue的一个简单实现原理的概述，同时简单实现一个demo。
接下来，请跟随我的步骤一步一步褪去vue的外衣，抚摸他，把玩他...

将虚拟DOM树渲染到真实的DOM

整体的思路便是首先创建虚拟的dom对象，然后根据虚拟的dom对象创建真实的dom并塞入文档结构

1、每一个dom节点都是一个虚拟的dom对象，他都会包含tag(节点名称)/data(数据)/children(子元素)/text(text节点)四个属性

考虑 - 决定脚手架依赖

这次的项目是一个管理后台，介于以下两点原因：

1. 这个项目最终会交由后端同学维护，所以前端相关流程应该尽量简单且最好基于后端同学熟悉的框架
2. 项目前端部分必须有较快的开发效率，不能沿用之前后端同学开发后台时的完全laravel、前后端完全耦合的方法（项目目录可能较为混乱、开发效率低）

所以决定用laravel（后端同学熟悉的后端脚手架） + webpack + vue（入手较为容易的JS框架）

laravel-mix

概念

webpack可以看做是模块打包机。它通过分析项目结构，找到 js、css、图片等模块或资源，并将其打包为合适的格式以供浏览器使用。

功能

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
• 文件优化/压缩：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
  等等...

webpack4主要变化

上周产品那边来了一个需求，需要基于原图针对不同用户生成不同二维码以及文案，并生成新图片，让用户能够保存。接到这个需求时，心里不仅没有拒绝的意思，反而有点小兴奋 ~ 因为又能探索一下新东西。

大致效果如下，原图：

效果图：

好好写代码

作为一个刚写代码不久的小菜鸟，工作的半年多让我越发意识到提高代码质量的重要性。从前只会关注实现功能，慢慢的开始关注性能，现阶段则发现其实还有很多细节也是（如可读性、易用性、可维护性、一致性）提高代码质量的关键。“实现功能”跟“优雅地实现功能”是两码事。

大部分归纳自网络，将多篇文章的观点汇总加工了一下，也融合了一些个人的见解。

原则

• 单一职责原则
• 易用性原则
• 可读性原则

• 复杂性守恒原则：无论你怎么写代码，复杂性都是不会消失的

  注：如果逻辑很复杂，那么代码看起来就应该是复杂的。如果逻辑很简单，代码看起来就应该是简单的。

这是一个令人费解的遮罩问题，经过各种调试与查阅资料后，发现由 z-index 一路牵扯到 Stacking Context，浑水竟然如此之深...

永不消失的遮罩

众所周知，z-index这货能控制元素的层级，遵循近大远小、后来居上的规则，可以把元素举高高或者打入幕后。
比如在做各种浮层/层叠定位的时候，拿来用一用。

快应用

快应用官网

什么是快应用

1. 快应用是十大手机厂商基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。

2. 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放。

3. 快应用具备传统APP完整的应用体验，无需安装、即点即用，享受原生应用的性能体验。

十大手机厂商

定义

mpVue 是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。

优点

官方链接webpack4.0

大改动

• 环境
  • 不再支持Nodejs 4。源代码已经更新到一个较高的ECMAscript版本。
• 用法
  • 现在必须选择在 production 或 development 这两种模式中选择一种，参数 mode或--mode
    • production 模式会生成最优化的包（bundles）
    • development 模式开放注释和提示，并开启eval devtool功能
    • production 模式不支持监听模式，development 模式拥有更快速的增量构建
    • production 模式也可以把多个模块打包，Scope Hoisting（作用域提升）
    • 可以通过optimization.* 的方式去设定更详细的配置（搭建你的自定义模式）
    • process.env.NODE_ENV 变量已经在 production 和 development 两种模式中被设置了（只在构建的代码里面，不在配置里）
    • 有一种隐藏none模式可以禁用所有内容
• 语法
  • import() 总是返回一个带命名空间的对象。CommonJS模块会被包在export default 中。
    • 如果使用import()的方式去导入你的CommonJS模块，这可能会破坏你的代码
• 配置
  • 您不再需要使用这些插件：
    • NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors（production模式默认开启）
    • ModuleConcatenationPlugin -> optimization.concatenateModules（production模式默认开启）
    • NamedModulesPlugin -> optimization.namedModules（development模式默认开启）
  • CommonsChunkPlugin 已经移除 -> optimization.splitChunks，optimization.runtimeChunk
• JSON
  • webpack现在能处理原生的JSON
    • 当需要通过 loader 去把 json 转换成 js 的时候，你可能需要添加type:"javascript/auto"
    • 不使用 loader 也可以直接使用 JSON
  • 允许通过ESM语法导入JSON
    • 未使用的JSON模块导出后会消除
• 优化
  • 更新 uglifyjs-webpack-plugin 到 v1
    • ES2015支持

大功能

• 模块

  • webpack 现在支持下面的模块类型：
    • javascript/auto: （webpack 3 默认值） 所有的 JS 模块规范都可用：CommonJS，AMD，ESM
    • javascript/esm ：EcmaScript 模块规范，其它的模块规范都不可用 (.mjs 文件的默认值)
    • javascript/dynamic: 仅支持 CommonJS 和 AMD，EcmaScript 模块规范不可用
    • json: JSON 数据，使用 require 和 import 导入 JSON 数据时可用 （.json 文件的默认值）
    • webassembly/experimental： WebAssembly 模块（当前还是实验版本）
  • javascript/esm 处理 ESM 时候会比 javascript/auto 更加严格。
    • 模块导入进来的名字，必须要在模块中存在。
    • 动态模块（非esm，比如CommonJS）只能通过 default导入，其他所有的方式（包括命名空间的导入）都会报错。
  • 在.mjs的模块里面将默认使用javascript/esm模式
  • WebAssembly模块
    • 可以导入其他模块（JS和WASM）
    • 从WebAssembly导出的模块会经过ESM导入验证
      • 当你从WASM的导出内容里面尝试导入一个不存在的内容的时候将会活动的警告/错误提示。
    • 只能用在异步加载chunk里面，在初始化的chunk里面不能正常工作（对页面性能影响很大）。
      • 通过import()的方式去导入WASM模块

• 优化

  • sideEffects: false 现在已经支持在 package.json 里面使用

    • package.json里面sideEffect允许使用glob表达式和glob表达式数组

  • JSONP数组已经代替JSONP函数使用 -> 异步脚本标记支持， 顺序不再重要。

  • 添加新的选项optimization.splitChunks
    Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
  • webpack自身移除了废弃的分支代码
    • 之前：Uglify移除掉不用的代码
    • 现在： webpack移除掉不用的代码（相同情况下）
    • 当遇到废弃的分支代码里面含有import()将会停止移除操作。
• 语法
  • import() 支持黑科技般的注释： webpackInclude和webpackExclude。
    他们允许你在使用动态表达式导入的时候过滤掉一些文件。
  • 使用System.import()将会提示警告
    • 你可以通过Rule.parser.system:true关闭掉这些警告
    • 你可以通过Rule.parser.sustem:false来禁用System.import
• 配置
  • 可以通过module.rules[].resolve来配置解析方式。这将会跟全局的配置合并到一起。
  • optimization.minimize已经被添加到配置里面，通过其开关最小化/压缩功能。
    • 默认在production模式中开启，默认在development模式中关闭
  • optimization.minimizer已经被添加到配置里面，通过其去设置压缩处理程序和选项。
• 使用
  • 一些插件的选项已经失效
  • CLI已经迁移到了webpack-cli，你需要安装webpack-cli才能使用CLI
  • ProgressPlugin插件 (--progress) 现在会打印显示插件的名字
    • 至少对已经迁移到新插件系统的插件来说
• 性能
  • UglifyJs现在默认缓存和并行化
  • 许多的性能提升，尤其是更快的增量构建
  • RemoveParentModulesPlugin的性能提升
• Stats
  • Stats现在会在有串联的模块中打印显示层级嵌套

Node.js 8是下一个进入长期支持（LTS）的发行版。 这将于2017年10月发生。 一旦Node.js 8转换到LTS，它的代号将变为Carbon。

官方介绍 node 8.0.0

• Async Hooks API 简介
  • Async Hooks API 如何在 Node.js 8 中工作的？
• N-API 简介
• Node 8 中 Buffer 安全性的改进
• Pending Deprecations
• 提升对Promises的支持
• Console 的改变
• 静态错误码
• 重定向过程警告
• Stream API 改进
• Debugger 的改变
• 实验性的检查器 JavaScript API
• 将V8升级到5.8：为 TurboFan 和Ingnition 做准备
• npm 升级到 5.0.0
• WHATWG URL parser
• Node.js 8中的其他显着变化
  • 异步钩子Async Hooks
  • 缓冲区Buffer
  • Child Process
  • Console
  • Dependencies
  • Domains
  • Errors
  • File System
  • HTTP
  • Lib
  • N-API
  • Process
  • REPL
  • Stream
  • TLS
  • URL

Async Hooks API 简介

Async Hooks（以前称为 AsyncWrap ）API允许您获取有关句柄对象生命周期的结构跟踪信息。