用Knockout做个SPA吧。
knockout-spa.mybluemix.net (用本框架做的演示/文档站)
这是什么?
迷你但五脏俱全的单页程序 (SPA) 框架和脚手架,用于快速创建SPA并且保证能够优雅地扩展成巨型应用。
功能特色
演示
快速开始指南
- 安装
node
和npm
,如果还没有的话。 - 克隆/下载 本项目。你也可以运行
npm install knockout-spa
来从 NPM 安装,然后手动把knockout-spa
文件夹移出node_modules
文件夹,放到你通常放项目文件夹的地方。 - 在你操作系统的终端上
cd
到你保存本项目的文件夹。运行npm run dev
来运行开发模式,或者运行npm run prod
来运行生产模式。 - 访问 http://localhost:8080 (或者你制定的端口) 来看运行的app。注意:
- 采用历史API适配所以
index.html
会被用于所有404请求。 - 你也可以修改
server.js
用来做跨域资源请求 (CORS) 代理. - 这只是个仅用于开发环境的简单资源服务器。用于帮助更容易地运行和测试所开发的app。在现实生活中,你可以把前端完全部署到CDN上,然后开启后台API服务器的CORS设定以接受来自该CDN域名的跨域资源请求。或者你可以把前端和后端API部署到同一个域。
- 采用历史API适配所以
怎么用?
- 看一下初始的文件结构和注释以及
TODO
,然后用你的浏览器开发工具来把玩一下 - 你应该能在10分钟内搞明白项目的大致原理 (假定你对 Knockout 及 AMD/Require 有较好了解)。 用显示本页源码工具来快速查看每页的JS
,HTML
,CSS
文件。 - 用提供的脚手架开始搭建你自己的SPA。看哪里不爽就改哪里!用你喜欢的IDE修改文件,刷新浏览器即可看到所做的改变,无需任何监视任务. 如果启用了Chrome开发者工具里的工作空间 (workspace) 并且映射到项目本地文件夹,你可以免费得到实时编辑/重渲染。developer.chrome.com/devtools/do…
- 如果你是第一次用Knockout,你可以访问 learn.knockoutjs.com 来进行快速交互式学习。
- 在项目文件夹运行
npm run build
来为生产环境构建优化的资源,或者运行npm run prod
来构建及以生产环境方式运行 app。详细完整的优化配置请参考 requirejs.org/docs/optimi… 。- 构建好的资源会被放在项目的
/build
文件夹里。构建被配置成2层:一个包含大部分页面所依赖的模块的共用模块,以及各页面自己的模块 (一个页面对应一个模块)。每个构建好的模块将包含该模块所声明的全部依赖模块 (以及它们递归依赖的所有模块)。 - 这种2层的构建策略让我们能按需加载各页面模块,这样的话 app 能扩展成很大规模但不会在访问时一下子就下载全部页面的全部模块。当你做页面强制刷新的时候,只有共用模块和该页面模块会被下载和解析。当你放问另一个页面时,只会额外加载那个页面的模块。另外,此策略无需在部署生产模式时改变引用模块的任何代码。
- CSS和HTML模板会被优化及合并到依赖它们的对应的JS模块里 (如果你用
css!
和text!
AMD前缀来声明它们作为该JS模块的依赖项) 从而保证纯正的模块性和可移植性,并且减少HTTP请求提高性能。 - 当你创建新页面时,记得把该页面模块加到
build.js
构建配置文件里,并且把页面的共用依赖模块加到common
模块里。 - 在生产环境,你应当使用优化构建好的资源,避免大量的 AMD 请求以及使用未优化的文件。
- 构建好的资源会被放在项目的