带有jQuery对象的OOP:更改jQuery数组的原型与创建我自己的对象树 [英] OOP with jQuery objects: changing prototype of jQuery arrays vs. creating my own objects tree

问题描述

简介

对于我的新工作，我必须编写一个经典的下拉菜单示例，该示例易于访问(通过鼠标和键盘)并且与屏幕阅读器兼容(通过正确管理WAI-ARIA属性和状态).我的团队由正常"人员和身体残障人士组成，他们说，到现在为止，他们无法找到完全可访问的下拉菜单，因此我们正在尝试创建自己的产品以送给客户.

好吧，我来自Ruby on Rails，并且直到现在才编写复杂的JavaScript代码，因此我试图将我从Ruby的OOP知识应用到JS世界中.由于我非常了解CoffeeScript，并且在后台提供了很多魔术，这使得使用类和继承变得容易(尽管JS是一种对象驱动语言，并且没有类之类的东西)，所以我坚持使用CoffeeScript而不是简单的方法JS.

我正在尝试建立类似于下拉菜单的适当对象树:

• 有一个Item类.
• 有一个ParentItem类继承自Item.
• 有一个RootParentItem类继承自ParentItem.

这样，所有根项目的类型都为RootParentItem，所有其他父项(具有自己的子菜单的项目)都为类型ParentItem，所有真实"菜单项(指向某个位置的链接)在网站上)的类型为Item.

通过设置适当的对象树，我认为根据项目的类型来处理不同的按键动作，鼠标动作等非常简单合理.这有助于防止冗长的过程性面条代码，我在许多其他提供类似功能的JS库中都看到过这种代码.

以下是我当前工作的一个示例: http://codepen.io/jmuheim/pen/fAjcx

现在经过一番思考之后，我问我一个问题:创建自己的对象树是否合理，同时在后台有很多jQuery数组并将它们保留在对象的变量中?拥有一个不错的树形结构有点奇怪，但是总是使用结构完全相同的阴影"，例如:jQuery数组.

如上所述，我来自一个高度面向对象的Ruby世界.我在JavaScript世界中没有任何干净的编码实践/模式方面的经验，所以:

• 您认为我的尝试合理吗?
• 是否有一种更清洁的方法(公开接受的方法)?也许直接在jQuery数组的原型上工作会更合理吗?不过怎么办呢?
• 关于我的JS编码风格的其他评论吗?

解决方案

和所有真实"菜单项(指向网站上某个位置的链接)的类型为Item.

我会考虑为它们使用从Item继承的RealItem或LinkItem类.

创建自己的对象树，同时在后台有很多jQuery数组并将其保留在对象的变量中是否合理?

是的.大多数具有MVC模型的应用程序所做的就是-视图组件控制DOM，并将对它(或jQuery包装器)的引用作为类中的属性/变量保存.

是否有一种更清洁的方法(公开接受的方法)?也许直接开发jQuery数组的原型会更合理吗?

我认为那不会更干净.

这怎么办?

是的，您可以从jQuery集合中继承，但我不推荐这样做.

关于我的JS编码风格的其他评论吗?

如果您使用一些实用的编程实践，则代码可能会变得更加干燥，但是我认为这很好.

Introduction

For my new job I have to write a classical dropdown menu example that is highly accessible (by mouse and keyboard) and that is compatible to screen readers (by managing WAI-ARIA attributes and states properly). My team consists of "normal" people and people with bodily disabilities, and they say they weren't able to find a fully accessible dropdown menu until this point, so we are trying to create our own to give to clients.

Well, I'm coming from a Ruby on Rails background and didn't write complex JavaScript code until now, so I'm trying to apply my OOP knowledge from Ruby to the JS world. Since I know CoffeeScript quite well, and it's offering quite some magic in the background which makes working with classes and inheritance easy (although JS is an object driven language and there's no such thing as classes), I'm sticking to CoffeeScript instead of plain JS.

I'm trying to set up some proper object tree that resembles a dropdown menu:

• There's an Item class.
• There's a ParentItem class which inherits from Item.
• There's a RootParentItem class which inherits from ParentItem.

This way, all root items are of type RootParentItem, all other parent items (items that hold their own sub menus) are of type ParentItem, and all the "real" menu items (links pointing to some place in the website) are of type Item.

By setting up this proper object tree, I think it's very simple and reasonable to handle different key actions, mouse actions, etc., depending on the type of item. This helps to prevent long procedural spaghetti code, that I have seen on many other JS libraries which are providing similar functionality.

Here's an example of my current work: http://codepen.io/jmuheim/pen/fAjcx

Now after some thinking I asked me the question: is it reasonable to create my own object tree, while having a lot of jQuery arrays in the background and keeping them in my objects' variables? It somehow feels odd to have a nice tree structure, but always working with a "shadow" of quite the same structure, say: jQuery arrays.

As mentioned, I'm coming from a Ruby world, which is highly object oriented. I don't have any experience in clean coding practices/patterns in JavaScript world, so:

• Do you think my attempt is reasonable?
• Is there a cleaner (publicly more accepted) way of doing this? Maybe working directly on the prototypes of the jQuery arrays would be more reasonable? How could this be done though?
• Any other comment about my JS coding style?

解决方案

and all the "real" menu items (links pointing to some place in the website) are of type Item.

I would consider using a RealItem or LinkItem class for them that inherits from Item as well.

Is it reasonable to create my own object tree, while having a lot of jQuery arrays in the background and keeping them in my objects' variables?

Yes. That what most apps with MVC model do - the view component controls the DOM, and keeps references to it (or jQuery wrappers) as properties/variables in the class.

Is there a cleaner (publicly more accepted) way of doing this? Maybe working directly on the prototypes of the jQuery arrays would be more reasonable?

I don't think that would be much cleaner.

How could this be done though?

Yes, you can inherit from jQuery collections, but I wouldn't recommend it.

Any other comment about my JS coding style?

The code could get a bit more DRY if you'd use some functional programming practises, but I think it is fine.

这篇关于带有jQuery对象的OOP:更改jQuery数组的原型与创建我自己的对象树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！