1. 模板框架

项目的 Demo 在 http://juy.fm

这个音乐站点从功能上,可以简单地理解成是歌单的聚合。所以主要有两个页面:一个是歌单聚合页,一个是歌单详细页(也就是目前 Demo 里展示的页面)。

这两个页面我会复用一个相同的左右两栏结构,左边是辅助栏,右边是内容区。在聚合页中,左栏是歌单列表,右边是当前选中的歌单的展示;在详细页中,左栏是一些辅助按钮,如「返回聚合页」等,右边是 Demo 中所展示的歌单具体内容。

解释以上的设计结构是为了引出我们采用的工具和结构:Iron Router,Meteor 中最知名的路由插件。我们首先要利用它的 Layout 功能,实现页面整体框架的复用,亦即左边 sidebar,右边 main content 的整体结构。

此处有一个小细节:虽然两个页面的整体结构一致,但样式不一定相同,比如聚合页的左栏是列表,宽度会比较大。为了区分样式,需要在结构的顶层(也就是 <body> 标签)上加 class,我目前想到的实现方式是在 router.js 中渲染整体结构之前加。(因为此时 body 这个 DOM 已经有了)

另外,目前使用了一个样式预编译的插件,它兼具把 stylus 转换成 css 和对 css 进行 auto-prefixer 处理的功能。

Github代码:模板整体结构

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,692评论 25 709
  • 轻盈闪耀着 它乘着风 等日落 下山坡 恋上夏夜森林的 墨绿色 像烟火 看似狂欢却悄然盛开寂寞 独自发光的...
    笛夕阅读 4,266评论 2 3
  • 下午跟同事聊天,谈到“中年危机”这个话题。迷茫,压力大,时不时的有种无力感,这可能是而立之年的我们遇到的普...
    GuoFei阅读 3,561评论 0 1
  • 1、 前几天,我打电话给一朋友,想和她要点写作的素材,她很爽快的答应了,说一会儿微信上给我发过来。过了片刻,我如愿...
    冰天落落阅读 5,697评论 0 2
  • 原来彩排不仅仅是在演讲前、面试前、考试前、而是可以在每天的工作前,这是让我觉得很有感受的点。
    梨子瘦了阅读 1,761评论 1 2