Question

我正在使用Salt.JS为项目创建一个微库（有点像JQuery）。关于Salt.JS的好处是我可以使用类似JQuery的语法，例如$('#my_element_id')。

我在制作一些原生扩展时遇到了一些挑战。我有以下代码：

window.Element.prototype.on = function(eventType, callback) {
    //code here
};

window.NodeList.prototype.on = function(eventType, callback) {
    //code here
};

window.HTMLCollection.prototype.on = function(eventType, callback) {
    //code here
};

允许我将事件附加到Elements，NodeLists和HTMLCollections，如下所示：

$('#my-element-id').on('click', callback);
$('.all-my-divs').on('click', callback);

但是，现在我想将on个事件附加到window，例如启用调整大小回调等功能。我希望能够做到这样的事情：

var resized = function(){
    console.log('ALWAYS BE RESIZING!');
};
var el_win = $('window');    //I've updated Salt.JS to return window object 
el_win.on('resize', resized);

我可以对现有代码进行哪些原生扩展以启用此功能？

Answer 1

我可以对现有代码进行哪些原生扩展以启用此功能？

您可以将 addEventListener 别名为

                jQuery(document).ready(function () { 
                    jQuery('#form_contact_form_widget_001').validationEngine('init');

                    jQuery('#form_contact_form_widget_001 a#contact_form_widget_001_wformsend').click(function () { 
                        var form_builder_url = jQuery('#contact_form_widget_001_wurl').val();

                        jQuery('#form_contact_form_widget_001 .loading').animate( {
                            opacity : 1
                        } , 250);

                        if (jQuery('#form_contact_form_widget_001').validationEngine('validate')) { 
                            jQuery.post(form_builder_url, { 
                                field_003 : jQuery('#field_003').val(), 
                                field_004 : jQuery('#field_004').val(), 
                                formname : 'contact_form_widget_001', 
                                formtype : 'widget' 
                            }, function () { 
                                jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
                                document.getElementById('form_contact_form_widget_001').reset();
                                jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').hide();
                                jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').fadeIn('fast');
                                jQuery('html, body').animate( { scrollTop : (jQuery('#form_contact_form_widget_001').offset().top - 100) }, 'slow');
                                jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').delay(5000).fadeOut(1000);
                            } );

                            return false;
                        } else { 
                            jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);

                            return false;
                        }
                    } );
                } );

许多人不喜欢扩展 DOM ，所以你可能还想考虑编写一个可以安全扩展的 DOM节点的包装器。

以下是如何为通用节点

实现此类包装的示例

if (!('on' in Window.prototype)) // don't shadow if it exists
    Object.defineProperty(Window.prototype, 'on', {
        value: Window.prototype.addEventListener,
        configurable: true // let other things make changes to this too
    });

// now, e.g.
window.on('click', console.dir.bind(console)); // works the same as addEventListener

扩展本机JavaScript对象

1 个答案: