闭包q

最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。

一、什么是闭包？
"官方"的解释是：所谓"闭包"，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：

function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
这段代码有两个特点：
1、函数b嵌套在函数a内部；
2、函数a返回函数b。
这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：


当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

我猜想你一定还是不理解闭包，因为你不知道闭包有什么作用，下面让我们继续探索。

二、闭包有什么作用？
简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。
在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。

那么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包内的微观世界
如果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

1、当定义函数a的时候，js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的"环境"，如果a是一个全局函数，则scope chain中只有window对象。
2、当函数a执行的时候，a会进入相应的执行环境(excution context)。
3、在创建执行环境的过程中，首先会为a添加一个scope属性，即a的作用域，其值就为第1步中的scope chain。即a.scope=a的作用域链。
4、然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后，把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象：a的活动对象和window对象。
5、下一步是在活动对象上添加一个arguments属性，它保存着调用函数a时所传递的参数。
6、最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。

到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：





如图所示，当在函数b中访问一个变量的时候，搜索顺序是先搜索自身的活动对象，如果存在则返回，如果不存在将继续搜索函数a的活动对象，依次查找，直到找到为止。如果整个作用域链上都无法找到，则返回undefined。如果函数b存在prototype原型对象，则在查找完自身的活动对象后先查找自身的原型对象，再继续查找。这就是Javascript中的变量查找机制。

四、闭包的应用场景
1、保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。
2、在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。
以上两点是闭包最基本的应用场景，很多经典案例都源于此。

五、Javascript的垃圾回收机制
在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。



原文地址：http://www.felixwoo.com/article.asp?id=294

类归于： RIA&Ajax — meetrice @ 4:44 下午 评论 (0)
Javascript (ExtJS) 设计模式 之一 :单例（singleton） _totodo
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);

对，正是这样的一种JS编程方式，被Douglas Crockford作为JS的一种单例的实现， 大师还把它叫做"Module Pattern",

好，如果我们不用所谓单例呢？， 就看看传统的对象方式，同学们肯定在Pototype盛行的时代，已经弄的一清二楚。

0o = function(){
  this.x;
  this.y;
}
Oo.prototype = {
  a:function(){
  this.x = 100;
  },
  b:function(){
  this.y = 200;
  }
}
//调用方式
Ext.onReady(function(){
  var o = new Oo();
  0.a();
});
再来，假使是个初学者，不知道对象继承，怎么办。更土的写法，人人都会。

var x,y
function a(){
  x=100;
}
function b(){
  y=200;
}
调用方式。
不用说了，只要a(),就会把x设置， 全世界的开发者都公认 ，全局变量是邪恶的，，而且随着你调用的不注意，将会越来越臃肿，导致Memory Lacks 内存泄露。

以上几个简单的举例可以看出， 类 比Java 一样， Oo.a直接调用，好比一个静态类，直接访问。 而prototype需要创建对象后访问其成员。
第一种方式，在任何地方都不需要创建（只创建一次），
而第二种方式，需要在每次调用的时候，创建对象。
第三种老土的代码，希望大家尽量少写，这不是程序员风格的体现。

对于发展到今天，如此庞大的ExtJS2.0，自然也要考虑道自己的运行和调用不要让new 变得太臃肿，在ExtJS中我们发现， 在会被各个组件大量频繁调用到的一些工具类中，单例运用较为频繁。

Ext 源码中，设计使用单利的代码片段。

//source/core/DomHelper.js
Ext.DomHelper= function() {
  //private attributes
  ..
  return{


}
}();

//source/core/DomQuery.js
Ext.DomQuery =fucntion(){


}();
后记： 由于JavaScript，具有prototype,call,apply来实现继承,面向对象来开发，又有闭包等特性来进行函数编程。有函数编程和面向对象的双重性质， 使得JavaScript格外的灵活，难以驽驾， 开发者选择多种风格来进行编码，在一个整体项目会容易会走向凌乱和灭亡。 这就更需要我们从大师的经验总结，以及ExtJS这种优秀的设计中，去体味学习，站在巨人的肩膀上前进…..

（另外值得一提出的，ExtJs必须要求你的页面为XHTML，当你在别的浏览器下跑的非常顺畅，而唯独IE下有那么点瑕疵（不是脚本报错的），你应当检查下你是否把你的页面定义成XHTML.）。

类归于： RIA&Ajax — meetrice @ 3:54 下午 评论 (0)
2008年04月09日
ActiveWidgets_Ajax/Javascript界面控件
[2007年11月29日] ActiveWidgets 2.5 发布!.




