gpt4 book ai didi

javascript - 使用 agility.js 进行页面布局和组合

转载 作者:数据小太阳 更新时间:2023-10-29 05:23:34 25 4
gpt4 key购买 nike

我是 MVC 风格的 javascript 库的新手,如果这个问题太基础,请原谅我。我正在尝试写一个 Single-Page Application完全在 jQueryagility.js . agility.js 中给出的示例 documentation完全包括将 html 元素添加到文档根目录。问题:是否有“最佳实践”方法来按组件组装页面。

这是我的 html 应用程序的粗略轮廓:

<html>
<head> ... </head>
<body>
<header> ... </header>
<div id=PageHolder>
<div id=AppPane_1></div>
<div id=AppPand_2></div>
</div>
<footer> ... </footer>
</body>
</html>

在“AppPane”div 中将是应用程序的内容。

好吧,鉴于所有这些,我不是在问我能做什么,而是在问我应该做什么。

我从文档和研究中看到我有 3 个选择:

  1. 从原子敏捷对象创建我的页面组合,并将它们组装到 jQuery 文档就绪 block 中。 $$.document.append(Foo) 适用于根元素,但我不知道如何将 Foo 的子元素添加到 foo。
  2. 使用一个(非常大的)敏捷对象,它从上方布置基本静态 html,并使用 controller 函数(我无法开始工作)附加控件和诸如此类的东西要么)
  3. 使用一个根敏捷对象并使用 View 将所有子级附加到它(不知何故,我也无法让它工作。)

其中哪一个最好,所涉及的语法是什么?提前致谢,非常感谢任何有关将 html 组件组装成有说服力的敏捷应用程序的指导。

http://jsbin.com/ojenon/1/


最佳答案

在我看来,组织页面模块的最佳方式是将各个客户端模板保存在头部的脚本标记中:

<html>
<head>
<script type="text/template" id="template1">
<b>Some <abbr>HTML</abbr> template</b>
</script>
<script type="text/template" id="template2">
<b>Some <abbr>HTML</abbr> template</b>
</script>
</head>
...

您甚至可以选择使用模板语言,例如 jQuery.template 或 handlebars.js,以促进逻辑、变量插值等。

然后,在您的 Controller 中,您将从 DOM 加载这些模板脚本标记的 html 内容,并根据需要将它们复制到目标 div (#PageHolder) 中。

此技术的替代方法是将模板存储在头部的文字 JS 对象中:

<script type="text/javascript">
var Templates = {
template1: "<b>Some <abbr>HTML</abbr> template</b>"
...
}
</script>

这仅仅是个开始。还有更多选项,例如预编译您的模板、分割您的模板以避免冗余模板编译等。从结构的 Angular 来看,将您的模板保存在专用位置将有助于您扩展您的单页应用程序。

关于javascript - 使用 agility.js 进行页面布局和组合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12443313/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com