风起叶落，若是不知，岂会心动！

持续更新中！！！！声明：以下所有文章，均为原创，是在阅读(抄)源码过程中的点滴记录，文笔有限，只是个人记录，分享出来希望有所用处。抄写的仓库：https://github.com/gcclll/stb-vue-next.git 该仓库为学习时，从 0 开始，vue-next 的第一个 commit 开始抄下来的源码仓库，目前学习目的已达，所以不再更新了，到停便时通过了所有有关的官方用例。所有流程图，脑图链接：https://github.com/gcclll/cheng92.com/tree/m

更多 vue3 源码分析尽在：www.cheng92.com/vue该系列文章，均以测试用例通过为基准一步步实现一个 vue3 源码副本(学习)。文字比较长，如果不想看文字可直接转到这里看脑图简介reactivity 是 vue next 里面通过 proxy + reflect 实现的响应式模块。源码路径： packages/reactivity入口文件：packages/reactivity/src/index.ts疑问点解答：shallowReactive 相当于浅复制，只针对

简介这段时间公司上线了个印尼的项目，通过 CMD + seajs + 模版来实现的一个单页应用，然后经过压缩打包，跟起 BUG 来那种痛苦简直是： 不想说，就对了，一万个nnnnnnnnnnnnnm 。吐槽归吐槽，现在前端模块化，工程化开发越来越流行，只能说公司还停留在原生硬编程阶段是比较落后的。这个代码还是有很多值得学习的地方的（哪个厂家的就不透露了，你懂的~~~）。比如今天碰到的跟 Promis

前言本篇是该书系列最后一篇，本书所有涉及的功能和其中所涉及的知识点，基本已经学习完成。大体上有以下几个部分简单的页面布局第一个部分首先是进行简单的页面，和其布局的设计，并且采用的是模块化思想，组件组装器概念，因此每个模块都有自己的页面代码，在加载模块的时候将其渲染出来。功能添加和功能容器，或者说模块容器及其子模块这部分主要涉及，模块容器 shell 和页面子模块的完成，这部分主要值得学习的是该单

正多边形绘制今天上网的时候无意中看到好多几何图形，突然萌生出自己搞个生成器去绘制各种多边形，想想就开干了，先从简单的正多边形开始。如下：正多边形绘制实现支持最少边数：3，最大：不限制；支持链式重复绘制，从而可以组合成稍复杂点的图像；支持单图形动画（顺时针，逆时针，顺逆时针互切，更多的动画有待完善）；绘制对象：// regular-polygon.jsfunction RegularPolygon(

1 前言前面介绍了 socket.io 和 express 的使用，这节继续分析 mongodb 在该书中的使用，这篇会简单的记录下 mongodb 的使用，更详细的部分会在 mongodb 系列中记录。2 安装安装和其它类似，通过 npm 安装就可以直接使用了，不过该书使用的应该是比较早的版本，书中代码在 mongodb 2.+ 版本中已经没法运行了，所以将会以最新版的语法修改该书中的示例代码进行

前面学习了下 Express 框架，大概有了个了解了，基于 node.js 服务器算是简单搭建了个，完成了各种中间件使用，路由功能，那么接下来就是通信这块了，包括监听文件或数据的变化，和事件的监听和处理了，接下来就用到 Socket.io 这个东西了，刚接触看名字 socket 用来服务器到客户端的通信没错了！！！Socket.io首先熟悉下该书的 socket 内容，主要包括，建立连接，监听服务，

Canvas 示例：时钟先来看下最终效果图：星期天趁空隙实现了个简单的一个时钟，下面回顾下其实现原理，和遇到的问题，对 H5 这块还是个菜鸟，只有不断通过练习去熟悉了。设计凡是从构思开始，而不是盲目的去实现代码。设计图：从上图中该时钟分为几个部分画布，背景蓝色部分；第一个圆：时钟边框，最外层 8 个像素的宽边框；第二个圆：点圆圈，代表着时间划分，每两个点之间代表 12 分钟（60 / 5 =

