我才12 ?

“编码”目录存档

NatureJS v2011.11 realease at 2011.11.30 8:08

更新日志:

New Feature:

  • html.byId 添加 root 参数, 用以设定所取节点所属文档;
  • script.jsonp 新增自定义 callback 名的支持;
  • script.get 新增层次(链式)调用;

Bug fix:

  • script.jsonp 未添加 failure 函数时报错;

下载地址: https://github.com/nanzhi/NatureJS

API 文档: http://naturejs.org/

NatureJS v2011.10 realease at 2011.10.29 17:05

更新日志:

New Feature:

  • ie 事件对象添加 relatedTarget 属性;
  • event 添加事件委托函数, delegate.add/delegate.remove;

下载地址: https://github.com/nanzhi/NatureJS

API 文档: http://naturejs.org/

NatureJS v2011.09 realease at 2011.9.27 8:08

更新日志:

Bug Fix:

  • 修复 isArrayLike 判断错误;
  • 修复 history 在 < ie8 浏览器下无法触发 hashchange 事件的 bug;

New Feature:

  • 添加对 html collection 列表事件添加的支持;
  • 添加 date.now 方法;
  • 优化 event/custom 事件;

下载地址: https://github.com/nanzhi/NatureJS

API 文档: http://naturejs.org/

我有必要先讲一下 NatureJS 的诞生历程.

2009 年, 我第一次接触到 JavaScript 框架, 它就是 YUI, YUI 给了我很大的震撼, 我也第一次知道了原来代码可以那么来写. 由于 JavaScript 的薄弱, 入门还是比较的困难, 幸亏有一大批高手在身边, 可以不断的问不断的学习, 感谢当初小马, 玉伯, 圆心, 明城, 沉鱼…等人的指导帮助. 每次阅读 YUI 的源码都感觉是一种享受, 一个团队可以将规范, 代码统一到如此程度, 实在令人佩服.

09 年底, 接触到了 jQuery, 跟 YUI 完全不一样的感受, 被 它优美的 api 所吸引, 当时就萌发了自己写框架的念头, 虽然技术还很烂, 但是也想试试了, 想基于 jQuery 来做一个组件库, 名字当时起的叫 KidJS. 不过由于种种原因, 最终也没有完成.

2010 年, 开始接触 dojo, dojo 给人的第一印象并不好, 凌乱的代码, 晦涩的文档, 并不给人带来多大的欲望. 我也说不清当初是什么原因, 竟然读了下去. 随着一步步的深入了解, 开始欣赏 dojo 那放荡不羁的代码, 严密的组织方式以及大而全的浏览器兼容性, 平台兼容性, 区域兼容性的处理, 完整的 MVC 模型, 有始有终的组件生命周期… 来自不同的地方, 有着各自喜好的一群人, 能够在统一的约定下去维护这么一个巨型的框架, 不能不让人惊叹. 在爱上 dojo 的那一刻, 我决定翻译 dojo 文档, 因此也在 github 上有一个 cndojo 的分支, 可惜的是, 翻译了一年多了, 还没把核心部分翻译完, 经历了 1.5, 1.6, 还可能经历即将到来的 1.7, 不过, 接下来还是会继续努力完成这个工作, 如果有喜欢 dojo 的童鞋, 欢迎一起来完成.

10 年底, 接触到了 CommonJS, 观念再次发生了改变…

项目越做越多, 代码越写越多, 代码的重用性以及可维护性越来越成为主要问题. 类库的混乱, 版本的冲突, 让编码越来越困难. 随着这几年的积累越来越多, 形成类库的时机也趋于成熟, 所以在今年年初, 我决定去完成这个类库.

一开始起的名字叫 OmegaJS, 但是后来改名叫了 NatureJS, 原因其实之前也说过了, 是和女友的组合, 我也希望能和她一起分享成果.

