用 knockout 做个单页程序吧(SPA)

1,325 阅读4分钟
原文链接: github.com

下载最新版 NPM包版本 NPM总共下载数 Code Climate 在Gitter上参与讨论 https://gitter.im/onlyurei/knockout-spa

English | 中文

用Knockout做个SPA吧。

knockout-spa.mybluemix.net (用本框架做的演示/文档站)

这是什么?

迷你但五脏俱全的单页程序 (SPA) 框架和脚手架,用于快速创建SPA并且保证能够优雅地扩展成巨型应用。

KnockoutJS logo RequireJS logo DirectorJS logo jQuery logo SugarJS logo

ko dependencies graph framework/page dependencies logo

功能特色

演示

快速开始指南

  • 安装 nodenpm,如果还没有的话。
  • 克隆/下载 本项目。你也可以运行 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部署到同一个域。

怎么用?

  • 看一下初始的文件结构和注释以及 TODO,然后用你的浏览器开发工具来把玩一下 - 你应该能在10分钟内搞明白项目的大致原理 (假定你对 Knockout 及 AMD/Require 有较好了解)。 用显示本页源码工具来快速查看每页的 JS, HTML, CSS 文件。
    • 文件 页面是一个演示几乎所有SPA开发所应考虑到问题的好例子:路由以及URL搜索字符串处理; 用 ko 组件来封装可重用逻辑,及在页面的HTML模板里用自定义标签 file 来传递可观察参数并且初始化组件实例; 用 ko 自定义绑定来显示格式化后的源文件内容; 用 api-file api 客户端来简化 api 请求等。
    • 文件依赖关系 页面显示项目文件模块的依赖图。你可以观察2层的构建设置是如何从 开发模式 模式到 生产模式 模式改变此图的。
  • 用提供的脚手架开始搭建你自己的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 请求以及使用未优化的文件。

加新页面的流程