前端页面对象化

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()用于绑定登录提交事件

这样一来所有与登录弹窗相关的资源都被组织到了一个类中，比较简单清晰。