我是管理员_个人页_阿里云开发者社区

发表了文章 2019-12-04

探访双十一活动大咖成长史：全职云大使讲述他的上云经验

注册成为云大使全职云大使刘凯的上云经验一年一度的阿里云购物盛典双11终于结束了，在这场大型的活动中相信有很多人“元气大伤”有的人“盆满钵盈”。然而在今年的阿里云云大使双十一拼团赛中第一名的团长大使光是瓜分最后的百万现金就瓜分了近5万的奖金，还有32名团长在组团中获得1111元组团红包超过2次。大使团长最多的在这次活动中佣金累计获得超过11万。随着越来越多大使的加入，云大使已经成为我们这些推广云计算人的代名词，今日小编有幸采访到拼团活动前100名中的一位优秀大使——刘凯，在此次拼团活动中获得第83名的成绩，整理出来了一些大使的经验分享给大家。刘凯是一位全职的云大使，做云大使已经一年多了。另外平时没事的时候自己还会接一些建站类的业务，平时最大的兴趣就是琢磨研究建站技术，因为他相信只有自己足够了解在给客户介绍的时候才会很专业，客户才会认可。据刘凯介绍他的获得渠道一般都是：1：以文章，QQ群，百度知道，博客园 CSDN 知乎等大平台推广为主；2：而且有自己的网站（www.568ys.com）在网站上发布活动链；3：线下客户（由于以前在IDC公司上班多年，还是有一定客户关系和群体），是一位典型的流量型大使。图片来源：刘凯网站截图成功路上的无限可能在推广的过程中总是会遇到种种的困难来考验我们的能力。刘凯在推广路上最大的困难就是很多的平台不喜欢软文，广告类的文章。一来二去的刘凯也逐渐的找到了一些小窍门在这里也分享给大家。就是多发文章，总会有一些没有被发现的文章可以通过。多账号发布:避免一个账号被停，全部文章都要被删的情况。多去了解各大平台的发布内容的标准，尽量在规则允许的情况下去推广阿里云的产品和活动。在采访中，刘凯也和我们分享了一下他推广成功的小案例，希望能给其他的大使一些灵感。客户首先比较纠结于购买阿里云服务器还是腾讯或者百度的云服务器，通过跟客户微信聊天，通过介绍阿里云的技术，市场占有率，以及双11活动等推荐客户购买阿里云的服务器，同时跟客户介绍了本人自己和其他客户使用阿里云的案例，以及本人自己网站都是采用的阿里云服务器，成功让客户选择阿里云。其次是购买时间点，通过了解客户需求的配置以及预算，然后介绍双11对应的活动给客户，让客户选择双11期间下单购买。小窍门：告知客户，注册账号了一定记得领我发的代金券，先关联上，然后再推荐配置、活动和上云时间点。阿里云云大使这个项目非常好，目前看到其他云厂商也在模仿阿里云发展云大使模式就可以看出阿里云的营销是做的非常好的。同时专职做云大使，比起上班，在时间安排上更加自由，没有了上班族在办公室的规则和时间约束。中国企业上云是必然，一是因为绝大部分企业越来越需要服务器来存放自己的网站、APP或者存放数据，二是传统的IDC物理机房没有云计算的优势，同时传统IDC公司已经倒闭了很多，据本人所知，目前国内一些小的IDC公司已经大批量倒闭或者转行，仅有例如西部数码、景安、江苏E动等以前做的比较知名的IDC公司还在坚持。因此，随着上云需求的增加，而传统IDC公司的减少，企业上云是必然。以上是刘凯谈及云大使时自己的心得，并且希望自己能早入加入百万云大使的行列里，相信凭借刘凯对待云大使的初心和热爱，这个愿望在不久的将来很快就会实现了。双十二活动开跑啦随着双十一的圆满结束，双十二的活动也拉开了帷幕，关注云小站，新的阿里云官方分销平台，不仅仅是新客户，老客户也有返利，还等什么，抓住双十二的机会，下一个成功的就是你。加入云大使成为云大使欢迎加入云大使官方交流组织扫码加入

发表了文章 2019-05-10

图数据库GDB——Gremlin介绍及范例【资料下载】

直播主题图数据库GDB——Gremlin介绍及范例专家介绍王炎存储&数据库领域专家。在基础平台技术领域深耕细作10余年。2018年加入阿里之后，从无到有开始数据库GDB的研发工作。直播内容第一部分：Gremlin基础与概念第二部分：Gremlin场景与查询范例第三部分：Gremlin最佳实践观看回放回放地址：https://yq.aliyun.com/live/1083 ppt精彩内容一览： ppt下载地址：https://yq.aliyun.com/download/3549 欢迎进群交流

发表了文章 2019-04-16

阿里云图数据库GDB交流资料下载

分享嘉宾刘显（泽贤）阿里巴巴高级技术专家存储&数据库领域专家。在基础技术体系深耕10余年，于2015年加入阿里，目前是阿里云图数据库 GDB架构师，负责GDB的架构演进及技术建设相关工作。直播介绍第一部分：图数据库GDB基本介绍第二部分：图数据库GDB场景及案例分享第三部分：图数据库GDB关键能力解析观看回放回放地址：https://yq.aliyun.com/live/1005 ppt精彩内容一览： ppt下载：https://yq.aliyun.com/download/3524 欢迎进群交流

