从脚手架到生产上线Backbone-Require-Boilerplate开发最佳实践完整清单【免费下载链接】Backbone-Require-BoilerplateA Rad Backbone.js and Require.js Boilerplate Project.项目地址: https://gitcode.com/gh_mirrors/ba/Backbone-Require-BoilerplateBackbone-Require-Boilerplate简称 BRB是一款基于 Backbone.js 与 Require.js 的前端脚手架帮你把 JavaScript 拆分成独立模块、用 Model/Collection 与 View 分离业务与应用逻辑并让同一套代码同时跑在桌面端与移动端。本文整理一份从脚手架搭建到生产上线的完整最佳实践清单覆盖环境安装、目录结构、双模式开发、构建优化与单元测试助你快速上手。一、BRB 脚手架能为你做什么 这个脚手架开箱即用地整合了经典前端技术栈核心能力如下模块化所有代码用 AMDdefine/require组织模块间依赖显式声明天然解耦双端复用桌面版用 Twitter Bootstrap移动版用 jQuery Mobile共享 Model、Collection、View 层构建自动化Grunt 驱动 Require.js Optimizer一键完成拼接、压缩、CSS 内联生产瘦身生产模式用 AMDClean 替代 Require.js减小运行时体积质量保障内置 Jasmine 单元测试含 jasmine-jquery 插件、JSHint 代码检查、Plato 复杂度报告二、5 步搭建脚手架开发环境步骤操作说明1安装 Node.js运行时基础环境2git clone https://gitcode.com/gh_mirrors/ba/Backbone-Require-Boilerplate克隆仓库到本地3npm install -g nodemon文件变更自动重启服务4npm install -g grunt-cli后进入项目目录执行npm install安装 Grunt 与项目依赖5运行nodemon访问http://localhost:8001启动本地服务器查看演示 小提示本地服务器由 Express 实现代码见 server.js它负责把public目录作为静态站点提供服务端口默认 8001。启动后你可以立刻访问三个入口演示页http://localhost:8001测试页http://localhost:8001/specRunner.html复杂度报告http://localhost:8001/reports/三、目录结构每个模块该放在哪里理解目录布局是二次开发的第一步public/js/app/下按职责分层路径职责public/js/app/config/config.jsRequire.js 统一配置paths 别名 shim 依赖public/js/app/init/DesktopInit.js、MobileInit.js桌面/移动各自的应用入口public/js/app/routers/DesktopRouter.js、MobileRouter.js双端独立的路由可放端特有的逻辑public/js/app/models/Model.js、collections/Collection.js、views/View.js双端共享的 Backbone 核心类public/js/app/templates/heading.html通过 text 插件加载的独立模板public/js/test/specs/spec.jsJasmine 单元测试套件这种入口与路由按端分离、模型视图共享的布局是 BRB 最值得借鉴的工程习惯。四、双模式开发一个变量切换开发与生产 入口页 index.html 内置了两套关键机制1. production 开关页面内有一个production本地变量。设为false时加载未压缩的开发文件走 Require.js方便断点调试设为true时加载经 AMDClean 处理后的单个压缩文件DesktopInit.min.js/MobileInit.min.js上线前只需改这一个开关。2. 移动端自动检测页面顶部脚本通过 UserAgent 识别设备自动选择加载mobile.css还是desktop.css、MobileInit.js还是DesktopInit.js。移动端还会关闭 jQuery Mobile 的linkBindingEnabled与hashListeningEnabled把路由权完全交给 Backbone见 MobileInit.js。五、Require.js 一站式配置最佳实践所有端的 Require.js 配置都集中在 config.js避免桌面、移动、测试三处配置漂移。两个核心要点paths 别名给被多个模块依赖的库jquery、backbone、lodash 等定义短别名依赖声明更简洁也方便升级时集中核对版本shim 声明为不兼容 AMD 的第三方脚本Backbone、jQuery Mobile、Bootstrap 等声明依赖顺序与全局导出无需手动改造第三方代码⚠️ 注意每个文件都应完整列出define依赖即使该依赖已被全局加载——这是 Require.js Optimizer 正确判断模块依赖树的前提。六、Model / View / Router 编码规范ViewView.js用el绑定 DOMinitialize中调用renderrender用 Lodash 的_.template渲染模板并写回$elDOM 事件统一放在events对象中注意选择器是相对于el的ModelModel.jsdefaults提供默认属性validate在每次set时校验如只希望校验正在设置的属性可换用内置的 Backbone.validateAllRouterDesktopRouter.js务必保留Backbone.history.start()以监听 hash 变化默认路由负责首屏渲染模块导出类而非实例所有模块return View/return Model实例化交给调用方便于测试与复用七、构建优化一条命令产出生产文件 构建逻辑全部声明在 Gruntfile.js 中提供以下任务任务命令作用代码检查grunt test对public/js/app执行 JSHint构建产物grunt build桌面/移动 JS 拼接压缩 CSS 内联压缩复杂度报告grunt complexity:reportPlato 生成可交互的复杂度报告一键全流程grunt依次执行 test → build → complexity:report生产构建完成后会更新DesktopInit.min.js、MobileInit.min.js、desktop.min.css、mobile.min.css四个文件。CSS 采用import组织多个样式文件构建时会被 Require.js 内联进单一压缩文件线上零额外请求。八、上线前自检清单 ✅Jasmine 测试全绿内置 7 个示例用例覆盖 View、Model、Collection 与双端 Routerspec.js在specRunner.html中确认grunt test通过无 JSHint 告警Plato 报告中无高风险复杂度热点public/reports/可查看历史趋势grunt build成功四个.min产物已更新index.html中production变量已置为true移动端真机验证路由切换正常hash 路由由 Backbone 接管写在最后Backbone-Require-Boilerplate 的价值不仅在于它整合了哪些库更在于它示范了一整套可落地的工程实践配置集中化、双端分离、开发与生产双模式、构建即质量门禁。把上面的清单作为你前端项目的检查模板无论是维护这个脚手架还是借鉴到自有项目都能少走不少弯路 【免费下载链接】Backbone-Require-BoilerplateA Rad Backbone.js and Require.js Boilerplate Project.项目地址: https://gitcode.com/gh_mirrors/ba/Backbone-Require-Boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考