OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

不到30行JS代码实现的Excel表格,jQuery并非不可替代


分享到
分类 编程技巧   关键字 Html5   发布 ourjs  1391047224000
注意 转载须保留原文链接,译文链接,作者译者等信息。  
某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性:

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

效果展示:


代码分析:

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});
原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 你不知道的JavaScript用法,Hacker是这样写JS的
  2. QQ邮箱是如何泄密的:JSON劫持漏洞攻防原理及演练
  3. 那些用JavaScript写的操作系统
  4. 为什么大神级程序员的C语言代码里到处都是goto?
  5. 下一阶段的NodeJS:TJ负责Node,NPM可能要收费
  6. Web标准化正在消灭HTML程序员
  7. 告诉大家一个好消息,我被炒了!
  8. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  9. NPM开始招人了
  10. 一名靠谱的JavaScript程序员应备的素质
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. 如何在网页上隐藏你的Email邮件地址
  2. Ruby己死?NodeJS能否取代Ruby?
  3. 永远不要在Linux执行的10个最危险的命令
  4. 代码审查:写出好的 commit message
  5. 性能测评:Ngix_Lua, Node.JS Python三者性能相当,均比php快近一倍
  6. 技术干货:Nginx 战斗准备 — 优化指南
  7. 高级JavaScript调试—— console.table()
  8. NodeJS on Nginx: 使用nginx反向代理处理静态页面
  9. 优秀工具推荐:超实用的 CSS 库,样板和框架
  10. 写给 Node.js 学徒的 7 个建议

 关键字 - Html5
  1. 让Select选择框可编辑可输入可自动补全可下拉选择
  2. 创造canvas的艺术
  3. 用纯CSS实现的箭头
  4. HTML5的TCP和UDP Web Socket API草案定稿
  5. 传统广告与H5广告的差别在哪里?
  6. WeMall微信商城源码插件代金券部分代码
  7. WeMall微信商城源码插件会员卡代码详情
  8. WeMall微信商城源码插件大转盘代码详情
  9. 你应该使用HTML5的header和footer标签吗?
  10. 5个实用Web界面设计工具 | 附开发案例

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号