JS Framework 冲突检阅(FrameworkScanner)

Posted by totodo on February 1st, 2009

09年有个小弟问我:搞软件滴怎么才算强人? 我不知道怎么回答,因为我知道自己不是。

不过现在我知道怎么告诉他了,强人和普通差别就是: 普通人做一件事只解决一个问题,强人做一件事解决一堆问题!

强人Mats Bryntse 就干了这样一个事情, 他做了一个工具。

gloable pollution

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之间的冲突关系,然而这是一件非常浩大的工程, 一直都被这个问题困扰着。

不过有强人出现,现在似乎也清晰了不少。人总是踩着别人肩膀前进的嘛:)

Ruby 应该更适合企业应用!(YY文)

Posted by totodo on June 21st, 2008

1,从大部分国内企业应用先培训,后工作的模式下, Ruby 明显比J2EE容易洗脑的多。

2,从单一的设计模式来讲,Ruby 也比J2ee 好折腾的很多, 浓缩下来就一个OO + ActiveRecord。

3,从版本控制代码管理上,动则上百M 的企业应用程序来讲,Ruby明显 要少很多

4, 从Bug控制上,Ruby 语法简练,避免了开发人员多,开发的代码更多的情况,也就降低了出错的可能性。

5,从硬件投入上,Ruby 开发环境性能要求不用太高,节省企业开支。

6,从方案设计上,Web应用框架未被泛滥,只要学好Rails。给定方案少了很多争议。Ruby 本身解决方案多,单元测试,缓存,WS,日志,异常,性能优化,打包,rake,扩展。  都不用去apache,sourceforge 上去搜索一大堆开源。

7,从市场竞争上, 没了IBM,BEA,HP,这些牛逼大碗 。忽悠的空间更大。至少IBM,Oracle 现在不会建议企业你用Ruby 。

8,从企业技术积累上, Ruby花的时间和代价要少,适合以前不注重的技术积累的企业(国内占了大部分)。

9,从客户满意度上,  重业务,轻实现。  而Ruby绝对相应快,可以边谈需求,边Coding,需求谈完就Over。(没见过这样的吧)

10,从程序员YY 角度来讲, 跟着2.0的热潮,RoR的风靡, 让他们误以为用了Ruby 自己就去开公司了。 学习积极性空前提高~

看起来Ruby很爽 ,当然不爽的地方很多(很多事情如同A片,看的人爽,做的人未必)。

BTW:   此文为YY文。 仅此纪念搁置Blog 半年,学习Ruby一周年。

exjs dwr spring 强强联姻

Posted by admin on July 15th, 2007

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) sort = params.sort + ' ' + params.dir;
else sort = '';
var delegate = this.loadResponse.createDelegate(this, [reader, callback, scope, arg], 1);
var callParams = new Array();
if(arg.arg) {
callParams = arg.arg.slice();
}

if(this.pagingAndSort) {
callParams.push(params.start);
callParams.push(params.limit);
callParams.push(sort);
}

callParams.push(delegate);
this.dwrCall.apply(this, callParams);
} else {
callback.call(scope || this, null, arg, false);
}
},

loadResponse : function(listRange, reader, callback, scope, arg) {
var result;
try {
result = reader.read(listRange);
} catch(e) {
this.fireEvent("loadexception", this, null, response, e);
callback.call(scope, null, arg, false);
return;
}
callback.call(scope, result, arg, true);
},

update : function(dataSet){},

updateResponse : function(dataSet)
{}
});

