博客列表
- Home /
- 博客列表
架构设计笔记
该文章将目前可能能用到的架构理念,概念统一汇总整理~
多态
- 多态:多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结 果。换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈。
- 多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来,也就是将“不变的事 物”与 “可能改变的事物”分离开来。
- 把不变的部分隔离出来,把可变的部分封装起来,这给予了我们 扩展程序的能力
- 使用继承来得到多态效果,是让对象表现出多态性的最常用手段。
高阶函数实现AOP
把这些功能抽离出来之后, 再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块。
Read More
从贝塞尔曲线的计算感受数学建模的魅力
最近在做前端可视化相关的东西,在完成动画效果时,遇到一个不是很好处理的问题,需要让一个元素在画布上以曲线的轨迹进行运动。因为动画这块之前基本也没有怎么接触过,做的也都是简单的线性动画效果,所以碰到这个需求点的时候觉得是有点难度的。
其实,要真的实现按照一定曲线轨迹运动的效果倒也不难,毕竟圆、椭圆方程在平时做布局计算的时候用的也挺多的。但是,用圆或者椭圆计算曲线相当于是找了个特殊场景,不具备通用性;另一方面,说到曲线的绘制,贝塞尔曲线是绕不开的,这也是非常值得考虑的方案。
动画帧计算
一段动画实际上是由多个静态帧组成的,当帧率达到人眼不可分辨的程度时(比如 60 FPS),就感觉像是一个无缝连续的视频在流畅的播放。而某一静态帧的状态用数学公式来表达如下:
y = F(t) (0 <= t <= 1)
那么对于一个物体从 x0 运动到 x1,如何计算 t 时刻的位置?按照我的思路来看,可以转化为以下数学公式:
Read More微信小程序与钉钉小程序开发流程
开发小程序有很多问题特此记录一下~~~
小程序开发(移动端开发)兼容注意事项:
ios不兼容yyyy-MM-dd HH:mm:ss这种时间格式,需要将-替换成/,在安卓下两种格式都支持。
使用window.location.reload()方法刷新页面,在安卓下无效。
正常情况下使用window.location.replace()方法跳转页面时会覆盖当前页面而不会生成新的history记录,但是在安卓下依然会生成history记录。
ios中,父元素设置border-radius和overflow:hidden实现圆角。如果此时子元素使用了transform属性会导致父元素的圆角失效。
小程序中使用web-view打开pdf, IOS 可以正常打开,Android 打开为空白;
Read More
Web 字体加载对 DOM 位置的影响
由于公司的业务会用到自己设计师定制的 Web 字体,所以一般在组件开发过程中会利用 CSS 引用该字体(@font-face),前段时间发现一个线上问题:在部分 iOS 机型上,DOM 元素的位置发生了错位。
首先,对于问题复现的必要条件做了分析,为以下几个方面
Read More利用脚本执行 `tsc` 忽略类型检查错误
在发布 npm 包时添加对 TypeScript 类型定义文件的支持会让用户的使用体验增色不少,TypeScript 官方提供了 tsc --emitDeclarationOnly
命令用来生成类型定义文件(.d.ts
)。但是,该命令会同时执行类型检查,遇到错误时会报错中断命令行进程,这就使其无法直接集成在 CI 环节在发布 npm 包时自动执行生成类型定义文件的操作。当然,一个解决办法就是解决掉代码中所有的类型检查错误即可,既然讨论到这个问题,必然不会花费额外精力去解决一些历史遗留问题。
前端工程化:对于构建工具链的简单思考
前端工程化是在做与业务开发完全不同的事情,旨在解决软件工程领域与开发者密切相关的问题,通常会将其与基建开发、DevOps 放在一起讨论。前端开发是复杂的,其结合了 HTML/CSS/JavaScript 3 种语言,甚至还有很多其超集,没有开箱即用的工具链,不像 Java Web 开发、Android 开发等等有官方或者商业领域非常成熟的工具可以利用,一切都源于开源社区的从 0 开始构建。正因如此,前端工程化领域百花齐放,开放与创新展现的淋漓尽致,这也是前端开发者了解学习软件工程的机会。
Read More桥接模式:跨平台的事件机制设计
对于 Web 的图表组件库来说,一些功能比较强大的开源库,渲染层可以支持 DOM、SVG、Canvas、WebGL 等多个平台的环境,而图表库的很多功能的实现都和渲染层紧密相关。
最近,在参考学习一些开源的图表组件库时,发现在跨平台设计中,事件机制的实现很有意思,所以在这里以最简化的代码来解释和记录一下这个方案。如果要用经典的软件设计模式来解释,大概就是桥接模式了。
桥接模式(Bridge Pattern) 将一个功能的实现拆分为抽象(Abstraction)和实现(Implementor),让其相互独立的扩展和定义,借助该模式可以设计一种平台无关的软件架构。
事件机制
事件机制是软件设计中最基础、最为常见的一种设计,对于 Web 图表组件库来说要提供一些处理用户交互(例如点击、拖动、右键点击等)的机制。一个典型的事件模型类如下:
Read More如何更好的维护开源项目
一直以来,开源精神被开发者所推崇,开源项目为开发者提供了不用付出除时间以外任何成本就可以学习前沿技术的最佳途径,另一方面,我们应该思考开源为何会成功,在全球开发者参与协作的情况下代码仓库为何能保持整洁、不出现大规模冲突而奔溃,上下游依赖如何管理,这背后有既定的规范进行强约束,也有一系列社区工具来完成复杂而有价值的工作。所以,从参与或者维护开源项目的角度来看,这些社区公认的最佳实践值得我们了解,学习这些东西也能在一定程度上提高我们管理项目的能力。
以下内容属于经验积累,持续更新,仅供参考。
许可证(License)
代码本质上是开发者的创作成果,具有专利权,所以开发者应该意识到自己所享有的权利,同时在使用其他人所提供的代码时避免侵权。作为开源项目,有必要在开源之前选择一个合适的许可证,提前声明权利和义务(一般作为单独的 LICENSE 文本文件保存),避免在后期陷入麻烦之中,GitHub 官方为我们提供了一个简单的工具站点:
Read MoreTypeScript:扩展第三方库的类型定义
TypeScript 作为 JavaScript 的超集,为 Web 开发带来了强类型语言和类似代码智能提示这种良好的开发体验,而代码提示依赖于类型定义文件。类型定义文件的发展也经历了一个逐步演变的过程,从最初基于 JavaScript 编写的 npm 包,通过社区方案来引入类型定义包,再到目前多数模块基于 TypeScript 编写并在发布时带上类型定义文件这种最佳方案,开发者体验得到进一步的提升。
Read MoreCategories
- Cookie ( 1 )
- CPU ( 1 )
- DOM ( 1 )
- Jest ( 1 )
- Linux ( 3 )
- LocalStorage ( 1 )
- MPU ( 1 )
- Nginx ( 1 )
- Polyfill ( 1 )
- Puppeteer ( 1 )
- React ( 1 )
- SessionStorage ( 1 )
- SourceMap ( 1 )
- SPA ( 1 )
- Web ( 1 )
- Web前端 ( 14 )
- 互联网名词 ( 1 )
- 内存 ( 1 )
- 前端 ( 2 )
- 动画 ( 1 )
- 商业 ( 1 )
- 安全 ( 1 )
- 工具 ( 4 )
- 应用状态管理 ( 1 )
- 性能优化 ( 4 )
- 技巧 ( 1 )
- 操作系统 ( 2 )
- 数学 ( 1 )
- 服务器 ( 1 )
- 构建工具链 ( 1 )
- 架构设计 ( 1 )
- 核心概念 ( 1 )
- 案例分析 ( 1 )
- 测试 ( 1 )
- 程序架构设计 ( 1 )
- 计算机 ( 2 )
- 计算机技术 ( 22 )
- 跨域 ( 1 )
- 路由 ( 1 )
Tags
- Attribute
- BFC
- BOM
- Child_process
- Cookie
- CSS
- DOM
- Element Node
- Event
- Exec
- Fastify
- Float
- Fragment
- Git
- HTTP
- IDE
- IP
- Java
- JavaScript
- Jest
- JUnit4
- LAN
- LocalStorage
- Node.js
- NodeList
- Npm
- OSI
- Polyfill
- Puppeteer
- React
- Rule
- Selector
- SessionStorage
- SourceMap
- SPA
- Spawn
- Sublime Text
- TCP
- TCP/IP
- Text Node
- TypeScript
- UDP
- Vim
- VS Code
- WAN
- Web
- Web 前端
- Web 后端
- Web前端
- 互联网名词
- 关键概念
- 前端
- 动画
- 协议
- 单元测试
- 商业
- 安全
- 工具
- 应用状态管理
- 开源
- 异步编程
- 性能优化
- 技巧
- 插件
- 数学
- 构建工具链
- 架构设计
- 核心概念
- 案例分析
- 测试
- 程序架构设计
- 类型定义
- 编程语言
- 编辑器
- 节流与防抖
- 计算机技术
- 跨域
- 路由
- 配置同步
- 项目管理