拥抱haXe之javascript 也玩mvc

haXe是高级语言的高级语言，可以将一个haXe程序转换为其它的高级语言，如JS。haXe有很多优点，比如，强类型、泛型、内联、宏、动态语言特性、命名空间……，用haXe写程序比用JS写程序舒服得多。本文尝试使用haXe开发js程序，搭建一个前端mini型mvc例子。

语言：haXe。haXe编译器可以把haXe程序编译成js程序。

开发工具：FlashDevelop。

haXe的简介及安装见《html5 canvas 版 hello world! 暨haXe简介》。开发之前，需要修改Flash Develop配置，将Tools->Program Setting->HaXeContext->Disable Compiler-based Completion 设置为 true。否则的话，haXe的自动完成会很痛苦。

项目结构如上图。其中：index.html是演示页面。页面中引用的jsTest.js就是本haXe项目所生成的js文件。js程序的入口就是Main.hx中的main方法（后文详述） 。main方法查找本页面中的所有的haXe标签，根据标签的name，分派出不同的Controller出来，然后根据haXe标签的map配置，把haXe所在节点的父节点及兄弟节点中id对应的节点映射到控制器里的字段。这样一来，一个页面可以对应0个、1个或多个Controller，每个页面片段也可以对应0个、1个或多个Controller，具有极大的灵活性。

有map的存在，在Controller那边，可以少写很多代码。map语法为：

（1）不同的map项由“；”分割；

（2）每个map项语法为“元素id:映射到字段的id”，如果省略掉“:”和之后的内容，则使用元素id作为映射字段的id。

这样一来，就可以把客户端的行为封装成强类型的、严格规划好命名空间的、有严格文档的haXe代码。开发前端时，只需要将不同的元素id映射到不同的Controller中即可实现不同的控制行为。

下面看看核心类：

（1）Page.hx

Page类封装了一些常用的方法：

package ;

import js.Dom;

#if hack
import js.HtmlDom;
import js.Document;
import js.HtmlCollection;
#end

import js.Lib;

class Page
{
    public static function getControllers():HtmlCollection<HtmlDom>
    {
        return doc().getElementsByTagName("haXe");
    }
    public static inline function doc():Document
    {
        return Lib.document;
    }
    public static function getById(id:String,node:HtmlDom=null):HtmlDom
    {
        if (id == null || id == '') return null;
        else if (node == null)
        {
            return doc().getElementById(id);
        }
        if (node.id == id) return node;
        else
        {
            if (node.hasChildNodes() == true)
            {
                var item:HtmlDom = node.firstChild;
                while (item != null)
                {
                    if (item.id == id) return item;
                    item = item.nextSibling;
                }
            }
        }
        return null;
    }
    public static function getsByName(name:String):HtmlCollection<HtmlDom>
    {
        return doc().getElementsByName(name);
    }
}

这里有一个技巧：FlashDevelop 对haXe自动完成支持的不完善。很多js命名空间下的类不能正确支持。比如，Page.hx文件，如果不引入js.HtmlDom等三个类（红色部分），则无法提供自动完成支持，而如果引入这三个类，则编译报错（这三个类已经在js.Dom中了）。解决方案就是使用一个haXe不认识的编译开关，比如“hack”，既能让FlashDevelop提供智能支持，又不会参与到编译过程中去。

（2）Controller.hx

Controller.hx 类主要完成map功能，代码为：

import js.Dom;

#if hack
import js.HtmlDom;
import js.Document;
import js.Event;
#end

import js.Lib;

class Controller
{
    public function new(map:String = null, node:HtmlDom = null):Void
    {
        if (map == null) return;
        var mapItems:Array<String> = map.split(';');
        var dy:Dynamic = this;
        for (i in 0 ... mapItems.length)
        {
            var itemTxt:String = mapItems[i];
            var pairs:Array<String> = itemTxt.split(':');
            if (pairs.length > 0)
            {
                var v0:String = StringTools.trim(pairs[0]);
                var v1:String = v0;
                if (pairs.length > 1)
                {
                    v1 = StringTools.trim(pairs[1]);
                }
                if (v0.length > 0 && v1.length > 0)
                {
                    untyped {
                        dy[v1] = Page.getById(v0,node);
                    }   
                }
            }
        }
    }   
}

（3）Test.hx

Test类为具体的Controller，为页面添加控制，代码为：

package orc;

import js.Dom;

#if hack
import js.HtmlDom;
import js.Document;
import js.Event;
#end

import js.Lib;

class Test extends Controller
{
    private var btnSubmit:HtmlDom;
    private var tbOutput:HtmlDom;
    public function new(map:String = null, node:HtmlDom = null):Void
    {
        super(map, node);
        var self:Test = this;
        this.btnSubmit.onclick = function(e:Event):Void
        {
            self.tbOutput.innerHTML = "测试一下";
        };
    }
}

（4）Main.hx

Main类负责调度，且提供程序的入口，代码为：

package ;

import js.Dom;

#if hack
import js.HtmlCollection;
import js.HtmlDom;
import js.Document;
import js.Event;
#end

import js.Lib;
import orc.Test;

class Main
{
    static function main()
    {
        var ctrls:HtmlCollection<HtmlDom> = Page.getControllers();
        if (ctrls != null)
        {
            var l:Int = ctrls.length;
            for (i in 0 ... l)
            {
                handle(ctrls[i]);
            }
        }
    }
    static function handle(node:HtmlDom):Void
    {
        var className:String = node.getAttribute("name");
        var map:String = node.getAttribute("map");
        var root:HtmlDom = map != null ? node.parentNode: null;
        switch(className)
        {
            case "orc.test":
                new Test(map,root);
        }
    }
}

测试结果图：

所得到的JS文件大小为12K，其中约6K为haXe的js库。压缩后，文件大小为 4k。如果有多个页面的话，这个js文件会变大，但因为只下载一次，对于一般的网站或应用可以接受。

这样做有什么好处呢？

（1）强类型，可以充分利用IDE的提示和完成功能；

（2）可以把代码放在公共的地方，方便代码的积累。代码抽象好了，一般的应用，只映射一下就搞定了；

（3）代码结构清晰。

随着html5的到来，前端的代码量会越来越大，越来越复杂。js太灵活了不好用。拥抱haXe吧！