All geek questions in one place

How to create jQuery element methods using NameSpace

Suffice it to say, I want to deploy my plugin a bit, and decided that I want to be able to "improvise" them. So far, rewriting $.method to $.namespace.method been easy.

The problem I am facing is to create element methods like $('element').method() , but to use a namespace; e.g. $('element').namespace.method() . I tried several workarounds and can create $.fn.namespace.method , however, when I call this from this method, I get only $.fn.namespace , and not the 'element' that I would like to get.

Example: if I call $('body').namespace.test() , then inside the test method I want this be a <body></body> element

Any help in determining how to do this is greatly appreciated. Probably just changed his mind, as usual.

You are currently trying to find suitable workarounds for something like $('body').namespace().method() , so far not working so well ...: P

+6
source share
4 answers

If you do not need to be compatible with IE8, you can use Object.defineProperty .

Working example:

  Object.defineProperty($.fn, 'namespace', { get: function(){ var t = this; return { lowercasehtml: function(){ return t.html(function(_,h){ return h.toLowerCase() }); } } } }); $('#a').namespace.lowercasehtml(); // changes the html of #a to lowercase (yes, it stupid, I know)

Demonstration

But I'm not sure if this is a good idea for a namespace like this. I would just define

 $.fn.namespace_lowercasehtml = function() ...

This is what I personally do for my jQuery extension related applications.

+3
source

Until I recommend it, you can create a new object for each call to namespace() :

 (function($){ var plugin = { test: function (){ console.log(this); } }; var methods = Object.keys( plugin ); $.fn.namespace = function (){ var self = this, localMethods = {}; $.each(methods, function () { localMethods[ this ] = plugin[ this ].bind(self); }); return localMethods; }; }(jQuery));

Here's the fiddle: http://jsfiddle.net/WaXzL/

You can either polyfill Object.keys for older browsers , or simply create the methods array manually.

The same applies to bind : either polyfill, or call it manually.

Here is the version that will work in older browsers:

 (function($){ var plugin = { test: function (){ console.log(this); } }; var methods = []; for ( var i in plugin ) { if ( plugin.hasOwnProperty(i) ) { methods.push(i); } } $.fn.namespace = function (){ var self = this, localMethods = {}; $.each(methods, function (i, method) { localMethods[ method ] = function () { plugin[ method ].call( self ); }; }); return localMethods; }; }(jQuery));

And here is the fiddle: http://jsfiddle.net/WaXzL/1/

+2
source

How about doing:

 $('element').namespace.method()

you simplify it and do

 $('element').namespace('method')

instead of this? This is much simpler:

 (function($){ var methods = { test: function(a, b){ console.log(this, a, b); } }; $.fn.namespace = function(method){ var params = Array.prototype.slice.call(arguments, 1); return methods[method].apply(this, params); }; }(jQuery));

Then you would do something like: $('body').namespace('test', 1, 2);

+2
source

The best solution is to simply have one main method and pass the method name as a string:

 (function($){ var plugin = { test: function (){ console.log(this); }, otherTest: function (){ console.log(this); } }; $.fn.namespace = function (method){ var args = Array.prototype.slice.call(arguments, 1); return plugin[ method ].call(this, args); }; }(jQuery));

Here's the fiddle: http://jsfiddle.net/yYNDH/

+2
source

Source: https://habr.com/ru/post/949659/

More articles:


All Articles