65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 JavaScript OOP 编程和 jQuery 的 GUI 自定义控件

fede.net
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.22/5 (6投票s)

2016年6月17日

CPOL

5分钟阅读

viewsIcon

22202

downloadIcon

320

本文介绍了使用 JavaScript OOP 编程和 jQuery 构建自定义 HTML 控件的基础。

 

引言

在本文中，我将向您展示如何使用 JavaScript OOP 编程和 jQuery 创建一个可以在网页中使用的自定义 HTML 控件（jQuery 将用于辅助 DOM 操作）。
基本思想是拥有一个控件（它是一个 HTML 标签、样式、CSS 和事件处理程序的组合），该控件用 JavaScript 编写，能够将自身添加到网页或其中的一部分，并包含其所有逻辑。
JavaScript 中的 OOP 编程是一个庞大的话题。在这里，我将涵盖构建对象的第一步（也是仅有的可能方法之一），并且为了易于理解，我将保持代码简单。在生产环境中需要考虑更多方面：原型（prototype）、_proto_、原型链（prototype chain）、继承、多重继承、命名空间（namespaces）和 TypeScript（仅举几例）等，在我看来，要精通 JavaScript OOP 编程，必须完全理解这些。

首先……我们为什么要构建这种控件？

网络上有很多很棒的 GUI 控件，它们是用 JavaScript、HTML 和 CSS 编写的，其中一些是开源的，一些是商业的。重要的是，如今，由于 JavaScript 不再仅仅是 Web 的语言，我们还可以使用这些控件来开发桌面和移动应用程序。
尽管我们在网上可以找到大量的控件，但有时我们可能找不到我们需要的（原因有很多……例如：我们找到的控件不是开源的，它很有用但我们没有预算购买它，我们知道我们只需要一个功能但该控件提供了我们永远不会使用的过多的功能，我们发现 bug，没有提供文档……等等）。
好了，本文是构建一个从头开始的控件的起点。我将使用 jQuery 作为库来辅助 DOM 操作。

嗨，我的名字是 MyDiv，我是一个 GUI 控件……很高兴认识你！需求、草图和类图来确定想法

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

- 该控件将被调用 MyDiv
- 它将能够使用默认和自定义 CSS 样式在网页中渲染自身
- 它将分为两部分：一个显示自定义消息的上部彩色区域和一个用户可以单击的下部黑色区域
- 当控件的上部被单击时，它会显示消息：“你已经点击了我 N 次，但不在黑色区域！”（N 是在上部单击的次数）
- 当控件的下部黑色区域被单击时，它会显示消息：“你已经点击了我 M 次，在黑色区域！”（M 是在黑色区域单击的次数）

需求的简易手绘草图

控件的简单类图

这里是控件的方法、变量和处理程序的简单列表，以及它们含义的简要说明

在附件代码中。关键概念。

在这里，我解释了一些我认为有用的关键概念，以便预先了解附件项目文件中的代码。

构造函数

为了在 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!");

遵循上面讨论的构造函数参数的含义，这段代码的意思是
“创建一个 ID 为 MyDiv1 的 MyDiv 对象实例，附加到 body，宽度为 450px，高度为 120px，并打印自定义消息‘嗨，我的名字是 MyDiv1，我是一个 GUI 控件，我是 MyDiv 对象的一个实例……很高兴认识你！’”

添加方法

为了改变我们控件的行为，我们定义了一些公共方法。
这里是您将在代码中找到的一个示例方法

this.AddCssClass = function (ppCssClass) {
    $(div0).addClass(ppCssClass);
}

该方法名为 AddCssClass。它有以下参数
ppCssClass：要更改的类名，用于动态创建的名为 div0 的 HTML 元素。
在创建 MyDiv1 控件的一个实例后，可以通过以下方式调用该方法
MyDiv1.AddCssClass('myCSSClass');
这段代码使用名为 myCSSClass 的类更改 MyDiv1 控件的 CSS 类。

添加事件处理程序 

事件处理程序允许我们用户与控件进行交互。这里是您将在代码中找到的一个示例方法

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 控件非黑色区域的次数，并打印一些消息以响应单击。

结论

为了更好地实现关注点分离（SOC），该项目将所有代码（HTML、CSS 和 JavaScript）包含在单个 HTML 文件中，用于教学目的，并且注释良好。在实际项目中，为了更好地实现 SOC，最好使用不同的文件，并且最好深入研究 JavaScript OOP 编程（如引言中所述，这是一个庞大的话题）。

编码愉快！ ;D

修订历史

2016-06-21

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

2016-06-17

  • 原始文章标题为“使用 JavaScript OOP 编程和 jQuery 的 GUI 控件”

 

© . All rights reserved.