NatureJS 一开始的定位是为了解决三个问题: 一是面向对象解决方案 (当然现在也没有完整实现, 尚需努力), 一是增强模块的重用性以及健壮性 (Write once, Run anywhere), 还有就是让每一个人可以通过 NatureJS 轻松搭建适合自己的类库.

NatureJS 从一开始做, 就没有核心, 一是我没想好核心怎么来做, 一是我没想好要不要做核心, 但是不管怎么样, 我一定要选中一个适中的方案来定义模块. 最终选择了 RequireJS, 更多的还是源自对 dojo 的热爱.

如今的加载器很多, 也会越来越多, 只有最大程度的兼容这些加载器, NatureJS 的模块才能够得到普及, 那么更好的去适配这些加载器呢?

抛开各种模块定义规范, 从各种加载器中筛选出的最终解决方案是只是用最基本的模块定义方式:

define(function(require) {
    //...
});

这样子, 基本可以保证模块可以在加载器下运行(有些加载器函数不为 define, 但是可以很方便的进行切换), 其实已经足够了. 希望有一天, JavaScript 可以拥有一个可以媲美 pypi(Python), gem(Ruby) 那样的库, 我也希望我能为这个梦想贡献一点力量.

其实, 最终, NatureJS 的梦想就是希望能够聚集成这么一个巨型的类库, 供开发者轻松组合, 使用, 或者从中构建适合自己的框架, 类库.

思科网讯某一个后端: JS 文件的依赖, 最终都是函数之间的依赖.

NatureJS 做了函数的细分, 基本每个函数为一个文件, 以方便你的调用, 组合.

再来说说 Transformers:

这是一个微型的模块编译工具, 目前的功能比较简单, 仅提供了合并和依赖处理功能, 那么它跟 RequireJS 的 r.js 有什么区别呢?

首先, 我的观点是, 在开发调试时, 以模块载入的形式进行, 在上线时, 使用编译后的版本.

没有哪种方式更好, 只有适不适合. 虽然目前浏览器的引擎都已经很健壮, 但是我认为还是应该进行预编译, 而不是扔给浏览器去编译解析, 性能本身就会大大的受到影响.

Transformers 提供的编译工具, 会将所有依赖模块加载进来, 同时去除对加载器的依赖, 直接生成可独立运行的代码, “我的命我来操盘”, 这样子更适用于线上环境以及别人的引用.

另外, Transformers 允许你将任意多的文件合并为一个文件, 并通过编译将所有依赖引入文件内, 生成独立的不依赖任何 js 文件的独立模块, 可以轻松的构建自己的 js 库.

目前 Transformers 在 NatureJS 上运行良好, 并在淘宝的一个日常项目中实践, 目前还没有大的问题, 但是过多的闭包, 可能会导致 ie6 下的一些问题, 这个会在下一个版本中进行优化调整.

下载地址:

NatureJS: http://github.com/nanzhi/NatureJS (cell 目录为最小粒度函数, nature 目录为打包后的独立文件, 每个文件均可独立使用, release 下为压缩版本)

Transformers: http://github.com/nanzhi/transformers

NatureJS v2011.08 更新日志:

Bug Fix:

  • Fix screen.scroll 获取 scroll 时的 bug;

New Feature:

  • 分离 dom, bom, type 模块, 细分函数, 方便调用, 拼接;
  • 添加 object.values 方法;
  • 添加 string.toUpperCase 方法;
  • 添加 string.toLowerCase 方法;
  • 添加 function.bind 方法(功能与 lang.hitch 方法相同, 参数顺序略有不同);
  • 添加 array.reduce 方法;
  • 添加 array.reduceRight 方法;

jasmine generator v0.2 发布 at 2011.7.26 8:08

经过一段时间的应用, 对部分小点进行了优化更新, 在 NatureJS 中, 90% 的代码中使用了此工具生成用例, 暂时没有遇到什么问题, 希望大家能够多提意见: https://github.com/nanzhi/jasmine-generator/issues.

