文档章节

关于前端JS的一些想法

beyond_L
 beyond_L
发布于 2015/01/31 15:30
字数 701
阅读 100
收藏 0

在软件工程中,最可怕的一种情况便是某些事物变的不可控制,然后整个软件变的复杂庞大难以维护。

最近遇到一个问题,页面DOM的监听事件开始变的混乱。你不能够清楚地知道一个DOM元素被注册了多少监听事件,以及有多少监听事件是重复的,还有你不能得知这个DOM元素将在何时被某一段JS监听处理块操纵。由此,这令我深思。如果将再次扩展或者添加新功能的时候,这项任务交给一另一位开发人员。会发生怎样的情景?

1、继续注册监听事件。

2、寻找出可能找出来的监听事件再扩展(并不能确定他会将它们全部找到,并理清它们的逻辑顺序)。

接下去,软件将向怎样的情景发展下去?

所以,我想到自己开发一个维护所有JS监听的框架。这个框架不能帮你处理掉你重复注册监听及操作DOM元素。而是让你能随时都能清楚这个监听运行时的各种日志信息。总结一下主要功能:

1、保存DOM元素到监听,任何时候你都可以清楚DOM元素变更情况。

2、将监听添加到块内,随时随地了解一个页面的某一块内有多少监听事件。

3、对每一个监听事件给定序列号,能够找出某一时间段内所有监听运行顺序。

4、每一个监听事件将输出性能报告,或者某一DOM元素的监听处理(一个或多个处理)性能报告。

/**
 * Created by ling on 2015/2/2.
 */
var _addEventListener = EventTarget.prototype.addEventListener,
    _removeEventListener = EventTarget.prototype.removeEventListener;

var elements = [];
/**
 * 获取当前系统时间
 * @returns {number}
 */
var time = function () {
    return new Date().getTime();
};


/**
 * 递归出元素相对body位置
 * @param node
 * @param count
 * @returns {*}
 */
var elementPosition = function (node, count) {
    if (node.tagName === 'BODY') {
        return count;
    }
    ++count;
    return elementPosition(node.parentNode, count);
};


/**
 @param {string} type
 @param {EventListener|Function} listener
 @param {boolean} [useCapture]
 */
EventTarget.prototype.addEventListener = function (type, listener, useCapture, before, after) {


    var _this = this, sequence = 'Sequence: ' + time();
    if (elements.length === 0) {
        elements.push(_this);
    }
    else {
        var length = elements.length, i = 0, is = false;
        for (; i < length; ++i) {
            if (elements[i] === _this
                && elementPosition(elements[i], 0) === elementPosition(_this, 0)
                && elements[i].nextSibling === _this.nextSibling) {
                is = true;
                break;
            }
        }
        if (!is) {
            elements.push(_this);
        }
    }

    console.log(elements.length);

    var handle = {
        handleEvent: function () {
            var start = time();
            if (typeof  before === 'function')
                this.call(before);
            if (typeof listener === 'function') {
                listener();
            }
            if (typeof after === 'function')
                this.call(after);
            var end = time();
            console.log(sequence);
            console.log('DOMElement:');
            console.log(_this);
            console.log('Function:');
            console.log(listener);
            console.log('Time consuming: ' + (end - start) + 'ms');
        }
    };
    return _addEventListener.call(this, type, handle, useCapture);
};

/**
 @param {string} type
 @param {EventListener|Function} listener
 @param {boolean} [useCapture]
 */
EventTarget.prototype.removeEventListener = function (type, listener, useCapture) {
    console.log(this);
    console.log(type);
    console.log(listener);
    console.log(useCapture);
    return _removeEventListener.call(this, type, listener, useCapture);
};


© 著作权归作者所有

beyond_L

beyond_L

粉丝 111
博文 6
码字总数 7037
作品 0
深圳
前端工程师
私信 提问
用于进行 AJAX 调用的顶级 JavaScript 库

AJAX 是由客户端框架和库用来对服务器进行异步 HTTP 调用的一组 Web 开发技术。 AJAX 是代表异步 JavaScript 和 XML 的一种技术。 AJAX 曾经是 Web 开发界的一个常见名称,许多流行的 JavaSc...

oschina
2018/01/29
3.6K
4
我是如何利用一个周末时间成为前端工程师的

2周前,我将 TravisLight 开源了,这是一个建立监控的工具,也是一个用于 Travis-CI 的构件监控工具。出于兴趣,我用了一个周末的时间做了这个项目,而且我是以一个真正的前端开发者的角色来...

oschina
2012/12/25
31.2K
36
四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
2018/05/02
0
0
谷歌的 “Dart ”编程语言重返舞台

谷歌 Dart 曾经踌踌满志地想要取代 JavaScript 成为 Web 开发的首选语言。然而在一年半前,谷歌放弃了这个想法。因为 Dart 不仅仅在语言本身,包括它的整个生态圈,都比 JavaScript 落后了一...

局长
2016/11/13
5.5K
10
jquery的html()方法

大家好,我想实现左侧菜单右侧切换界面的功能,springmvc框架,前端ajax请求,springmvc不返回json的话返回的是html界面吧,前端使用jquery("#div").html(data),动态生成html,出现一个问题...

樱木花道VS康
2018/07/23
133
2

没有更多内容

加载失败,请刷新页面

加载更多

Feign输出Info级别日志

背景   spring cloud netfix组件中,feign相关的日志默认是不会输出的,需要自定义配置才能输出,并且Feign只对Debug基本的日志做出响应, 实际业务需要输出Info级别的日志,所以需要做自定...

xiaomin0322
13分钟前
2
0
面向解决问题的java编程,spring boot,mybatis generator和坑-1starter

1、start一个spring boot项目 第一课我们也不能免俗,要从starter开始,spring boot的起始项目脚手架可以从spring boot官方starter生成地址开始:https://start.spring.io/ 这张图列出了一个...

wphmoon
14分钟前
1
0
Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作

Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作 0行云流水00人评论61017人阅读2018-04-11 19:57:20 KVM的安装配置与基本操作 目录 第一部分 实验环境 第二部分 安装图形界面 ...

linjin200
16分钟前
1
0
php获取网站favicon.ico图标 api源码

 通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目。现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊。"什...

xiaogg
19分钟前
1
0
双亲委派的认识

首先JVM中有三种类加载器 Bootstrap启动类加载器 Extension扩展类加载器(ExtClassLoader) System系统类加载器(AppClassLoader) 某个特定的类接到加载类的请求时候,首先将加载任务委托给...

最胖的瘦子
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部