Ext.data.ListRangeReader = function(meta, recordType){
Ext.data.ListRangeReader.superclass.constructor.call(this, meta, recordType);
this.recordType = recordType;
};
Ext.extend(Ext.data.ListRangeReader, Ext.data.DataReader, {
getJsonAccessor: function(){
var re = /[\[\.]/;
return function(expr) {
try {
return(re.test(expr))
? new Function("obj", "return obj." + expr)
: function(obj){
return obj[expr];
};
} catch(e){}
return Ext.emptyFn;
};
}(),

read : function(o){
var recordType = this.recordType, fields = recordType.prototype.fields;

//Generate extraction functions for the totalProperty, the root, the id, and for each field
if (!this.ef) {
if(this.meta.totalProperty) {
this.getTotal = this.getJsonAccessor(this.meta.totalProperty);
}

if(this.meta.successProperty) {
this.getSuccess = this.getJsonAccessor(this.meta.successProperty);
}

if (this.meta.id) {
var g = this.getJsonAccessor(this.meta.id);
this.getId = function(rec) {
var r = g(rec);
return (r === undefined || r === "") ? null : r;
};
} else {
this.getId = function(){return null;};
}
this.ef = [];
for(var i = 0; i < fields.length; i++){
f = fields.items[i];
var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
this.ef[i] = this.getJsonAccessor(map);
}
}

var records = [];
var root = o.data, c = root.length, totalRecords = c, success = true;

if(this.meta.totalProperty){
var v = parseInt(this.getTotal(o), 10);
if(!isNaN(v)){
totalRecords = v;
}
}

if(this.meta.successProperty){
var v = this.getSuccess(o);
if(v === false || v === 'false'){
success = false;
}
}

for(var i = 0; i < c; i++){
var n = root[i];
var values = {};
var id = this.getId(n);
for(var j = 0; j < fields.length; j++){
f = fields.items[j];
var v = this.ef[j](n);
values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
}
var record = new recordType(values, id);
records[i] = record;
}

return {
success : success,
records : records,
totalRecords : totalRecords
};
}
});

经过改造之后,那么DWR可以像JSON一样,返回的数据作为DataStore
代码片断

ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(TodoService.getItems, true),
//TotoService.getItems dwr开放出来的Java获取数据方法
reader: new Ext.data.ListRangeReader(
{id:'id', totalProperty:'totalSize'}, recordType),
remoteSort: true
});

Spring实现了强大的管理了后台的JavaBean,干干净净的注入创建了每个对象, DWR天生又是支持Spring,无缝的讲Spring的后台Bean 发布到Web层作为JavaScript对象,和JavaScript方法。中途不需要人工干预写Servlet.

不多说了, 跑了下代码,通过,可以直接下载。
download/ext-dwr-spring.rar

Flex 与 Ajax的完美结合

Posted by admin on March 23rd, 2007

谁掌控了已经来临的RIA,Flash Or Ajax..其实不然?两者的完美结合才是一个高的境界。

前两天刚发布的Apllo公开测试版,随即也发放了一些详细的Document和 Example. 今天就领略到了Adobe的风采,Adboe Labs又发放了几个和Ajax结合很好的Examples,其中就选择采用我最近在使用的 Ext (YUI-EXT), Examples下来一运下,帅呆了!(看来Jack的魅力不小!:)http://labs.adobe.com/wiki/index.php/Apollo:Applications:Samples

“Fresh is a skinnable RSS reader built entirely using AJAX running on Apollo. The Fresh reader features offline RSS reading, multiple panels within a single window, tabbed browsing, and basic browser integration. Fresh is based on the YUI-Ext / Ext JS library and RSS Feed Viewer sample by Jack Slocum. ”

通往RIA的第一步, JavaScript对象基础

Posted by admin on March 17th, 2007

读 YUI ,EXT等源码的时候看JS天旋地转,那可不是51JS上那种挪挪位置就能理解的,此刻如果没有JavaScrip的基础,更是像没有星光的黑夜…….

自以为觉得Js对象是很好理解的东东,然而真实践起来却一片糊涂。
通过查阅经典书籍《Professional JavaScript For Web Developers》稍微有些理解了

JavaScript的基本类型
原始类型如: Undefined Null Boolean Number String 等 用 typeof方法能辨别之
引用类型如: Object Function Array Boolean Number String Date等,用insanceof方法辨别之

严格来讲,JavaScript没有对象(Object),但是由于和OO术语对应,所以也称之为对象。所以Array,Function,基本类型,引用类型,函数,以及函数的属性 等等这些都是对象。

而对象分类,则可以分为内置对象(Built-in Object) 和宿主对象(host object)。
内置对象如 Math,Data啊。
宿主对象则如 BOM,DOM之类.

重新回顾了下这些基本概念之后,在做简单实践就有些理解了。
因此对象的使用,创建方式不尽相同,最简单的归类如下:

1 基本创建方式

function Class() {
window.alert("Hello Class!");
}
var clz= new Class();

2 访问对象成员

function Class(){
this.x = " this is x";
this.y = "this is y";
this.z = viewXY;
function viewXY(){
alert("x+","+y);
}
}
var clz= new Class();
clz.viewXY();

3 对象继承

function Parent() {
this.type= "human!";
}
function Child(){
this.age = "26";
this.sex ="male";
this.say= myInfo;
function myInfo(msg){
alert(msg+this.type+ ","+this.age+","+this.sex);
}
}
Child.prototype = new Parent();
var clild = new Child();
clild.say("I'm ");

4.重用原对象 (书上的例子太好了,搬来了)

Funcion.prototype.toString() = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString());