TableGrid

分享于 

12分钟阅读

Web开发

  繁體

介绍

我已经发布了 Google+,我发现没有简单的方法来搜索包含特定标签的帖子。 我的想法是列出Google+帖子标题和标签。

图 1 a: 关于Google+帖子标题和标签列表的设计

使用这个界面,用户可以看到帖子的所有标题,但是 hashtags,所以在列表中遵循主题比较容易。

这个项目由一个简单的代价为的HTML 构建,并用 JavaScript ;;在未来,用数据来开发标题和标签以动态获取一些数据。 [ 可以快速回顾 Google+ API,以便我相信没有办法生成我所需要的数据,以简单的格式。 为此,我计划先手工放置数据,但格式可以由自动化复制,以后再使用适当的源代码进行复制。]

核心任务是创建一个行生成器,它可以为 table 或者网格生成的HTML。 因此,主类称为 TableGrid。 但是,包含了几个 helper 函数。

当前项目使用这个类构建用户界面,并使用的CCS 风格。

以下是在GitHub上的 repository库,下面的标签与本文对应:

背景

[You can skip this section if you are only interested in code. ]

to有很多优秀的文章,因这里入门将是合并我的知识的好方法。 但是,在执行我自己的文章时,直接开发它们并不是因为它们符合tmodel需求。 我需要一个进步。

偶尔,我可以找到一个关于我收集了一些信息的问题,然后我可以把笔记作为答案。 [Although Q&A streams are often like stepping into a windtunnel. ]

然后我开始在 Googleplus g+上发布,你可以使任何文章简单或者复杂,然后重新编辑。 因这里,他们开始填写 g+,而不是将这些想法丢弃到一篇文章中。

现在我已经完全圆了,因为我要描述一个小项目,从我的g+文章中继续控制。

文章内容

该项目由以下文件组成:

  • HtmlTools.js - 包含用于构建表格和网格并从数据中填充它们的类 TableGrid
  • 这是一个简单的网页,用来演示这个项目中的用户界面。
  • googlePostsList.css - 附带的CSS
  • codeBehind.js - 使用这里演示的TableGrid
  • Data.js - 包含这里示例的JSON数据

虽然这不是一个困难的项目,但有几个主题涉及。 为了单独考虑这些主题,本文将首先介绍前端UI和样式设置。 然后讨论了数据需求,并给出了类 TableGrid 及其开发。

用户界面和样式

的HTML 和收费的CSS的显示显示在图 1中。 HTML结构是交替的div,因此它们可以形成两列或者一堆交替hashtags和标题。

图 2 a: 替代布局,堆栈中的posts标题和标记,与图 1比较

列表 1: 一个帖子的html

<divclass="list_container"><divclass="post_tags"><spanclass="hashtag_button">hashtag1</span><spanclass="hashtag_button">hashtag2</span></div><divclass="post_title"><ahref="https://..."> Title</a></div></div>

通过使用 CSS,可以将 div 属性设置为 inline-block,并通过增加第二个 div 中的line-height 来获取每个post下的空白。

.post_tags {
 display: inline-block;vertical-align: top;}
.post_title {
 display: inline-block;line-height: 22px;...}

hashtags和标题的外观设置为 CSS类和 post_title>a are设置为列表项的外观类似于 Google+。

