例子:輸入動物名字返回動物叫聲

版本1.0

function scream(animal) {
        var animal = animal || '';
        switch (animal){
         case '':
          return '輸入一個動物名字,如:貓,狗,鳥,豬'
                break;
          case '貓':
            return  '喵~喵~';
            break;
          case '狗':
            return  '旺旺!';
            break;
          case '鳥':
            return  '吱吱吱';
            break;
          case '豬':
            return  '嚕嚕嚕';
            break;
          default:
           return '這種動物的叫聲還沒有'
           break;
        }
      }

版本2.0//鍵值對,天然適合 對象形式

function scream(animal) {
        var animal = animal || '';
        var screamAni = {
          '貓':'喵~喵~',
          '狗':'旺旺',
          '鳥':'吱吱吱',
          '豬':'嚕嚕嚕'
        }
        if(animal === ''){
          return '請輸入動物名,比如:貓,狗,鳥,豬'
        }
        if(typeof(screamAni[animal]) !== undefined){
          return screamAni[animal];
        }
        return '還沒有這種動物的叫聲'
      }
這你就很搞笑了,本來以為不支持中文,
起碼chorom似乎支持中文變量.

版本3.0//

      function scream(animal) {
        var animal = animal || '';
        var screamAni = {
          '貓':'喵~喵~',
          '狗':'旺旺',
          '鳥':'吱吱吱',
          '豬':'嚕嚕嚕'
        }
        if(animal === ''){
          return '請輸入動物名,比如:貓,狗,鳥,豬'
        }
        if(!screamAni[animal]){
          screamAni[animal] = window.prompt('還沒有這種動物的叫聲,請輸入該動物的叫聲');
          return arguments.callee(animal);
        }else{
          console.log(screamAni[animal]);
          return screamAni[animal];
          
        }
      }

我本來想功能:如果沒有就補充進來,果然上面的代碼是行不通的.
原因在于,執(zhí)行函數(shù)時,變量重新聲明,
要么讓screamAni變成全局變量,要么通過閉包使其變成私有變量,

版本3.1

      var scream = (function () {
        var screamAni = {
          '貓':'喵~喵~',
          '狗':'旺旺',
          '鳥':'吱吱吱',
          '豬':'嚕嚕嚕'
        }
        return function (animal) {
          var animal = animal || '';
          if(animal === ''){
            return '請輸入動物名,比如:貓,狗,鳥,豬'
          }
          if(!screamAni[animal]){
            screamAni[animal] = window.prompt('還沒有這種動物的叫聲,請輸入該動物的叫聲');
            return arguments.callee(animal);
          }else{
            console.log(screamAni[animal]);
            return screamAni[animal];
          }
        }
      })();

版本4.0//也是閉包,但我最近剛接觸,有點突破腦洞
//是從一種叫惰性函數(shù)的地方來的.

var scream = function (animal) {
        var screamAni = {
          '貓':'喵~喵~',
          '狗':'旺旺',
          '鳥':'吱吱吱',
          '豬':'嚕嚕嚕'
        }
        scream = function (animal) {//這里絕對不能 寫成 var scream = function (animal){
          var animal = animal || '';
          if(animal === ''){
            return '請輸入動物名,比如:貓,狗,鳥,豬'
          }
          if(!screamAni[animal]){
            screamAni[animal] = window.prompt('還沒有這種動物的叫聲,請輸入該動物的叫聲');
            return arguments.callee(animal);
          }else{
            console.log(screamAni[animal]);
            return screamAni[animal];
          
          }
        }
        return scream(animal);
      };

為什么說這個函數(shù)破腦洞呢? 
因為他在函數(shù)執(zhí)行的過程當中,
改變了函數(shù)體本身.
惰性函數(shù)的應用可以減少性能消耗.
具體可以百度.

但我第一次接觸這種函數(shù)體內(nèi)根據(jù)情況,改寫自身函數(shù)的形式,
還是感覺挺突破腦洞的.
雖然我還無法知道這個有什么用,
但下意識覺得,這讓函數(shù)變得更加靈活,更有生命力?

======================================
過了三四周回頭看,
上面說的都是一個思路,都一樣..
這幾天學設(shè)計模式
根據(jù)面向?qū)ο蟮脑O(shè)計模式的原則,
上面的函數(shù),違反了開閉原則

可以這樣?

            function Animal () {
                
            this.obj = {
                  '狗' : "旺旺",
                  "貓" : "喵喵",
                  "豬" : "露露"
                }
            
            this.scream = function (animal) {
              console.log(this.obj[animal]);
                return this.obj[animal];
            }
            this.extend = function (opt) {
                for(var key in opt) {
                  this.obj[key] = opt[key];
                }
            }
            }
            var animal = new Animal();
            
            animal.scream("狗")// "旺旺"
            
            animal.extend({"鳥":"吱吱"});// 可擴展.
            
            animal.scream("鳥")// "吱吱"

似乎,慣例是把方法,存在原型上

            function Animal () {
                
            this.obj = {
                  '狗' : "旺旺",
                  "貓" : "喵喵",
                  "豬" : "露露"
                }
            }
            
            Animal.prototype.scream = function (animal) {
              console.log(this.obj[animal]);
              return this.obj[animal];              
            }
            Animal.prototype.extend = function (opt) {
              for(var key in opt) {
                this.obj[key] = opt[key];
              }
            }
            var animal = new Animal();
            animal.scream("狗")// "旺旺"
            animal.extend({"鳥":"吱吱"});
            animal.scream("鳥")// "吱吱"

