不到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 选择器、DOM操作、事件、动画
Nov 25 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
js控制input输入字符解析
Dec 27 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
Angular路由简单学习
Dec 26 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
小程序实现页面顶部选项卡效果
Nov 06 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
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
python实现从wind导入数据
2019/12/03 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
PHP面试题及答案一
2012/06/18 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
大学生军训广播稿
2014/01/24 职场文书
政协会议宣传标语
2014/10/09 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书