version 0.2 更新日志:

  • 修正 ubuntu 下生成文件时多一个 . 的 bug;
  • 支持注释中的 -> 标签, 等同于 =>;
  • 支持 html 标签的恢复, 转换 &lt; &gt;< >, 需要自行定义是否转换;
  • 优化参数获取函数;

项目地址: https://github.com/nanzhi/jasmine-generator, 请点击上方 download 按钮下载.

NatureJS v2011.07 更新日志 at 2011.7.25 8:08

bugfix:

  • 修复 io/xhr.js 在 ie6 下不能正常使用的问题;
  • 修复 lang.js 在通过 requirejs 调用时, 在 ie 浏览器下报错的问题;
  • 修复 lang.isNumber 校验 NaN 返回 true 的问题;
  • 修复 style 在获取或者设置节点 opacity 属性时的缺陷;
  • 修复 dom/html.js create 函数在创建 html 节点时无法正确返回 dom 节点的 bug;

new feature:

  • bom/uri.js 添加 setHash, getHash, replaceHash 方法;
  • 添加模拟 html5 history 的 bom/history.js;
  • type/lang.js 添加 isBoolean 方法;
  • event/custom.js 添加订阅方法: subscribe, unsubscribe, publish;
  • 添加模板渲染脚本: util/tmpl.js;
  • dom/style.js 添加 replaceClass 方法;
  • type/object.js 添加 keys 方法;
  • 添加压缩版本以及高级浏览器专属版本;

NatureJS 期待你的参与!

NatureJS 发布 at 2011.6.23 8:08

NatureJS 是一款轻量型 JS 框架, 提供基本的 DOM 编程方法, 更多的是提供面向对象解决方案.

目前的版本依赖 RequireJS(估计是国内第一个支持 RequireJS 的框架吧…), 因为其实我还没想好核心该怎么写… 不过之后不管怎么改都会依然支持 RequireJS.

目前只有几个简单的模块, 模块分类综合了 YUIMootools 的分类方法, 现包括: type, dom, bom, io, event, html5, util, oop 模块.

框架主要是参考 dojo, yui, mootools 来写的, 很多方法都类似, 当然也加入了一些新的方法. 因为这其实是在平时工作中积累的一些方法集,简单的糅合在了一起.

目前的版本模块不是很多, 功能也不是很全, 主要是把一些工作中经常用到的点加了进去, 之后会慢慢的补上一些功能, 但是现有功能的接口都会保持兼容不变, 因为我没有版本号…

目前的版本问题应该还是比较多, 虽然做了单元测试, 但是不能保证在实际的应用中没有问题, 还待观察, 欢迎各位大大指正.

受 requirejs 的影响, 目前 onDOMReady 方法暂不可用.

NatureJS 的使用非常简单, 只需要引入 requirejs, 然后按照 requirejs 的语法来写就行了, 如下:

require(['event/event.js'], function(event) {

    var func = function(ev) {

        //阻止默认事件和冒泡
        ev.stopEvent();
        event.remove(e);
        alert('绑定成功');

    };

    var e = event.add('J_Alert', 'click', func);    

    event.add(document.body, 'click', function(ev) {

        alert('bubble');

    });

});

接下来会加入更多的内容, 欢迎各位大大指正, 提出建议, 谢谢.

感谢 dojo, 感谢 yui, 感谢 mootools, 感谢 RequireJS.

查看源码 查看文档

PS: NatureJS 的名字是女友起的, 是南和秋的组合, O(∩_∩)O哈!非常感谢一直以来女友对我的关爱, 鼓励和支持.

jasmine generator 小更新 at 2011.6.20 21:09

