不到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 动画弹出窗体支持多种展现方式
Apr 29 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
js事件(Event)知识整理
Oct 11 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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实现的MySQL数据浏览器
2007/03/11 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
原生js中ajax访问的实例详解
2017/09/19 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
临床医学大学生求职信
2013/09/28 职场文书
应届生保险求职信
2013/11/11 职场文书
仓库管理制度
2014/01/21 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
数学复习课教学反思
2016/02/18 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
使用python绘制横竖条形图
2022/04/21 Python