zhangxin09的专栏

数据字典（Data Dictionary）是一种用户可以访问的记录数据库和应用程序元数据的目录。数据字典在系统也是必备的组件，对此我们想想要怎么做

我们知道 JSON 是 JavaScript 里面的一大利器，特别是构建复杂的树状结构，简单不失强大。可见对于不同类型的树，事前应该要确定清楚何种数据结构。通过 TypeScript 强大的类型系统，可以轻松地为我们去表述那些复杂的 JSON 结构。一旦确定好结构如何，剩下的解析、转换工作就简单多了。总的来说，解析树结构无非遍历工作。而遍历来说大概也不会太难，比较多使用到的是函数的递归而已。还有一点就是离不开栈（Stack）、队列（Queen）的应用。

Grid 的多行数据，修改后要提交到后台。如果大批量的数据一次性提交到后台恐怕不大合理。如果只是修改过那行的数据才提交过去，是比较合理的方式。这些修改的数据，我们称为“脏数据（Dirty data）”。脏数据本质也是一个 map、一个 json。

Grid 其实就是表格 Table，不过窃以为英文中 Grid 比 table 来得高大上。最开始认识 Grid 控件是 ExtJS UI 库，它有很成熟的设计模型支持着，缺点就是性能不太好，使用比较繁琐。如今笔者也想学着来设计一个 Grid，发现也没想象中的困难，主要还是发挥来自 Vue.js 的威力。

大量结构化数据的一种主要输出形式就是列表，——本文就打算介绍列表组件的设计与使用。

开门见山，先说明一下这日历组件的核心算法不是笔者原创，而是来自于早期大神 cloudgamer 的作品，在这里向前辈致敬！ 组件本身的原理不算复杂难懂，也就寥寥 140 行代码（原 JavaScript），足以展现日历渲染的原理。

文件上传，无论前端还是后端，笔者都重写过好几次了，一直不太满意。这次前端的用 TypeScript 再写一次，发现旧的问题不少，——幸好在这次重构中，找到比较理想的办法来处理。

在很多开发者看来，富文本编辑器的编写是一件很神秘或者复杂的事情。神秘倒没有，复杂的话——也大可不必那样认为——它的基本原理并不复杂，可是说十分简单。网上有不少的教程和资源，参考一些也不错，至于源码，大多写得比较复杂，不利于说明原理。于是我想在本文中逐步演示一个“羽量级”富文本编辑器的产生，来简单勾勒其实现的过程和原理。

表单（Form）首先是一些零散的样式、布局 CSS 之类的问题，其次包含表单验证、序列化的功能，最后就是“无刷新”表单（即 AJAX 提交）。至于围绕表单的各种千变万化的控件，如日历控件、HTML 编辑器和文件上传等组件，它们篇幅较大，另文再述。

开发 Vue 组件过程中，偶有所得，不敢独享，以飨读者。

JavaScript 最初的使命是什么？就是搞“动态页面 DHTML（Dynamic HTML）”。DHTML 是个上古的词汇，widget 也不年轻了，不过还是能达意，就把它作为包名吧——意思为页面用的小控件。

前面说过，组件化是使用 Vue 引入之后带来的一大优点。未有 Vue 之前——那个年代——苦苦寻思没有一个好的组件化方案。在当初 JavaScript 连类都尚未健全的情况下，真是费煞了苦心，最简单的“对象”是有了，可那不能构建复杂的大型 UI 系统，颗粒度太低了。对象、组件的关系，一小一大分别自然很清楚。那么加多一个“类 Class”呢？你能理清楚这些名词的关系吗？面向对象与组件有什么区别与联系呢？其实不清楚没啥关系。码多了，你自然明白：）。关于 JS Class，我写过不少博文（https://blo

关于 XHR（XMLHttpRequest），就是 AJAX程序。既然为 AJAXS程序，自然少不了 XHR 的调用。在我之前的累积基础上，升级代码到 ts。《用 XHR + curl.exe 制作 ddns 客户端札记》（https://blog.csdn.net/zhangxin09/article/details/6740558）《简易封装 XHR：支持 GET/POST/PUT/DELETE/JSONP/FormData》（https://blog.csdn.net/zhangxin09/ar

Base 模块是框架的底层基础库，主要三大模块 prototype.ts 原型扩展、aj.ts 基础工具函数、xhr.ts Ajax 远程请求，下面我们分别探讨。原型扩展虽然说 Vue 框架下应该远离 DOM 操作，但也不是说一丁点的也不用写，我们还是可以精简出几个较为常用的 DOM 方法，安排在对象原型（prototype）的扩展中。源码在 https://gitee.com/sp42_admin/ajaxjs/blob/master/aj-ts/src/base/prototype.ts。Css

TypeScript 倡导我们使用类型，顾名思义“类型的（Type）”、“脚本（Script）”。一般而言脚本语言追求轻便快捷，多数是无类型或弱类型的。然而在 ts 中要贯彻类型的思想，不仅是语言本身的一个飞跃，也是我们开发者自身要适应和理解必由之路。ts 在添加新特性的同时，仍向下兼容旧有的方式。最简单地说，你可以把旧的 js 代码一行不改，复制到 ts 文件中进行编译，编译器不会因为其中的错误中止编译（会提示或者警告，可忽略的）。并不是说我们忽略那些编译警告，不做 js 代码的升级，而是那样子允许了我们

模块管理一个框架或者库，自然有些纲领性的内容先要谈谈，这里就展开为大家介绍。用不用包管理？答案是否定的。对此，我们沿用老一套的做法，浏览器直接 <script src="xxx.js"> 引入 *.js 文件。但不代表不使用模块化管理，一个 ts 文件就是一个类，一个小模块，一个文件夹就是一个大模块。对于页面引用，你要确保所依赖的模块有哪些，然后通过 <script src="xxx.js"> 引入。这听上去很落后，也很原始，也可能会吓跑初来乍到想了解的朋友，但请君少安毋躁，且

导言最近感觉单纯 JavaScript 越来越不能胜任稍大型一点的项目，原因在于 JS 缺乏强类型支持，等于在代码层面少了一个辅助提示的功能，不能说明那个变量或者对象具体是什么，当然你可以通过为其添加注释或者，起一个更好的变量名，来给予代码维护者更多的信息。但是，这不是严格的约束，对于工程性而言简直不能称得上是有效的模式。于是很自然地我们青睐于类似 Java 那般类型安全语言实现强类型要求，不仅获得编码阶段的类型检查，而且在编译的时候能够减少错误，更有价值的在处于维护阶段的代码，强类型会使得代码更健壮和可

渐现 Banner，也是轮播图的一种。现在我们用 Vue.js 组件封装它，而且是 TypeScript 语法的。本组件不依赖其他库或者函数。

首先想说的是学习 TS 之前得先会 JS，因为是 TS 是 JS 的 superset。如同 C++ 是 C 的 superset 那样。另外就是这门语言没那么痛苦，增加的东西不是很多，这样学习曲线就应该比较平缓了。最后因为我对 Angular 比较感兴趣，所以顺势而为地就把 TS 学习也搞上来了。