可以创建栅格、树形菜单、标签页、下拉菜单等丰富的WEB GUI（图形用户界面）组件
可以结合任何后台语言 (ASP.NET, Java, PHP) 一起使用，或在标准的html页面中使用
拥有构建基于AJAX应用程序的强大工具
兼容 ASP.NET AJAX, DWR, Prototype 等许多框架
链接地址:
ActiveWidgets• Ajax/Javascript GUI Components

类归于： RIA&Ajax — meetrice @ 9:16 上午 评论 (0)
2008年04月07日
ctree_dtree增强(by Nicholas)
基于dtree的增加树组件 by Nicholas



http://www.namipan.com/d/ctree_Nicholas.rar/9a220570be078100c6a57a406439bdc37f4dab3430c30000


类归于： RIA&Ajax — meetrice @ 9:22 上午 评论 (0)
2008年03月25日
Ext2.0的EditorGridPanel
前面介绍的GridPanel的数据只能看，并不能进行修改，本文的代码将演示一个可编辑的表格控件：

<html>

<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<title></title>

</head>
<script>
Ext.onReady(function(){
//ComboBox的数据
var sex = [['male','male'],
['female','female']];
var sexStore = new Ext.data.SimpleStore({
fields: ['sexNm', 'sex'],
data : sex
});

var sm = new Ext.grid.CheckboxSelectionModel();
//表格的表头定义
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',editor: new Ext.form.ComboBox({//该列的数据由ComboBox修改
store: sexStore,
displayField:'sexNm',
valueField: 'sex',
typeAhead: true,
editable:false,
forceSelection:true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a sex...',
selectOnFocus:true,
lazyInit:false
})
},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn',editor: new Ext.form.TextField({ //该列数据由TextField修改
allowBlank: true,
maxLength: 50
})
}
]);
cm.defaultSortable = true;

var data = [
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','fmale','name3','descn3'],
['4','male','name4','descn4'],
['5','fmale','name5','descn5']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
])
});
ds.load();

var grid = new Ext.grid.EditorGridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
autoHeight:true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
tbar: new Ext.Toolbar({
items:[
{
id:'buttonA'
,text:"Button A"
,handler: function(){ alert("You clicked Button A"); }
}
,
new Ext.Toolbar.SplitButton({})
,{
id:'buttonB'
,text:"Button B"
,handler: function(){ alert("You clicked Button B"); }
}
,
'-'
,{
id:'buttonc'
,text:"Button c"
}
]
})
});

grid.render();
//表格的事件绑定
grid.addListener('afteredit',afteredit);
function afteredit(e)
{
Ext.MessageBox.alert("afteredit",e.value);
}
//将表格在一个新Panel中放置
var panel = new Ext.Panel({
renderTo: 'grid-panel',
title:'panel',
collapsible:true,
width:450,
height:400,
items:[grid]
});
})

</script>
<body>
<div id='grid3'></div>
<div id='grid-panel'></div>
</body>
</html>


Tags: ext,extjs,grid.
类归于： RIA&Ajax — meetrice @ 2:07 下午 评论 (0)
Ext2.0的Grid控件学习
最近空闲时间在学习Ext2.0框架，只有一个字"强"，我从未想到JS代码能够写出这么绚丽的Web页面出来，以前看到YUI，警若天人，如今看到EXT2.0的东西，更是感觉震撼。

Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的空间，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

首先，一个表格应该有列定义，即定义表头ColumnModel：
// 定义一个ColumnModel
var cm = newExt.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：
{header:'编号',dataIndex:'id',Sortable:true},

现在就来看看这个Ext.data.Store是如何转换三种数据的。

二维数组：
// ArrayData
var data =[
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','male','name3','descn3'],
['4','male','name4','descn4'],
['5','male','name5','descn5']
];
// ArrayReader
var ds = newExt.data.Store({
proxy: newExt.data.MemoryProxy(data),
reader: newExt.data.ArrayReader({}, [
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
])
});
ds.load();
ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。
现在用的是Ext.data.MemoryProxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即id的mapping为2,后者为0。
记得要执行一次ds.load()，对数据进行初始化。


数据的显示显得非常简单：

HTML文件：
<div id='grid'></div>
JS文件：
var grid = newExt.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();

其显示结果为：


如何在表格中添加CheckBox呢？

var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自动行号
sm,//添加的地方
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);

var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,//添加的地方
title: 'HelloWorld'
});


如何做Grid上触发事件呢？下面是一个cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}

如何做Grid中做出快捷菜单效果：
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素
items: [
{
id: 'rMenu1',
handler: rMenu1Fn,//点击后触发的事件
text: '右键菜单1'
},
{
//id: 'rMenu2',
//handler: rMenu2Fn,
text: '右键菜单2'
}
]
});
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick');
}

