本文实例讲述了不到30行js代码实现excel表格的方法，可见jquery并非不可替代。分享给大家供大家参考。具体分析如下：
某国外程序员展示了一个由原生js写成不依赖第三方库的，excel表格应用，有以下特性：
① 由不足30行的原生javascript代码实现
② 不依赖第三方库
③ excel风格的语义分析 (公式以 = 开头)
④ 支持任意表达式 (=a1+b2*c3)
⑤ 防止循环引用
⑥ 基于localstorage的自动本地持久化存储
效果展示如下图所示：
代码分析：
css略，html核心仅一行：
复制代码 代码如下:
javascript代码如下：
复制代码 代码如下:
for (var i=0; i    var row = document.queryselector(table).insertrow(-1);
    for (var j=0; j        var letter = string.fromcharcode(a.charcodeat(0)+j-1);
        row.insertcell(-1).innerhtml = i&&j ? : i||letter;
    }
}
var data={}, inputs=[].slice.call(document.queryselectorall(input));
inputs.foreach(function(elm) {
    elm.onfocus = function(e) {
        e.target.value = localstorage[e.target.id] || ;
    };
    elm.onblur = function(e) {
        localstorage[e.target.id] = e.target.value;
        computeall();
    };
    var getter = function() {
        var value = localstorage[elm.id] || ;
        if (value.charat(0) == =) {
            with (data) return eval(value.substring(1));
        } else { return isnan(parsefloat(value)) ? value : parsefloat(value); }
    };
    object.defineproperty(data, elm.id, {get:getter});
    object.defineproperty(data, elm.id.tolowercase(), {get:getter});
});
(window.computeall = function() {
    inputs.foreach(function(elm) { try { elm.value = data[elm.id]; } catch(e) {} });
})();
其实通过上文我们可以看出最核心的几步使用了emeascript5和html5的特性, 如：
queryselectorall: 提供类似jquery选择器的查询，由此可见，第三方js库如jquery并不是必不少的。
复制代码 代码如下:
var matches = document.queryselectorall(div.note, div.alert);
defineproperty 提供了类以java的get,set访问/设置预处理方法，还有其他一些配置属性，如：是否可配置，可枚举等。
复制代码 代码如下:
object.defineproperty(o, b, {get : function(){ return bvalue; },
                               set : function(newvalue){ bvalue = newvalue; },
                               enumerable : true,
                               configurable : true});
希望本文所述对大家的javascript程序设计有所帮助。