【javascript】JS插件化开发

作者: 老夫当年也是神一般的少年 | 来源:发表于2017-09-08 10:31 被阅读0次

【javascript】JS插件化开发
Sublime使用心得（+）
基础
ECharts使用步骤五部曲（防图表形变，自适应宽高）
CentOS 7 配置JS语言开发环境（JavaScript）
Web 开发全指南(不断完善中)
JavaScript的概念,引入,基本数据类型
Android热修复总结
Android热修复总结
plugin插件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>

        //来源：http://blog.csdn.net/joyous/article/details/51908058

        /*********************************原始方法******************************/
        // 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();

        /*********************************作用域隔离******************************/
        // 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(){
        //  textCount.init({id:'#J_input'}).render();
        // });

        /*********************************闭包写法******************************/
        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();
        })
     </script>
</head>
<body>
<input type="text" id="J_input"/>
</body>
</html>