论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

编译器的开发及心得

文章类别：Javascript | 发表日期:2010-3-27 12:13:40

21视频教程网3月27日整理

其中有三个文件：LYZ.js,css.js,event.js。其中LYZ.js为主文件。
LYZ.js中函数包括：LYZ.addEvent(),LYZ.removeEvent(),LYZ.byId(),LYZ.byTag(),LYZ.byClass(),
及辅助函数LYZ._addFunc()和散列表 LYZ.func;
首先是添加/删除事件函数,主要是兼容了浏览器，以及给添加事件函数（LYZ.addEvent）增加了返回值，给删除事件函数
（LYZ.removeEvent）兼容了参数传递(应为我比较喜欢用匿名函数添加事件控制)。因此可用以下方法添加/删除ddEvent(window,"load",function(){});
LYZ.removeEvent(handler);接着就是很简单的选择器（LYZ.byId,LYZ.byTag,LYZ.byClass），其中大部分功能和大家平常用到的没有区别，比如
function $(elem){return document.getElementById(elem);}
所做的改进是对LYZ.byTag函数的返回值做了修改，使其可用pop(),push()。也就是把返回值转换为数组。
个人觉得这两个内置函数很好用。
还有就是对通过选择器得到的元素进行包装。是这些元素具有LYZ.func散列表中所以属性，从使其具有可扩展性。
具体来说：首先是包装器：LYZ._addFunc();

 
代码:
LYZ._addFunc=function(elem){
for(var i in LYZ.func){
elem[i]=LYZ.func[i];
}
}
从代码中可以看出就是把LYZ.func中的属性全部添加到elem中

然后用包装器包装选择器的所有返回值。
例如LYZ.byId（）：
LYZ.byId=function(elem){return LYZ._addFunc(document.getElementById(elem));}
这样，当向LYZ.func中添加函数的话，通过选择器返回的元素也同样具有了此方法。
例如：如果添加函数abc
代码:
LYZ.func.abc=function(){
alert("abc");
}
则执行LYZ.byTag("body").abc();同样可看到结果。 如果再修改abc为：
代码:
LYZ.func.abc=function(){
alert("abc");
return this;
}
这样就有了和JQuery中同样的效果，可延展性。
例如执行alert(LYZ.byTag("body").abc().abc().abc().tagName); 就可以看到执行了三次abc().
如果觉得这样的代码效果很好，不妨再以后的自己代码中试试，只需很小的一个包装器就好。
如果想要延展性也要在每个函数最后返回 this。

当时在想这种效果时还有另一种方案：
就是创建类。例如：
代码:
LYZ.package=function(elems){
this.elems=[];
if(elems.constructor.toLowerCase()=="array"){
this.elems=elems;
}
else this.elems.push(elems)
}
LYZ.func=LYZ.package.prototype={};
在选择器中当然也要更改：
例如：LYZ.byId=function(elem){return new LYZ.package(document.getElementById(elem));}
这样做的好处是不占用元素属性的命名空间，以及可一次处理多个元素。在LYZ.byTag,和LYZ.byClass。
这里就不再多说，附件中LYZ.js的注释中有LYZ.byTag的实现。
坏处是元素内置属性，方法无法应用。以及通用性。
如果谁感兴趣，可以研究一下。

还有另外两个文件event.js,css.js
event.js中主要有两个函数，LYZ.func.followeAble(),LYZ.func.dragAble()
从他们的型式可以看出通过选择器可直接用的。如果觉得前面麻烦，想直接用，就添加参数elem,
并删除代码elem=this，return this就好。
这两个函数一个是鼠标跟随，一个是可拖动，鼠标跟随有两个参数，一个是隐参this，即跟随元素，一个是可选参数：事件域。
另一个是拖动，只有一个隐参this，即可拖动元素。关于拖动论坛上有很多了，它的特点就是如果该拖动元素里设置了可拖动
区域，实质上是检查该元素里是否有元素属性cursor的值为move。则设置只有此拖动区域可拖动元素。默认为整个元素可拖动。

另一个css.js文件中有两个函数LYZ.func.addCss(),LYZ.func.getCss()
其中addCss中的核心代码是:
代码:
for(var i in option){
elemStyle[i]=option[i];
}
其中option为参数，elemStyle=this.style;具体代码可以看css.js
如果对JSON有了解的可以优化下option参数，因为命名规则的原因如果要修改背景色只能，写成{backgroundColor:“#000”}形式。

总结：这个小工具是在自己学习javascript一段时间后的一个总结。下面自己就要学AJAX了。希望没有在各位面前班门弄斧。

最后要说的：欢迎各位转载，更希望各位修改，优化代码后发表。希望上面的东西对大家有用
上一篇：编写ImagesLazyLoad 图片延迟加载效果代码 人气:3016
下一篇：nextSibling为何无效 人气:3138
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058