第8音 Design Evering » javascript http://blog.d8in.com 成功的产品=故事化设计+逻辑化思维+高效地执行 Sat, 18 Jun 2011 08:46:07 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 为什么jquery如此简单易学 http://blog.d8in.com/posts/284.html http://blog.d8in.com/posts/284.html#comments Fri, 17 Apr 2009 02:15:01 +0000 xw http://blog.d8in.com/posts/284.html

前段时间研究了一下jquery,发现jquery要其他类型的库要容易学习的多，而且比较实用。有一天和一个朋友聊天，他也在学jquery，学习的感受也是和我一样。然后我就仔细的比较了一下jquery和其它的库，发现jquery在实用和易学使用上确实有自己的特点。

一、封装的恰到好处
封装一个库最难的就是一个尺度问题，就是说封装的层次过于底的话，那么应用到项目的时候就会发现很多东西需要自己再写，还是很麻烦。但是封装的过于高层，做项目的时候又不是很灵活。而jquery正好是取得了一个中间点，把一般项目中最最常用的函数封装进去，同时不是过于底层，也不是过于高层。正合适的位置上。所以一般用jquery有一种特别舒服的感觉。
看过《精通javascript》书的人可能会发现，其实那本书就是写jquery是怎么构建起来的。我们通过那本书可以发现，作者完全就是从实际工作中总结经验，最终慢慢形成了一个jquery。

二、像写css一样写javascript
我一直都有做页面重构工作，当我开始学习jquery的时候有种倍感亲切的感觉，写着写着突然发现，jquery的书写方式和css的书写方式十分类似，有些时候就有一种写css的感觉。再看看yui的的书写方式，十分的java，命名空间，声明变量~~~这些在jquery里面通通部不用。你只需要告诉一个dom对象该做什么即可，就和css告诉一个dom对象该怎么显示一样。

三、天生就是为设计师设计的
web设计师对于javascript一直都是比较头痛的，但是有些时候又不得不做javascript的工作，那么赶快去学jquery吧，jquery貌似就是为web设计师设计的，不需要懂什么循环，什么变量，只需要简单的写几行类似于css的代码，酷炫的效果马上就会展现在眼前，我相信你之需要花几个小时仔细研究研究jquery就会有意想不到的收获。甚至大呼我也会javascript了。

说了这么多，虽然jquery很容易学，但是如果想彻底的精通也不是一件容易的事情，而且虽然jquery的书写方式很简单，但是javascript毕竟还是一门程序语言，所以要想用好还是要学习一些基础的javascript语法和规范，但是jquery起码它会给你一个好的开始，所以为了这个好的开始，那些依然困惑于javascript的设计师们赶快行动吧。

]]> http://blog.d8in.com/posts/284.html/feed 1 Aptana Jaxer http://blog.d8in.com/posts/181.html http://blog.d8in.com/posts/181.html#comments Thu, 24 Jan 2008 09:43:37 +0000 xw http://blog.d8in.com/posts/181.html jaxer

今天用Aptana 有了新的更新，软件版本更新到了1.1同时推出一个重要的功能就是Aptana自创的Jaxer，号称是世界上第一个Ajax服务端，虽然是1.0版本，但是发现网站上的资料库已经相当健全，而且还有不少的视频演示。
引用一段官方的对Jaxer的说明翻译：

Jaxer改变了这一切，它是世界上第一个真正的Ajax服务器。在Jaxer里面, HMTL, CSS,Javascript都是它的其中一个对象，就象XMLHttpRequests, JSON, DOM一样。并且作为服务器，它提供了进入数据库、档案和网站建设，以及服务器日志、进程管理、安全性、可扩展性和整合了API。

其实javascript本身是具有服务端运行的属性的，譬如下面这段代码：
客户端运行

  1. <script type="text/javascript">
  2.     document.write("hello word");
  3. </script>

服务端运行

  1. <script type="text/javascript" runat="server">
  2.     document.write("hello word");
  3. </script>


只要 script声明的时候是runat=”server”，就表示在服务端运行，这样的写法其实稍微喝.net类似。而且javascript本身也是可以调用数据库做一些稍微复杂的操作的。但是代码十分繁琐，Jaxer通过再次封装同时加入一些新的功能在里面，就是javascript语言在服务端的功能大大增强。

