Giter VIP home page Giter VIP logo

jquery.addobject's Introduction

jQuery.addObject

This method allows you to add a JavaScript constructor to the jQuery, and then manage the state of an instance with the jQuery API. For example:

var MyObject = function(selector, options){

	this.jQuery = $(selector);
	this.options = $.extend(this.defaults, options);

}; MyObject.prototype = {

  defaults: {
    one: 1,
    two: 2
  },

  foo: 'bar',

  addArgs: function(arg, arg2, arg3){
    return arg + arg2 + arg3;
  },

  returnThis: function(){
    return this;
  }

};

jQuery.addObject('myNameSpace', MyObject);

Now you can use your object like this:

Create an instance

// Create an instance stored on #element
$('#element').myNameSpace({
  one: 'one',
  two: 'two'
});

Get properties

$('#element').myNameSpace('foo'); // => 'bar'

Set properties

$('#element').myNameSpace('foo', 'baz');
$('#element').myNameSpace('foo'); // => 'baz'

Call methods

$('#element').addArgs(1,2,3); // => 6

Chain

If the method returns this, then through the jQuery API it will return the jQuery.

$('#element').myNameSpace('returnThis').css().myNameSpace('foo', 'bar').fadeOut();

Get the object out of the jQuery API

var instance = $('#element').myNameSpace(); // called with no args, after already instantiated, returns the instance
// or just get it from the data
var instance = $('#element').data('myNameSpace');
instance.addArgs(1,1,1); // => 3
instance.returnThis().foo; // => 'baz'

Running the tests

QUnit is a submodule of this repo. Run it as follows:

git submodule init
git submodule update

Then pop open Test/index.html


This chunk of code is moo4q's twin sister. They both do the same thing, interact with JavaScript objects through jQuery's simple API; moo4q just gets 14k of the rockin' MooTools inheritance API and language extensions as well.

jquery.addobject's People

Contributors

ryanflorence avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

jquery.addobject's Issues

addObject with CoffeeScript

Just as an FYI, when using your plugin pattern and adding via addObject, one should add a clean return to the end of the init, like this:

MyObject = (selector, options) ->

    this.jQuery = $ selector
    this.options = $.extend this.defaults, options

    return

MyObject.prototype = {

  defaults: {
    one: 1
    two: 2
  }

  foo: 'bar'

  # etc...

}

I ran into this "gotcha" earlier and thought I'd share. :)

Btw, this pattern is awesome!

instance is undefined

When using $.addObject I get "instance is undefined" from firebug at line 14.

Changing line 13 (the one above) from:
if (typeof arg == 'string'){
to
if (typeof arg == 'string' && typeof instance !== 'undefined') {

...makes it work well for me.

Actually, I don't see how it could work without that check?!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.