Chat 聊天模块这个模块应该就是该书全篇的唯一一个模块吧，后面几乎所有的篇章都围绕这个模块去实现的，不过就通过这一个模块的实现和上线，也能体现单页应用开发到发布上线的整个过程，毕竟后面的数据，通信，发布什么的都是通用的东西，应用其他部分完全可以参照这个‘聊天模块’去实现。跟着作者的思路走一遍，也能熟知个大概。先看下成型图吧，会不会有种很老旧XP时代的感觉，囧！！chat 内容该聊天模块整体分以下几

核心模块 Shell该模块是整个单页应用的核心模块，也可以说是顶级模块，用来组装和管理其他子模块的模块，其实该书中的所有模块都有模版，作者将其放到了附录里面，东西也不多主要就这几块：模块配置jquery 缓存组件数据模块初始化和一些其他的功能方法等例如：Shell模块就包含以下内容模块配置模块基本配置对象：configMap例如：shell 模块的基本配置var configMap =

1 marqueeto simulate functions of marquee markup因公司业务需要，得弄个跑马灯的效果，但是奈何机顶盒的兼容性差到爆，连 marquee 标签得一些属性都不支持（暂且不谈该标签被废弃一事）具体需求是：实现基本的滚动效果，从右到左实现滚动次数的统计，在重新进入页面的时候需要衔接上次的次数去滚动（不能超过滚动总次数）次数简单， marquee 的 loo

Table of Contents来源JavaScript 引擎管道(Engine Pipeline)JavaScript 引擎中的解释器和编译器管道(interpreter/compiler pipelines)JavaScript 对象模型(Object Model)优化属性的访问(Optimizing property access) 对象属性的访问方式：同结构对象存储优化...

Table of Contents直接调用 Function() Function(p1, p2, ..., pn, body)Function 的构造器对象(The Function Constructor) new Function(p1, ..., pn, body) 执行过程 文字描述伪码图解构造函数的属性(Properties of The Function Cons...

Table of ContentsparseInt(string, radix)函数处理过程：伪码图解parseInt(string, radix)根据提供的精度 radix 将第一个参数转换成数值型。开头的空格会被忽略掉。radix 的值值描述undefined 或 0radix 会被当做 10 来处理，除了 0x o...

Table of Contents前言Turn-Page-RefreshBuildUsage create `turn.List` instancelisten key handlerFunctions updateFocus, requiredupdateTpl, requiredclearTpl, required, clear the list contentcal...

Table of Contents15 标准内置对象(Standard Built-in ECMAScript Objects) 15.5 数组对象(Array) 15.4.4 数组原型对象的属性(Array.prototype) 15.4.4.19 Array.prototype.map(callbackFn[, thisArg])15 标准内置对象(Standard ...

目录创建对象 工厂模式构造函数模式原型模式构造 + 原型模式动态原型模式寄生构造函数模式稳妥构造函数模式继承 简单实例借用构造函数组合继承原型式继承寄生式继承寄生组合式继承总结 对象创建继承创建对象工厂模式工厂模式使用 new Object 来创建一个基对象，然后再这个基对象上追加基本的属性，然后将该对象返回。function ...

Let 知识梳理变量提升问题let 详解 变量封禁let 是否提升问题示例一(let + 立即执行函数)：示例二(let + for 循环)：变量提升问题es6-let-var-function-hoist从上图的中得出结论：let 的【创建】过程被提升了（在执行之前就创建了变量），但是【初始化】和【赋值】并没有被提升。var 的【创建】，【初始化】被...

前言（罗里吧嗦）：有一段时间没记录点东西了，主要公司最近有两个新 IPTV 项目上线，问题很多，每天都在忙着处理BUG，对该书的阅读暂停了一会。本篇为第六篇，至于第五篇为什么没有，因为还没写，书和代码研究过了，只是还没记录下来，加上第五篇涉及代码比较多，因此先跳过，来学习下服务器的部分了，第五篇待有空会补上。开始正题1 创建简单服务器最简单的 Node 服务器端程序// 引用 http 模块var

单页WEB应用（一），结构和布局前两天买了两本书，一本《基于MVC的Javascript Web富应用开发》这本拿到手第二天大概的翻了一遍，没怎么深入去看，主要前面讲的基本的一些东西，后面的有些还没太看懂，所以大概的过了一遍；目前主要看的是这第二本《单页Web应用》，这个看到了第三章 Shell开发，看到这里代码也走了一遍，今天算是纠结在 uriAnchor 上纠结了一整天，最后才发现原来只是一个属

Model 数据模型模块该模块属于该书项目的数据模块，其中使用了三个插件，两个 jQuery 事件插件，一个数据库管理插件，分别是gevent：主要用来实现用户自定义的事件；ue：该插件和移动端触摸事件有关；taffyDb：数据库管理插件以上三个插件目前只是使用到了 gevent 和 taffyDb 两个，第一个主要用来实现用户登入登出和用户更新等自定义事件，其实现原来有待研究，第二个就是数

Javascript算法练习（二）计算一串字符串中最长的单词，及其长度和索引function findLongestWord( str ) { if ( !str ) return "Null String !"; var aStr = str.split(" "), iArrLen = aStr.length, oMax

Javascript算法练习（一）反转字符串方法一：split() + unshift() + join()// 将__string反转返回function myReverse ( __string ) { if ( !__string ) return; var aTarget = __string.split(""), // 将__string分割成单个字符，保存到数

Javascript算法练习（五）荒废里几个星期没学习了，还是要持之以恒才行，这次小问题一个，弄了几个小函数，本来目的很简单，就是想从数组中找出最大值和最小值，然后将这两个值之间的数相加起来。本来挺简单的事情，写着写着需要考虑的事情就越多……，记录下^_^!!!sumAllBetweenMinToMax(__arr)，主要就这个函数了，下面的都是为它服务的，貌似服务很周到 - -！// -----

Javascript算法练习（四）将数组分割成等长数组，然后组合成一个二维数组返回循环 + slice + push函数名：function chunkArrayInGroups(arr, size)；arr: 需要被分割的数组，size：指定等分数组的长；情况分析：这个方法的实现主要考虑两个方面 数组长被size整除，即刚好能分成n个等分数组；不能整除，即最后一个数组的长度是数组长与si

递归概念：函数通过直接调用自身，或者两个函数之间的互相调用，来达到一定的目的，比如排序，阶乘等简单的递归 阶乘function factorial(n) { if (n == 0) { return 1; } else { return n * factorial(n - 1); }}递归实现排序/* 排序且合并数组 */

Javascript程序设计第三版，chapter4-5第四章 变量、作用域、内存问题4.1 变量及类型类型检测（typeof：基本类型与instanceof：引用类型） typeof检测基本类型：string, number, boolean, undefined, object. // 使用var s = 'hello';var i = 0;var n = null;va

Javascript程序设计 Chapter6 - 面向对象（一）对象概念数据属性和访问器属性数据属性 理解：可以直接访问和设置的属性、 (直接定义在对象上的属性的特性默认为：true, value为属性值）Configurable : 是否可以delete／修改特性/改为访问器属性Enumerable : 是否能用for-in返回属性Writable : 值是否可以修改Valu

【TDG-读书笔记】6.1 枚举对象属性的工具函数extend(o, p) 恶性合并，用p中的同名属性覆盖掉o中的同名属性var p1 = { "name" : "Tom", "age" : 29 };var p2 = { "name" : "July", "weight" : 110 };// 恶性合并，即：存在同名属性时，覆盖掉o中的属性function extend ( o, p ) {

Javascript算法练习（六）diffArray：取出两个数组中非共有的元素，组合成新数组返回 练习filter的使用 较简单的方法就是调用filter去过滤出两个数组中彼此不存在的元素filter + concat/** * 获取两个数组中非共有部分 * @param {[type]} arr1 [description] * @param {[type]} arr2

Javascript算法练习（八）updateInventory，更新库存，即用新的数组数据去更新老的数组数据思路：遍历新数组中的数据更新老数据：根据名称去老数组中查找，找到了就用对应的数量与老的相加；添加新数据：如果没找就将新数组中的数据添加到老数组中；/** * 11. 用第二个数组的数据去更新第一个数组数据(更新库存) * @param {Array} oldArr 原始数据 *

Javascript算法练习（八）updateInventory，更新库存，即用新的数组数据去更新老的数组数据思路：遍历新数组中的数据更新老数据：根据名称去老数组中查找，找到了就用对应的数量与老的相加；添加新数据：如果没找就将新数组中的数据添加到老数组中；/** * 11. 用第二个数组的数据去更新第一个数组数据(更新库存) * @param {Array} oldArr 原始数据 *

新年快乐，开工咯~~！！2017年，新年上班第一天，大家都忙着串领导办公室领红包，我这人比较懒，就工位旁边领导领了个，闲着无聊，来写这新年第一遍博客，程序其实是去年回家前搞定的，今天算是给补上这篇记录（表情：害羞~~）！祝大家新年好，新年快乐，新年升职加薪~ ~ ！微信小计算器前言：这个计算器承接该文章中的计算器的继续和延伸，同时将其做了稍微调整移植到了微信上，经测试微信运行正常。主要修改点：去掉

微信小程序，学习笔记（二）样式（WXSS）及一个简单的小测试用例WXSS（WeiXin Style Sheets）这东西其实是微信自己的一种 CSS 语言，大部分都还是 CSS 语法，也有自己的东西，主要针对微信自己的 WXML 标记语言而生的，用来丰富其组件的显示效果。WXSS 相对 CSS 并没有太大差别，只是需要注意以下几点rpx 像素单位，具体值是：1rpx == 0.5px == 1物理

微信小程序，学习笔记（一）框架，视图层学习链接：http://www.w3cschool.cn/weixinapp/因为其实并非原创，但是并没有什么好的类别可选，所以修改成：“翻译”了。熟悉文档结构介绍--- [D] pages--- [D] utils--- [F] app.js--- [F] app.json--- [F] app.wxss全局变量、对象、方法普通类型对象App应用程序

【翻译】Rollup.js前端模块化打包工具入门Rollup.js向导，入门指引概念：什么是Rollup.js？　　最直接的解释就是，Rollup是前端模块化的一个打包工具，将模块文件根据命令或者根据rollup.config.js配置文件将多个模块文件打包成一个文件，然后就可以通过HTML的<script>标签去导入这一个结果文件即可，从而使代码最小化，并且Rollup会自动过滤掉那些没有被使用过

前段模块化基础概念前端模块化其实就是将一个完整的单一的功能整合起来形成单独的一个功能组件，当需要用的的时候只需要加载这个组件，然后便可以通过该组件唯一的名称去使用其中的内容。主流模块化框架commonJSAMDCMDUMDES6规范commonJScommonJS模块化定义模块：即一个单独的文件就是一个模块，切该文件中的作用域独立，当中的变量是无法被其他文件引用的，如果要使用需要将其

Javascript计算器（一） -> 添加时间在屏显区左上角添加时间显示效果图如下：代码初始化// 计算器初始化Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate();};时间显示// 在屏显区左上角显示时间日期Calculator.prototype.

小型JavaScript计算器自己寻思出的解决方案，比较笨拙的方法，虽然完成了但是还有不少bug，用的方法也不是最有效的，基本功能算是完成了，一些小的细节地方也考虑到了，但是还有其他的细节需要处理。总体设计思路是，先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码；面板(main-board)面板整体尺寸设计标题栏(board-title)字体： font: 3

Javascript算法练习（七）这两天碰到个小问题，跟斐波那契数列有关，顺便也回顾下回调函数的使用。sumOddFibonacciNumber： 得到小于number的所有斐波那契数的和此方法实现其实就是涉及到递归的使用，顺便回顾下。递归的三种方式直接递归法：容易引起内存泄漏，效率底下，慎用闭包： 能很好的练习js闭包用法，虽然效率不是最高，但是推荐使用for循环 效率最