BlogJava-BlueDavy之技术Blog-随笔分类-Javascript

两个小问题备忘以及继续谈交互

BlueDavy — Wed, 06 Sep 2006 12:10:00 GMT

摘要: 简单的谈谈交互中重要菜单和工具栏按钮；
备忘javascript清空表格中行的问题；
备注动态创建的radio按钮无法选中的问题。阅读全文

BlueDavy 2006-09-06 20:10 发表评论

Velocity for javascript

BlueDavy — Mon, 10 Apr 2006 14:19:00 GMT

做过Ajax应用的人都知道，在js端将后台的数据进行展示其实是一件挺麻烦的事，尽管操作dom不算太麻烦，但要和写一段html相比来说就显得太麻烦，而且难以维护了，所以我目前在做实现的时候不得已的采用在后台通过java+velocity模板的方式来生成html，再返回前端js，由其负责将html放入相应的container进行显示，在目前来看这种做法还算过得去，不过其实一种比较期盼的都是能有一个velocity for javascript版，这样我就可以直接把数据模型返回给js，在js端结合velocity模板直接渲染生成最后的显示效果了，那就比较爽了，^_^
不过目前开源界好像没这样的东西呢，前几天在javaeye上看到有人推荐这个东西(http://trimpath.com/project/wiki/JavaScriptTemplateSyntax)，很不错，是个javascript template的支持的东西，^_^，它支持的就是类似velocity的方式，不过它不能支持引入外部文件的方式，也就是说和我所期待的velocity for js还是不太一样的，不过有了这东西的话我想要实现一个velocity for js也不是什么太难的事，呵呵，想像的方案，^_^：
1、后台请求在返回时返回数据以及模板文件；
2、结合javascriptTemplateSyntax，将数据与模板文件进行合并，渲染生成html；
或者另外的方案是先返回数据，然后根据数据的情况来决定需要采用什么样的模板文件，之后通过xmlhttp发起同步请求，从服务器获取模板文件，觉得这个方案容易造成发起多次请求，有些浪费网络资源，不过也会有它的适用场景...
^_^，一个简单的思路就是这样，当然，需要提供些更为强大的功能...

BlueDavy 2006-04-10 22:19 发表评论

js版事件管理器 V0.7

BlueDavy — Wed, 29 Mar 2006 08:17:00 GMT

摘要: 在上一版的基础上进行了如下改进：
1、增加了事件参数传递的支持；
2、增加了事件、拦截器的有效范围定义的支持；
3、增加了事件、拦截器的清除的支持。阅读全文

BlueDavy 2006-03-29 16:17 发表评论

js版事件管理器

BlueDavy — Thu, 09 Mar 2006 07:29:00 GMT

摘要: 写的一个比较简单的事件管理器，主要从这些方面进行的考虑：1、实现事件的注册/反注册。2、实现事件的调用。3、注册事件的拦截器(方法执行前或执行后)。目前写的这个版本还比较简单，后一步需要增加事件的有效范围以及事件的拦截器的有效范围的支持，就是scope的概念，还有一个需要改进的地方是将目前事件调用的部分改为COR模式。源码如下： /**//* * ==============... 阅读全文

BlueDavy 2006-03-09 15:29 发表评论

修改版的丰富交互表格RichTable.js

BlueDavy — Mon, 06 Mar 2006 09:07:00 GMT

摘要: 修改自blueidea上的windy2000提供的powertable.js，具体见：http://www.blueidea.com/bbs/archivecontent.asp?id=697036...修改的几个地方：1、基于prototype.js进行了改写。2、由外部传入需要增加丰富交互的表格的ID。3、修正了列排序造成的表格行颜色的混乱。(如经常能见到的隔行颜色不同的表格，在排序后会有两行... 阅读全文

BlueDavy 2006-03-06 17:07 发表评论

Javascript基础知识之this篇

BlueDavy — Thu, 02 Mar 2006 12:25:00 GMT

介绍这方面的文章也有一些，我这里打算以一个demo来说明一下，也是基于prototype进行编写，javascript中的this看起来会和java中的this有些不同。
一个简单的测试，为了绑定事件到一个按钮上：

在IE中执行代码会发现点击按钮后弹出的提示的值为"测试"，按照java的思想去看的话我们会觉得这是很奇怪的事，因为按照java执行的话这个时候一定是弹出"TestThis"...
那么为什么会发生这样的状况呢，其实就是在将按钮的onclick事件绑定到clickButton造成的，当事件发生时候当前的对象为button，而不是TestThis，自然这个时候的this也就是button了...
有些时候我们是不希望这样的，在拥有prototype的情况下我们可以用它提供的bind来解决，将上面的绑定按钮的onclick事件部分的代码改为：
$(btn).onclick=this.clickButton.bind(this);
再次执行后会发现这个时候点击按钮弹出的提示的值就变为"TestThis"了，呵呵，其实就是prototype帮忙将这个时候的参数进行了重新的绑定..
bind和extend是prototype中两个非常重要的方法，去看prototype.js就会发现，里面很多地方都用到了Object.extend和Function.prototype.bind这两个函数...
bind可以起到的作用就象我上面说的..
extend起到的作用则为继承和扩展，^_^

BlueDavy 2006-03-02 20:25 发表评论

Prototype.js学习

BlueDavy — Tue, 28 Feb 2006 10:01:00 GMT

Prototype.js作为javascript的成功的开源框架，封装了很多好用的功能，虽然官方没提供什么文档，不过在google上一搜，好多相关的文档，不过在学习使用的过程中还是碰到了一些问题，希望熟悉的朋友能多加指点，对于prototype.js学习我关注这么几点，同时针对每点也讲讲学习的结果和碰到的问题，^_^
1、类的创建
prototype.js已经封装好了，这个很简单。

var Person=Class.create();

这样就创建了一个Person类，这个Person类必须提供initialize方法的实现：

Person.prototype={
                 initialize:function(){
                 }
      };

      对比java，Class.create相当于Class.forName()，initialize相当于构造器，和java的构造器一样，可以自定义为带参数性质的。
      可以看到在使用这样的方式定义class后，它和javascript原来的通过function方式来定义一个类就有明确的区分了，在这种情况下我们就可以用Class.create来定义类，用function来直接定义函数。
      类通常还涉及静态成员(static性质的)和实例成员(需要实例化才可调用)的定义。
      在javascript中这点也非常容易:
      静态成员：

var Person={
                name:'person',
                getName:function(){return 'person'}
      };

实例成员：

Person.prototype={
               childname:'child',
               eat:function()
      }

      上面的Person.getName是可以直接这么调用的，但eat方法则需通过var person=new Person();person.eat();的方式来调用。
2、类的继承
      类的继承其实javascript本身就支持的，不过prototype提供了一种另外的方法。
      按照javascript的支持的实现：

var Student=Class.create();
Student.prototype=new Person();

这样就实现了Student继承至Person。
在使用prototype的情况下可以这么实现：

var Student=Class.create();
Object.extend(Student.prototype,Person.prototype);

子类要增加方法时可使用

Student.prototype.study=function(){};

或

Object.extend(Student.prototype,{
study:function(){}
});

3、事件机制(对类方法执行的监听和观察)
      在事件机制上则碰到了一些疑惑，作为事件机制主要需要提供事件的定义，对于事件的监听以及对于事件的观察。
      在javascript中事件需要以on开头，也就是作为事件就需要采用onclick这样类似的命名：
      对上面的Student增加一个对外的事件，如：

Student.prototype.study=function(){
             this.onstudy();
      }
      Student.prototype.onstudy=function(){};

这个onstudy就是交给相应的实例去实现的，例如实例采用这样的方式：

      function studyThis(){
          alert("study this");
      }
      var student=new Student();
      student.onstudy=studyThis();

对于事件通常都希望进行监听和观察，根据prototype提供的bindAsEventListener以及Observe，这么进行了尝试：

study.onstudy=watchStudy.bindAsEventListener(this);
      function watchStudy(event){
            alert("watch study");
      }

      按照事件机制来说，在执行study的时候应该可以看到study this和watch study两个提示，但最后执行后只能看到watch study的提示，这是为什么呢？按照listener的概念的话，不应该覆盖原有方法的，不过我看了一下prototype.js的源代码，按照上面的编写方式确实会照成覆盖原方法。
      Observe是这么尝试的：
      Event.observe(study,'study',watchStudy,false);
      按照观察机制来说，应该在执行study的时候会看到两个提示，但最后执行后这行根本就没起到任何作用。
      这是为什么呢？

BlueDavy 2006-02-28 18:01 发表评论