为什么要重写React React16 以前 React16 以前，对virtural dom的更新和渲染是同步的。就是当一次更新或者一次加载开始以后，diff virtual dom并且渲染的过程是一口气完成的。如果组件层级比较深，相应的堆栈也会很深，长时间占用浏览器主线程，一些类似用户输入、鼠标滚动等操作得不到响应。借Lin的两张图，视频 A Cartoon Intro to Fiber - React Conf 2017。 React16 Fiber Reconciler React16 用了分片的方式解决上面的问题。就是把一个任务分成很多小片，当分配给这个小片的时间用尽的时候，就检查任务列表中有没有新的、优先级更高的任务，有就做这个新任务，没有就继续做原来的任务。这种方式被叫做异步渲染(Async Rendering)。 Fiber 对开发者有什么影响目前看有以下： componentWillMount componentWillReceiveProps componentWillUpdate 几个生命周期方法不再安全，由于任务执行过程可以被打断，这几个生命周期可能会执行多次，如果它们包含副作用（比如AJax），会有意想不到的bug。React团队提供了替换的生命周期方法。建议如果使用以上方法，尽量用纯函数，避免以后采坑。需要关注下react为任务片设置的优先级，特别是页面用动画的情况如何试用Fiber异步渲染默认情况下，异步渲染没有打开，如果你想试用，可以： import React from 'react'; import ReactDOM from 'react-dom'; import App from 'components/App'; const AsyncMode = React.unstable_AsyncMode; const createApp = (store) => ( <AsyncMode> <App store={store} /> </AsyncMode> ); export default createApp; 代码将开启严格模式和异步模式，React16不建议试用的API会在控制台有错误提示，比如componentWillMount。Fiber如何工作一些原理懂了原理看代码就简单点。首先，Fiber是什么： A Fiber is work on a Component that needs to be done or was done. There can be more than one per component. Fiber就是通过对象记录组件上需要做或者已经完成的更新，一个组件可以对应多个Fiber。在render函数中创建的React Element树在第一次渲染的时候会创建一颗结构一模一样的Fiber节点树。不同的React Element类型对应不同的Fiber节点类型。一个React Element的工作就由它对应的Fiber节点来负责。一个React Element可以对应不止一个Fiber，因为Fiber在update的时候，会从原来的Fiber（我们称为current）clone出一个新的Fiber（我们称为alternate）。两个Fiber diff出的变化（side effect）记录在alternate上。所以一个组件在更新时最多会有两个Fiber与其对应，在更新结束后alternate会取代之前的current的成为新的current节点。其次，Fiber的基本规则：更新任务分成两个阶段，Reconciliation Phase和Commit Phase。Reconciliation Phase的任务干的事情是，找出要做的更新工作（Diff Fiber Tree），就是一个计算阶段，计算结果可以被缓存，也就可以被打断；Commmit Phase 需要提交所有更新并渲染，为了防止页面抖动，被设置为不能被打断。 PS: componentWillMount componentWillReceiveProps componentWillUpdate 几个生命周期方法，在Reconciliation Phase被调用，有被打断的可能（时间用尽等情况），所以可能被多次调用。其实 shouldComponentUpdate 也可能被多次调用，只是它只返回true或者false，没有副作用，可以暂时忽略。一些数据结构下面这些数据结构，可以在源码中查看。 fiber是个链表，有child和sibing属性，指向第一个子节点和相邻的兄弟节点，从而构成fiber tree。return属性指向其父节点。详见源码。更新队列，updateQueue，是一个链表，有first和last两个属性，指向第一个和最后一个update对象。详见源码。每个fiber有一个属性updateQueue指向其对应的更新队列。每个fiber（当前fiber可以称为current）有一个属性alternate，开始时指向一个自己的clone体，update的变化会先更新到alternate上，当更新完毕，alternate替换current。 fiber tree的结构如下图：走进源码敲黑板，本文重点不要去github看源码，目录结构是真的复杂。可以自己写个React16的demo或者直接clone我的demo，使用webpack develop mode，来debug node_modules中的react.development.js和react-dom.development.js。更新入口肯定是setState方法，下面是我画的Fiber的调用关系图，比较简化，没有画判断条件。请注意，该图基于 React v16.3.2 ，后面源码可能改动，注意时效性。用户操作引起setState被调用以后，先调用enqueueSetState方法，该方法可以划分成两个阶段（非官方说法，是我个人观点），第一阶段Data Preparation，是初始化一些数据结构，比如fiber, updateQueue, update。新的update会通过insertUpdateIntoQueue方法，根据优先级插入到队列的对应位置，ensureUpdateQueues方法初始化两个更新队列，queue1和current.updateQueue对应，queue2和current.alternate.updateQueue对应。第二阶段，Fiber Reconciler，就开始进行任务分片调度，scheduleWork首先更新每个fiber的优先级，这里并没有updatePriority这个方法，但是干了这件事，我用虚线框表示。当fiber.return === null，找到父节点，把所有diff出的变化（side effect）归结到root上。 requestWork，首先把当前的更新添加到schedule list中（addRootToSchedule），然后根据当前是否为异步渲染（isAsync参数），异步渲染调用。scheduleCallbackWithExpriation 方法，下一步高能 scheduleCallbackWithExpriation这个方法在不同环境，实现不一样，chrome等览器中使用requestIdleCallback API，没有这个API的浏览器中，通过requestAnimationFrame模拟一个requestIdleCallback，来在浏览器空闲时，完成下一个分片的工作，注意，这个函数会传入一个expirationTime，超过这个时间活没干完，就放弃了。执行到performWorkOnRoot，就是fiber文档中提到的Commit Phase和Reconciliation Phase两阶段（官方说法）。第一阶段Reconciliation Phase，在workLoop中，通过一个while循环，完成每个分片任务。 performUnitOfWork也可以分成两阶段，蓝色框表示。beginWork是一个入口函数，根据workInProgress的类型去实例化不同的react element class。workInProgress是通过alternate挂载一些新属性获得的。实例化不同的react element class时候会调用和will有关的生命周期方法。 completeUnitOfWork是进行一些收尾工作，diff完一个节点以后，更新props和调用生命周期方法等。然后进入Commit Phase阶段，这个阶段不能被打断，不再赘述。任务如何分片及分片的优先级任务分片，或者叫工作单元(work unit)，是怎么拆分的呢。因为在Reconciliation Phase任务分片可以被打断，如何拆分一个任务就很重要了。React16中按照fiber进行拆分，也就是原来的虚拟dom节点。记不记得，开篇我们说到，初始化时候，一个虚拟dom树对应着一个结构一样的fiber tree，只是两个树的节点带的信息有差异。那么这些任务分片的优先级如何呢？ React v16.0.0的优先级是这样划分的： { NoWork: 0, // No work is pending. SynchronousPriority: 1, // For controlled text inputs. Synchronous side-effects. TaskPriority: 2, // Completes at the end of the current tick. HighPriority: 3, // Interaction that needs to complete pretty soon to feel responsive. LowPriority: 4, // Data fetching, or result from updating stores. OffscreenPriority: 5, // Won't be visible but do the work in case it becomes visible. } 可以把Priority分为同步和异步两个类别，同步优先级的任务会在当前帧完成，包括SynchronousPriority和TaskPriority。异步优先级的任务则可能在接下来的几个帧中被完成，包括HighPriority、LowPriority以及OffscreenPriority。 React v16.3.2的优先级，不再这么划分，分为三类：NoWork、sync、async，前两类可以认为是同步任务，需要在当前tick完成，过期时间为null，最后一类异步任务会计算一个expirationTime，在workLoop中，根据过期时间来判断是否进行下一个分片任务，scheduleWork中更新任务优先级，也就是更新这个expirationTime。至于这个时间怎么计算，可以查看源码。我的一个疑问既然是每完成一个任务分片，就看看剩余时间是否够用，不够用就停止，让出主线程，够用就更新任务分片优先级并继续下一个高优先级任务分片，且任务分片的结果是可以被缓存的，为什么与will有关的三个生命周期函数会被多次执行？一个任务分片要么就是被完成、要么就是没有被完成，怎么会多次被执行？从源码看，原因是异步渲染时候，会调用requestIdleCallback API，在回调函数中可以获得当前callback参数（也就是fiber的分片任务）还能执行多久，如果时间不够，分片任务会被打断（使用cancelIdleCallback API），下次就只能空闲时重新执行。可以参考。源码中，处理这个逻辑的函数scheduleCallbackWithExpiration: // cancelDeferredCallback在chrome等浏览器中就是cancelIdleCallback，没有实现这个API的浏览器，React会用requestAnimationFrame模拟一个该函数 // scheduleDeferredCallback同理，chrome等浏览器中是requestIdleCallback function scheduleCallbackWithExpiration(expirationTime) { if (callbackExpirationTime !== NoWork) { // A callback is already scheduled. Check its expiration time (timeout). if (expirationTime > callbackExpirationTime) { // Existing callback has sufficient timeout. Exit. return; } else { // Existing callback has insufficient timeout. Cancel and schedule a // new one. cancelDeferredCallback(callbackID); } // The request callback timer is already running. Don't start a new one. } else { startRequestCallbackTimer(); } // Compute a timeout for the given expiration time. var currentMs = now() - originalStartTimeMs; var expirationMs = expirationTimeToMs(expirationTime); var timeout = expirationMs - currentMs; callbackExpirationTime = expirationTime; callbackID = scheduleDeferredCallback(performAsyncWork, { timeout: timeout }); } 最后现在有关React Fiber，在v16.3.2版本下的运行，相关博客比较少，v16.0.0源码与v16.3.2有一些差异。个人能力有限，如果你有新的看法，欢迎评论。原文发布时间为：2018年07月03日本文来源：掘金如需转载请联系原作者

发表了文章 2018-07-13

浅解前端必须掌握的算法（五）：堆排序（上）

前言虽然前端面试中很少会考到算法类的题目，但是你去比如像腾讯一样的大厂面试的时候就知道了，对基本算法的掌握对于从事计算机科学技术的我们来说，还是必不可少的，每天花上 10 分钟，轻松了解基本算法概念以及前端的实现方式。另外，掌握了一些基本的算法实现，对于我们日常开发来说，也是如虎添翼，能让我们的 js 业务逻辑更趋高效和流畅。特别说明今天这个算法稍微比较复杂，牵扯到的概念也比较多，需要先了解基础知识。我给每篇文章的定位是 10 分钟内应该要掌握下来，所以我就擅作主张地将堆排序算法讲解分割为上、下两篇文章了，希望能让大家阅读起来更清爽愉快。文章结构《堆排序（上）》文章结构：简单的二叉树简单的满二叉树简单的完全二叉树简单的堆简单的堆分类《堆排序（下）》文章结构：算法介绍轻松实现大顶堆调整轻松实现创建大顶堆轻松实现堆排序复杂度分析简单的二叉树要了解堆，必须先了解一下二叉树，两者关系在下一步阐述。二叉树（Binary Tree）是每一个节点最多有两个分支的树结构，通常分支被称作「左子树」和「右子树」，分支具有左右次序，不能随意颠倒。二叉树第 i 层最多拥有 2^(i-1) 个节点，深度为 k 的二叉树最多共有 2^(k+1)-1 个节点，且定义根节点所在的层级 i=0，所在的深度 k=0。注意该定义在全文起作用，后续不继续提及。简单的满二叉树假设某个二叉树深度为 k，第 i 层拥有 2^(i-1) 个节点，且总共拥有 2^(k+1)-1 个节点，这样的二叉树称为「满二叉树」。换句话说，二叉树的每一层都是满的，除了最后一层上的节点，每一个节点都具有左节点和右节点。简单的完全二叉树假设某个二叉树深度为 k，共有 n 个节点，当且仅当其中的每一个节点，都可以和同样深度为 k 的满二叉树上的，按层序编号相同的节点，也就是序号为 1 到 n 的节点，均一一对应时，这样的二叉树称为「完全二叉树」。满二叉树一定是完全二叉树，但是完全二叉树不一定是满二叉树。如下的就不是完全二叉树，树 1 中 10 号节点缺失，树 2 中 6、7 号节点缺失，树 3 中 10、11 号节点缺失。简单的堆堆（Heap），一类特殊的数据结构的统称，通常是一个可以被看做一棵树的数组对象。堆的实现通过构造二叉堆（binary heap），实为二叉树的一种，由于其应用的普遍性，当不加限定时，均指该数据结构的这种实现。堆，是完全二叉树。对于给定的某个节点的下标 idx，可以很容易地计算出这个节点的父节点与孩子节点的下标： // 计算父节点的下标 var getParentPos = function(idx){ return Math.floor(idx / 2); } // 计算左子节点的下标 var getLeftChildPos = function(idx){ return 2*idx; }; // 计算右子节点的下标 var getRightChildPos = function(idx){ return 2*idx + 1; }; 如下图，取下标 idx = 4 的节点，则其父节点的下标就为 Math.floor(4/2) === 2，其左子节点的下标就为 2*4 === 8，其右子节点的下标就为 2*4 + 1 === 9。但将堆转换为数组时，由于数组的初始化下标始终为 0，所以我们的堆数据结构模型在此时要发生如下改变：的，以上的算法也需要做一下微调： // 计算父节点的下标 var getParentPos = function(idx){ return Math.floor((idx-1) / 2); } // 计算左子节点的下标 var getLeftChildPos = function(idx){ return 2*idx + 1; }; // 计算右子节点的下标 var getRightChildPos = function(idx){ return 2 * (idx+1); }; 简单的堆分类二叉堆一般分为两种：「大顶堆」和「小顶堆」。假设有一个堆，其中每个节点的值都大于或等于其左右孩子节点的值，则该堆称为「大顶堆」。「大顶堆」的最大元素值出现在根节点。假设有一个堆，其中每个节点的值都小于或等于其左右孩子节点的值，则该堆称为「小顶堆」。「小顶堆」的最小元素值出现在根节点。原文发布时间为：2018年06月29日原文作者：程序猿何大叔本文来源：掘金如需转载请联系原作者

发表了文章 2018-07-13

如何利用vw+rem进行移动端布局

前言因为在公司，只有一个前端，在做移动端布局的时候。利用px进行布局,发现，需要进行各种手机的适配。所以在开发第二版的时候，想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同事，会有一些字体和一些诡异的问题。在无意中，突然一个网友跟我说，他有一个很好用的适配方案。利用vw+rem。听着他分析了一把，感觉还不错，所以大胆尝试了一把根据CSS3规范,视口单位主要包括以下4个: vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。兼容性利用适口单位适配页面对于移动端开发来说，最为重要的一点是如何适配页面，实现多终端的兼容，不同的适配方式各有千秋，也各有缺点。就主流的响应式布局、弹性布局来说，通过Media Queries 实现的布局需要配置多个响应断点，而且带来的体验也对用户十分的不友好:布局在响应断点范围内的分辨率维持不表，而在响应断点切换的瞬间，布局带来断层式的切换变换，如同卡带的唱机般"咔咔咔"地一又一下。而通过采用rem单位的动态计算的弹性布局,则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得CSS于JS耦合了在一起。有没有办法能够解决这样的问题呢？答案是肯定,通过利用适口单位实现适配的页面,是既能解决响应式断层问题，又能解决脚本依赖的问题的。用法以iPhone6为基准(750) 第一步一般来说，我都会对移动端进行meta标签设置 <meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no"> 因为iPhone6以及大多数的dpr为2,为了第二步的方便进行换算第二步设置body、html的font-size html { font-size: 13.3333333333333vw // 100px } 13.3333333333333vw怎么来? 100 / 750 = 0.133333333333333vw 我们把这个适口当做100px,然后除于750换算得出 1px = 0.133333333333333vw 那么整个适口等于 0.133333333333333 * 100 = 13.3333333333333vw = 100px 最终于得出 100px = 1rem 通过这样子换算我们利用vw把rem转换成了以100px为基准那么在项目上就很好地可以进行使用了 div { // width: 100px; width: 1rem; } span { // height: 12px height: .12rem } 原文发布时间为：2018年06月20日原文作者：聪明的竹子爱学习本文来源：掘金如需转载请联系原作者

发表了文章 2018-07-13

Angular 实战教程 - 手把手教你构建待办事项应用 Today (Part 1)

这是什么？我适合阅读吗？ ng.ant.design/docs/introd… NG-ZORRO 是由阿里巴巴阿里云和计算平台事业部的小伙伴为 Ant Design 开发的 Angular 版本，是一个适用于构建中后台应用的组件库。该系列文章是为 ng-zorro 的用户提供的教程项目 Today 的配套教程。如果你是新用户，想要了解一下 ng-zorro 的使用姿势，或者你是 Angular 初学者，想要通过一个项目来锻炼自己的开发能力，欢迎阅读。目录和链接本系列文章共有以下几篇（更新中）：（本篇）项目简介，学习在项目中添加 ng-zorro，编写最简单的 setup（初始设置）界面你可以点击下面的链接预览： Today 点击下面的链接获取源代码： today-ng 点击下面的链接获取按照行文顺序 commit 的源代码： wendzhue/today-ng-steps 项目介绍我们的教程项目要编写一个名为 Today 的待办事项应用。 Today 还有一个基于 electron 和 Vue 的版本，完成度比较高，建议你浏览该项目的主页（对于 Mac 用户我们还提供了能直接运行的 dmg，其他平台的用户请自行 build）。该应用主要包含以下几个界面，并提供如下的功能：主界面，分为左边的清单列表和右边的待办事项列表。除了最基本的增加、删除、重命名清单和待办事项外，我们还要支持改变待办事项的排序方法，特别的，我们还要提供“建议”帮助用户确定今天（或者说接下来）要做的事情待办详情界面：在用户点击一个待办事项之后，这个界面会弹出以让用户对改办事项进行更多的修改，包括修改截止时间、计划时间、待办标题、详情、是否需要提醒等等总结界面，我们帮助用户记录他们每一天完成任务的情况，并且通过日历的形式展示初始化（setup）界面设置界面是不是有点期待了呢？我们现在就开始！项目构建想要了解更多关于项目构建的内容，请阅读 ng-zorro 的文档。我们先构建一个新项目，然后在这个项目里安装 ng-zorro。 $ ng new today-ng $ cd today-ng $ ng add ng-zorro-antd 现在尝试 ng serve，并打开 locahost:4200，你应该可以看到 ng-zorro 的标志了，恭喜你顺利的为你的项目引入了 ng-zorro！划分模块并设置路由我们的应用分为好几个页面，为了在代码的层面也有对应的划分，并保持好的拓展性和可维护性，我们将每个大页面都划分为一个独立的模块。这篇文章里，我将会向你展示如何做最简单的一个模块 setup。我们先创建 setup module 和对应的 component： ng g m pages/setup ng g c pages/setup --module pages/setup 给项目添加路由。创建 app/app-routing.module.ts 文件，然后编写如下内容： import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { SetupComponent } from './pages/setup/setup.component'; const routes: Routes = [ { path: 'setup', component: SetupComponent }, { path: '', redirectTo: '/setup', pathMatch: 'full' } ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {} 修改 app.module.ts 来引入 setup 以及路由模块： // ... import { AppRoutingModule } from './app-routing.module'; import { SetupModule } from './pages/setup/setup.module'; registerLocaleData(zh); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule, NgZorroAntdModule, AppRoutingModule, SetupModule ], providers: [ { provide: NZ_I18N, useValue: zh_CN } ], bootstrap: [ AppComponent ] }) export class AppModule { } 最后再更新 app.component.html 的内容为 <router-outlet></router-outlet>，这样，我们就划分好了第一个模块并处理了部分路由，现在请看浏览器，是不是显示 setup works! 了呢？ Setup 模块在我们开始写界面之前，先简单分析一下。显然，我们需要把用户名和初始化标记存入 local storage，也很显然，我们不应该把 localStorage.set 等代码直接下载组件文件中，一是因为其他 module 和 component 肯定也要访问用户名信息，二是这提高了代码的耦合性——如果我们切换了存储机制，我们需要到处修改——所以我们要在这里引入 local storage service。除此之外，既然多个 module 需要读取同一信息，我们就要对键值 key 做出约定。想清楚了，我们再开始写代码，在命令行中输入： $ ng g s services/local-storage --module app 然后在 local-storage.service.ts 中编码： import { Injectable } from '@angular/core'; const ls = localStorage; @Injectable() export class LocalStorageService { constructor() { } public get<T>(key: string): any { return JSON.parse(ls.getItem(key)) as T; } public getList<T>(key: string) { const before = ls.getItem(key); return before ? (JSON.parse(before) as T[]) : []; } public set(key: string, value: any): void { if (!value && value === undefined) { return; } const arr = JSON.stringify(value); ls.setItem(key, arr); } } 在 local-storage.service.ts 同目录下创建 local-storage.namespace.ts 文件（为了简化后面的教程，我这里就把后面会用到的键全告诉你了）： export const GLOBAL_NAMESPACE = 'today.'; export const APP_INFO_NAMESPACE = GLOBAL_NAMESPACE + 'appInfo.'; export const INIT_FLAG = APP_INFO_NAMESPACE + 'initFlag'; export const START_USING_DATE = APP_INFO_NAMESPACE + 'startUsingDate'; export const USER_INFO_NAMESPACE = GLOBAL_NAMESPACE + 'userInfo.'; export const USERNAME = USER_INFO_NAMESPACE + 'username'; export const AVATAR_CODE = USER_INFO_NAMESPACE + 'avatarCode'; export const TODO_NAMESPACE = GLOBAL_NAMESPACE + 'todo.'; export const TODOS = TODO_NAMESPACE + 'todos'; export const LIST_NAMESPACE = GLOBAL_NAMESPACE + 'list.'; export const LISTS = LIST_NAMESPACE + 'lists'; export const SUMMARY_NAMESPACE = GLOBAL_NAMESPACE + 'summary.'; export const LAST_SUMMARY_DATE = SUMMARY_NAMESPACE + 'lastSummaryDate'; export const SUMMARIES = SUMMARY_NAMESPACE + 'summaries'; 在用 local storage 进行存储的时候使用命名空间是个最佳实践，命名空间可以是应用名加模块名等形式。这样就搞定了 service 了，接下来写组件，在 setup.module.html 当中编写界面内容： <div class="full-screen page-content"> <div class="wrapper"> <img class="logo-img" src="./assets/img/logo.png" alt=""> <div class="text-wrapper"> <h1 class="title-text"> Today </h1> </div> <input nz-input placeholder="请输入你喜欢的用户名" #usernameInput [(ngModel)]="username"> <button nz-button [nzType]="'primary'" (click)="completeSetup()" [disabled]="!usernameInput.value"> 开始 </button> <div class="copy-right"> Copyright © 2018 Wendell Hu </div> </div> </div> 在 setup.module.ts 当中编写界面逻辑： import { Component, HostBinding, OnInit } from '@angular/core'; import { LocalStorageService } from '../../services/local-storage/local-storage.service'; import { USERNAME, INIT_FLAG, START_USING_DATE } from '../../services/local-storage/local-storage.namespace'; import { getTodayTime } from '../../../utils/time'; @Component({ selector: 'app-setup', templateUrl: './setup.component.html', styleUrls: [ './setup.component.less' ] }) export class SetupComponent implements OnInit { username: string; constructor( private store: LocalStorageService ) { } ngOnInit() { } completeSetup(): void { this.store.set(INIT_FLAG, true); this.store.set(START_USING_DATE, getTodayTime()); this.store.set(USERNAME, this.username); } } 完成（CSS 请自行编写，推荐使用 CSS 的各种预处理器）！你可以在这个界面输入用户名，点击按钮之后，你就能在 local storage 检视面板中看到有三个字段存储了值。原文发布时间为：2018年06月02日本文来源：掘金如需转载请联系原作者

发表了文章 2018-07-13

160行代码仿Vue实现极简双向绑定[详细注释]

前言现在的前端面试不管你用的什么框架，总会问你这个框架的双向绑定机制，有的甚至要求你现场实现一个双向绑定出来，那对于没有好好研究过这方面知识的同学来说，当然是很难的，接下来本文用160行代码带你实现一个极简的双向绑定机制。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。本文是在面试题：你能写一个Vue的双向数据绑定吗？的基础上仔细研究+改动，并添加了详细注释，而成的。 demo地址： codepen:仿Vue极简双向绑定 Github:仿Vue极简双向绑定了解Object.defineProperty()：这个API是实现双向绑定的核心，最主要的作用是重写数据的get、set方法。使用方式： let obj = { singer: "周杰伦" }; let value = "青花瓷"; Object.defineProperty(obj, "music", { // value: '七里香', // 设置属性的值下面设置了get set函数所以这里不能设置 configurable: false, // 是否可以删除属性默认不能删除 // writable: true, // 是否可以修改对象下面设置了get set函数所以这里不能设置 enumerable: true, // music是否可以被枚举默认是不能被枚举(遍历) // get,set设置时不能设置writable和value，要一对一对设置，交叉设置/同时存在就会报错 get() { // 获取obj.music的时候就会调用get方法 // let value = "强行设置get的返回值"; // 打开注释读取属性永远都是‘强行设置get的返回值’ return value; }, set(val) { // 将修改的值重新赋给song value = val; } }); console.log(obj.music); // 青花瓷 delete obj.music; // configurable设为false 删除无效 console.log(obj.music); // 青花瓷 obj.music = "听妈妈的话"; console.log(obj.music); // 听妈妈的话 for (let key in obj) { // 默认情况下通过defineProperty定义的属性是不能被枚举(遍历)的 // 需要设置enumerable为true才可以否则只能拿到singer 属性 console.log(key); // singer, music } 示例demo：对，这里有个demo。画一下重点： get,set设置时不能设置writable和value, 他们是一对情侣的存在，交叉设置或同时存在,会报错通过defineProperty设置的属性，默认不能删除，不能遍历，当然你可以通过设置更改他们。 get、set 是函数，可以做的事情很多。兼容性：IE 9,Firefox 4, Chorme 5,Opera 11.6,Safari 5.1 更详细的可以看一下MDN 实现思路： mvvm系列的双向绑定，关键步骤：实现数据监听器Observer，用Object.defineProperty()重写数据的get、set，值更新就在set中通知订阅者更新数据。实现模板编译Compile，深度遍历dom树，对每个元素节点的指令模板进行替换数据以及订阅数据。实现Watch用于连接Observer和Compile，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。 mvvm入口函数，整合以上三者。流程图：这部分讲的很清楚，现在有点懵逼也没关系，看完代码，自己copy下来玩一玩之后，回头再看实现思路，相信会有收获的。具体代码实现： html结构： <div id="app"> <input type="text" v-model="name"> <h3 v-bind="name"></h3> <input type="text" v-model="testData1"> <h3>{{ testData1 }}</h3> <input type="text" v-model="testData2"> <h3>{{ testData2 }}</h3> </div> 看到这个模板，相信用过Vue的同学都不会陌生。调用方法：采用类Vue方式来使用双向绑定： window.onload = function () { var app = new myVue({ el: '#app', // dom data: { // 数据 testData1: '仿Vue', testData2: '极简双向绑定', name: 'OBKoro1' } }) } 创建myVue函数：实际上这里是我们实现思路中的第四步，用于整合数据监听器this._observer()、指令解析器this._compile()以及连接Observer和Compile的_watcherTpl的watch池。 function myVue(options = {}) { // 防止没传，设一个默认值 this.$options = options; // 配置挂载 this.$el = document.querySelector(options.el); // 获取dom this._data = options.data; // 数据挂载 this._watcherTpl = {}; // watcher池 this._observer(this._data); // 传入数据，执行函数，重写数据的get set this._compile(this.$el); // 传入dom，执行函数，编译模板发布订阅 }; Watcher函数: 这是实现思路中的第三步，因为下方数据监听器_observer()需要用到Watcher函数，所以这里就先讲了。像实现思路中所说的，这里起到了连接Observer和Compile的作用：在模板编译_compile()阶段发布订阅在赋值操作的时候，更新视图 // new Watcher() 为this._compile()发布订阅+ 在this._observer()中set(赋值)的时候更新视图 function Watcher(el, vm, val, attr) { this.el = el; // 指令对应的DOM元素 this.vm = vm; // myVue实例 this.val = val; // 指令对应的值 this.attr = attr; // dom获取值，如value获取input的值 / innerHTML获取dom的值 this.update(); // 更新视图 } Watcher.prototype.update = function () { this.el[this.attr] = this.vm._data[this.val]; // 获取data的最新值赋值给dom 更新视图 } 没有看错，代码量就这么多，可能需要把整个代码连接起来，多看几遍才能够理解。实现数据监听器_observer()：实现思路中的第一步，用Object.defineProperty()遍历data重写所有属性的get set。然后在给对象的某个属性赋值的时候，就会触发set。在set中我们可以监听到数据的变化，然后就可以触发watch更新视图。 myVue.prototype._observer = function (obj) { var _this = this; Object.keys(obj).forEach(key => { // 遍历数据 _this._watcherTpl[key] = { // 每个数据的订阅池() _directives: [] }; var value = obj[key]; // 获取属性值 var watcherTpl = _this._watcherTpl[key]; // 数据的订阅池 Object.defineProperty(_this._data, key, { // 双向绑定最重要的部分重写数据的set get configurable: true, // 可以删除 enumerable: true, // 可以遍历 get() { console.log(`${key}获取值：${value}`); return value; // 获取值的时候直接返回 }, set(newVal) { // 改变值的时候触发set console.log(`${key}更新：${newVal}`); if (value !== newVal) { value = newVal; watcherTpl._directives.forEach((item) => { // 遍历订阅池 item.update(); // 遍历所有订阅的地方(v-model+v-bind+{{}}) 触发this._compile()中发布的订阅Watcher 更新视图 }); } } }) }); } 实现Compile 模板编译这里是实现思路中的第三步，让我们来总结一下这里做了哪些事情：首先是深度遍历dom树，遍历每个节点以及子节点。将模板中的变量替换成数据，初始化渲染页面视图。把指令绑定的属性添加到对应的订阅池中一旦数据有变动，收到通知，更新视图。 myVue.prototype._compile = function (el) { var _this = this, nodes = el.children; // 获取app的dom for (var i = 0, len = nodes.length; i < len; i++) { // 遍历dom节点 var node = nodes[i]; if (node.children.length) { _this._compile(node); // 递归深度遍历 dom树 } // 如果有v-model属性，并且元素是INPUT或者TEXTAREA，我们监听它的input事件 if (node.hasAttribute('v-model') && (node.tagName = 'INPUT' || node.tagName == 'TEXTAREA')) { node.addEventListener('input', (function (key) { var attVal = node.getAttribute('v-model'); // 获取v-model绑定的值 _this._watcherTpl[attVal]._directives.push(new Watcher( // 将dom替换成属性的数据并发布订阅在set的时候更新数据 node, _this, attVal, 'value' )); return function () { _this._data[attVal] = nodes[key].value; // input值改变的时候将新值赋给数据触发set=>set触发watch 更新视图 } })(i)); } if (node.hasAttribute('v-bind')) { // v-bind指令 var attrVal = node.getAttribute('v-bind'); // 绑定的data _this._watcherTpl[attrVal]._directives.push(new Watcher( // 将dom替换成属性的数据并发布订阅在set的时候更新数据 node, _this, attrVal, 'innerHTML' )) } var reg = /\{\{\s*([^}]+\S)\s*\}\}/g, txt = node.textContent; // 正则匹配{{}} if (reg.test(txt)) { node.textContent = txt.replace(reg, (matched, placeholder) => { // matched匹配的文本节点包括{{}}, placeholder 是{{}}中间的属性名 var getName = _this._watcherTpl; // 所有绑定watch的数据 getName = getName[placeholder]; // 获取对应watch 数据的值 if (!getName._directives) { // 没有事件池创建事件池 getName._directives = []; } getName._directives.push(new Watcher( // 将dom替换成属性的数据并发布订阅在set的时候更新数据 node, _this, placeholder, 'innerHTML' )); return placeholder.split('.').reduce((val, key) => { return _this._data[key]; // 获取数据的值触发get 返回当前值 }, _this.$el); }); } } } 完整代码&demo地址 GitHub完整代码 codepen:仿Vue极简双向绑定 Github:仿Vue极简双向绑定结语本文只是一个简单的实现双向绑定的方法，主要目的是帮助各位同学理解mvvm框架的双向绑定机制，也并没有很完善，这里还是有很多缺陷，比如：没有实现数据的深度对数据进行get、set等。希望看完本文，大家能有所收获。原文发布时间为：2018年06月25日原文作者：OBKoro1 本文来源：掘金如需转载请联系原作者

提交了问题 2018-07-13

我是管理员_个人页

个人介绍

擅长的技术

探访双十一活动大咖成长史：全职云大使讲述他的上云经验

图数据库GDB——Gremlin介绍及范例 【资料下载】

阿里云图数据库GDB交流 资料下载

云栖社区阿里云图数据库GDB大群建立啦！！！

阿里云安骑士【问答合集】

网络安全【问答合集】

PPT办公软件【问答合集】

Excel办公软件【问答合集】

Word办公软件【问答合集】

爬虫数据管理【问答合集】

图像识别【问答合集】

短信服务【问答合集】

云数据库RDS MySQL版【问答合集】

对象存储oss【问答合集】

云服务器ECS【问答合集】

阿里云虚拟主机【问答合集】

Ruby基础类问答合集

C#语法问答合集

C++面向对象【问答合集】

C++基础语法【问答合集】

C++进阶【问答合集】

实例启动模板

实例生命周期

云服务ECS实例概述

云助手客户端

云服务ECS·云助手

云服务器ECS·镜像

【程序媛晒83行代码】素颜女神，轻松分析用户画像

【程序媛晒83行代码】程序媛，一枚喜欢自己写点宏文件的小姐姐

【程序媛晒83行代码】Java女工程师江小白，偷偷亮代码被老板发现

【程序媛晒83行代码】云栖社区聚能聊专家，背后83行代码的故事

【程序媛晒83行代码】阿里口碑平台技术部工程师，不秀美颜秀代码

【程序媛晒83行代码】阿里口碑精致程序媛， 搜索推荐组的JAVA女工程师

【程序媛晒83行代码】超独特个性小姐姐，happy（被）来(逼)的

【程序媛晒83行代码】认真工作的程序媛原来是这样，你想到了嘛？

【程序媛晒83行代码】单身狗汪化翻译机，把你的话都变成汪星语

【程序媛晒83行代码】被代码耽误的吃货小姐姐，用代码终结选择困难症

新的技术环境下前端面临的挑战和机遇【问答合集】

新人前端如何快速成长【问答合集】

云栖大会 【问答合集】

C语言数组 【问答合集】

C语言数据 【问答合集】

C语言函数 【问答合集】

C语言程序结构 【问答合集】

React-从源码分析React Fiber工作原理

浅解前端必须掌握的算法（五）：堆排序（上）

如何利用vw+rem进行移动端布局

Angular 实战教程 - 手把手教你构建待办事项应用 Today (Part 1)

160行代码仿Vue实现极简双向绑定[详细注释]

前端进阶走进Less详解 【精品问答合集】

探访双十一活动大咖成长史：全职云大使讲述他的上云经验

图数据库GDB——Gremlin介绍及范例 【资料下载】

阿里云图数据库GDB交流 资料下载

云栖社区阿里云图数据库GDB大群建立啦！！！

【程序媛晒83行代码】素颜女神，轻松分析用户画像

【程序媛晒83行代码】程序媛，一枚喜欢自己写点宏文件的小姐姐

【程序媛晒83行代码】Java女工程师江小白，偷偷亮代码被老板发现

【程序媛晒83行代码】云栖社区聚能聊专家，背后83行代码的故事

【程序媛晒83行代码】阿里口碑平台技术部工程师，不秀美颜秀代码

【程序媛晒83行代码】阿里口碑精致程序媛， 搜索推荐组的JAVA女工程师

【程序媛晒83行代码】超独特个性小姐姐，happy（被）来(逼)的

【程序媛晒83行代码】认真工作的程序媛原来是这样，你想到了嘛？

【程序媛晒83行代码】单身狗汪化翻译机，把你的话都变成汪星语

【程序媛晒83行代码】被代码耽误的吃货小姐姐，用代码终结选择困难症

React-从源码分析React Fiber工作原理

浅解前端必须掌握的算法（五）：堆排序（上）

如何利用vw+rem进行移动端布局

Angular 实战教程 - 手把手教你构建待办事项应用 Today (Part 1)

160行代码仿Vue实现极简双向绑定[详细注释]

如何自动化重构前 ES6 老代码

阿里云安骑士【问答合集】

网络安全【问答合集】

PPT办公软件【问答合集】

Excel办公软件【问答合集】

Word办公软件【问答合集】

爬虫数据管理【问答合集】

图像识别【问答合集】

图数据库GDB——Gremlin介绍及范例【资料下载】

阿里云图数据库GDB交流资料下载

【程序媛晒83行代码】阿里口碑精致程序媛，搜索推荐组的JAVA女工程师

云栖大会【问答合集】

C语言数组【问答合集】

C语言数据【问答合集】

C语言函数【问答合集】

C语言程序结构【问答合集】

前端进阶走进Less详解【精品问答合集】

图数据库GDB——Gremlin介绍及范例【资料下载】

阿里云图数据库GDB交流资料下载

【程序媛晒83行代码】阿里口碑精致程序媛，搜索推荐组的JAVA女工程师