使用 YCombo 做 JS 开发

前文已介绍过 YCombo 及相关的 CSS 和 JS 合并工具 . 合并静态文件, 减少页面请求可以有效提升网页性能, 但手动处理的话工作繁杂易于出错, YCombo 就是为了解决这个问题而诞生的工具. 这不是最先进的解决方案, 但对小型网站来说已是游刃有余了.

少于 10 个经常改动的页面应该可以算是小型网站, 当然, 博客也算是, 这个博客现在就是使用这个工具来辅助开发的. 本文作为延伸, 说说平时我是怎样利用这个工具来完成网页开发的.

拆分 JS 模块

JavaScript 模块化和细分成文件是为了减少代码的复杂度和便于代码复用, 我将网站用到的 JavaScript 代码分类以下几类:

• 第三方的框架和工具类, 沿用 YUI3 的命名定义, 我称之 Gallery 库, 比如: jQuery, Backbone
• WordPress 插件中用到的 JS 文件, 有时我们想合并掉这些文件以减少页面请求数量.
• 可以供第三方使用的组件和工具, 比如: go-top.js, sidebar-follow.js 和 view-history.js.
• 自己网站上用到的一些共用代码, 比如: NeoEase 所有页面用到的二级菜单 categories.js.
• 业务 / 页面初始化文件, 这里往往会调用其他一些组件, 还会有一些页面特有的代码. 我觉得 WordPress 这中小网站都不需要区分页面了, 作为一个入口即可.

准备配置文件

模块拆分完成后, 我们可以按照 YCombo 配置文件的方式 创建一个后缀名为 .js.seed 的配置文件将 JS 文件组织起来. 我用相对路径的方式, 配置如下:

/* 第三方库 */  // #require "gallery/jquery/jquery.js"  // #require "gallery/jquery/jquery.scrollto.js"  // #require "gallery/jquery/jquery.lazyhover.js"  // #require "gallery/json/json2.js"     /* 组件 */  // #require "moudle/scroll-trigger.js"  // #require "moudle/view-history.js"  // #require "moudle/article-history.js"  // #require "moudle/sidebar-follow-jquery.js"  // #require "moudle/go-top.js"     /* 插件 */  // #require "plugin/wp-recentcomments/wp-recentcomments-jquery.dev.js"     /* 共用代码 */  // #require "common/social.js"  // #require "common/comments.js"  // #require "common/categories.js"     /* 页面初始化 */  // #require "biz/domready.js"     /* Rating 初始化 */  // #require "common/ratings.js"

合并和调试代码

将配置文件 xxx.js.seed 拖放到 YComboGUI 或者 JCombo 工具内, 即可得到合并后文件 xxx.js. 调试代码的时候, 为了能定位代码出错位置我们只合并不压缩, 所以我会选中 nocompress .

每次修改代码后, 点击 Combo! 重新合并代码和进行调试, 直到开发完成.

压缩和混淆代码

一旦开发完成, 取消选中 nocompress 并再次进行压缩, YCombo 通过 YUI Compressor 对代码进行合并和压缩, 可以减去注释, 额外空格, 一些细微的优化和进行标识符替换.

如果还需要进一步压缩或者混淆代码, 可以使用 Pack 等一些工具再对代码进行处理, 而我会到 在线 JavaScript 压缩和混淆工具 上进行一次混淆.

使用 YCombo 做 JS 开发, 可以做到将细分在多个文件中的 JavaScript 合并在一起, 从而减少页面请求数量. 开发者每次修改后需要多点一次合并按钮, 但是还算是方便的, 对小型网站来说应该足够了.

哦, 对. YCombo 还可以用来处理 CSS 文件.