由后端转型到前端， 4 年转型路，再出新框架

前言

很久很久以前，在我刚开始写代码那会，还没有有什么前端后端之分，那时候，流行的也不过是所谓的三层架构，但那时候的代码，是从前写到后的，分工远没有现在明确。但后来，不知怎么地就有了前端、后端之分。接着就给归类到了后端程序员，在做后端那会，弄个了个 ORM 框架，还卖了点钱。但后来，越来越难卖钱了，就又上班去，不知道咋的，公司给按排了个做前端的活，就开始了前端之路。从那时候起，就一直捣鼓着前端（当然，后端也做，但稍微少点），到现在大慨4年了，项目做多了，自然而然也就有了自己的一套前端框架，它叫 ChiTu，开源在 github 上，https://github.com/ansiboy/chitu。之前一直都没有公布，是因为它还没有达到一个比较稳定、可用的状态，所以一直都是自个用。在经历了几个项目之后，尤其是最后的一个项目，已经达到了一个比较稳定可用的状态了，我想，是时候和大家分享这个框架了。

ChiTu 简介

一、ChiTu的开发语言

ChiTu 是使用 TypeScript 编写的，关于 TypeScript，不了解的自行 Google。用过 TypeScript后，你一定会喜欢上它的。

二、为了解决什么问题

chitu 这个框架，主要是为了解决下面几个问题：

1、用 JS 写跨端应用，包括IOS，安装，微信。

2、原生的用户体验，iphone 以及 andriod 5，体验已经很接近原生应用了。

3、快速开发，并且使用得代码容易组织和维护。

4、缺点：加载慢，这个正在努力改进中。

三、依赖的框架

chitu主要依赖于下面几个框架

1、iscroll，主要是为了解决 IOS 下的滚动。

在 IOS 上，只要页面有固定位置的元素，滚卡效果就卡得令人能以接受，因此，chitu也使用了大家一致推荐的 IScroll 来实现在 IOS 下的滚动，滚动效果杠杠的。但使用了 IScroll ，又会引出新的问题 —— 刷新，尤其图片多的时候，更加容易出问题， chitu 采用的是图片替换的方法。先使用 JS 生成一张图，这张图片大小，和实际的图片大小是一致的，这样子页面就不会因为没有图片而变小了。从而解决了因为图片的异步加载，而导致页面的大小发生变化，而需要频繁地刷新的问题。

可是这样子又有问题了，怎么获得图片的大小呢？难道又得请求一次服务器？想想都知道是不可能的。从图片的文件名称来获取就可以了。

例如：17838fdb3e704178938cfb1a73556798_360_360.jpeg

表示的是图片的大小为，360 X 360，这样子，客户端就可以给图片生成背景图了。 

尽管理原理是这样子，但是需要把它封装好，还是需要一定的技巧的。

 

2、hammerjs，用来实现手势。

作为一款H5框架，手势肯定是必不可少的，下拉、上拉，左右滑动等效果肯定是要有的。IScroll 自带了各种手势功能，但是，因为在安卓，使用的都是原生的滚动

3、requirejs，为了异步加载各个模块。

作为单页应用，require js 肯定是必不可少的了。

4、jquery，主要用到里面的回调，Promise。未来可能为对其进行裁剪。

可选：Bootstrap 样式。反正我是很喜欢用 bootstrap 的。

 

四、ChiTu都用在了哪些项目

这个框架，公司好几个项目里，用的都是它。最近的是一个电商类型的项目，演示地址：http://u.alinq.cn/test/

另外：手机可以扫描下面的二维码

五、开源计划

ChiTu 这个框架，其实一直都是开源在 github 上的，只是没有文档。^_^ 

现在努力挣取在下个月发布文档。同时，要开源的还有这个电商的前端代码，当然，还有一系列的教程，去教大家使用这个框架，开发出这么个商城出来。

当然，未来开源的还会有包括哥哥早几年前写的 ALinq，以及VS的一款插件 —— Visual Designer 。

六、QQ 讨论组

对这框架，以及项目上感兴趣的朋友可以加 QQ 群 71418067 。当然，讨论的问题不局限于前端。

项目演示

Your browser does not support the video tag.