看下面一段示例代码:

  1. Enter and number between 5 and 50:<input id="number" size="10" type="text" />
  2. <input type="button" value="submit" onclick="SubmitNumber()" />
  3.  
  4. <script type="text/javascript" runat="server">
  5.     var count =Jaxer.File.read("count.txt");
  6.     document.getElementById("number").value=count;
  7.    
  8.     function saveNumber(number){
  9.         if (validateNumber(parseInt(number))) {
  10.             Jaxer.File.write("count.txt",number);
  11.         }
  12.     }
  13.     saveNumber.proxy=true;
  14.    
  15. </script>
  16.  
  17. <script type="text/javascript">
  18.     function SubmitNumber(){
  19.         var currentValue=document.getElementById("number").value;
  20.         if(validateNumber(parseInt(currentValue))){
  21.             saveNumber(currentValue);
  22.             alert("Your number is save")
  23.         }
  24.         else{
  25.             alert("Your number is out of range")
  26.         }
  27.     }
  28.    
  29. </script>
  30.  
  31. <script runat="both">
  32.     function validateNumber(number){
  33.         if(number<5||number>50){
  34.             return false;
  35.         }
  36.         else{
  37.             return true;
  38.         }
  39.     }
  40. </script>

从代码中可以看出，客户端和服务端的数据通信无阻隔，想必是最大的优势。用一门语言可以写服务端也写客户端，可以随意设定语句是在服务端运行还是客户端运行，还是服务和客户端都运行。虽然现在Jaxer刚刚发布，功能还不是很强大，不过确实试验一下还是蛮有意思的东西。

page_flow_diagram

  • Write entire applications or presentation layers in Ajax
  • Full DOM and JavaScript on the server
  • Seamless communications between browser and server
  • Access existing pages written in other languages like PHP, Java, or Ruby on Rails
  • Share validation code on the browser and server
  • Database, file, and socket access from JavaScript
  • Open-source, standards-based, and uses the APIs you already know

相关资料：
Jaxer 官方网站

]]> http://blog.d8in.com/posts/181.html/feed 0 DOMtab的基本使用方法以及下载地址和完整演示 http://blog.d8in.com/posts/38.html http://blog.d8in.com/posts/38.html#comments Mon, 26 Feb 2007 09:44:20 +0000 xw http://blog.d8in.com/posts/38.html 一.什么是DOMtab
DOMtab是一个用javascipt制作的通用可扩展的tab切换显示隐藏内容快的web控件。

二.怎么使用DOMtab
1.在页面的

  1. <head></head>

区域加上

  1. <script type="text/javascript" src="domtab.js"></script>

2.在页面主体的

  1. <body></body>

部分加上

  1. <div class="domtab">
  2.  <ul class="domtabs">
  3.  <li><a href="#t1">Test 1</a></li>
  4.  <li><a href="#t2">Test 2</a></li> [idea] [idea]
  5. [... and so on ...]
  6.  </ul>
  7.  <div>
  8.  <h2><a name="t1" id="t1">Proof 1</a></h2>
  9.  <p>Test to prove that more than one menu is possible</p>
  10.  <p><a href="#top">back to menu</a></p>
  11.  </div>
  12.  <div>
  13.  <h2><a name="t2" id="t2">Proof 2</a></h2>
  14.  <p>Test to prove that more than one menu is possible</p>
  15.  <p><a href="#top">back to menu</a></p>
  16.  </div>
  17. [... and so on ...]
  18. </div>


然后定义各个class的样式就可以了，你也可以加class定义样式，但是代码的结构不能变化
3.更改javascript中控件的属性
tabClass:’domtab’, //目标区域的class名称
listClass:’domtabs’, // 列表菜单的class名称
activeClass:’active’, // 菜单激活状态下的class名称
contentElements:’div’, // 循环内容区域的元素名称
backToLinks:/#top/, // 设置返回顶部的参数
printID:’domtabprintview’, // 显示所有区域内容的id名称
showAllLinkText:’show all content’, // 显示所有区域的文字名称

三.增加向前向后按钮

