New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

点击事件绑定 #39

Open
Tuzkiss opened this Issue Dec 25, 2015 · 0 comments

Comments

Projects
None yet
1 participant
@Tuzkiss
Copy link
Owner

Tuzkiss commented Dec 25, 2015

点击事件绑定

昨天把项目中的动态页面样式用SASS改写完成,今天开始写动态交互事件。基于之前的项目使用方式,都是一个单独的事件绑定在body元素上,但是这样存在一个问题,就是如果需要绑定的事件太多,就存在一个body元素上绑定了N个click事件。作为一个有强迫症+些许代码设计优美的码农是不能忍,所以就在考虑是否用一些更加优美简洁的语法来写。

在google了下之后,找到了“CSS魔法哥”的一篇日志,看了还是蛮有启发的。

具体正文地位为: (cssmagic/blog#48)

在魔法哥的日志中从基础到完善的介绍了事件绑定的原理和比较优秀的做法。

那么我稍微总结一下呗 :

在动态页面中,需要绑定的事件大概有点赞,获取评论等等,大约10个左右。准备使用统一的class来只使用一个事件绑定,例如使用class “js-action” :

$(document.body).on('click', '.js-action', function () {
    $this = $(this);

    config = {
        id : parseInt($this.data('id'), 10),
        type : parseInt($this.data('type'), 10)
    };

    action = $this.data('action');

    typeof actionList[action] === 'function'  && actionList[action]($this, config);

});

使用事件代理, 让通用的class来作为事件的唯一入口,通过该元素上的自定义属性data-action来具体判断是什么操作,以及为一些必要的添加自定义属性,例如data-id等。

这样的好处就是可以减少事件绑定,减少代码量,同时具体拓展性。(具体拓展性等下会降到)

通过绑定事件来获取该事件的action,然后建立起一个对应的对象,用键值对的方式,每个action对应相应操作的funcion。例如 :

/**
 * 操作事件列表对象
 */
var actionList : {

    /**
     * 点赞事件
     *
     * @param {Object} $this
     * @param {Object} config
     */
    like : function ($this, config) {
        // 此处省略具体点赞操作代码
    },

    /**
     * 展开动态操作事件
     *
     * @param {Object} $this
     * @param {Object} config
     */
    showOperation : function ($this, config) {
        // 此处省略具体的战士操作代码
    }

    //...
}

这样每个action点击时,会去调用action对应的function,并执行。跟绑定在该元素上进行操作是一样的。

这样就可以完美解决多个事件需要动态绑定,同时不需要多个事件代理的写法。

同时,这样的做法也提高的拓展性,只需要简单几步就可以绑定需要的事件:
1、在需要绑定的元素上添加class,例如“js-action”, 指定其data-action属性,同时为其添加需要用到的自定义属性。
2、为actionList添加对应data-action的function。例如可以先写好统一的拓展方法 :

/**
 * 为action list添加新的action跟function
 *
 * @param {string} action
 * @param {Function} actionFunction
 */
actionList.add = function (action , actionFunction) {
    actionList[action] = actionFunction;
};

哈哈,这是最简单的写法,当然如果想用类的思想来改写,可以在构造器的原型链上添加该方法。

学到老,活到老。

希望再前端的路上越走越远~ 加油

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment