|
锁定老帖子 主题：用js书写UI组件之js基础知识
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-12-01
最后修改：2008-12-01
fins 写道 "常常称" 本身就意味着 只是一种习惯.
而且 如我前面所说 我不认同这个书中的这种观点. 你能说: 代码 window["document"] 表示的是 操作一个关联数组 吗? 我觉得 书的作者这么写 只是为了更好的让大家理解 js-object的一些性质. 而不是为了 告诉大家"这就是关联数组". 总之 js中对象随处可见, 还是从对象的视角来考虑问题比较好. 好了 不在这个问题上和你纠结了. 你要是觉得我说的不对 那你选择你自己喜欢的方式去理解吧. --------------------------------------- 这一点我还真不认同。 这本书中，唠叨解说中，全部提到的是数组。强调下标与普通数组有差别。其他语言也把这种数组称为关联数组。 附，有的网页也把关联数组，称为hash数组。 既然这犀牛这本书使用了这个叫法，其他语言，也称这种数组为关联数组，我也跟着叫吧。 本来词就是大家创造出来的。 为了方便，现把天极网中在perl教材中提到的关联数组的定义，摘抄与下： http://www.yesky.com/268/26768.shtml 关联数组和前面说的数组类似，它包含标量数据，可用索引值来单独选择这些数据，和数组不同的是， 关联数组的索引值不是非负的整数而是任意的标量。这些标量称为Keys，可以在以后用于检索数组中的数值。 |
| 返回顶楼 | |
|
发表时间：2008-12-02
to:yunhaifeiwu
我也认为不应该用其他语言的词汇来映射js的对象。 这种学习方法不对头。至于什么权威的书写了什么，不重要。 在学习阶段你可以拿其他语言的词汇、概念来和js做参照以便加快学习，但是和大家交流的时候就不要用这些词汇了。 因为如果你注意的话会发现一个现象就是： 技术论坛上讨论问题的时候在很小心的情况下都会造成别人的理解偏差。 而如果你还采用这样让人迷惑的词汇的话，更不利于讨论了。 另外就是关联数组这个词真的太不是适合js了。 因为在js里至少:Object,Array,Function都能模仿关联数组的功能。 那是否也可以称Array,Function也是关联数组呢！ 明显不能这样理解，所以关联数组这种概念根本不适合js. 别管那些权威教材了。 |
| 返回顶楼 | |
|
发表时间：2008-12-02
最后修改：2008-12-02
yunhaifeiwu :
你怎么看这个问题我已经不关心了 我不打算再就这个无聊问题和你争论. 但是 我觉得你不应该把你的理解强加在 犀牛书上 犀牛书 的"唠叨解说中，全部提到的是数组" 这个结论你时怎么得出的? 在你没有认真看过这本书的情况下? 事实上 该书中 关联数组一词 出现的次数非常少, 而且如我前面所说 作者引入这个概念 只是为了让读者更好的理解 js中object的一些特性. 犀牛书没有 说过 object就是"关联数组". 犀牛书 中 介绍相关知识的章节叫做 "Objects as Associative Arrays" 而不是 "Associative Arrays" 也就是说 其本意是 "用object来充当关联数组" 或者是"像操作关联数组一样来操作对象" . 核心词汇是"object" 而不是"array". ================================= 你拿perl的定义 放到js里毫无疑义. 因为perl中 确实有一种东西叫做 关联数组. 而js中没有这种东西. js中有的只是对象 但是 这个对象很特殊, 你可以用类似操作关联数组的方式来操作它. ================================= 其实 你怎么叫这个东西都无所谓 但是 我还是建议你 站在 对象的角度去看待 o["p"] 这种形势的代码. 否则 你在看其他示例的代码时 你会在"这是数组还是一个对象"的问题上 纠缠不清. |
| 返回顶楼 | |
|
发表时间：2008-12-02
最后修改：2008-12-02
fins 写道 yunhaifeiwu :
你怎么看这个问题我已经不关心了 我不打算再就这个无聊问题和你争论. 但是 我觉得你不应该把你的理解强加在 犀牛书上 犀牛书 的"唠叨解说中，全部提到的是数组" 这个结论你时怎么得出的? 在你没有认真看过这本书的情况下? 事实上 该书中 关联数组一词 出现的次数非常少, 而且如我前面所说 作者引入这个概念 只是为了让读者更好的理解 js中object的一些特性. 犀牛书没有 说过 object就是"关联数组". 犀牛书 中 介绍相关知识的章节叫做 "Objects as Associative Arrays" 而不是 "Associative Arrays" 也就是说 其本意是 "用object来充当关联数组" 或者是"像操作关联数组一样来操作对象" . 核心词汇是"object" 而不是"array". ================================= 你拿perl的定义 放到js里毫无疑义. 因为perl中 确实有一种东西叫做 关联数组. 而js中没有这种东西. js中有的只是对象 但是 这个对象很特殊, 你可以用类似操作关联数组的方式来操作它. ================================= 其实 你怎么叫这个东西都无所谓 但是 我还是建议你 站在 对象的角度去看待 o["p"] 这种形势的代码. 否则 你在看其他示例的代码时 你会在"这是数组还是一个对象"的问题上 纠缠不清. 原来你也没睡啊？ 睡不着，整理了一下，总算搞清楚了，我为什么要把那个用json定义的对象叫关联数组了。 1 我的出发点，是想把数据结构与设计模式引到js中来，这可对写复杂的组件有帮助。 2 寻找一种数据结构。 发现了关联数组一词，一查概念，大致意思下标索引是字符串的数组。 3 接着搜寻javascript 关联数组，发现 犀牛也提到这个概念。此外，发现了javasript也类似的支持。 4 接着，寻找数据结构 基本上要用到的存储操作-----新增、修改、读值、删除。然后试着看javascript能否完成。 反复查找、调试：ok,完全支持！说白了，就是一个map，就是一个hashTable 5 后来我为什么要用关联数组，是因为犀牛给我留下较深的印象。感觉叫关联数组，大家能接受。 6 在例子中，我为什么要在注释中 把用json形式定义的对象，叫作关联数组，这个对象明显不符合关联数组定义啊？ 但是，我的目的是要寻找一种数据结构。而这个东西，就能实现。可当作关联数组来使用。 即，我在那里叫关联数组的深刻原因是： [/size] [size=medium] 站在数据结构的视点上，强制性加深印象，这个东西就可当关联数组用。当在js软件设计中一遇到复杂的问题 ，自然就会想到用数据结构的方法去思考；接着，在实现方案时，自然就会想到用用json形式定义对象了。 也就是说，这个东东让我对数据结构的认知与js融在一起了。 同理，设计模式，当然要与类联系在一起，因此在我的贴文中开头，就直接把function 注释成了类。说实在的，这哪里是什么类哟，仅是可当作类用罢了。 感谢fins兄！ 让我又明白了一些东东。 |
| 返回顶楼 | |
|
发表时间：2008-12-02
achun 写道 to:yunhaifeiwu
我也认为不应该用其他语言的词汇来映射js的对象。 这种学习方法不对头。至于什么权威的书写了什么，不重要。 在学习阶段你可以拿其他语言的词汇、概念来和js做参照以便加快学习，但是和大家交流的时候就不要用这些词汇了。 因为如果你注意的话会发现一个现象就是： 技术论坛上讨论问题的时候在很小心的情况下都会造成别人的理解偏差。 而如果你还采用这样让人迷惑的词汇的话，更不利于讨论了。 另外就是关联数组这个词真的太不是适合js了。 因为在js里至少:Object,Array,Function都能模仿关联数组的功能。 那是否也可以称Array,Function也是关联数组呢！ 明显不能这样理解，所以关联数组这种概念根本不适合js. 别管那些权威教材了。 既然大家都反对，以后与大家交流时，把这个词灭掉！ |
| 返回顶楼 | |
|
发表时间：2008-12-02
似乎楼主说的就是 Array-Like Objects 这种东西？
如果是的话那 Array-Like 就只是“表面现象”，Objects 才是实质啊 |
| 返回顶楼 | |
|
发表时间：2008-12-02
最后修改：2008-12-02
walkman 写道 似乎楼主说的就是 这种东西？
如果是的话那 Array-Like 就只是“表面现象”，Objects 才是实质啊 谢谢walkman! 我说的正是这个东东！但一直不知怎么叫，现在明白了它与Array-Like的概念雷同 各位大虾都一致认为这个东东实质是Objects,那么我想一定不会错了。 不过，不管它的本质是什么，我想把他映射成数据结构中的东东（故以前用了相关概念一词：关联数组）， 目的也不外乎整合自已的认知体系。在以后的设计中，在自已的认知体系中会把关联数组、 Array-Like,、js中用花括号定义的动象，划成一个类别，便于自已跨越式思维。既能 读懂其他语言的相关概念，又能联系到数据结构、js。这对知识的贯通有相当大的好处， 不足是与别人交流容易产生沟通上的问题，自已有时也会短暂的迷糊。事实上，自已迷糊时 会查找相关资料、调试等多种手段消除的。 在经过与fins网兄的探讨中，我收获很多，但 fins花了许多时间，在此特别感谢fins! 对walkman对本人多个贴子，不惜指正建议，深表感谢！ ＝＝＝＝＝＝＝＝＝＝＝＝＝ 简单查了了一下Array-Like ，中文意思少有描述，也没看见什么知名网站进行特别定义。 不过看了一些相关中文描述，知道walkman所提到的Array-Like,正是我眼中的东西。 至于英文，本人较烂。看英文资料，也仅仅是看例子，对英文说明基本上无视！ |
| 返回顶楼 | |
|
发表时间：2008-12-02
最后修改：2008-12-02
下面是从ymPrompt 3.0版源码中剥离整理出来的。目的是揣磨别人代码中的
div等标签拖动的处理方式。由于是为了便于阅读，与原来的代码有一定的差别。 如：原来有这样的语句: var d=document,db=d.body,y=ymPrompt; 在下面的代码中，为了便于阅读取消了这种方式，但是如果要在实际使用中， 建议不要取消。因为，这缩代了js代码（如果有第三方js压缩软件，不取消 也未偿不可）。 在下面的代码中，注意 如下的代码：
（function(){})();
其中花括号中有许多语句。这种方式，基本上可这样看待：定义了一个函数，并立即 调用它。 这种代码作用，初步估计是为了减少内存泄露之类的吧。 说明： 1 代码中其事件处理方式中，没有搞得很明白，暂时会用自已的方式处理事件. 2 如果组件复杂时，个人认为有必要把组件拖动、浏览器类型判断等，事件注册单独 封装在一个对象中。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ymPrompt </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript">
</script>
</head>
<body>
<div id="dd" style="background:#FC6; width:80px; position:absolute">ssss</div>
<script type="text/javascript">
//用json的形式定义了对象
var fc={
d:"d1111",
targDiv:null,
ds:function( ){
alert("sss");//无啥意义的函数
},
copy:function(o,c){//这是一个把c中定义的函数与变量，拷贝到对象o中。
o=(o&&typeof o=='object')?o:{};
if (o && c && typeof c == 'object')
for(var p in c)o[p] = c[p];
return o;
}
}
//*****************上面这个对象使用例子程序**************
//使用fc的copy函数，把用json形式定义的对象与函数拷贝到fc对象中
//fc.copy(fc,{
// b:"b111",
// tel:function(){
// alert("fc.copy");
// }
//});
//fc.tel(); //由于有上面一个语句，这里可以调用tel函了。
//***********************************************
fc.targDiv=document.getElementById("dd");//设定一个目标对象,本例就是要拖动它
//这里有一个奇怪形式的函数，为了描述方便，姑且叫临时函数吧。
(function(){
//浏览器类型判断
var browser=function(s){
return navigator.userAgent.toLowerCase().indexOf(s)!=-1
};
var isOpera=browser('opera');
var isIE=browser('msie')!=-1&&(document.all&&!isOpera);
//统一定义一个事件绑定函数，以兼容主流浏览器的事件注册
var addEvent=(function(){
return eval(['1,function(env,fn,obj){obj=obj||document;',
isIE?"obj.attachEvent('on'+env,fn)":
'obj.addEventListener(env,fn,false)',
'}'].join(''))
})();
//鼠标左键按下响应函数
var dragVar,setDrag=function(e){
e=e||window.event;
dragVar=fc.copy(dragVar,
{startDrag:true,
startX:e.x||e.pageX,
startY:e.y||e.pageY,
containX:fc.targDiv.offsetLeft,
containY:fc.targDiv.offsetTop
}
);
};
//关联鼠标左键按下事件 到setDrag函数
addEvent('mousedown',setDrag,fc.targDiv);
//鼠标移动响应事件及其响应函数
addEvent("mousemove",function(e){
if(dragVar&&dragVar.startDrag){
e=e||window.event;
fc.targDiv.style.left=(dragVar.containX+(e.x||e.pageX)-dragVar.startX)+"px";
fc.targDiv.style.top=(dragVar.containY+(e.y||e.pageY)-dragVar.startY)+"px";
}
});
//鼠标左键释放及其响应函数
addEvent("mouseup",function(){dragVar=null});
})();
</script>
</body>
</html>
|
| 返回顶楼 | |
|
发表时间：2008-12-02
最后修改：2008-12-02
"这种代码作用，初步估计是为了减少内存泄露之类的吧。 "
不是的, 目的如下: 1 限定变量作用域 2 提高安全性(这里的安全性指的是 代码的稳定可靠性) 3 省内存 发现你一个问题: 喜欢肆无忌惮的使用 eval. 这样不好. 在你的那个 tab组件里 有这样一段
this.ShowTabs=function(thisObj,e){
var ID=e.getAttribute("idno");
if(ID!=thisObj.tID){
eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[thisObj.tID]+"').className='';");
eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[ID]+"').className='selectedtab';");
eval("document.getElementById(this.targName+'FSimpleTabs"+[thisObj.tID]+"').style.display='none';");
eval("document.getElementById(this.targName+'FSimpleTabs"+[ID]+"').style.display='';");
thisObj.tID=ID;
}
}
我实在没看明白 为啥非要用eval |
| 返回顶楼 | |
|
发表时间：2008-12-02
最后修改：2008-12-02
fins 写道 "这种代码作用，初步估计是为了减少内存泄露之类的吧。 "
不是的, 目的如下: 1 限定变量作用域 2 提高安全性(这里的安全性指的是 代码的稳定可靠性) 3 省内存 发现你一个问题: 喜欢肆无忌惮的使用 eval. 这样不好. 在你的那个 tab组件里 有这样一段
this.ShowTabs=function(thisObj,e){
var ID=e.getAttribute("idno");
if(ID!=thisObj.tID){
eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[thisObj.tID]+"').className='';");
eval ("document.getElementById(this.targName+'FSimpleTabTitle"+[ID]+"').className='selectedtab';");
eval("document.getElementById(this.targName+'FSimpleTabs"+[thisObj.tID]+"').style.display='none';");
eval("document.getElementById(this.targName+'FSimpleTabs"+[ID]+"').style.display='';");
thisObj.tID=ID;
}
}
我实在没看明白 为啥非要用eval 在FSimpleTabTitle例子中，说实在的对用json形式定义的对象还没有较深的了解，当时仅知道json字符串， 而 eval可以把json字符串转换成对象。至于eval是否有什么危险，还没注意到。以后在要用到json形式的对象中 不会再用eval了，除非从服务器上以字符串的方式传来对象例外。用eval加服务器，比较容易写出由服务器端控制 web外观的组件出来。 而ymPrompt源代码中用了eval这种方式，我也不明白为什么用，这里我是强制剥离出来，作参考用。我到现在也完明。那个1让我头大了N多。代码如下：
var addEvent=(function(){
return eval(['1,function(env,fn,obj){obj=obj||document;',
isIE?"obj.attachEvent('on'+env,fn)":
'obj.addEventListener(env,fn,false)',
'}'].join(''))
})();
说明：ymPrmpt代码中，这段代码只有一行。 从可阅读性上来说，用eval这种方式最差劲了。仅感觉其代码短小罢了。实质上，用javaeye某些牛人的压缩软件， 这种代码长短的问题基本上可暂不管。（当然是个人现阶段的认识观点）。对了，记得那个作者说，用eval的东东 比较难压缩^_^. 还有，对ymPrompt的事件注册，自已感觉也不大爽。理由：自我感觉，主流浏览器都支持类似"onclick=事件响应函数"的方式进行事件注册。 |
| 返回顶楼 | |
