博客从 WordPress 叛逃到 GitHub Pages，然后又从 Jekyll 叛逃到 Hexo「 因为 Node.js，^_^ 」， 在这里重新开始记录一些技术内容，偶尔写点生活感悟。

联系方式：

Mindspop#gmail.com 「# 换成 @」

业余项目经验

1. 基于 Backbone 的 TodoMVC 改进版

开源代码——-线上预览

  • 引入模块开发并使用 CommonJS 规范
  • 使用 Webpack 工具加载和打包模块
  • 将 HTML 模板独立成单一模块文件，同时让模块 JS 文件加载对应的 HTML 模板文件
  • 细化了 View 层的颗粒度，将 View 拆解成：AppView、FooterView、TodoView、TodoListView
  • 优化了 View 中 render 方法监听的事件类型，防止当 Model 或 Collection 发生一次变化时，View 多次重复渲染。「原例子中简单监听了 all 事件」

2. 基于 Backbone 的 定制版 2048 游戏

开源代码——-线上预览

本项目改编了原版的 2048 游戏，设计了 IT 民工、建筑师和打酱油三种角色，增加了一定的趣味性。

  • Router 管理
    • 游戏有三个角色，角色切换靠 Router 来实现，每一个 Hash 值对应一个角色，当 Hash 值改变时，重新渲染游戏主界面
  • View 管理：
    • AppView 统筹所有 View：StartView 负责开始界面，MainView 负责游戏界面方块部分界面，HeaderView 负责游戏界面标题部分界面，GridView 负责每一个小方块界面，GameOverView 负责游戏结束提示界面
    • 三个游戏角色共享所有的 View，当用户切换角色时重新读取对应角色游戏的数据，从而渲染新的 View
  • 数据管理：
    • GridModel 负责管理小方块的数据
    • GridsCollection 负责管理所有小方块的位置
    • HeaderModel 负责管理游戏名称和游戏得分数据
    • 三个游戏角色各自拥有一个独立的 GridsCollection 和 HeaderModel，保证在切换游戏角色时保留原来的数据
  • 开发理念
    • 引入模块开发并使用CommonJS规范
    • 使用Webpack工具加载、打包和压缩 JS 模块文件，最后打包成 bundle-app.js 和 vender.js 文件，后者都是各种第三方库
    • 将HTML模板独立成单一模块文件，同时让模块 JS 文件加载对应的 HTML 模板文件，提前解析模板，减少客户端渲染模板时间
    • 采用SCSS模块开发理念，将 CSS 拆分成模块单独开发，最后使用Gulp工具自动编译、打包和压缩 CSS「觉得内置 CSS 的方式不适合本项目，所以这里了没有使用 Webpack 引入 SCSS」