代码改变世界

随笔分类 - [14]Web前端

在SeaJS中实现html模板文件的加载(Temod介绍)

2011-07-01 15:58 by T2噬菌体, 16675 阅读, 收藏, 编辑
摘要: 在几天前的一篇文章中,我介绍了JavaScript的模块化加载框架SeaJS。目前SeaJS支持js和css的模块化加载。在实际应用中,可能会遇到需要加载html页面模板文件的场景,例如我接触的某些应用使用Template Toolkit(以下简称TT)写页面模板,然后由js载入TT模板后渲染输出,在这种纯JavaScript渲染的Web架构中,需要将tt文件(或其它格式html模板文件)作为模块载入。由于JavaScript不支持类似于php heredoc那样的长字符串写法,所以手工做这种转换会比较纠结,而且还要处理特殊字符转义、html压缩等繁琐事情,当模板文件比较多时全手工实现费时费力还容易出错。所以我写了一个小工具temod,temod可以将html或tt等页面模板文件编译成符合CommonJS规范的module,这样任何实现了CommonJS规范的模块加载框架(如SeaJS)就可以将编译好的文件作为普通模板加载进来。 阅读全文

使用SeaJS实现模块化JavaScript开发

2011-06-27 08:20 by T2噬菌体, 94286 阅读, 收藏, 编辑
摘要: SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。SeaJS的作者是淘宝前端工程师玉伯。SeaJS本身遵循KISS(Keep It Simple, Stupid)理念进行开发,其本身仅有个位数的API,因此学习起来毫无压力。在学习SeaJS的过程中,处处能感受到KISS原则的精髓——仅做一件事,做好一件事。本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程 阅读全文

关于JavaScript中Function Declaration与Function Expression的进一步说明

2011-01-16 16:42 by T2噬菌体, 5929 阅读, 收藏, 编辑
摘要: 我在1月12日发表了《解读ECMAScript[2]——函数、构造器及原型》一文,文中提到了函数声明(Function Declaration)与函数表达式(Function Expression)的概念。在那篇文章中,重点对两者与ECMAScript内置对象Function之间的关系进行了论述,而对两者的区别未加以详细说明。昨天晚上对Web前端颇有研究的jee.chang.sh同学在GTalk上提醒了我这个问题,并说很多初学者经常因为未注意到两者的区别而犯错,希望我能在博客中阐述两者的区别。因此我决定单独写一篇文章来简要论述一下在《解读ECMAScript[2]——函数、构造器及原型》中未尽的事宜。 阅读全文

解读ECMAScript[2]——函数、构造器及原型

2011-01-12 21:37 by T2噬菌体, 7132 阅读, 收藏, 编辑
摘要: 上一篇文章简要解读了ECMAScript中关于执行环境、作用域和闭包的基本概念。这一篇文章将在上一篇文章的基础上,重点讨论ECMAScript中的函数(function),以及与其相关的构造器(Constructor)和原型(Prototype)。如不做特殊说明,本文小写开头的“function”指“函数”,而大写开头的“Function”特指ECMAScript中的内置“Function”对象,请注意辨析。 阅读全文

解读ECMAScript[1]——执行环境、作用域及闭包

2010-12-19 23:57 by T2噬菌体, 14520 阅读, 收藏, 编辑
摘要: 首先说明,对于JavaScript这门脚本语言,我是个菜鸟。虽然也写过不少JavaScript代码,但一直是不求甚解,直到最近才开始系统学习这门语言。学习的原因是我即将毕业,过了年就要正式工作了,而我要入职的职位对JavaScript有一定要求,所以我就在准备毕业答辩之余,挤时间学习JavaScript。我学习语言习惯从标准入手,所以我最近研读了《Standard ECMA-262 3th edition》。虽然ECMAScript不完全等价于JavaScript,但是它相当于JavaScript在语言范畴内的标准,详细定义了其实现的特性及行为(JavaScript是ECMAScript的一个实现),所以我相信研读ECMA-262是学好JavaScript的第一步。在学习中,我发现ECMAScript的标准定义很特别,很多地方容易让人迷惑和混淆,同时也有一些很有意思的特性,所以我决定分几个主题系统总结 阅读全文