本文介绍seajs和hanlebars，并实现前端控件组件化.
我想实现的是把组件单独一个文件夹，js和css，html都放在文件夹中，要使用组件的页面利用seajs引入组件，并直接调用组件的方法或者事件。这个方案是自己的思考，欢迎大家拍砖。
主要演员 seajs 和 handlebars
seajs是一个前端模块化js库，作用类似于requirejs，都用来前端js的模块化和按需依赖加载的工作。功能都差不多，seajs是淘宝玉伯开发的，国产，所以国内使用者比较多，requirejs国外的，存在时间比seajs要久许多，国外用的比较多。 两者最大的区别在于定义模块的语法不同，一个是AMD规范，一个是CMD规范。seajs是CMD规范，所以他的语法更像nodejs，写起来会比requirejs优雅一些。不过缺点也很多，比如很多第三方库都是按照AMD规范写的，会有兼容性问题，就需要自己改写模块或者使用spm工具处理。
handlebars是一个前端js模板引擎 我在之前的文章介绍过handlebars及简单的用法，大家可以去看下点我
任务1，页面框架配置，seajs初始化
新建html页面，引入需要的类库
seajs用于做js模块管理，seajs-text可以用于加载handlebars的模板内容
配置seajs
//basePath由服务端配置域名varbasePath="http://localhost:8080/app/";// seajs 的简单配置seajs.config({base:basePath,alias:{"jquery":"../bower_components/jquery/jquery.seejs.min.js","handlebars":"../bower_components/handlebars/handlebars.seajs.min.js"}});// 加载入口模块seajs.use("./scripts/seajs+handlebars.js");````注意，jquery默认是不支持AMD标准，也不支持seajs，所以这里用的````jquery.seejs.min.js和handlebars.seajs.min.js````都是自己手动改过的，jquery修改的方法就是在源码中级加上几行代码，如下：````jsdefine(function(){//jquery源代码写在中间return$.noConflict();});
handlebars修改比jquery少了那句return $.noConflict();就可以了。
basePath可以根据实际环境设置。使用alias设置别名后，就可以在sea中使用require()的方法获取到源码
seajs.use("./scripts/seajs+handlebars.js");设置了页面的js入口
入口seajs+handlebars.js
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
$(function(){
var Handlebars = require('handlebars');
var tpl = require("./data.tpl");
var demoTplc = Handlebars.compile(tpl);
$("body").html( demoTplc("hello world"));
});
});
data.tpl
{ {this} }
加载Handlebars和tpl模板，然后直接调用Handlebars.compile进行模板编译后渲染dom。执行后bady的内容就变成了hello world。大家可以下载demo，打开seajs+handlebars.html看下效果
组件化方案
之前的代码可以完成用seajs动态加载handlebars模板并渲染的功能，但并没有实现组件化。现在我们来实现组件的封装。首先建立一个文件夹，包括
components
- Boxes
-index.js //js代码处理数据和事件
-index.css //boxes样式
-boxes.tpl //boxes html模板
里面的内容作为demo，我写的简单一些。
boxes.tpl
this is a boxes!
{ {this} }
index.css
.c-boxes{background-color:red;}.c-boxesh1{color:blue;}
index.js
define(function(require,exports,module){varHandlebars=require('handlebars');varbox={init:function(){returnbox;},clicked:function(){},render:function($dom,data){vartpl=require('./boxes.tpl');vartplc=Handlebars.compile(tpl);// var _clicked = clicked;$dom.html(tplc(data));box.$dom=$dom;$dom.click(function(){box.clicked&&box.clicked();});}};module.exports=box;});
index.js稍微复杂一些，封装了一个对象，并定义了对象的点击事件的外部接口。rander方法使用了前面相似的方式，渲染了bandlerbars模板，并注入点击事件
这样一个组件就已经封装好了。
组件的使用
前面定义了一个boxes组件，现在我们来使用他.html页面和之前的页面是一样的，唯一的区别是入口js换成了componentization.js
componentization.js
define(function(require,exports,module){// 通过 require 引入依赖var$=require('jquery');varBoxes=require('boxes');$(function(){//实例化组件varbox=Boxes.init();box.render($("body"),"hello world!");box.clicked=function(){console.log("clicked");};});});
box定义好后，使用起来非常简单，直接调用box.render()方法就可以了，也顺带个box绑定了点击事件，效果可以看demo中的 componentization.html 页面
组件化其他的思考
组件的模板和js都通过seajs加载和封装了，唯一遗憾的是css需要单独引入。 seajs也有css引入的插件sea-css，但是试了一下没成功。 所以我的解决方案是使用gulp完成，遍历component下的所有css文件，组合成并压缩成一个css，然后再使用的页面中统一引用这个合并的css
具体gulp脚本
//css components 组合 构建任务
gulp.task('css-concat', function () {
gulp.src(css_components_Src)
.pipe(concat('allComponent.css'))//合并后的文件名
.pipe(gulp.dest(cssDst));
});
demo
本文示例demo见demo-web
文本的demo在文件夹Handlebars中
使用方式
Handlebars目录下执行http-server -p 8080
usage.html =》 handlerbars的使用及模板预编译
componentization.html =》 前端开发框架 - seajs+handlebars模块化开发
错误处理
如果本地没有http-server命令，请安装nodejs环境，并通过npm安装 http-server 命令：npm install -g http-server