随笔分类 - JavaScript
摘要：流畅性 本篇是基于 FDCon2019 上《让你的网页更丝滑by刘博文》的复盘文。该课题也是博主感兴趣的领域, 后续会结合 React 的 Schedule 与该文进行进一步整合, "个人博客" 被动交互: animation 主动交互: 鼠标、键盘 被动交互 当前市面上的设备频率在 60 HZ 以
阅读全文
摘要：该系列会有 3 篇文章，分别介绍什么是函数式编程、剖析函数式编程库、以及函数式编程在 React 中的应用，欢迎关注我的 "blog" 命令式编程和声明式编程 拿泡茶这个事例进行区分命令式编程和声明式编程 命令式编程 1.烧开水(为第一人称) 2.拿个茶杯 3.放茶叶 4.冲水 声明式编程 1.给我
阅读全文
摘要：本文提供了按需加载了几种思路，并给出了相应实践。 "原文地址" 为了探究按需加载的本质，选择了对先前造的轮子 "diana" 进行实验。 实验一：全量引用 打包体积结果如下： 测试的是 "diana 0.4.1" 实验二：部分引用 打包体积结果如下： 经过测试，发现两种方式打包后的体积都为 21 k
阅读全文
摘要：常见数据结构的 JavaScript 实现系列 Stack Queue List Set Dictionary Hash Table Binary Tree Graph### 前端与数据结构 数据结构在开发中是一种编程思想的提炼，无关于用何种语言开发或者是哪种端开发。下列将笔者涉猎到的与前端相关的数
阅读全文
摘要：看源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...) "从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM" "从
阅读全文
摘要：看源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...) "从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM" "从
阅读全文
摘要：Promise 研究 Promise 的动机大体有以下几点： 对其 api 的不熟悉以及对实现机制的好奇; 很多库(比如 fetch)是基于 Promise 封装的，那么要了解这些库的前置条件得先熟悉 Promise; 要了解其它更为高级的异步操作得先熟悉 Promise; 基于这些目的，实践了一个
阅读全文
摘要：开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点，从而对它们有比较清晰的认知。 开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点
阅读全文
摘要：随着 ES6 和 TypeScript 中类的引入，在某些场景需要在不改变原有类和类属性的基础上扩展些功能，这也是装饰器出现的原因。 装饰器简介 作为一种可以动态增删功能模块的模式(比如 "redux 的中间件机制" )，装饰器同样具有很强的动态灵活性，只需在类或类属性之前加上 就完成了相应的类或类
阅读全文
摘要：本文首发于 "my blog" 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用，本文会通过一个小 demo 来讲述为什么会引人数据状态库。 从 MVC 到 MVVM 模式说起 传统 MVC 架构(如 JSP)在当今移动端流量寸土寸金的年代一个比较头疼的问题
阅读全文
摘要：更好的阅读体验，点击 "原文地址" 瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内外网站都有一定规模的使用，比如 "pinterest" 、 "花瓣网" 等等。那么接下来就基于这个特点开始瀑布流探索之旅。 <! more 基础功能实现 首先我们定义好一个有 20 张图片的容器
阅读全文
摘要：项目地址: "diana" 文档地址: "http://muyunyun.cn/diana/" 造轮子的意义 为啥已经有如此多的前端工具类库还要自己造轮子呢？个人认为有以下几个观点吧： 定制性强，能根据自己的需求为主导延伸开发。万一一不小心还能帮到别人（比如 React 库）； 纸上得来终觉浅，很多
阅读全文
摘要：本文首发在个人博客： "http://muyunyun.cn/posts/7b9fdc87/" 提到 Node.js, 我们脑海就会浮现异步、非阻塞、单线程等关键词，进一步我们还会想到 buffer、模块机制、事件循环、进程、V8、libuv 等知识点。本文起初旨在理顺 Node.js 以上易混淆概
阅读全文
摘要：本文首发在我的个人博客：http://muyunyun.cn/posts/66a54fc2/ 文中的案例代码已经上传到 "TypeScript" TypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集，为 JavaScript 的生态增加了类型机制，并最终将代码编译为纯粹
阅读全文
摘要：本文首发在我的个人博客：http://muyunyun.cn/ 《你不知道的JavaScript》系列丛书给出了很多颠覆以往对JavaScript认知的点, 读完上卷，受益匪浅，于是对其精华的知识点进行了梳理。 什么是作用域 作用域是一套规则，用于确定在何处以及如何查找变量。 编译原理 Jav
阅读全文
摘要：for循环 JavaScript 提供多种遍历语法。最原始的写法就是for循环。 缺点：这种写法比较麻烦 forEach 数组提供内置的forEach方法 缺点：这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。 for...in for…in 用于遍历
阅读全文
摘要：写完正则表达式以后在浏览器上检测实在是不方便，于是就写了一个JS正则小工具，大大地提高了学习效率。学习之余用正则实现了一个highlight高亮demo,欢迎交流。 什么是正则表达式？ 简单的说：正则表达式（Regular Expression）是一种处理字符串匹配的语言； 正则表达式描述了一种字符
阅读全文
摘要：由于公司的前端业务全部基于ES6开发，于是给自己开个小灶补补ES6的一些常用特性。原来打算花两天学习ES6的，结果花了3天才勉强过了一遍阮老师的ES6标准入门，下面罗列一些自己经常用到的ES6特性。 Default Parameters（默认参数） 还记得我们以前不得不通过下面方式来定义默认参数：
阅读全文
摘要：由于浏览器的原生支持(无需安装任何插件),用JS来学习数据结构和算法也许比c更加便捷些。因为只需一个浏览器就能啪啪啪的调试了。比如下图我学习归并排序算法时，只看代码感觉怎么都理解不了，但是结合chrome自带的断点调试功能，我便很快理解了其中的思想。 冒泡排序 冒泡排序比较任何两个相邻的项,如果第一
阅读全文
摘要：随着该项目的发布到线上(小打小闹)，即将又要开启另一段崭新的旅程。强迫自己停下来写写所学所得，个人认为总结和分享是一种很棒的学习方式。那让我们先来瞧瞧项目长的什么样。如果着急要源码的朋友，可以下拉到最后~~ 微信端部分展现 从微信端进入网页端的效果(这部分还需要优化(*^__^*)) 但是这图是真的
阅读全文
