从一个组件的实现来深刻理解JS中的继承

  其实,无论是写什么语言的程序员,最终的目的,都是把产品或代码封装到一起,提供接口,让使用者很舒适的实现功能。所以对于我来说,往往头疼的不是写代码,而是写注释和文档!如果接口很乱,肯定会头疼一整天。

  JavaScript 最初是以 Web 脚本语言面向大众的,尽管现在出了服务器端的 nodejs,但是单线程的性质还没有变。对于一个 Web 开发人员来说,能写一手漂亮的组件极为重要。GitHub 上那些开源且 stars 过百的 Web 项目或组件,可读性肯定非常好。

  要实现下面这个功能,对一个 input 输入框的内容进行验证,只有纯数字和字母的组合才是被接受的,其他都返回 failed:

  缺点自然不用多说,变量没有任何隔离,严重污染全局变量,虽然可以达到目的,但极不推荐这种写法。

  相对于开放式的写法,上面的这个方法就比较清晰了。有初始化,有内部函数和变量,还提供入口调用方法。

  新手能实现上面的方法已经很不错了,还记得当初做百度前端学院题目的时候,基本就是用对象了。

  不过这种方法仍然有弊端。obj 对象中的方法都是公开的,并不是私有的,其他人写的代码可以随意更改这些内容。当多人协作或代码量很多时,又会产生一系列问题。

  函数闭包写法的好处都在自执行的闭包里,不会受到外面的影响,而且提供给外面的方法包括 init 和 render。比如我们可以像 JQuery 那样,稍微对其改造一下:

  虽然上面的方法以及够好了,但是我们的目的,是为了使用面向对象。面向对象一直以来都是被认为最佳的编程方式,如果每个人的代码风格都相似,维护、查看起来就非常的方便。

  但是,我想在介绍面向对象之前,先来回忆一下 JS 中的继承(实现我们放到最后再说)。

  提到继承,我首先想到的就是用 new 来实现。还是以例子为主吧,人-学生-小学生,在 JS 中有原型链这么一说,__proto__ 和 prototype ,对于原型链就不过多阐述,如果不懂的可以自己去查阅一些资料。

  利用 __proto__ 属性的向上追溯,可以实现一个基于原型链的继承。

  因为链式是一层层向上寻找,知道找到为止,很明显 super 直接调用父类更具有优势。

  我们不能每一次写代码的时候都这样写这么多行来继承吧,所以,于情于理,还是来进行简单的包装:

  上面的问题只是简单的解决了多余属性和 constructor 丢失的问题,而 supper 问题仍然没有改进。

  举个栗子,来看看 supper 的重要,每个人都会睡觉,sleep 函数是人的一个属性,学生分为小学生和大学生,小学生晚上 9 点睡觉,大学生 12 点睡觉,于是:

  对于 Sleep 方法,显得比较混乱,而我们想要通过 supper,直接调用父类的函数:

  来看下 JQuery 之父是如何 class 的面向对象,原文在这,源码如下。

  除了 John Resig 的 supper 方法,很多人都做了尝试,不过我觉得 John Resig 的实现方式非常的妙,也比较贴近 supper 方法,我本人也用源码调试了好几个小时,才勉强能理解。John Resig 的头脑线 中的 class

  在 JS 中,class 从一开始就属于关键字,在 ES6 终于可以使用 class 来定义类。比如:

  其实 ES6 中的 class 只是写对象原型的时候更方便,更像面向对象,class 的功能 ES5 完全可以做到,比如就上面的例子:

  和用 ES5 实现的真的没有什么差别,反而现在流行的一些库比 ES6 的 class 能带来更好的效益。

  那么,说了这么多面向对象,现在回到最开始的那个组件的实现如何用面向对象来实现。

  但是,这样子,基本功能算是实现了,关键是不好扩展,没有面向对象的精髓。所以,针对目前的情况,我们准备建立一个 Base 基类,init 表示初始化,render 函数表示渲染,bind 函数表示绑定,destory 用来销毁,同时 get、set 方法提供获得和更改属性:

  比如,我们后期修改了判断条件,只有当长度为 5-10 的时候才会返回 success,这个时候能很快定位到 JudgeInput 的 render 函数:

  从一个组件出发,一步一步爬坑,又跑去介绍 JS 中的面向对象,如果你能看到最后,那么你就可动手一步一步实现一个 JQuery 了,纯调侃。

  关于一个组件的写法,从入门级到最终版本,一波三折,不仅要考虑代码的实用性,还要兼顾后期维护。JS 中实现面向对象,刚接触 JS 的时候,我能用简单的原型链来实现,后来看了一些文章,发现了不少问题,在看 John Resig 的 Class,感触颇深。还好,现在目的是实现了,共勉!

  车贷包括车辆抵押贷款、质押贷款、车辆消费贷款、车辆融资租赁、车商贷业务等多种类型。从风...[详细]

相关阅读