其Grid如下：


如何将一列中的数据根据要求进行改变呢，比如说性别字段根据其male或female改变显示的颜色，这种ColumnMode中设计：
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:changeSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

function changeSex(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span>";
}
}

其它两种数据的Grid显示是相同的，其不同之处在于数据获取的过程：

1.Json数据，至于这种数据的类型请大家自己看Ajax的书籍：
//JsonData
var data = {
'coders': [
{ 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': '[e-mail]' },
{ 'id': '2', 'sex': 'male','name':'Hunter', 'descn': '[e-mail]' },
{ 'id': '3', 'sex': 'female','name':'Harold', 'descn': '[e-mail]' },
{ 'id': '4', 'sex': 'male','name':'Harolds', 'descn': '[e-mail]' }
],
'musicians': [
{ 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
{ 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.JsonReader({root: 'coders'}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();

var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
autoHeight: true//一定要写，否则显示的数据会少一行
});
grid.render();


2.使用XML数据：

XML数据test.xml的内容：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<results>2</results>
<item>
<id>1</id>
<sex>male</sex>
<name>Taylor</name>
<descn>Coder</descn>
</item>
</dataset>var ds3 = new Ext.data.Store({
url: 'test.xml', //XML数据
reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});


3.从服务器获取数据
从一个服务器文件，如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据，也可以被Ext读取，并被Grid显示：
服务器文件data.asp:
<%
start = cint(request("start"))
limit = cint(request("limit"))

dim json
json=cstr("{totalProperty:100,root:[")

for i = start to limit + start-1
json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
if i <> limit + start - 1 then
json =json + ","
end if
next
json = json +"]}"
response.write(json)
%>

我们可以看到，这个页面会根据传入的start和limit的不同，返回不同的数据，其实质是个分页的代码。下面是start=0,limit=10的JSON数据：
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}

我们使用分页控件来控制Grid的数据：
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'data.asp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load({params:{start:0,limit:10}});

var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'ASP->JSON',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
}),
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
grid.render();
})


4.如何在Grid的上方添加按钮呢？
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
tbar: new Ext.Toolbar({
items:[
{
id:'buttonA'
,text:"Button A"
,handler: function(){ alert("You clicked Button A"); }
}
,
new Ext.Toolbar.SplitButton({})
,{
id:'buttonB'
,text:"Button B"
,handler: function(){ alert("You clicked Button B"); }
}
,
'-'
,{
id:'buttonc'
,text:"Button c"
}
]
})
});



6.将GridPanel放入一个Panel或TabPanel中
var tabs = new Ext.TabPanel({
collapsible: true
,renderTo: 'product-exceptions'
,width: 450
,height:400
,activeTab: 0
,items:[
{
title: 'Unmatched'
},{
title: 'Matched'
}
]
});
tabs.doLayout();

var panel = new Ext.Panel({
renderTo: 'panel',
title:'panel',
collapsible:true,
width:450,
height:400,
items:[grid] //管理grid
});

Panel必须有DIV存在。其包含的Component有items管理。


Tags: ext,extjs,grid.
类归于： RIA&Ajax — meetrice @ 2:04 下午 评论 (0)
基于浏览器的JavaScript数据库-Taffy DB
Download Taffy DB | Feedback/Bugs | Getting Started

Taffy DB is a free and opensource JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications.

What makes it cool:

Under 10K!
Simple, JavaScript Centric Syntax
Fast
Easy to include in any web application
Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
CRUD Interface (Create, Read, Update, Delete)
Sorting
Looping
Advanced Queries

Think of it as a SQL database in your web browser.

Tags: javascript,数据库.
类归于： RIA&Ajax — meetrice @ 11:04 上午 评论 (0)
2008年03月03日
如何调用SinaEditor
如何调用Editor!

作者：我的钻石 2007-10-18 18:08:39


