基于javascript的组件开发方式

作为一名前端工程师，写组件的能力至关重要。虽然 javascript 经常被人嘲笑是个小玩具，但是在一代代大牛的前仆后继的努力下，渐渐的也摸索了一套组件的编写方式。

　　下面我们来谈谈，在现有的知识体系下，如何很好的写组件。

　　比如我们要实现这样一个组件，就是一个输入框里面字数的计数。这个应该是个很简单的需求。

　　

　　我们来看看，下面的各种写法。

　　为了更清楚的演示，下面全部使用jQuery作为基础语言库。

　　最简陋的写法

　　嗯 所谓的入门级写法呢，就是完完全全的全局函数 全局变量 的写法。(就我所知，现在好多外包还是这种写法)

　　代码如下：

   
   test 
    
   
    $(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();


    })
   


 

 

查看更多关于基于javascript的组件开发方式的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did69706