08 2021 档案

设计模式：装饰器
摘要：概念：装饰器作用是在在不会影响原有方法或类的功能的前提下，对它们进行增强。 属于AOP面向切面编程下的一种设计方案，更“优雅”地把“辅助功能逻辑”从“业务逻辑”中分离。（ 比如将日志记录，性能统计，安全控制，异常处理等代码从业务逻辑代码中解耦出来出来）。 本质：装饰器语法本质是 Object.def 阅读全文
posted @ 2021-08-31 11:19 break_happy 阅读(104) 评论(0) 推荐(0)
基于vue 看mvvm 框架设计基本思路
摘要：MVVM（model<->viewmodel<->view） 数据双向绑定（data-binding）是mvvm的核心思想，View 和 Model 之间没有联系，通过 ViewModel 进行交互。用户操作 View，ViewModel 感知到变化，通知 Model 发生相应改变；反之当 Mode 阅读全文
posted @ 2021-08-18 23:32 break_happy 阅读(146) 评论(0) 推荐(0)
nodejs 进程总结
摘要：child_process child_process.spawn(command, args,options) 支持 stream 方式操作输入输出，适合数据量大的情况；可以执行任何命令；不创建 V8 实例；可以创建常驻的后台进程 对于异步命令不支持callback, 可以使用process.on 阅读全文
posted @ 2021-08-18 21:15 break_happy 阅读(175) 评论(0) 推荐(0)
es7 元编程 （Meta-Programming）
摘要：元编程（Meta-Programming）是一种编程技巧，它指的是程序可以操作自身或其它代码或语言结构，而不是仅仅操作数据。 在ES7 中提供了 Reflect API, Proxies, Decorators 等特性，可以被使用来实现元编程。 Reflect API : ES7中的Reflect 阅读全文
posted @ 2021-08-07 12:20 break_happy 阅读(80) 评论(0) 推荐(0)
proxy 数据帧听
摘要：vue3 的响应式编程，数据拦截方案采用proxy 实现。 基础版 proxy只实现了对象顶层的数据监听。子项监听需要我们自己实现。 demo所示设置a2的值时，proxy会触发一次对a1的get，并不会触发set操作。 const data = { a1: { a2: 1, }, }; const 阅读全文
posted @ 2021-08-06 14:16 break_happy 阅读(155) 评论(0) 推荐(0)
vue 指令的设计实现
摘要：与angular 不同，vue的指令不是通过依赖注入实现的，而是通过全局的注册系统。指令通过调用 Vue 实例的 Vue.directive 方法并传入指令的名称和定义来注册。 一旦注册，该指令可以在该Vue实例或其后代渲染的任何模板中使用，只需在其名称前加上v-前缀即可。 指令定义是一个JavaS 阅读全文
posted @ 2021-08-06 09:02 break_happy 阅读(53) 评论(0) 推荐(0)
react hook 简单实现
摘要：基础版本usestate var _state; // function useState(initialValue) { _state = _state | initialValue; // function setState(newState) { _state = newState; //re 阅读全文
posted @ 2021-08-05 09:15 break_happy 阅读(123) 评论(0) 推荐(0)
从 Webpack Tapable 详解
摘要：Webpack本质基于事件流，流程就是将各个插件串联执行，实现此功能的核心就是tapable。 tapable 是一个类似于 Node.js 中的 EventEmitter的库，更专注于自定义事件的触发和处理。webpack 通过 tapable 将实现与流程解耦，所有具体实现通过插件的形式存在。 阅读全文
posted @ 2021-08-05 08:06 break_happy 阅读(110) 评论(0) 推荐(0)
Media Source Extensions播放视频流
摘要：官方文档： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource Media Source Extensions ：媒体源扩展 API（MSE） 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 Jav 阅读全文
posted @ 2021-08-03 15:30 break_happy 阅读(774) 评论(0) 推荐(0)
基于canvas+webrtc 实现流式渲染 1
摘要：官方文档 webrtc ：https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection 流式渲染最经典的场景是来自于steam 游戏， 可以通过云服务做gpu的计算，最后将视频流到客户端上（看上去很黑科技，其实不好用...）。 阅读全文
posted @ 2021-08-02 12:50 break_happy 阅读(1997) 评论(0) 推荐(0)
Service worker性能优化 &workbox
摘要：定义： Service worke 是一个浏览器提供的独立线程，独立于当前网页的进程，在js主线程注册完之后，，开发者可以用编程的方式自己控制关联的页面，拦截并修改访问和资源请求，不局限于图片，甚至是ajax请求等，细粒度地缓存资源 特点 独立的一个线程（不影响页面UI渲染） 独立 生命周期 独立的 阅读全文
posted @ 2021-08-02 08:53 break_happy 阅读(410) 评论(0) 推荐(0)
WebSocket 详解
摘要：HTTP 协议在设计上就是一个单向的网络协议，服务器只能被动的接收请求，然后返回相应的数据。对于需要双向通信的场景，虽然可以通过轮询，Comet 等方式实现，但每次链接都要三次握手，效率低下。 与http比较： 1.都基于 TCP 的、应用层的可靠性传输协议 2.WebSocket 在握手时的数据是 阅读全文
posted @ 2021-08-02 07:26 break_happy 阅读(287) 评论(0) 推荐(0)
无头浏览器-puppeteer
摘要：Puppeteer puppeteer是一个node库，提供了一组用来操纵Chrome的API（默认headless也就是无UI的chrome，也可以配置为有UI） 有点类似于PhantomJS，但Puppeteer是Chrome官方团队进行维护的，前景更好。 使用Puppeteer，相当于同时具有 阅读全文
posted @ 2021-08-02 07:02 break_happy 阅读(685) 评论(0) 推荐(0)
基于canvas实现合图引擎 设计思路
摘要：合图引擎基于json数据 解析，比较与htmltocanvas 先生成html再生成canva的解决方案， 渲染过程更可控，定制化成都高。 import Dev from '@ali/hetuCanva/dist/dev'; const data = { "name": "draw edit act 阅读全文
posted @ 2021-08-01 14:56 break_happy 阅读(151) 评论(0) 推荐(0)