简单的JavaScript组件化实现

转载 2015年06月08日 13:18:24

作为一名前端菜鸟,最近看react例子,根据理解自己也简单实现了一下组件的继承和事件机制。

代码在这里

原始的组件写法

(function($) {
    $.pluginName = function(element, options) {
        var defaults = {
            title: '',
            content: '',
            showOKBtn: 1, // 显示确定按钮
            showCCBtn: 1, // 显示取消按钮
            onFoo: function() {} // callback
        }

        var plugin = this;
        plugin.settings = {}

        var $element = $(element);

        plugin.init = function(options) {
            this.settings = $.extend({}, defaults, options);
            this.initNode(options);
        }

        // public method.
        plugin.show = function() {
            // ...
        }
        plugin.hide = function() {
            // ...  
        }

        plugin.initNode = function(options) {
            var $okBtn = $element.find(''),
                $content = $element.find('');
            // ....
            // 部分逻辑
            $content.text(plugin.settings.content);
            $okBtn.on('click', $.proxy(this.onOk, this));
        }

        plugin.onOk = function(){
            this.hide();
            plugin.settings.onFoo();
        }

        plugin.init();
    }

    $.fn.pluginName = function(options) {
        return this.each(function() {
            if (undefined == $(this).data('pluginName')) {
                var plugin = new $.pluginName(this, options);
                $(this).data('pluginName', plugin);
            }
        });
    }
})(jQuery);

// 使用
var template = '<div>...弹框html...</div>';
$(template).pluginName({
    content: '确定删除该地址'
}).show();

一般我们写得入门级jquery组件,基本就是这样一个模板。 这里我们实现了一个基本的弹窗组件,也完成了需求方的要求,oh ye!enter image description here

某天需求mm说我们要加一个confirm信息的弹框,只要一个确定按钮!!还好还好。组件中本来就加了options.showCCBtn的配置,实例化的时候传一个参数就可以了。分分钟解决了mm的问题,还得到mm的赞许,想想都有点小激动呢。

处理一套风格相似的组件的时候,通过传递不同的参数来控制不同的ui显示和逻辑代码执行,确实可以解决问题,随着功能的一步步增加,这个组件就变得越来越臃肿,代码耦合成度变高,到最后自己都搞不清楚每个参数不同值代表的意思。况且在团队中都是多个人维护同一个组件,这简直就是一场悲剧。从此mm的态度也变得不好,你还坑害了维护组件的好基友。

继承

这时候面向对象的思维就出场了enter image description here我们发现设置titile, 关闭窗体是大家共有的功能。这里可以抽象成一个基础组件,新的组件继承这个组件即可。

(function() {
    var BaseWindon = Kclass.extend({
        init: function(options){
           //公共功能 
            $titleElm.text(options.title);
            $closeElm.on('click', $.proxy(this.close, this));
        },
                    // 销毁
        destroy: function(){

        }
        close: function(){

        }
    };
    return BaseWindon;
})()

 在子类中 require('BaseWindon');

 (function() {
    var AddAddressWindon = BaseWindon.extend({
        init: function(options){
            // 调用parent的init
            this.supr();
        },
        validate: function(){

        },
        // 组件自己的功能
        submit: function(){

        }
    };
    return AddAddressWindon;
})()

javascript oo的实现有很多种,我用了ded/klass,supr的实现比较巧妙。主要原理为:获取方法的代码字符串,通过正则检测字符串中是否包含 supr,若包含, 则改写该方法,在改写的方法中动态的改变this.supr,使其指向父类同名方法,以完成调用父类方法的目的。具体的原理可看参考野生小技巧–继承中的super()实现

这时需求mm又来了,需求mm说当用户点击确定之后要加一个其他功能,其实第一个例子中,我们也可以实现这样的功能。我们可以传递一个callback onFoo。

我们需要引入一种更加优雅的方式,参考node的事件机制。大家知道,Node.js能够在众多的后端JavaScript技术之中脱颖而出,正是因其基于事件的特点而受到欢迎。

事件机制

事件机制对应着一种设计模式-观察者模式。

(function() {
    var win = new BaseWindow();

    win.on('ok', function(){
        console.log('on ok!');
    });

    win.emit('ok');  
    // log  --- on ok!
})()

实现在这里

显然事件驱动的方式更加优雅,相比之下第一种手动触发callback的方式显得有点out。事件机制的方式,在监听on和触发emit的时机上也显得更加灵活,对于只需要触发一次的callback,你只需要用once函数来监听。写代码好像突然变得好爽好舒服。

最后记得提供一个销毁组件的方法,一个简单的组件就完成了。 完整的代码在这里

当然要更好的组件还需要提供

  1. 模板机制
  2. 双向绑定                                          

转载自前端乱炖http://www.html-js.com/article/2875

js组件化

下面我们来谈谈,在现有的知识体系下,如何很好的写组件。 比如我们要实现这样一个组件,就是一个输入框里面字数的计数。这个应该是个很简单的需求。 我们来看看,下面的各种写法。 ...
  • Prince_fmx
  • Prince_fmx
  • 2017年09月10日 22:13
  • 280

javascript组件化

作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。 下面我们来谈谈,在现有的知识体系下,如...
  • cwzhsi
  • cwzhsi
  • 2015年09月03日 21:36
  • 676

javascript组件开发方式

作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。 下面我们来谈谈,在现有的知识体系...
  • bingqingsuimeng
  • bingqingsuimeng
  • 2015年03月19日 09:24
  • 18565

javascript 组件化

作为一名前端工程师,写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式。 下面我们来谈谈,在现有的知识体系下,...
  • joyous
  • joyous
  • 2016年07月14日 11:57
  • 1562

Web应用的组件化(一)——基本思路

https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分。软件产品也...
  • kangkanglou
  • kangkanglou
  • 2016年10月08日 18:42
  • 2151

JavaScript之射击类小游戏的简单示例

Space Shooter #range{ position:absolute; width:100%; height:300px; left:0px; ...
  • cighao
  • cighao
  • 2015年10月26日 21:04
  • 1202

利用javascript实现简单动画效果。

利用javascript的setTimeout()函数可以实现简单的动画效果。setTimeout()函数有两个参数,第一个参数是一个字符串,其内容是将要执行的哪个函数的名字;第二个参数是一个数值,它...
  • qq_32600929
  • qq_32600929
  • 2016年11月03日 11:35
  • 1417

软件的组件化发展

中英互联网圆桌会议由中国国家互联网信息办公室与英国文化、媒体和体育部联合主办,自2008年以来已连续举办6届。今年在国家主席习近平访英期间,第六届中英互联网圆桌会议在伦敦举行。本次圆桌会议交流形式包含...
  • chinaoccs
  • chinaoccs
  • 2015年10月29日 08:43
  • 535

JavaScript实现简单日历

JavaScr
  • u011043843
  • u011043843
  • 2014年06月08日 23:32
  • 1714

一个基于JavaScript的简单网页计算器

一个基于JavaScript的简单网页计算器,真的很简单。 效果如下: A simple Calculator .number{ ...
  • Youyou_0826
  • Youyou_0826
  • 2017年04月20日 14:26
  • 1299
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单的JavaScript组件化实现
举报原因:
原因补充:

(最多只允许输入30个字)