JavaScript组件开发
文章平均质量分 85
分享JavaScript组件开发基本技术、经验。
hongweigg
这个作者很懒,什么都没留下…
展开
-
开发JavaScript组件(完整示例)
使用JavaScript,按照面向对象的思想来构建组件。现以构建一个TAB组件为例。从功能上讲,组件包括可视部分和逻辑控制部分;从代码结构上讲,组件包括代码部分和资源部分(样式、图片等)。组件的特点:高内聚,低耦合(不与其他代码逻辑交叉,可以继承,包含);封装性(隐藏私有方法和变量);可重用性(可反复多次使用,用来组装更复杂的应用)。JS 组件.TabControl原创 2015-01-15 20:07:06 · 7969 阅读 · 3 评论 -
使用jQuery进行组件开发(完整例子)
使用jQuery进行组件开发和使用纯JavaScript脚本(不使用框架)原理基本类似,特别是公共方法的组织是一样的。不同点是,jQuery使用了插件机制,通过$()直接进行操作对象(DOM元素)绑定,然后对DOM元素或HTML代码进行绑定事件等的操作。另一个不同点则是把jQuery当做工具来使用,用来创建DOM对象,快速查找指定DOM对象等。例子测试通过。初级简单示例,只实现了增原创 2015-01-15 19:13:10 · 19763 阅读 · 1 评论 -
EXTJS 组件开发(完整例子)
目标:EXTJS组件开发,从component基础实现一个TAB控件。使用EXTJS版本为5.0。测试通过。这个例子还很初级,仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。EXT JS TEST .tabsDiv{ width:500px;height:450px; margin-top: 0px; margin-left: 0px原创 2015-01-15 17:30:25 · 7617 阅读 · 0 评论 -
javascript prototype 实现类似OOP继承
这里要说明的是,公有属性(使用this.修饰符)可以被覆盖,私有属性(使用var 修饰符)不能被覆盖子类不能访问父类的私有属性,父类的方法正常访问父类的私有变量。function Vegetable(){ this.taste='delicious'; var a原创 2011-09-29 17:59:58 · 847 阅读 · 0 评论 -
javascript 使用prototype 实现OOP继承
使用prototype特性,可以很方便的在子类中继承父类的方法和属性。下例中Vegetable视为父类,Celery视为子类。Vegetable 拥有属性taste, 方法fun1Celery 拥有属性 color, 方法fun2,如果再定义与Vegetable 中同原创 2011-09-29 11:49:37 · 983 阅读 · 0 评论 -
一个TIP信息提示框的实现
<!--#mopTip01 .arrowSet {font-size:3px}#mopTip01 .tip {vertical-align:top; background:#FFF}#mopTip01 .content {padding:4px;原创 2011-09-27 18:20:44 · 2621 阅读 · 0 评论 -
ul li 制作横向菜单
关键的CSS设置:float:left;配置.wlsc-menu-active{ float:left;}配置控制原创 2014-01-18 18:41:43 · 2210 阅读 · 0 评论 -
javascript prototype
prototype 可以定义一个对象或称类的方法和属性,下面的例子实现了类似的面向对象编程的方法和属性的设置function Test1(){ alert('test1 init'); this.p = 'Test1\' property-p';}Test1.p原创 2011-09-28 17:02:18 · 1032 阅读 · 2 评论 -
javascript call callee
call 能实现类似的面向对象继承:function Person(){ this.a = 'person'; this.b = function(){ alert('I\'m a person!'); } this.c = 'Person\' c pro原创 2011-09-28 15:57:32 · 946 阅读 · 0 评论 -
javascript apply
apply 方法很强大,可以用来实现类似面向对象编程的特性。实现继承:function Person(){ this.a = 'person'; this.b = function(){ alert('I\'m a person!'); }}funct原创 2011-09-28 15:07:38 · 1361 阅读 · 0 评论 -
js的call方法 apply方法 caller属性 callee属性
js的call方法_apply方法_caller属性_callee属性 原文地址:http://aweber.blogbus.com/logs/46751586.html一、call 方法调用一个对象的一个方法,以转载 2011-09-28 16:14:06 · 1111 阅读 · 0 评论 -
javascript caller
返回函数的调用者function test1(){ if(test1.caller == test2){ alert('test2 call me!'); }else if(test1.caller == test3){ alert('test3 call m原创 2011-09-28 16:41:58 · 992 阅读 · 0 评论 -
javascript 遍历页面中所有的元素
javascript 遍历页面中所有的元素,获取每个元素的节点类型,全局索引号var nodes = document.all;for(var i=0;i<nodes.length;i++){ var o = nodes[i]; alert(o.tagNam原创 2011-09-30 17:36:57 · 8278 阅读 · 0 评论 -
Web开发中的Drag and Drop
这几天做了一些drag&drop操作方面的工作,在这里把一些注意事项记录下来,算是给自己备个忘,也给需要做类似工作的人留个树阴。这里要讨论的drag&drop是指使用IE提供的内置机制,而不是使用鼠标模拟的那种"假"drag&drop,比如移动一个div或span的效果那种。转载 2011-09-20 18:23:49 · 1327 阅读 · 0 评论 -
Javascript 中 Array和Object的关系
Javascript中, Array 也是Object, 但有的人可能会误认为,形如a['key'] 的访问是Array的功能,其实不是。如下例中,Array 赋值后,其length属性仍然为0,因为数据并没有被放到数组的位置中,而是被放到了Array的原形对象Object中。var a = new Array();a['one'] = 1;a['two'] = 2;a['t原创 2011-11-07 21:49:28 · 3714 阅读 · 0 评论 -
css优先级别
CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。CSS优先级的计算规则如下:* 页面中定义的样式,加1,0,0,0* 每个ID选择符(如 #id),加0,1,0,0* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hove转载 2011-12-01 17:56:33 · 3122 阅读 · 0 评论 -
两层容器的position 之间的关系
在HTML的CSS种,容器如DIV有三种position属性:static, relative,absolute。其中static为默认属性,relative意为相对父容器定位,absolute意为相对可定位的上层容器进行定位,这个上层容器不一定是父容器,若找不到可定位的上层容器,则会以document.body进行定位。若容器套容器,它们之间如何相互作用?见下面的实验。po原创 2014-09-12 15:24:12 · 2540 阅读 · 0 评论 -
JavaScript函数同名覆盖问题
在JavaScript脚本中,局部函数与外围函数同名,则会覆盖掉外网函数,即变量可以重复定义。见下面的例子。A = function(){ var me = this; me.method1 = function(){ var items = [1,2,3,4,5]; for(var i=0;i<items.length;i++){ if(1){ var ite原创 2014-12-08 16:27:15 · 4210 阅读 · 1 评论 -
三层DIV定位
CSS的position有三种属性:static, relative, absolute,如果DIV套DIV,达到多层,这些层间的定位关系又是怎样的呢?1、只要父容器的postion属性不为static,组件就会以父容器作为定位基准,否则找上一级可定位的容器作为基准。2、上一级定位容器的relative和absolute对应的定位位置有差异,一个不包含边框宽度,一个包含边框宽度原创 2014-09-12 15:42:45 · 3293 阅读 · 0 评论