不到30行JS代码实现Excel表格的方法


Posted in Javascript onNovember 15, 2014

本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代。分享给大家供大家参考。具体分析如下:

某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性:

① 由不足30行的原生JavaScript代码实现
② 不依赖第三方库
③ Excel风格的语义分析 (公式以 "=" 开头)
④ 支持任意表达式 (=A1+B2*C3)
⑤ 防止循环引用
⑥ 基于localStorage的自动本地持久化存储

效果展示如下图所示:

不到30行JS代码实现Excel表格的方法

代码分析:

CSS略,HTML核心仅一行:

<table></table>

JavaScript代码如下:

for (var i=0; i<6; i++) {

    var row = document.querySelector("table").insertRow(-1);

    for (var j=0; j<6; 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程序设计有所帮助。

Javascript 相关文章推荐
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
jQuery 插件开发指南
Nov 14 #Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
JavaScript window.location对象
Nov 14 #Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 #Javascript
详谈JavaScript内存泄漏
Nov 14 #Javascript
You might like
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
基于php无限分类的深入理解
2013/06/02 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
javascript常用函数(2)
2015/11/05 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
js编写选项卡效果
2017/05/23 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue实现计步器功能
2019/11/01 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
专业毕业生个性的自我评价
2013/10/03 职场文书
大二自我鉴定范文
2013/10/05 职场文书
区域总监的岗位职责
2013/11/21 职场文书
医科大学生的自我评价
2013/12/04 职场文书
公司授权委托书
2014/04/04 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Mysql MVCC机制原理详解
2021/04/20 MySQL
教你怎么用python实现字符串转日期
2021/05/24 Python
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP