©2016-2024 Matools All rights reserved,
粤ICP备17059708号
套路--先贴图
demo : http://www.vvui.net/editor/index.html
<http://www.vvui.net/editor/index.html>
gitee : https://gitee.com/kevin-huang/Bui-Editor-public
<https://gitee.com/kevin-huang/Bui-Editor-public>
前提
下面的内容忽略ES6。ES6多了一些特性，语法糖，硬核还是内在的经典，本文只讲经典。
吐槽JavaScript 的非主流特性
JavaScript的非主流特点让许多习惯了JAVA、c#等这些现代面向对象风格语言的码农们甚是烦恼。这种怪异的特点，加上天马行空的作用域特性，让人有种爱不起的感觉。不得不吐槽几点：
1. function 是一个双面人： 当普通调用时候它是一个函数，当new创建对象时候它是一个构造函数。
2. JavaScript没有显式的class定义，更没有像java、c#那样的继承设计。
3. JavaScript的作用域很奇怪，没有块级作用域的实现，不能像java、c#那样定义一个class，你要时刻记得你的操作是否会存在变量污染的问题。
论JavaScript的 OOP实现
吐槽了JavaScript非主流的特性，我们回到OOP这个经典问题上：封装、继承、多态。下面就三个特性的问题论论Javascript如何通过拐弯抹角的方式实现OOP的。
问题1、没有class，JavaScript是怎么做封装的？
我们都知道java或者c#里面，我们通常利用class来做封装，将一组属性、函数封装在一类里面，类的成员可以定义为私有、公有。
而然，JavaScript压根没有class这个设计，那怎么做封装呢？怎么定义类成员？对于这个问题，function这个一等公民的身份特性就派上用场了。
1）function是JavaScript里的一等公民，它的权利比较大，在它里面定义的变量(var
声明)，仅限fuction内使用。嘿嘿，利用这个特性，funciton可以模拟class，满足局部作用域的要求。
2）function不仅解决了局部作用域的问题，它还可以在new的时候，摇身一变转为构造函数。不要问我为什么，它天生如此。
3）function解决了class里面的构造函数，局部作用域问题，那成员变量怎么定义解决呢？
4）关于成员变量，一是可以定义在function的prototype属性对象上，二可以定义在function运行时的this上下文对象上。
5）关于私有,公有。严格来说，JavaScript的function封装，没法实现私有、公有。无论是定义在prototype的成员，或者this上下文上的成员，外部均可以访问。
6）通常定义在prototype上的成员称为公有(即所有实列都共享这些成员)，定义在this对象上的成员称为私有，这个私有表示每一个实例都有一个副本，不是共享的。
总结：
JavaScript利用functon这个一等公民来实现类的封装。
问题2、没有extend，JavaScript是怎么做继承的？
*
问题1中提到的“function”是JavaScript世界里面的一等公民。权利很大。这不！Javascript的继承还得靠这个一等公民。那这个一等公民有啥特性可以模拟java的extend继承呢？
*
大凡想拿JavaScript装装B的人，经常会拿“原型继承链”这个高深词吓唬吓唬小白。看上去这玩儿好像就是JavaScript继承的机制。通俗地说：“继承啊，还得看function这个一等公民”。
*
继承看“function”，准确来说是看function的prototype(原型)。这个prototype是function隐含的一个属性，这个属性是一个对象，你可以理解为
function.prototype = {} 。
*
function里的prototype可以实现继承？那要看看这个prototype里面都有什么了。prototype里面有两个很重要的属性：constructor
、_proto_。其中_proto_是继承的关键，它会指向父类的prototype。
* 在贴出更复杂的关系图前，先看看function、prototype、_proto_三者简单的关系图：
关系解析：funciton里面有一个prototype，prototype指向一个对象，该对象里有两个属性:constructor,_prop_。constructor回指function，_prop_指向父类的prototype。
* 阅读至此，你应该明白了，继承的关键是
function里的prototype及prototype里面的_prop_，_prop_是通向父亲大人的路径。
* 懂得了关键还不行，要理解一下当你访问对象的一个成员时候，JavaScript是怎么找到这个成员给你的（暂时称之为 继承链查询机制）。
比如你访问了 myIns.name(myIns是new funciton产生的实例)，js会这样查询你要访问的成员。
（1）js会先找this里面是否有name属性，有则直接返回。
（2）this里面没有name，则找myIns._proto_（这个_proto_实际上指向了function.prototype）里面是否有该属性，有则直接返回。
（3）function.prototype里面也没有找到name属性，则找 function.prototype._proto_指向的父类里面是否存在这个name。
总结：
JavaScript的继承是利用function的prototype(原型)、prototype._proto_(原型里面的父类指引) 实现的。
继承还依赖JavaScript成员访问的链式查询机制：先查自己有没有，没有则查原型prototype里的，prototype里也没有则进一步查_proto_指向的父类。
继承链查询机制：我称之为“就近原则”！
最后：贴个稍稍复杂的继承链图解
问题3、没有override，JavaScript是怎么做多态重写？
多态，严格来说，JavaScript没有明确的多态重写实现，但是可以借助JavaScript动态语言特性，继承链成员查询机制，达到模拟多态重写的实现。
1）重写实现：利用JavaScript的继承链查询机制（就近原则），在this、prototype上定义同名的成员，可以达到类似于java里的重写机制。
2）重载实现：重载即同一个函数名，多种参数组合。对于这个问题可以利用function内部arguments，在函数内部通过对argumnets数量，类型的判断达到重载目的。
3）JavaScript具有灵活的动态成员功能，即你可以在运行时删除，新增一个成员。利用这个特性，可以实现java类似于java的反射动态成员的功能。
OOP与Jquery双剑合璧让经典永驻
前面说了一大堆JavaScript如何实现OOP。脱离了Dom谈JavaScript就犹如纸上谈兵。将OOP结合Dom一起实现前端组件的开发才是实战，这也是Bui、Bui-editor、Bui-flow具体的OOP组件思路。
特别地，我认为利用JavaScript经典OOP（也可以用es6的oop）配上jquery操作dom，是开发前端UI组件的经典大杀器，清晰的封装，面向对象的特性，大大提高代码的质量，组件的扩展度。
下面以一个简单的按钮组件例子展示Bui、Bui-editor、Bui-flow的OOP组件思路。
1、定义按钮组件的容器Div
<div id="toolbar"></div>
2、定义JavaScript的Button对象
<script> /**定义button类的构造函数**/ function Button(jq,opts){ this.opts = opts; this
.jqObj = jq; this.button = $("<button>按钮</button>").appendTo(this.jqObj); this
._bindEvents(); }/** * 定义Button的成员 * ***/ Button.prototype = {
constructor:Button, /**定义一个点击事件**/ click:function(){ this.button.trigger("
click"); }, /**绑定button的事件**/ _bindEvents:function(){ var _this = this; this
.button.on({ click:function(){if(_this.opts.onClick){ _this.opts.onClick.call(
this); } alert("click"); } }); } }; </script>
3、使用组件
/** * 创建一个Button实例 * **/ var btn = new Button($("#toolbar"),{
onClick:function(){ alert("按钮被触发"); } }); /**调用实例api**/ btn.click();
最后：
贴一个我正在开发的流程设计器，你可以关注的我 gitee https://gitee.com/kevin-huang
<https://gitee.com/kevin-huang>
热门工具 换一换