YUI 3开发Web应用的诀窍

 

我们知道，YUI3的设计始终围绕着“模块”展开。今天我不想过多解释什么是模块，因为Nicholas Zakas在他的文章”构建可伸缩的前端架构“中已经做了详尽说明。在这里我将着重阐述如何构建这些模块。文章中的大部分内容都可以从在线文档查阅，并有其他可代替的方法。当然在线API文档的内容大而全。本文只是介绍其中的精华的部分——基于YUI3开发web应用的诀窍，这里的“诀窍”更针对短小精悍的程序场景，不像Nicholas Zakas所指的架构级场景，毕竟仅凭本文的篇幅无法全部展开讲述YUI3。

模块的定义

首先我们要对模块进行定义，一种常见的方法是将页面可视区域的不同部分做切分，导航、菜单、正文、边栏面板等等。然后查一下YUI是否已经提供了这些模块，比如YUI3就没有提供“菜单”组件，但提供了Node-MenuNav插件，这个插件可以将结构化好的html代码（ul>li）渲染成具有交互行为的菜单。或者你可以直接去YUI Gallery中去找基础组件。不管怎样，你总会找到一种容器或者布局，可以让你往里填充你需要的东西，ok，让我们从这里开始。

我建议将每个模块都封装进一个文件，放在和文件名同名的目录中，比如weather模块应当放在/weather/weather.js中，这样做的原因是，有可能你的组件会依赖一些样式，包括css和img等，将这些样式和资源文件放到和js同一个目录下，YUILoader就会很方便的找到他们。这样，样式文件就可以放在weather/assets/skins/sam/weather.css，同样，其他图片和样式也可以按这种方式放置，当然我们假设你没有使用YUI Builder来打包你的项目，这就有点说来话长了。assets目录和skin目录的含义不言自明，但sam目录就搞不懂啥意思了，其实sam是YUI配置项中skin的默认值，指代YUI内嵌组件的默认样式，sam取名自其设计师Sam Lind。因此你也可以使用你的昵称作为你的组件皮肤名称，当然这需要你在YUI全局配置中传入skin参数，简单起见，我们这里只使用默认皮肤。

 

---