例子:输入动物名字返回动物叫声

版本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];
          
        }
      }

我本来想功能:如果没有就补充进来,果然上面的代码是行不通的.
原因在于,执行函数时,变量重新声明,
要么让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//也是闭包,但我最近刚接触,有点突破脑洞
//是从一种叫惰性函数的地方来的.

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);
      };

为什么说这个函数破脑洞呢? 
因为他在函数执行的过程当中,
改变了函数体本身.
惰性函数的应用可以减少性能消耗.
具体可以百度.

但我第一次接触这种函数体内根据情况,改写自身函数的形式,
还是感觉挺突破脑洞的.
虽然我还无法知道这个有什么用,
但下意识觉得,这让函数变得更加灵活,更有生命力?

======================================
过了三四周回头看,
上面说的都是一个思路,都一样..
这几天学设计模式
根据面向对象的设计模式的原则,
上面的函数,违反了开闭原则

可以这样?

            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("鸟")// "吱吱"

联想策略模式的话,
可以这样

            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 那里 删除相应的函数, 我们可以考虑 让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();

但有时,我们希望一次触发多个.

            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("狗");

以上只是回顾一下,设计模式里的一些内容.
感觉整体结构不是很清晰.
凑合看吧.

不过这里能看出一些东西.
设计模式那里有讲过,
使用设计模式的一些结构,
是会增加复杂度和耦合度的.
但好处是, 可扩展性高, 维护性高.
而且越是扩展时,就越是会有积极作用.

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 9,742评论 0赞 13
  • 感冒
    人生若不感冒 何需一把鼻涕一把泪
    三更语阅读 1,486评论 0赞 0
  • 安卓的emoji表情转换为文字
    由于安卓系统显示的emoji表情不那么好看，所以在项目的聊天里面使用了自己的图片代替了系统的emoji显示，但是问...
    晓晓罗阅读 15,407评论 0赞 1
  • 完成作业
    为了完成作业，特意去百度搜索“故事思维”。映入眼帘的是一本书名，《故事思维》，世界级故事大师安妮特·西蒙斯...
    极简主义生活方式奉行者阅读 1,364评论 0赞 0

友情链接更多精彩内容