HexJS诞生记

Edgar Hoo

曾经这样写过：

var readyFunc = [
    function fn1(){}, //功能1
    function fn2(){}, //功能2
    function fn3(){} //功能3
];

$E.onDOMReady(function(){
    for ( var i = 0, len = readyFunc.length; i < len; i++ ){
        try {
            readyFunc[i]();
        } catch(e) {
            if ( Ali.isDebug ){
                console.info( 'Error at No.' + i + '; ' + e.name + ':' + e.message );
            }
        } finally { continue; }
    }
});

也这样写过：

(function( NS ){
    NS.xxx = {
        init: function(){
            this.fn1();
            this.fn2();
            this.fn3();
        },
        fn1: function(){}, //功能1
        fn2: function(){}, //功能2
        fn3: function(){} //功能3
    };
    
    $E.onDOMReady(function(){
        NS.xxx.init();
    }
    
})( NameSpace );

后来：

(function( $, NS ){
    var ModName = { //功能1
        init: function(){
            this._fn1();
            this._fn2();
        },
        _fn1: function(){},
        _fn2: function(){}
    };
    
    NS.PageContext.register( 'mod-name', ModName );
    
})( jQuery, NameSpace );

至此，已有一定的风格累积

再后来

圈圈项目：

从前端质量角度看，这并不是一个成功的项目，但它的复杂程度刚好够我去思考js的写法

画报编辑页现状：

merge.js        //出口文件
    base.js     //画报实例，全局标记变量
    util.js     //公共方法
    upload.js   //图片上传相关功能
    popup.js    //浮出层相关功能
    submit.js   //表单提交相关功能
    done.js     //页面初始化、功能执行

通过 FE.info.admin.editpictorial 这个命名空间传递数据

这个现状令人非常不满意！

不满意的点：

  1. 文件拆分不完全
  2. 功能依赖不清晰
  3. 某功能相关的方法跟功能主体间隔太远，不好理解
  4. 曲折做到只在DOM Ready之后取节点
  5. 难以做到一个节点只取一次

希望解决的问题：

同时

alibar-v2之fdev-v4分支：

var checkSignIn = { //功能1
    init: function(){ this._fn(); },
    _fn: function(){ register( [ _addTip ] ); }
};

var changeDone = { //功能2
    init: function(){ this._fn(); },
    _fn: function(){}
};

var _addTip = { //功能3
    init: function(){}
};

register( [ checkSignIn, changeDone ] );

然后

Node.js -> CommonJS

CommonJS

它试图打造JavaScript生态圈

它制定了一系列的API规格

CommonJS的实现

为什么不直接使用SeaJS？

  1. 文件拆分过细。若一个module一个文件，页面复杂时，碎文件过多
  2. 部署问题。上线必然需要合并文件。与现有merge机制的冲突。与现有组件动态加载机制的冲突
  3. 维护问题。因部署麻烦而导致。未全站推广，其他同学接手困难
  4. 功能太多，存在学习成本

其实我想要的是一种书写风格，而不是框架/库

最后

经过一天时间

HexJS诞生

HexJS的特点

HexJS API

HexJS只符合一部分CommonJS的Modules/1.1.1规范

via HexJS Manual

HexJS命名的由来

module -> 块 -> 积木 -> 蜂窝 -> 六边形 -> Hexagon -> Hex

参考资料

Thx