JS组件开发 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS组件开发2</title>
</head>
<body>
<input type="text" id="J_input"/>
</body>
<script src="jQuery/1.9.1/jquery.min.js"></script>
<script>
    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>

看了一篇关于写JS组件开发的博客，居然看不懂，虽然我前几天觉得自己把原型那块弄的非常懂，但是看到上面实际应用的代码时，还是一脸懵逼，不知道如何下面的调用这个组件的方式为何是这样，我就写了下面的一个小例子：而且呢，

你一定要搞清楚this的指向问题，在这里this都是指向构造函数TextCountFun.

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

为啥这样调用：首先，匿名函数自执行--返回了构造函数了TextCountFun--1，所以TextCount 等同于构造函数TextCountFun,

2，new TextCount()相当于实例化了TextCountFun，

3，new TextCount().init({id:'#J_input'})，就是调用了TextCountFun原型里的方法，init并且传了参数， init方法又返回了this---又因为this指向了TextCountFun，所以实现了链式调用render.

附上我自己动手分析的一个小例子：当你弄不明白的时候，动手写个小小的demo一步步分析，你就会懂了....

<script>
    var a = (function(){
        var _eat = function(that){
            alert(this) ;//这里的this 指向window
            alert(that.food);  //所以把指向构造函数的this传值给_eat,让_eat可以调用Person里的属性。
        };
        function Person(info){
            this.name = info.name;
            this.age = info.age;
            this.food  = info.food;
        }
        //共有方法
        Person.prototype.say =  function(info){
            _eat(this); //这里的this指向构造函数Person
            return  this.name+this.age;
        };
        return Person;
    })();

//构造函数
  var b = new a({name:'zhu',age:'20',food:'apple'});
   alert(b.say());

</script>

并且附上以上组件来源的博客地址:javascript组件开发

顺便奉上几篇关于js插件编写规则的文章

如何定义一个高逼格的原生JS插件

从jq插件到js组件封装

 

posted @ 2017-08-31 15:56  千寻的天空之城  阅读(444)  评论(0)    收藏  举报