xingbofeng.github.io
xingbofeng.github.io copied to clipboard
xingbofeng
counterxing的博客
从知道创宇离职接近一个月的时间了，深知自己还有最后一点学到的东西没有把它浓缩提炼成自己的东西，今天偶然翻开我的笔记本，或许敏捷开发流程，是我在知道创宇实习期间，除了技术和职场经验，另外一个收获最大的方面了。 ### 什么是敏捷开发？ 以下摘自[维基百科——敏捷开发](https://zh.wikipedia.org/wiki/%E6%95%8F%E6%8D%B7%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91)： 敏捷软件开发（英语：Agile software development），又称敏捷开发，是一种从1990年代开始逐渐引起广泛关注的一些新型软件开发方法，是一种应对快速变化的需求的一种软件开发能力。它们的具体名称、理念、过程、术语都不尽相同，相对于“非敏捷”，更强调程序员团队与业务专家之间的紧密协作、面对面的沟通（认为比书面的文档更有效）、频繁交付新的软件版本、紧凑而自我组织型的团队、能够很好地适应需求变化的代码编写和团队组织方法，也更注重软件开发过程中人的作用。 ### 为什么需要敏捷开发？ 传统的软件开发中，我们通常采用瀑布式的开发流程，它严格遵循预先计划的需求、分析、设计、编码、测试的步骤顺序进行。步骤成果作为衡量进度的方法，例如需求规格，设计文档，测试计划和代码审阅等等。 但传统的瀑布式开发流程中，对比与敏捷开发，也就存在巨大的缺陷了，首先，传统的瀑布式开发流程，每个阶段周期长，一旦需求变更，也许会让开发人员感到手忙脚乱、措手不及。它的严格分级导致的自由度降低，项目早期即作出承诺导致对后期需求的变化难以调整，代价高昂。瀑布式方法在需求不明并且在项目进行过程中可能变化的情况下基本是不可行的。 曾经记得之前在做ASMS项目的时候，项目负责人，也就是指导老师（产品经理），在反复提出需求并作出更改的过程中，加大了开发人员的开发难度，最终使得团队的核心成员离开，导致项目的失败。 这也许就算是传统瀑布式开发的缺陷吧！ 当时不太理解的我，在接触到了敏捷开发流程之后，从在知道创宇的实习经历，也是让我慢慢明白到了这一点。 以下引用自[敏捷开发——互联网时代的软件开发方式](https://zhuanlan.zhihu.com/p/24840463)： 在互联网时代，一切开发流程的变化实在是太快了，我们必须要保证我们项目推进过程中，不会因为某一次变化而让我们的开发人员大动干戈、措手不及，因而开发过程中我们必须要具备**快速试错和拥抱变化**的特点。 今年张小龙在WXG大会上提到： **『我们今天可以想一些与众不同的点子，然后我们可以很快就看到效果，因为我们可以很快把它上线了，然后可以去验证，如果不对就下线，如果还有改进余地，下个版本再去改它。这是一个能够持续实现你的想法的过程』** 张小龙所说的上线、验证、改进的持续循环流程实际上就是一个快速试错和拥抱变化的过程。 当今的互联网，市场变化日新月异，在不断变化的市场中取得成功就要拥有快速试错的能力。 下面是滴滴打车最新的客户端截图。从图中可以看到，滴滴支持的全部车辆服务已经覆盖到了快车、小巴、出租车、顺风车、专车等多达10种服务，而大众刚刚熟悉滴滴时，滴滴仅有出租车、快车和顺风车三种车型。  试想如果滴滴从一开始就计划设计出10种车型再开始上线推广，那估计现在满街跑的就该是Uber或者快的或者什么滴而不是滴滴了。商机转瞬即逝，正是在一次次的上线中，从车主、用户及市场的反馈中不断调整迭代，才造就了今天的滴滴，而这正是敏捷思想的精髓所在。 ### 敏捷开发方法：[Scrum](https://zh.wikipedia.org/wiki/Scrum) #### 什么是Scrum？ Scrum是一种敏捷软件开发的方法学，用于迭代式增量软件开发过程。Scrum在英语是橄榄球运动中争球的意思。 虽然Scrum是为管理软件开发项目而开发的，它同样可以用于运行软件维护团队，或者作为计划管理方法。Scrum之间的合作称为“Scrum of...
原文链接：[Don't Use Bind When Passing Props](https://daveceddia.com/avoid-bind-when-passing-props/)  如今我们在编写`React`组件时经常会遇到通过`props`传递一个函数的情况，通常父组件向子组件传递一个回调函数，子组件事件触发这个回调函数可以改变父组件的状态。 因而，维持这个回调函数的`this`指向便显得十分重要。 以下有许多方法能保证`this`能准确挂载于组件上。毫无疑问，一些方法是较为优秀的，我们推荐使用这些方式来传递`this`。 ## 自动绑定(good, 只能通过 React.createClass) 当你使用`React.createClass`创建你的组件时，你的组件上的所有方法都会被自动地绑定在你的组件作用域内。即便不使用`bind`你也可以自由准确地在组件中传递你的回调。 ```javascript var Button = React.createClass({ handleClick: function() { console.log('clickity'); }, render: function() { return (...
这一篇主要是相对`src/core/observer/`这一块进行剖析。主要作用为`MVVM`框架在数据层面的观察，之后通知`DOM`刷新的部分。 文档里面对于这一部分的原理是这么说的： 受现代` JavaScript `的限制（以及废弃 `Object.observe`），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 `getter/setter `转化过程，所以属性必须在 data 对象上存在才能让 `Vue` 转换它，这样才能让它是响应的。  所以`observer`需要做的事情是： ### 遍历一个对象/数组 #### 是否应该遍历它？ 虽然我们希望数据都是响应式的。然而，在某些情况下(`v-for`循环中或`props`传递的数据)，我们并不希望人为改变其中的数据(通常`Vue`会给出一个警告)。因而需要在遍历一个对象之前，设定这个状态是否应该被响应式触发： ```javascript /** * By default, when a reactive...
2016年算是我的人生职业生涯发展较为重要的一年，也算是人生的一道分界线。 无论以前的每次人生十字路口边，我是如何选择，今年的选择也算是令我满意。 ## 职业发展 2016年是处于我大二的尾巴和大三的开始。在此期间，我依据学校对本科生的培养计划和对自我未来职业发展的思考。分别参与了企业实训以及自行联系了一家公司进行实习，岗位均为前端开发。以下分别对于技术、工作和人际交往作出总结和反省。 ### 技术 * 自己的简历从无到有，搭建好了个人网站及开始活跃于开源社区。 * 在HTML、CSS页面布局技术方面，我从仅仅使用最简单的CSS进行简单切图，到如今，对页面布局、文档流、盒模型等理解得更为深刻，如熟练使用flex进行布局并爱上了弹性盒子布局技术。 * 在原生JavaScript及浏览器DOM技术方面，我从仅仅会简单的JavaScript到如今能熟悉DOM API、使用jQuery进行DOM操作和发送HTTP请求，并熟练使用es6新技术，如解构、作用域、async函数、promise对象等。 * 在框架的使用方面，基本熟练使用React技术栈进行页面开发，这是在以前我所不敢想象的高度。 * 在服务端和后端知识了解方面，基本熟悉linux（Mac OSX）工作流，能独立完成服务器配置和页面上线等功能，对nodejs，特别是express框架也有所学习，但不够深入。 ### 工作 * 在今年暑假，我前往四川日报网络传媒发展有限公司进行企业实训，在其中，基本依靠自我学习，对基于es5的前端技术有全面的掌握，特别是原生JS的熟练程度（如原型、闭包、作用域等），并能使用jQuery实现简单的页面动态效果。 * 在今年开学初，我接手了学院的ASMS项目，在其中负责前端开发和设计工作，在其中，基本熟悉了完整项目开发流程和团队合作，能与后端进行良好的交互实现页面的动态渲染。 * 在今年11月，我向知道创宇投递简历，并顺利通过面试。在其中参与了一期完整商业项目的开发工作，并在其中，对现代前端开发有基本的认识，并熟悉了es6+React技术栈和敏捷开发流程。 * 在今年年末，我向百度和搜狐投递简历，到今天（2017.01.01），已收到搜狐的正式offer和百度的口头offer，如不出意外，我将前往百度进行为期半年的实习。(2017.07.23注：最终也还是没有去百度，前半年前往北京网易有道进行了四个月的实习，后校园招聘春招通过深圳腾讯MIG事业群面试，如今来到深圳腾讯开始为期三个月的实习) ###...
Vue3 已经发布beta版本了，笔者在新项目中尝试体验了下Vue3 + TypeScript全家桶，通过本文记录下项目搭建的过程。 ## 用Vue Cli初始化项目 笔者已经安装了最新版本的Vue Cli，如果你的机器上尚未安装最新版本的Vue Cli，可以先去官网安装一下。 ``` npm install -g @vue/cli ``` 然后使用Vue Cli初始化一个基本的Vue项目 ``` vue create vue3-project ``` 因为需要使用TypeScript、Vue Router等选项，所以我们这里选择自定义初始化的特性，所以建议把这些选项都勾选上：  ## 升级到Vue 3.x 项目...
本文是在掘金的这篇文章（[TS 4.1 新特性实现 Vuex 无限层级命名空间的 dispatch 类型推断。](https://juejin.im/post/6872967325637836808)）的基础上进一步的实现，在阅读本文之前，可以先到掘金看看这篇文章。 ## TypeScript 4.1 类型模板字符串 先来看看[TypeScript 4.1 beta 版本](https://devblogs.microsoft.com/TypeScript/announcing-TypeScript-4-1-beta/) 首先在项目中安装 TypeScript 4.1 Beta 版本： ``` npm install typescript@beta --save-dev ``` 可以在任何地方使用类型模板字符串： ### 1、直接使用 ```TypeScript...
# 前言 * 非暴力生活的一个关键：感激生活的赐予，而不贪心。 * 暴力分身体的暴力和隐蔽的暴力。隐蔽的暴力记录了受害者，使他做出暴力的反抗。比如种族歧视，导致犯罪问题。 * 非暴力意味着让爱融入生活。让尊重、理解、欣赏、感激、慈悲和友情，而非自私自利、贪婪、憎恨、偏见、怀疑和敌意，来主导生活。 * 强调倾听——倾听自己及他人，非暴力沟通培育彼此的尊重、关注和爱，使人乐于互助。 * 如果遵循非暴力沟通的原则，乐于互助，并表明那是唯一的动机，那么他人也会加入我们，最终形成良好的互动。 # 四个要素：观察、感受、需要和请求 * 留意发生的事情：发生了xxx事情 * 表达感受：我不太高兴 * 说出哪些需要导致那样的感受：因为我需要xxxx * 具体的请求：你是否愿意做xxx事情 举个例子，之前的暴力沟通是：你每天都晚睡晚起，你就改不了这性格，没法一起相处了。 非暴力沟通应该是：晚睡晚起导致每天早上打车，我不太开心，因为我想规律作息，并且打车浪费钱不太有必要，你是否愿意今天晚上早睡一点？ # 异化的沟通方式：道德评判、进行比较、回避责任、强人所难 * 道德评判：用道德标准来评判人，如果一个人的行为不符合我们的价值观，那他就被看作是不道德的或邪恶的。事情不一定有对与错，人不一定分好与坏。 * 进行比较：比较也是一种评判...
近期 Vue 官方正式开放了 3.x 的源码，目前处于Pre Alpha阶段，笔者出于兴趣，抽空对 Vue 3.x 源码的数据响应式部分做了简单阅读。本文通过分析 Vue 3.x 的 `reactive` API 的原理，可以更方便理解 Vue 3.x 比起 Vue 2.x 响应式原理的区别。 在 Vue 3.x 源码开放之前，笔者曾写过[Vue Composition API 响应式包装对象原理](https://github.com/xingbofeng/xingbofeng.github.io/issues/46)， Vue 3.x...
在上一篇文章[Vue 3.x 响应式原理——ref源码分析](https://github.com/xingbofeng/xingbofeng.github.io/issues/48)中，笔者简述了Vue 3.x 的 `ref` API 的实现原理，本文是响应式原理核心部分之一，`effect`模块用于描述 Vue 3.x 存储响应，追踪变化，这篇文章从`effect`模块的`track`和`trigger`开始，探索在创建响应式对象时，立即触发其`getter`一次，会使用`track`收集到其依赖，在响应式对象变更时，立即触发`trigger`，更新该响应式对象的依赖。 > 阅读此文之前，如果对以下知识点不够了解，可以先了解以下知识点： * [Proxy](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) * [WeakMap](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) * [WeakSet](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) * [Reflect](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect) * [Vue Composition API](https://vue-composition-api-rfc.netlify.com/#summary) 笔者之前也写过相关文章，也可以结合相关文章： * [你可能忽视的ES6语法——反射和代理](https://github.com/xingbofeng/xingbofeng.github.io/issues/17) * [Vue...
在上一篇文章[Vue 3.x 响应式原理——reactive源码分析](https://github.com/xingbofeng/xingbofeng.github.io/issues/47)中，笔者简述了Vue 3.x 的 `reactive` API 的实现原理，了解过 Vue Composition API 的同学都知道`reactive`和`ref`创建响应式数据的区别，本文通过讲述`ref` API 的实现原理，帮助更进一步了解 Vue 3.x 的响应式原理。 > 阅读此文之前，如果对以下知识点不够了解，可以先了解以下知识点： * [Proxy](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) * [WeakMap](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) * [WeakSet](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) * [Reflect](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect) * [Vue Composition...