ziyi2
ziyi2
不知不觉在阿里已经入职满一年时间了，在这一年时间里主要接触了低代码（Low Code）、小程序、移动端 H5、监控以及 PC 桌面端（[CEF](https://github.com/chromiumembedded/cef) & [Electron](https://github.com/electron/electron)）等开发技术。在这些技术中， PC 桌面端混合开发技术相对沉淀多一些，接下来会跟大家分享一些桌面端开发的思考，希望对大家的日常开发有所启迪。 > **温馨提示**：如果对桌面端技术不了解可以先查看 [2019 前端年度总结 / 桌面端开发](https://juejin.im/post/6844904038543130632#heading-8)。除此之外，本文所讲解的桌面端开发技术并不是采用新颖的 Flutter 技术，如果你对阿里内部 Flutter 技术的建设非常感兴趣，则可以查看[阿里集团内如何进行 Flutter 体系化建设](https://juejin.im/post/6844904113105272846)。 ## 基本概念 首先讲解一些桌面端开发的基础概念，这里有些说明并不会贯穿全文，其中一些说明会有助于理解后续的框架说明。 ### Hybrid 混合开发 本文所讲解的桌面端开发主要采用了 Hybrid 混合的开发模式（一种在原生应用容器中嵌入...
## 前言 本文是[算法与 TypeScript 实现](https://github.com/ziyi2/algorithms)中 TypeScript 项目整体的环境配置过程介绍。主要包括了以下一些配置内容： - Git Commit Message - TypeScript - ESLint - Prettier - Lint Staged - Jest - Npm Script Hook - Vuepress - Github...
## 前言 写作可以加深自己对于知识点的理解，同时可以引导读者更好的去理解知识点。本文的主要目的是提高大家的写作意识和质量，主要分为四个部分： - [写作的阶段和价值](https://juejin.im/post/6844904168600109069#heading-1) - [文章结构](https://juejin.im/post/6844904168600109069#heading-2) - [写作风格](https://juejin.im/post/6844904168600109069#heading-6) - [写作工具](https://juejin.im/post/6844904168600109069#heading-14) > **温馨提示**： 本文花了较多时间去思考如何写好技术类文章，主要用于组内分享。这里将写作技巧分享给大家，希望对没有写作习惯的同学有所帮助。当然，如果能从中获益并写出更优雅的简历，那再好不过了。 ## 写作的阶段和价值 就个人而言，写作可以分为三个阶段： - 摘录笔记 - 经验案例 - 普适文章 刚进入特定技术领域进行学习时，可以培养摘录笔记的习惯（例如将书中的知识点或者别人的博客技术在自我实践后进行摘录或精简）。通过自我实践（改良）、精简以及总结可以加深对知识点的理解，同时也可以锻炼自我的文笔书写能力。除此之外，摘录或摘要笔记更便于后续快速回顾当下总结的知识要点。这里列出几个相对有参考价值的笔记： - [设计模式](https://github.com/ziyi2/js/blob/master/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F.md) - [jQuery 2.0.3 源码分析](https://github.com/ziyi2/jquery)...
## 前言 由于疫情关系，最近在掘金看到很多同学的工作情况内心还是蛮触动的（**降薪**、**变相裁员**、**辞退**等）。可能这并不是当下一个普遍的现象，但仍然使我感受到前端这碗青春饭不好混。于此同时联系我内推的同学很多都处于待业状态，能感受到他们内心的迷茫和焦灼。于是内心一直有声音督促我，赶紧写点面试相关的东西出来吧，哪怕对大家只有一丝丝的帮助。当然这次我会以面试官的角度出发（可能不是一个优秀的面试官），让大家更加了解阿里的面试流程、面试数据和面试场景等。接下来我会从以下几个模块来讲解： - 招聘流程 - 内推数据 - 面试数据 - 面试注意点 - 面试题解析 > **温馨提示**：入职前以应聘者的角度写了一篇面试相关的文章[《面试分享：两年工作经验成功面试阿里 P6 总结》](https://juejin.im/post/6844903928442667015)，收到了很多同学对我的感谢，特别高兴他们能因此找到心中理想的工作，这也给我写文章带来了极大的动力。希望正在找工作的同学可以看看，或许能对你产生一些帮助。 ## 更新日志 **2020.04.12** - 更新 [内推数据](https://juejin.im/post/6844904093425598471#heading-4) **2020.04.06** - 新增 [笔试题 / 实现一个简易的模板有引擎](https://juejin.im/post/6844904093425598471#heading-123) **2020.03.29**...
## 前言 从未写过年度总结，恰逢今年是变化较大的一年，所以需要有一个总结仪式。同时希望在未来的每一年都能有一次年度总结，看看当前走过的路，也回望以往的不足。毕竟，前端一世，草木一秋。 关于我的年度总结，这里主要分为以下几个模块（文章篇幅很长，大家可以按需阅读）： - 技术 - 学习 - 杂七杂八 - 招聘 - 掘金 「技术」模块主要讲解这一年来自我技术方面的创新以及实践。「学习」模块会讲解 2019 的一些学习内容以及前端新认知，并且也会讲解自我的学习方法，希望对在校以及刚入职前端工作的同学有所帮助（鉴于很多掘友高频询问如何学习前端）。「招聘」是今年最有感触的一块，会重点讲解自己在阿里的招聘感受，希望对想入职阿里工作的同学有所启迪。 >**抱歉说明**：这里对掘友们说一声抱歉，在回复问题时由于工作忙碌而不够耐心（问相同问题的人太多），接下来的文章会重点针对高频问题在「学习」和「招聘」模块做一些阐述。 ## 技术 今年是技术成长最多的一年，也是自我转变最快的一年。以下是自己总结的一张技术结构图，其中标红的部分是今年有所接触或深入的部分：  对我而言，今年技术创新的关键词是「UI 框架 / 脚手架」和「低代码（Low Code）」，技术实践的关键词是「桌面端」。 ### UI 框架...
## 前言 本文主要给大家带来一些我面试的经历和经验，希望对正在求职的同学有所帮助。我先大致说下面试之前的个人情况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。 我写的篇幅可能有点长，如果只想看成功的面试请直接从[阿里企业智能事业部（一面）](#heading-122)开始，大家见谅哈。 这里推荐阅读之前写的文章（前面两篇实用型，后面三篇对面试应该会有帮助）： - [Vue CLI 3结合Lerna进行UI框架设计](https://juejin.im/post/5cb12844e51d456e7a303b64) - [Cz工具集使用介绍 - 规范Git提交说明](https://juejin.im/post/5cc4694a6fb9a03238106eb9) - [你真的理解$nextTick么](https://juejin.im/post/5cd9854b5188252035420a13) - [基于Vue实现一个简易MVVM](https://juejin.im/post/5cd8a7c1f265da037a3d0992) - [2019 前端之路（干货满满）](https://juejin.im/post/5e11ef3b6fb9a0483a135fa7)（墙裂推荐） ## 关于阿里 Hi，大家好，我们是阿里巴巴新成立的BU，目前还有大量的Web前端职位空缺，机会难得，希望正在找工作的同学们可以来试试： - 目前Web前端急缺P6和P7（阿里的很多BU都只招P7了） - 新的BU你进来即是元老😂😂😂 - 前端技术体系大部分需要一起重新开拓，可以学习到更多的新内容 -...
# VUE CLI3构建库时对于产生polyfill的问题分析 ## 发现问题 在使用[VUE CLI3/开发/构建目标/库](https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93)功能时，为了防止构建库引入一些额外的依赖（例如`vue`、`lodash`），使用了Webpack的[exterenal](https://www.webpackjs.com/configuration/externals/#externals)和[webpack-node-externals](https://github.com/liady/webpack-node-externals)从输出的 bundle 中排除依赖，但是打包出来的文件同时排除了一些polyfill，例如`core-js/modules/es6.array.some`等。那么VUE-CLI3的构件库为什么会带有这些polyfill？打包的库中带有这些polyfill该如何决策？ ## polyfill In web development, a polyfill is code that implements a feature on web browsers that do not support the...
## 前言 基于Node.js的Web应用框架很多，包括[Express](http://www.expressjs.com.cn/)、[Koa](https://koa.bootcss.com/)、[Sails](http://sailsjs.org/)以及[Egg](https://eggjs.org/zh-cn/)等(后两者是前两者的增强)。虽然Express和Koa本身提供的能力非常简单，但是如果对于项目的开发有特殊需求，完全可以进行灵活的扩展，从而写出各种千奇百怪的MVC模式（如果对服务端MVC不是很清晰可以阅读[服务端MVC之Model2的衍生](https://juejin.im/post/5cd8a7c1f265da037a3d0992#heading-5)）。 本文简单介绍以前设计的几种基于Express扩展的技术选型方案，恰好涵盖了React、Angular以及Vue这三个Web前端框架。 > 本文使用的示例项目都相对简单，是真实项目的简化，希望对刚入门Express小白们有所启示。 ## React技术选型方案 2016年7月到10月，从零开始学习React并使用React设计了服务端渲染的Express应用（同年10月25日诞生了[Next.js](https://nextjs.org/)），大致的技术选型如下： - Bootstrap - React - Mongoose - Webpack - Karma/Chai 由于对React不是很熟悉，首先实现了单页应用，然后实现了服务端渲染应用。 ### 实现React单页应用(SPA) #### Web前端的学习和设计过程 当时对React的学习过程大致如下（React发展很快，部分学习过程现在不适用）： - 学习React语法 - 学习ES6/ES7语法 -...
## 为什么是`nextTick` 这里猜测一下为什么Vue有一个API叫`nextTick`。 ### 浏览器 浏览器（多进程）包含了**Browser进程**（浏览器的主进程）、**第三方插件进程**和**GPU进程**（浏览器渲染进程），其中**GPU进程**（多线程）和Web前端密切相关，包含以下线程： - **GUI渲染线程** - **JS引擎线程** - **事件触发线程**（和EventLoop密切相关） - **定时触发器线程** - **异步HTTP请求线程** > **GUI渲染线程**和**JS引擎线程**是互斥的，为了防止DOM渲染的不一致性，其中一个线程执行时另一个线程会被挂起。 这些线程中，和Vue的`nextTick`息息相关的是**JS引擎线程**和**事件触发线程**。 ### JS引擎线程和事件触发线程 浏览器页面初次渲染完毕后，**JS引擎线程**结合**事件触发线程**的工作流程如下： （1）同步任务在**JS引擎线程**（主线程）上执行，形成**执行栈**（Execution Context Stack）。 （2）主线程之外，**事件触发线程**管理着一个**任务队列**（Task Queue）。只要异步任务有了运行结果，就在**任务队列**之中放置一个事件。 （3）**执行栈**中的同步任务执行完毕，系统就会读取**任务队列**，如果有异步任务需要执行，将其加到主线程的**执行栈**并执行相应的异步任务。 主线程的执行流程如下图所示： ...
# 基于Vue的简易MVVM实现 本文可以帮助你了解什么？ - 了解MV*架构设计模式的演变历史 - 了解观察者设计模式 - 了解Vue的运行机制 - 了解基于Vue的简易MVVM实现过程 > 需要注意阅读有风险，因为本文又臭又长...... ## MV*设计模式的演变历史 我们先来花点时间想想，如果你是一个前端三贱客（Vue、React或者Angular）的开发者，你是有多么频繁的听到“MVVM”这个词，但你真正明白它的含义吗？ ### Web前端的演变历史 从单纯的HTML静态页面到MVVM模式的成熟应用，自我能感受的Web前端模式粗略的发展如下所示（可能顺序不是很严谨）： - HTML - CGI（Common Gateway Interface）、SSI（Server Side Includes） - JavaScript -...