聯(lián)想策略模式的話,
可以這樣

            function Animal () {
                
            this.obj = {
                  '狗' : function (cb) {
                    cb("旺旺");
                  },
                  "貓" : function (cb) {
                    cb("旺旺");
                  },
                  "豬" : function (cb) {
                    cb("露露");
                  }
                }
            }
            
            function handle (value) {
                console.log(value);
            }
            
            Animal.prototype.scream = function (animal,handle) {
               this.obj[animal](handle);    
            }
            Animal.prototype.extend = function (opt) {
              for(var key in opt) {
                this.obj[key] = opt[key];
              }
            }
            var animal = new Animal();
            
            animal.scream("狗",handle);
            
            animal.extend({
              "鳥" : function (cb) {
                cb("吱吱")
              }
            })
            
            animal.scream("鳥",handle);

            function Animal () {
                
            this.obj = {
                  '狗' : "旺旺",
                  "貓" : "喵喵",
                  "豬" : "露露"
                }
            
            }
            
            function handle (value) {
                console.log(value);
            }
            
            Animal.prototype.scream = function (animal,handle) {
              handle(this.obj[animal])
            }
            Animal.prototype.extend = function (opt) {
              for(var key in opt) {
                this.obj[key] = opt[key];
              }
            }
            var animal = new Animal();
            
            animal.scream("狗",handle);
            
            animal.extend({
              "鳥" : "吱吱"
            })
            
            animal.scream("鳥",handle);

            function Animal () {
                
            this.obj = {
                  '狗' : "旺旺",
                  "貓" : "喵喵",
                  "豬" : "露露"
                }
            this.cache = [];
            }
            
            function handle (value) {
                console.log(value);
            }
            
            Animal.prototype.add = function (animal,handle) {
              var self = this;
              this.cache.push(function () {
                handle(self.obj[animal])
              })
            }
            Animal.prototype.extend = function (opt) {
              for(var key in opt) {
                this.obj[key] = opt[key];
              }
            }
            
            Animal.prototype.scream = function () {
                for(var i = 0; i < this.cache.length ; i++) {
                  this.cache[i]()
                }
            }
            
            
            var animal = new Animal();
            
            animal.add("狗",handle);
            animal.scream();
            animal.extend({
              "鳥" : "吱吱"
            })
            animal.add("鳥",handle);
            animal.scream();

// 但是不好從 cache 那里 刪除相應的函數(shù), 我們可以考慮 讓cache = {}

            function Animal () {
                
            this.obj = {
                  '狗' : "旺旺",
                  "貓" : "喵喵",
                  "豬" : "露露"
                }
            this.cache = {};
            }
            
            function handle (value) {
                console.log(value);
            }
            
            Animal.prototype.add = function (animal,handle) {
              var self = this;
              this.cache[animal]= function () {
                handle(self.obj[animal])
              }
            }
            Animal.prototype.extend = function (opt) {
              for(var key in opt) {
                this.obj[key] = opt[key];
              }
            }
            
            Animal.prototype.scream = function () {
                for(var key in this.cache) {
                  this.cache[key] && this.cache[key]();
                }
            }
            Animal.prototype.remove = function (animal) {
                this.cache[animal] = null;
            }
            
            
            var animal = new Animal();
            
            animal.add("狗",handle);
            animal.scream();
            animal.extend({
              "鳥" : "吱吱"
            })
            animal.add("鳥",handle);
            animal.scream();
            animal.remove("狗");
            animal.scream();

但有時,我們希望一次觸發(fā)多個.

            function Animal () {
                
            this.obj = {
                  '狗' : "旺旺",
                  "貓" : "喵喵",
                  "豬" : "露露"
                }
            this.cache = {};
            }
            
            function handle (value) {
                console.log(value);
            }
            
            Animal.prototype.add = function (animal,handle) {
              var self = this;
              if (Array.isArray(this.cache[animal])) {
                this.cache[animal].push(function () {
                    handle(self.obj[animal]);
                })
              }else{
                this.cache[animal] = [function () {
                  handle(self.obj[animal]);
                }];
              }
            }
            Animal.prototype.extend = function (opt) {
              for(var key in opt) {
                this.obj[key] = opt[key];
              }
            }
            
            Animal.prototype.scream = function (animal) {
                var len = this.cache[animal].length;
                for(var i = 0; i < len ; i++) {
                  this.cache[animal][i]();
                }
            }
            Animal.prototype.remove = function (animal) {
                this.cache[animal] = [];
            }
            
            
            var animal = new Animal();
            
            animal.add("狗",handle);
            animal.scream("狗");
            animal.extend({
              "鳥" : "吱吱"
            })
            animal.add("鳥",handle);
            animal.scream("鳥");
            animal.remove("狗");
            animal.scream("狗");

以上只是回顧一下,設(shè)計模式里的一些內(nèi)容.
感覺整體結(jié)構(gòu)不是很清晰.
湊合看吧.

不過這里能看出一些東西.
設(shè)計模式那里有講過,
使用設(shè)計模式的一些結(jié)構(gòu),
是會增加復雜度和耦合度的.
但好處是, 可擴展性高, 維護性高.
而且越是擴展時,就越是會有積極作用.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行（line），也就是一...
    悟名先生閱讀 4,506評論 0贊 13
  • 人生若不感冒 何需一把鼻涕一把淚
    三更語閱讀 211評論 0贊 0
  • 由于安卓系統(tǒng)顯示的emoji表情不那么好看，所以在項目的聊天里面使用了自己的圖片代替了系統(tǒng)的emoji顯示，但是問...
    曉曉羅閱讀 15,429評論 0贊 1
  • 為了完成作業(yè)，特意去百度搜索“故事思維”。映入眼簾的是一本書名，《故事思維》，世界級故事大師安妮特·西蒙斯...
    極簡主義生活方式奉行者閱讀 182評論 0贊 0

友情鏈接更多精彩內(nèi)容