前端页面对象化

作者: Addy_Zhou | 来源:发表于2015-11-15 23:41 被阅读303次

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

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

    相关文章

      网友评论

        本文标题:前端页面对象化

        本文链接:https://www.haomeiwen.com/subject/dmukhttx.html