最近做了部分小更新:

  • 修复了语句中含有 * 导致的 bug;
  • 增加了对 ret1['a'] => ‘b’; 后边分号的支持;
  • 增加了对 ret1['a'] // => ‘b’; 中间 // 的支持;
  • 添加了 ant task 包以及示例文件, 方便在 ant 文件中添加 case 生成任务:

    <!-- compile -->
    <target name="compile">
        <taskdef name="py-run" classname="org.pyant.tasks.PythonRunTask" classpath="pyAntTasks-1.3.3.jar"/>
    </target>
    
    <!-- case -->
    <target name="runcase" depends="compile">
        <py-run script="create.py">
            <arg value="${root}"/>
            <arg value="${out}"/>
            <arg value="template=example/template.html"/>
        </py-run>
        <py-run script="create.py">
            <arg value="${root}"/>
            <arg value="${out}"/>
            <arg value="template=example/template.js"/>
        </py-run>
    </target>
    

下载地址: https://github.com/nanzhi/jasmine-generator/zipball/master

如果有任何建议或者问题请直接联系我哈, 多谢大家~

jasmine generator at 2011.6.11 20:08

jasmine generator 是什么?

这是一款根据注释自动生成 jasmine 用例的工具, 可以帮你节省书写用例的时间, 目前支持生成 html 文件或者 js 文件.

使用条件:

  • js 注释遵循 jsdoc 规则;
  • 本地安装 python 2.4 以上版本;

使用方法:

  • js 注释中增添了 @spec 标记, 支持两种用例定义方法:

    1. 简单模式:

      可以将 example 和用例结合使用, example 就是用例:

      /**
       * simple method
       * @param { String } str a string charactor
       * @return { String } result
       * @spec simple
       * @example
       *  Test.simple('hehe'); => 'HEHE'
       */
      
    2. 复杂模式:

      可能简单模式会影响 jsdoc 中 example 的输出, 这时可以将用例单独书写:

      /**
       * complex method
       * @param { String } json json string
       * @return { Object }
       * @example:
       *  Test.complex('{"a":"b", "c":"d"}'); => {"a": "b", "c": "d"}
       * @spec complex1
       *  var ret1 = Test.complex('{"a":"b", "c":"d"}');
       *  ret1['a'] => 'b'    
       *  ret1['c'] => 'd'
       * @spec complex2
       *  var ret2 = Test.complex('{"e":"f"}');
       *  ret2['e'] => 'f'    
       */
      

    其中 => 前边为要检测的语句, 后边为预期的结果.

  • windows:

    修改 run.bat 文件中参数:

    python create.py root="js" out="case" template="template.html"
    

    其中 root 为需要生成用例的 js 文件夹, out 为输出用例的文件夹, template 为用例模板.

    运行 run.bat 文件, 或者直接在命令行下运行以上命令.

  • ubuntu:

    命令行下运行:

    python create.py root="js" out="case" template="template.html"
    

欢迎大家试用并提出宝贵意见, 谢谢大家, 点击下载.

2011.5 bug list at 2011.5.30 15:03

浏览器描述解决方案test
FF 3 注释里不能有 –, <!– — –> 避免在注释里出现 – http://www.12sui.cn/test/201105/comment-in-firefox3.html
IE 9 Jsonp 方式, 如果没有重新创建 script 标签, ie 9 下不会触发 onload 事件 每次请求重新创建 script 标签 http://www.12sui.cn/test/201105/jsonp-ie9.html
某些版本 IE6 使用 expression 定位 fixed 时, 会导致内嵌 iframe 中的 select 在滚动时消失, 即使改成 js 控制, 在按住鼠标中键拖动时, 依然会出现问题; 改成 js 控制, 并添加延时处理;
http://apps.hi.baidu.com/share/detail/32048479
All Try … catch 中使用 setTimeout, 会导致报错, 且 catch 不到. 如果有必要, 在 setTimeout 中添加 try…catch
http://msdn.microsoft.com/en-us/library/4yahc5d8
https://developer.mozilla.org/en/JavaScript/Reference/Statements/try…catch
http://www.12sui.cn/test/201105/try-catch-and-settimeout.html

这位姐姐,你好,你的浏览器版本太低了,为了避免您中毒,请您升级您的浏览器!