Airglass.js开发笔记:起步

全篇共 1010 字。按500字/分钟阅读,预计用时 2.0 分钟。页面总浏览量 13 次,今日浏览量 3 次。

Airglass是我在2018年的夏天想要启动的独立项目——基于Canvas技术开发一款支撑FUI/HUD视觉风格用户界面的基于面向对象思想与方便扩展组件的基础组件库。从本篇开始我会一边开发Airglass.js一边详解开发过程。我在开始Airglass类库的正式开发前需要决定的:

  • 选择语言
  • 配置类库构建环境
  • 不断完善继承关系

选择开发语言

Typescript与JavaScript

在开发Airglass类库的过程中,我将Typescript作为书写源码使用的语言。TypeScript提供全面的类型提示,尤其是我在使用类和有继承关系的类时,TypeScript在这方面做得非常好。在TypeScript配置中,将TypeScript中使用模块系统和经Typescript转换后输出的JS文件的语法设置都为es2015,仅用类型。

配置构建环境

配置构建环境

我使用在GitHub上托管的私有项目recreation——在之前关于构建前端项目的文章中提及过该项目。webpack中使用到ts-loader读取TypeScript配置转换为JS文件。webpack输出配置添加库属性,以确保最终在全局作用域中暴露访问Airglass的变量,基于umd模块构建方式。Airglass类库故名airglass

不断完善继承关系

完善Airglass继承关系

合理设计类与类之间的继承关系,最大化利用公共方法和属性。在开发类库的过程中我也会适当调整类之间的继承关系。

  • Point / Line等非形状元素
  • Shape / DraggableShape等形状元素
  • 观察者机制 / 监听虚拟元素事件
  • 事件订阅与退订,订阅制定虚拟元素的事件。
  • UI部分与动效部分分层。

Airglass.js 开发笔记系列想法:

发布日期 » 2019年9月6日 周五
原创声明 » 请勿复制转载,谢谢配合。
Airglass.js核心库
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
运维
可视化
生活自有“道”理
视觉设计、用户体验
陈帅华的微信二维码