带有 JavaScript OOP编程和jQuery的GUI自定义控件

分享于 

7分钟阅读

Web开发

  繁體

介绍

在本文中我将展示如何使用 JavaScript OOP编程和 jQuery ( jQuery将被用来帮助处理DOM操作) 创建一个可以在网页中使用的自定义HTML控件。
它的基本思想是使用JavaScript编写控件( 这是不同的HTML标签。样式。css和事件处理程序的组合),可以将自己添加到网页或者其中的一部分,用它自己的逻辑 inside 来完成。
JavaScript编程是一个巨大的主题。 这里我将介绍构建对象( 而且只有一种可能的方法)的第一步,我将保持代码简单易懂。 在生产环境中,必须考虑更多方面: 我认为必须完全理解 _proto_。原型链。继承。多重继承。名称空间和字典( 只命名几个)。

首先。为什么我们要建立这样一种控制?

网络上有很多用 JavaScript。HTML和CSS编写的界面控件,其中一些是开源的,有些是商业的。 重点是,由于JavaScript不再是web的语言,我们可以使用这些控件开发桌面和移动应用程序。
尽管我们可以找到在网上冲浪的控制量,有时我们不能找到我们需要的东西( 因为很多原因)。 找到一个 control,我们不知道它是什么功能。control control control我们只需要一个功能就可以了。control control control control control documentation documentation。
本文是从头开始构建控件的一个起点。 我将使用jQuery作为一个库来帮助处理DOM操作。

我叫 MyDiv,我是一个图形用户界面。很高兴见到你 ! 需求。草图和类模式来修正想法

让我们为GUI控件设置一些简单的要求

-the控件将被称为 MyDiv
-it将能够在带有默认和自定义css样式的网页中呈现自己
-it将分为两个部分: 显示自定义消息以及用用户可以单击的black的底部部分显示的上下色部分。
-when在上部部分单击该控件,它显示消息: "你点击了 black 区域的N 次"( 它的中N 是单击上部零件的次数) !
-when在下面的black 部件上单击该控件,它显示了消息: "你在 black 区域点击了i 次"( M 是点击下面的black 区域的时间数) !

绘制需求的手绘草图

控件的简单类架构

这里有一个简单的方法列表。变量和处理程序的列表,并简要描述它们的含义

inside 附加的代码关键概念。

这里我解释一些我认为非常有用的概念,它们可以用来预览附加的项目文件中的代码。

构造函数

为了在 JavaScript OOP编程中定义对象的构造函数,我们使用JavaScript函数。 因此,使用下面的代码,我们定义了MyDiv控件的构造函数:


var MyDiv = function (pId, pParent, pWidth, pHeight, pText)


{


 //all our variables, methods and event handlers go here 


 //[...]


}



为了允许MyDiv更具自定义性,我们向构造函数传递以下参数:
pId: 我们的对象的id
pParent: HTML标记或者jQuery选择器,我们希望在其中放置控件
pWidth: 控件宽度
pHeight: 控件的高度
pText: 在单击前显示的自定义消息

使用构造函数创建对象实例时,我们可以使用该构造函数以这种方式创建MyDiv实例:

var MyDiv1 = new MyDiv('MyDiv1', 'body', 450, 120, "Hi, my name is MyDiv1 I'm a GUI control and I'm an instance of the object MyDiv...nice to meet you!");



按照讨论的构造函数参数 上面的含义,这段代码意味着:
我可以在 body MyDiv control,我是对象MyDiv的一个实例,height,meet,meet,meet,meet,printed,printed,printed,printed,printed,printed,printed,meet,meet,meet,meet。 '

添加方法

为了改变控件的行为,我们定义了一些 public 方法。
下面是你将在代码中找到的方法之一:





this.AddCssClass = function (ppCssClass) {


 $(div0).addClass(ppCssClass);


}



方法称为 AddCssClass。 它具有以下参数:
ppCssClass: 动态创建的html元素的类名,名为 div0.
在创建控件MyDiv1实例之后,可以这种方式调用该方法:
MyDiv1.AddCssClass('myCSSClass');
代码将控件MyDiv1的css类更改为名为myCSSClass的类。

添加事件处理程序

事件处理程序允许我们作为用户与控件交互。 下面是你将在代码中找到的方法之一:


function div1_click_Handler()


{


 ClickNonBlackAreaCounter += 1;


 if (ClickNonBlackAreaCounter == 1)


 $(this).html('You clicked me ' + ClickNonBlackAreaCounter.toString() + 'time ' + 'out of the black area!');


 else


 $(this).html('You clicked me ' + ClickNonBlackAreaCounter.toString() + 'times ' + 'out of the black area!');


}



事件处理程序负责我们单击MyDiv控制端的非 black 区域打印一些消息以响应单击。

结语

这个项目附带了( HTML,CSS和 JavaScript ) inside的所有代码,用于教学目的,这是一个很好的。 real项目中,使用不同的文件来更好地照顾 SOC ( 关注点分离),这是一个好主意,在深入的JavaScript OOP编程平台中研究它也是个不错的主意。

编码不错 !

修订历史

21-Jun-16:

  • 相同的文章内容。标题的小改动。 已经添加修订历史部分

17-Jun-16:

  • 标题为"OOP编程和jQuery的GUI控件"

相关文章