畅谈Javascript设计模式(序)

畅谈Javascript设计模式(序)

    自我介绍一下，我叫小凡(笔名)，男，26岁，11年毕业于山东济南一家打酱油的学校，到现在从事开发工作4年时间。酷爱Javascript语言开发，从13年年底就想写一些关于设计模式之类的文章，但是由于工作太忙，一直没有抽出时间来好好整理一下。现在好了，告诉各位猿们一个好消息，本人正式辞职啦嘎嘎。。。。终于有时间静下来写一些文字。
    目的有三点：1. 为了总结这4年来Web端开发的工作经验;2. 为了已经接触Javascript，但觉得自己写的代码还是像 一堆煤渣一样零散的广大朋友一个借鉴和学习；3. 所有文章力求不拖泥带水，简洁明了，更容易理解和接受。

---

Javascript简介：对于广大前端WEB开发者来说当然Javascript并不陌生,对是一种脚本语言，而为什么如此流行，个人觉得第一：它相当的灵活。第二：所有主流浏览器都内嵌了Javascript的解析器。关键在于第一点。为什么说它相当灵活呢？因为作为Javascript程序员，只要你愿意，你可以把程序写的很简单，也可以写的超级复杂。这种语言并且可以支持多种编码风格，既可以使用函数编程风格(就是我说的煤渣堆)，也可以使用更复杂一点的面向对象编程风格。即使你告诉我，你这两种编程风格你都不会，只需要一个个简单的函数的方式，你也照样能写出很复杂的程序来…这可能就是很多人钟爱它的原因吧。(^__^) ，说着说着又多了，永远逃不出“咬文嚼字的怪圈”..汗颜…先来看一个场景，你的主管告诉你，喂小二，过来，赶紧写一个让首页轮播广告开始和停止的方法。这小手麻利的，三下五除二，大功告成，搞定Code如下：

function start(){
    ...轮播开始
}
function stop(){
    ...轮播结束
}

主管一看，你小子，不错啊，这么快就写完了。很好，来来来，还有个任务…….（显能的后果，就是招来更多的工作任务）。
这样做法很简单，确实也解决了功能需求的问题，但是一点你无法创建可以保存状态和具有一些可以改变内部状态的动画对象。看下面的代码，创建了一个“类”，你可以用它来创建对象。Code:

var Animat=function(){
    ...
};
Animat.prototype.start = function(){
    ...
};
Animat.prototype.stop = function(){
    ...
};
var myAnimat=new Animat();
myAnimat.start();
myAnimat.stop();

以上代码，很简单，首先定义了一个Animat的类，然后把两个方法赋值给了该类的prototype属性，何为prototype？就是原型的意思。比方说你叫陈小二。陈小二体重100KG，身高180cm等等等等。现在又给你加了个属性，陈小二体积：50立方厘米(^__^) 。你所有的特种和属性都可以加到陈小二这个下面。这个“陈小二”就是你的原型。以后我们会详细讲解。
有些人会习惯把类的声明和赋值放在一起，可以啊，看下面Code:

var Animat=function(){
    ...
};
Animat.prototype={
    start:function(){
         ...开始轮播
    }，
    stop:function(){
        ...结束轮播
    }
};

这样对于传统的面向对象开发者来说理解起来相对更容易，因为习惯把方法的声明内嵌在类的声明里。如果你之前用的是这种编程风格，那你可以尝试下下面的写法，并且如果代码中有看不明白的地方，也不必焦虑。Code:

Function.prototype.method=function(name,fn){
    this.prototype[name]=fn;    
};
var Animat=function(){
    ...
};
Animat.method("start",function(){
    ...轮播开始
});
Animat.method("stop",function(){
    ...轮播结束
});

这样一来，我们用prototype给Function添加了一个原型方法是method,方法有两个参数，第一个是字符串，标识新创建的方法名。第二个是用作新方法的函数。就和.NET中后台开发一个方法也可以作为另一个方法的参数一个道理哦。
如果你用过Jquery并不陌生一个词“链式调用”，就是$(“ID”).text().val().innerHTML()…..等等。是不是特别方便，简化了很多代码。其实原理很简单，就是在每个.之前的方法里，都返回了一个this关键词，这个this就是对象本身（此知识为扩展了解的，后续会详细介绍）。我们稍微改动一下上面代码也可以实现纯js的链式编程哦。Code:

Function.prototype.method=function(name,fn){
    this.prototype[name]=fn;
    return this;//关键看这里，返回的this代表的是method对象本身哦，也就是整个function对象本身。
};
//定义动画类
var Animat=funtion(){
    ...
};
//链式调用
Animat.method("start",function(){
    ...开始轮播
}).method("stop",function(){
    ...结束轮播
});

以上呢你就见识了，完成一项工作的5种不同的方法，风格上有些差异，不过js允许你使用任何一种风格去完成这个工作。但是每种风格在执行的代码篇幅、效率、性能方面是有差异的，上面我门单纯讲的是编程风格哦。你觉得哪一种更适合你呢？？？相信在以后的文章中，你会发现在逻辑代码很复杂的功能中，利用巧妙的设计模式，写出来的代码很简洁、逻辑思路很严谨、并且更容易维护。相信我们一起学习一定能参透其中的奥秘。

                *本文属于原创文章，转载请注明出处，谢谢！*