.hashtag_button {
 background-color: #EEE;border-color: #DDD;...}.post_title>a {
 color: #404040;font-style: italic;...}

注意,hashtag_button 仅用于这里外观,因此与容器类 post_tags 分离。

hashtags 构成水平堆栈 inside divpost_tags 值控制堆叠。 然后在一个响应式布局的部分,changes---where的各种 width 设置也设置为 text-align的defined---the行为不同。

对于完全大小,如图 1所示,它是默认值。

.post_tags {
 text-align: right;width: 30%
}

对于小尺寸( 如图 2 ),由媒体规则控制。

@mediascreenand (min-width:0em) and (max-width:40em){...
. post_tags {
 text-align: left;width: 100%; }
...}

数据

图 1a 中的用户界面示例显示了每个帖子所需的一些数据:

  • hashtags
  • title

另外,UI使用post标题作为链接,以post的url作为链接。

  • google邮政帖子的网址

在Google+上跟随标签,它被添加到基本url中:

  • plus.google.com/explore/

像这样:plus.google.com/explore/hashtag [NB this link is not implemented in the current example.] 不需要每个post的额外数据,所以单个post的JSON数据具有以下格式。

清单 2单一的a: JSON数据

{ tagList: ["tag1","tag2"], 
 title:"Title of post",
 link:"https:.. ."
}

每个帖子的数据因此作为一个元素存储在 array 中。

TableGrid

如简介所述,代码 behind的要求是从数据行构建一个HTML列表。 这是一个常见的任务,有许多解决方案,这个解决方案使用JavaScript在浏览器中使用 TableGrid

我已经展示了我想要使用的特定数据,但是我真的想要最大化所开发代码的可以重用性。 为了确定最佳架构,我们将层次结构与简单 2D 表进行比较。

以非常简单的方式开始,例如可以在 HTML table 中呈现为列表的动物列表,每行都会生成

<tr><td> dog </td></tr>

这里示例中的某些功能可以在一般情况下重用。

  • 对数据行进行迭代

同样,table 行始终以相同的顺序 <tr>.. . </tr> 开始和结束。 这行的包装也可以在更复杂的结构中分离。

  • 从数据格式中分离行的换行。

然而,在这种情况下处理数据是很简单的,只需将数据与 <td>data</td> 一起包装,但这一。 我们还希望能够处理各种类型的数据,从单个字符串和数组到更复杂的层次结构,并将它们添加到 table 或者其他结构中。

接下来考虑一个更复杂的例子。 比如以前建议使用的JSON数据允许分层数据集。 那么问题就是找到一个既能满足简单例子又能满足复杂例子的Pattern。 此外,我们还需要能够构建比简单 table 更复杂的结构。 我选择让开发人员定义将数据行接收数据行的函数,然后构建任何结构。

  • 可以自定义的函数,将数据行转换为格式化输出。

来自 上面 需求的Pattern 如图 3所示。

图 3 a: TableGrid类和用法 Pattern

为了演示这个问题,我们将继续这个示例。 从清单 1a 中,我们可以识别每一行的前缀为 <div class="list_container">,后缀为 </div>。 然后,可以在定制行生成器函数中从清单 2a 中的JSON数据构建包含元素的内部数据,这是在遍历行的过程中调用的。

function myLineBuilder(data){
 s = 'nt<divclass="post_tags">ntt'
 s += HtmlBuilder_wrapArray(data.tagList, 
 ' <spanclass="hashtag_button">', '</span>')
 s += 'nt</div>'
 s += 'nt<divclass="post_title">'
 s += 'ntt<ahref="'+data.link+'/">'
 s += 'ntt'+data.title+'</a>'
 s += 'nt</div>'
 return s
}

注意 HtmlBuilder_wrapArray 函数是包含在 HtmlTools.js 中的helper 函数,这里用于为 hashtags array data.tagList 生成 span 标记。

现在我们可以将这些内容插入 TableGrid:

tg = new TableGrid()
tg.setLineBuilder( myLineBuilder, 'n<div class="list_container">', 'n</div>')

然后执行构建并请求结果:

tg.buildRows(myPostList)
htmlString = tg.getBlock()

其中,myPostList 是每个帖子的数据行的array。

实现 TableGrid的代码是:

function TableGrid(){
 this.linebuilder
 this.linePrefix
 this.lineSuffix
 this.block=""this.setLineBuilder=function(lb,pre,suf){
 this.linebuilder=lb
 this.linePrefix=pre
 this.lineSuffix=suf
 this.block = "" }
 this.buildRows=function(table){
 //will loop over the top layer and pass each item to line builderfor(var i=0; i<table.length; i++){
 tg.buildLine(table[i])
 }
 }
 this.buildLine=function(data){
 //prefix line s = this.linePrefix
 //run the line builder callback s += this.linebuilder(data)
 //suffix line s += this.lineSuffix
 this.block += s
 }
 this.getBlock=function(){ returnthis.block; }
}

检查用法

  • 构建数据结构
  • 设计数据的HTML视图
  • 将HTML结构分解为行包装。行内容。行内容和 table 包装器
  • 编写行生成器
  • 初始化 TableGrid
  • 一旦完成,数据就可以发送到 TableGrid.buildRows

可以通过发送新数据集来重用 TableGrid 本身的实例。

显然,对于构建简单表,这将导致一个相对复杂的方法。 为了保持简单性,可以为简单表提供一个。 这有额外的好处,这些预定义的类实例也可以用于测试。 这在本文中没有进一步讨论,而是在上传的项目中。

摘要

这个项目涵盖了少量的 HTML,JavaScript JSON JSON JSON CCS。

感谢你的阅读,请留言。

历史记录

  • 版本 1

tab    
相关文章