(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('<span id="J_input_count"></span>'); } $('#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(' <span id="J_input_count"></span>'); } $('#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(' <span id="J_input_count"></span>'); } $('#J_input_count').html(num + '个字'); } //监听事件 input.on('keyup', function(){ render(); }); //初始化,第一次渲染 render(); });
转载于:https://www.cnblogs.com/gyx19930120/p/5254809.html