1.问题
如果把一个前端页面看成是各种组件合成的，那么从我参与的前端项目来看，觉得组件的html，css，javascript三部分太松散，而组件与组件之间又强耦合，导致整体页面代码不清晰，复用和代码管理比较困难。
2.组件对象化
如果能把组件对象化的话(把与组件相关的html,css,javascript作为一个整体对象来组织代码)，似乎可以解决这个问题。所以最近一段时间有在考虑如何去对象化，在寻思未果之后，意外发现使用webpack可以轻巧解决这个问题。
下面是一个具体的登录弹窗组件例子。
3.登录弹窗组件实现
组件涉及文件:
lab_login.css //登录弹窗的样式文件
lab_login.html //登录弹窗的html文件
lab_login.js //登录弹窗的js文件
lab_login.js文件代码如下：
/**
* Created by common on 2015/11/12.
*/
define(function (require) {
var $ = require('../lib/jquery-1.11.2.min');
/*
*登录弹窗类
*/
return function () {
this.html = require('./lab_login.html'); //通过require引入html文件，作为组件对象的一个属性
this.css = require('./lab_login.css'); //通过require引入css文件，作为组件对象的一个属性
this.lg_dialog = !1; //弹窗
/**
* 绘画登陆弹出框
* 把组件自身绘画到html容器中
* @param container
*/
this.drew = function (container) {
var dialog = require("../comp/dialog"); //请求弹窗组件
$(container).append(this.html); //绘画到html容器中
....
this.lg_dialog = new dialog().init(".login-form", $(container)); //初始化弹窗
return this;
};
/**
* 登陆弹窗打开
*/
this.open = function () {
this.lg_dialog.open();
};
/**
* 绑定登录提交事件
* @param opts
*/
this.bind_submit = function (opts) {
.....
}
})
代码说明：
(1)定义了一个登录弹窗类，把相关的css，和html作为类变量require进来；
(2)drew()方法把登录弹窗html绘画到container容器中，并初始化弹窗组件；
(3)open()定义了登录弹窗的打开方法
(4)bind_submit()用于绑定登录提交事件
这样一来所有与登录弹窗相关的资源都被组织到了一个类中，比较简单清晰。