1.在区域的起始class上多增加一个doprevnext

  1. <div class="domtab doprevnext">
  2.  <ul class="domtabs">
  3.  <li><a href="#t1">Test 1</a></li>
  4.  <li><a href="#t2">Test 2</a></li>
  5.  <li><a href="#t3">Test 3</a></li>
  6.  <li><a href="#t4">Test 4</a></li>
  7.  </ul>
  8.  [... ad nauseam...]
  9. </div>

2.在页面里面加上下列代码

  1. <ul class="prevnext">
  2.  <li class="prev"><a href="#">previous</a></li>
  3.  <li class="next"><a href="#">next</a></li>
  4.  </ul>

3.javascript里面的属性定义

  1. prevNextIndicator:'doprevnext', // 目标容器的class名称
  2. prevNextClass:'prevnext', // class名称
  3. prevLabel:'previous', // 上一页的文字
  4. nextLabel:'next', // 下一页的文字
  5. prevClass:'prev', // 上一页的class
  6. nextClass:'next', // 下一页的class

四.DOMtab中的样式控制
你可以强制的控制某一个元素的样式譬如显示和隐藏等等

  1. <script type="text/javascript">
  2.  document.write('<style type="text/css">');
  3.  document.write('div.domtab div{display:none;}<');
  4.  document.write('/s'+'tyle>');
  5. </script>

五.下载以及演示
下载DOMtab version 3.1415927
DOMtab演示

]]> http://blog.d8in.com/posts/38.html/feed 1 Javascript的IE和Firefox兼容性汇编 http://blog.d8in.com/posts/37.html http://blog.d8in.com/posts/37.html#comments Mon, 26 Feb 2007 09:33:30 +0000 xw http://blog.d8in.com/posts/37.html 以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox

1. document.form.item 问题
(1)现有问题：
现有代码中存在许多 document.formName.item(“itemName”) 这样的语句，不能在 MF 下运行
(2)解决方法：
改用 document.formName.elements["elementName"]
(3)其它
参见 2

2. 集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms(“formName”) 改为 document.forms["formName"]。
又如：document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]

3. window.event
(1)现有问题：
使用 window.event 无法在 MF 上运行
(2)解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：

  1. <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
  2. ...
  3. <script language="javascript">
  4. function gotoSubmit() {
  5. ...
  6. alert(window.event); // use window.event
  7. ...
  8. }
  9. </script>

新代码(可在IE和MF中运行)：

  1. <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
  2. ...
  3. <script language="javascript">
  4. function gotoSubmit(evt) {
  5. evt = evt ? evt : (window.event ? window.event : null);
  6. ...
  7. alert(evt); // use evt
  8. ...
  9. }
  10. </script>

此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById(“idName”) 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题4

7. event.x 与 event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。

8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：

那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementById(“frameId”)来访问frame标签
并且可以通过window.top.document.getElementById(“testFrame”).src = ‘xx.htm’来切换frame的内容
也都可以通过window.top.frameName.location = ‘xx.htm’来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
—-adun 2004.12.09修改

9. 在mf中，自己定义的属性必须getAttribute()取得

10.在mf中没有 parentElement parement.children
而用parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如

  1. <form>
  2. <table>
  3. <input/>
  4. </table>
  5. </form>

MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。

12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding
在js中如果书写url就直接写&不要写&例如var url = ‘xx.jsp?objectName=xx&objectEvent=xxx’;
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&

14. nodeName 和 tagName 问题
(1)现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。

15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改

]]> http://blog.d8in.com/posts/37.html/feed 0 ajax的基本概念 http://blog.d8in.com/posts/36.html http://blog.d8in.com/posts/36.html#comments Mon, 26 Feb 2007 09:26:58 +0000 xw http://blog.d8in.com/posts/36.html 一、使用Ajax的主要原因

1、通过适当的Ajax应用达到更好的用户体验;

2、把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

二、引用

Ajax这个概念的最早提出者Jesse James Garrett认为:Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:

·使用XHTML和CSS标准化呈现;

·使用DOM实现动态显示和交互;

·使用XML和XSLT进行数据交换与处理;

·使用XMLHttpRequest进行异步数据读取;

·最后用JavaScript绑定和处理所有数据;

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

]]> http://blog.d8in.com/posts/36.html/feed 0