JavaScript组件开发方式

（1）//这种写法，把所有的东西都包在了一个自动执行的闭包里面，所以不会受到外面的影响，并且只对外公开了TextCountFun构造函数，生成的对象只能访问到init,render方法。这种写法已经满足绝大多数的需求了。事实上大部分的jQuery插件都是这种写法。
var TextCount = (function(){
  //私有方法，外面将访问不到
  var _bind = function(that){ //监听事件
    that.input.on('keyup', function(){
      that.render();
    });
  };

  var _getNum = function(that){
    return that.input.val().length;
  };

  //对外公开的构造函数
  var TextCountFun = function(config){

  };

  TextCountFun.prototype.init = function(config){ //初始化参数、方法
    this.input = $(config.id);
    _bind(this);

    return this;
  };

  TextCountFun.prototype.render = function(){ //渲染元素
    var num = _getNum(this);

    if ($('#J_input_count').length === 0){
      this.input.after('');
    }

    $('#J_input_count').html(num + '个字');
  };

  //返回构造函数
  return TextCountFun;
}());

$(function() {
  new TextCount().init({id:'#J_input'}).render();
});


（2）//这种写法没有私有的概念，比如上面的getNum,bind应该都是私有的方法。但是其他代码可以很随意的改动这些。当代码量特别特别多的时候，很容易出现变量重复，或被修改的问题。
var textCount = {
  input: null,
  init: function(config){
    this.input = $(config.id);
    this.bind();
    //这边范围对应的对象，可以实现链式调用
    return this;
  },
  bind: function(){
    var self = this;
    
    this.input.on('keyup', function(){
      self.render();
    });
  },
  getNum: function(){
    return this.input.val().length;
  },
  //渲染元素
  render: function(){
    var num = this.getNum();

    if ($('#J_input_count').length === 0) {
      this.input.after(' ');
    }
    $('#J_input_count').html(num + '个字');
  }
};

$(function(){
  //在domready后调用
  textCount.init({id:'#J_input'}).render();
});


（3）//这种写法属于原始开发方式，适用于小项目或者活动页，但是当页面变的复杂的时候,各种变量混乱，没有很好的隔离作用域，会很难去维护
$(function(){
  var input = $('#J_input');

  //用来获取字数
  function getNum(){
    return input.val().length;
  }

  //渲染元素
  function render(){
    var num = getNum();

    //没有字数的容器就新建一个
    if ($('#J_input_count').length === 0){
      input.after(' ');
    }
    $('#J_input_count').html(num + '个字');
  }

  //监听事件
  input.on('keyup', function(){
    render();
  });

  //初始化，第一次渲染
  render();
});

转载于:https://www.cnblogs.com/gyx19930120/p/5254809.html