HTML在线编辑器不需要懂得使用Dreamweaver，会用Word就会使用此编辑器，在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。
但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢？！
首先我们假定我们所要调用得HTML在线编辑器放在一个单独得页面中，文件名是gledit.htm。
HTML在线编辑器有两种基本调用方法
一、使用object调用:
1、怎么在web页中嵌入html编辑器：我们在需要嵌入得位置加入以下html代码：<object id=doc_html data="gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
其中object标签里面得data后面接得数据就是我们所要调用得在线编辑器页得路径，id就是我们调用object得id，后面取编辑器中得数据时就要用到这个id。Width和height就是编辑器得高度和宽度了。
2、怎么取得html编辑器中的数据：所有需要提交的内容我们都是放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content"&gt  用以在提交的时候临时保存html在线编辑器的数据，因为在asp或者jsp，php中不能直接获取表单中的object的内容，所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">
<object id=doc_html name= doc_html style="LEFT: 0px; TOP: 0px" data=" gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type="hidden" name="content" >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中：首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口，我们利用自己写的程序来实现上传本机图片到服务器上，然后我们需要记录图片的路径，然后通过html在线编辑器的值中加入显示图片的html标签。详细说明及代码如下：
在编辑器中我们在插入图片的按钮上加入事件onclick="window.open('img_upload.asp.html','img_upload','width=481 height=190')">在'img_upload.asp.html'中我们将提交的图片上传到服务器制定目录然后记录图片路径
<script language=javascript>
var src='<%="upload/"&newname%>';
opener.form1. doc_html.value +="<img border=0 src="+src+">";
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据：当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容，例如<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>，要注意这里我们用隐藏的textarea而不能用隐藏的input，因为数据里面可能包含了回车换行，所以如果我们使用<INPUT TYPE="hidden" name=content value="<%=(rs("Content")%>">很可能因为<%=(rs("Content")%>有换行而出现HTML错误（value=后面接的数据必须保证是在一行，否则出错）。然后按照前面介绍的方法使用object调用HTML在线编辑器，方法和代码同上，现在我们要做的其实就是提交时候的逆过程，我们只要将隐藏文本区域的内容复制到HTML在线编辑器就可以了，在这里我们在body里面加上<body onload="document.form1. doc_html.value=document.form1.content.value">，这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了，提交过程和上面介绍的一样，在此就不赘述了。


二、使用iframe调用（有些和object调用重复的地方就简单描述一下）
1、怎么在web页中嵌入：我们在需要嵌入得位置加入以下html代码：<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>其中"src="后面接得数据就是我们所要调用得在线编辑器页得路径，id就是我们调用IFRAME得id，Width和height就是编辑器得高度和宽度了。
2、怎么取得html编辑器中的数据：同样所有需要提交的内容我们都是放在一个表单里面，同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content"&gt  用以在提交的时候临时保存html在线编辑器的数据，我们借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}
</SCRIPT>
<FORM METHOD=POST ACTION="Article_add_save.gl" name="form1" onsubmit=" subchk()">
<input type="hidden" name="content" >
<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>
</FORM>
在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
2、怎么取得html编辑器中的数据：所有需要提交的内容我们都是放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content"&gt  用以在提交的时候临时保存html在线编辑器的数据，因为在asp或者jsp，php中不能直接获取表单中的object的内容，所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">
<object id=doc_html name= doc_html style="LEFT: 0px; TOP: 0px" data=" gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type="hidden" name="content" >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中：首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口，我们利用自己写的程序来实现上传本机图片到服务器上，然后我们需要记录图片的路径，然后通过在调用html在线编辑器的web页中写一个函数在光标的位置插入显示图片的html标签。详细说明及代码如下：
在编辑器中我们在插入图片的按钮上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在调用编辑器的页面中我们定义好插入html代码到编辑器的函数
<script language=javascript>
function insertHtml(HtmlCode)
{
var win=window.content_html.idEditbox.document;
window.content_html.idEditbox.focus();//是编辑器获得焦点，放置代码插入在编辑器外地方
win.selection.createRange().pasteHTML(HtmlCode)//在光标的位置插入html代码
}
</script>
在处理上传图片的文件中，我们调用父窗口的函数插入html代码
<script language=javascript>
var src='<%=" upload/"&newname%>';
var htmlcodes;
htmlcodes = "<img src='"+src+"' alt='<%=theForm("alt")%>' align='<%=theForm("align")%>' border='<%=theForm("border")%>' hspace='<%=theForm("hspace")%>' vspace='<%=theForm("vspace")%>'>";
opener.insertHtml(htmlcodes)
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据：当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容，例如<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>，在这里我们在调用编辑器的iframe里面加上<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%" onload="window.content_html.idEditbox.document.body.innerHTML=document.form1.content.value"></IFRAME>，这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了，提交过程和上面介绍的一样，在此就不赘述了。

这里只是简单的向大家介绍了一下如何来调用html在线编辑器，具体代码并未一一列出，整理过程中，如果大家对文章中的内容有任何问题和建议请和我联系。

我改的一个html在线编辑器（iframe调用的时候用到的）：
http://qxd.5599.net/by/source/article/manage/gledit.htm
或者
http://www.thspxa.com.cn/manage/gledit.htm

object调用的时候大家可以用这个：
http://www.jfinfo.com