Totodo’s blog

2009 in action

09年有个小弟问我:搞软件滴怎么才算强人? 我不知道怎么回答,因为我知道自己不是。
不过现在我知道怎么告诉他了,强人和普通差别就是: 普通人做一件事只解决一个问题,强人做一件事解决一堆问题!
强人Mats Bryntse 就干了这样一个事情, 他做了一个工具。

http://mankz.com/code/GlobalCheck.htm
这个他能检测目前几乎所有我们经常接触到的JS Framework的 JS  和 CSS 冲突。冲突主要是使用了相同的 Global namespace。
他分析比较功能如下:

document
Element
Document
HTMLElement
HTMLDocument

CSS analysis
Analyze your own scripts

唯一遗憾的是,好像不能在IE下使用( Firefox和Chrome都可以,好在平时习惯用他们浏览网页)
在过去的项目中我也曾学人家用了一些JS 的Framwork,然而,由于实际情况的需要,会再后来做一些取舍和新的引入。 新引入的JS 混合使用会和过去的(因为过去在线用的代码的不会立即删除掉)产生冲突 ,一直想比较各类framework之间的冲突关系,然而这是一件非常浩大的工程, 一直都被这个问题困扰着。
不过有强人出现,现在似乎也清晰了不少。人总是踩着别人肩膀前进的嘛:)

ExtJS 设计模式 之一 (单例)
    Extjs 发展至今,传承了YUI的伟大精髓, YUI得到了Douglas Crockford(任职于 Yahoo! 的一名 JavaScript 传道者和架构师,他是全球最有造诣的 JavaScript 语言专家之一,Blog:http://www.crockford.com/) 大师的赞同,而ExtJS也是将YUI的模式脚本编程学习使用的淋漓尽致,并且还给它做了几套华丽的CSS嫁衣….,   而在ExtJS越发耀眼的同时,我等初学者在使用ExtJs的时候也是晕呼其呼。(好在2.0 推出之后,官方的文档,像雨后春笋一样,开始覆盖到方方面面。)
    其实,拨开ExtJS华丽的外衣,翻阅其体内精致的代码,不难发现一些我们耳熟能详的设计模式。
    在早期1.0,1.1的好多例子中,我们会看到这样风格的代码。

var Oo= function(){
  var x;
  var y;
  return{
  a:function(){
  …
  },
  b:function(){
  …
  }
  }
}();

    咂一看,不是我们能理解的方式, function(){}(), 是何意?。
//()在这里,意味着方法已经执行,并且return里面的已经产生, 这样可能很难理解,那等同与执行 function oo(){},这样是否好理解些了?
BTW :这里要引入JavaScript的一个高级概念,“闭包”。(具体内容参考《JavaScript The Definitve Guid,5th Eddion》Section 8.8 –Function Scope and Closures ,也是被Douglas Crockford推荐的为数不多的两本书籍之一。), 当然不急着去翻,先把我的废话看完。
    好了,看这种使用别扭的使用方式, 而这种方式,在我们的页面,或者其他类中, 调用Oo的a方法的时候,形式如下
Ext.onReady(Oo.a); [...]

exjs dwr spring 强强联姻

ExtJs 在Web UI已经获得很大的殊荣,但单凭借它 Client UI 还无法霸占BS 那么丰富的应用。。他还要选择 一个Web层与后台一起来交互完成一个完美的系统。
Extjs的天生丽质的, 完美了融合JQuery,Prototype,YUI, 和她结合当然也需要出类拔萃,生出名门。 如果采用Java为开发主语言,那么 ExtJS + DWR + SPRING 算是门当户对。
可惜Extjs 的DataStore 的 prxy 并没有DWR一席,因为DWR返回的是Java对象与JSON非常像, 然而DWR 的在于它与Web远程Java方法的直接会话,因此有着非常灵活的一面。所以,有时候使用DWR对于J2EE来说,要更好于JSON,他做了JSON做不到事。
extjs官方论坛里已经有人编写了这样的扩展,后经人丰富,现在基本能满足要求了。
DWR扩展代码如下,创建 Ext.data.DWRProxy类。同样也继承Ext.data.DataProxy ,拿来show着解读一下。

//dwr.js
Ext.data.DWRProxy = function(dwrCall, pagingAndSort){
Ext.data.DWRProxy.superclass.constructor.call(this);
this.dwrCall = dwrCall;
//this.args = args;
this.pagingAndSort = (pagingAndSort!=undefined ? pagingAndSort : true);
};
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function(params, reader, callback, scope, arg) {
if(this.fireEvent(”beforeload”, this, params) !== false) {
var sort;
if(params.sort && params.dir) [...]

小巧的身躯,强大杀伤力,足以具备紫色装备的特点。

这款利器,专门为 使用 Ext, killer级的AjaxUI设计开发人员配备。

致命点. 体积小巧(3.5M),价格优惠(免费)

官方网站 : http://www.spket.com/

1. Ext 对象的自动完成

 

2. Ext 组件对象的查看

3. JavaScript Lib 对象的自动识别

4. JS文档的智能分析,阅读

 

Ext 解说(二)

关于YUI-EXT 变为 EXT的话题让人纷说已久,而又过了短短几日,EXT 又紧锣密鼓的发行了Alpha 3。<从YUI-EXT0.40 到 EXT1.0Alpha2,Jack向YUI挑战 ,EXT lib支持JQuery,可以完全可以独立于YUI了。不过这次,Jack似乎又一次开始新一轮的自我挑战。1.0Alpha3版本开始增加了Prototype 和ScriptAculous,真是让人迫不及待。
好,还是先看看 的例子。 这次不用帖代码了,官方出的指南已经很详细了。
教程:http://www.extjs.com/en/tutorial/introduction-ext
毕竟是个入门性的,要玩些花样还得看API (可惜JACK的API-DOC还没来得及更新到最新) 。
教程中:Grid实现

{
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, [...]

« Previous Entries  Next Page »