前端页面对象化

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

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

    原文作者:common
    原文地址: https://www.jianshu.com/p/b803272582d0
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