Giter Club home page Giter Club logo

chic's Introduction

Chic

Chic is an extremely simple class-like interface to JavaScript prototypal inheritance.

‼️ NOTE: This project is no longer being maintained. If you're interested in taking over maintenance of this repo, please contact me.

Current Stable Version: 1.1.0
Automated Build Status: Build Status
Node Support: 0.6, 0.8, 0.10
Browser Support: Android Browser 2.2–4.2, Firefox 3.6, Firefox 4–19, Google Chrome 14–25, Internet Explorer 6–10, Mobile Safari iOS 3–6, Opera 12.10, Safari 5–6

Getting Started

You can use Chic on the server side with Node.js and npm:

$ npm install chic

On the client side, you can either install Chic through Component:

$ component install rowanmanning/chic

or by simply including chic.js in your page:

<script src="path/to/lib/chic.js"></script>

Usage

In Node.js or using Component, you can include Chic in your script by using require:

var Class = require('chic').Class;

Chic also works with AMD-style module loaders, just specify it as a dependency.

If you're just including with a <script>, Class is available in the chic namespace:

var Class = chic.Class;

The rest of the examples assume you've got the Class variable already.

Create a class

Creating classes is very simple. You extend the base class like this:

var Animal = Class.extend();

Obviously you want to add methods to your class, to give it some functionality:

var Animal = Class.extend({
    eat:   function () { ... },
    sleep: function () { ... },
    poop:  function () { ... }
});

The init method is a special one. This is your class constructor, and is called when a new instance of your class is created. You can set things up in here.

var Animal = Class.extend({
    init: function () {
        this.alive = true;
    }
});

Instantiating a class

Instantiating your new class is just like instantiating any other JavaScript class now. You'll be able to use all those methods you defined!

var fluffy = new Animal();
fluffy.poop(); // Bad Fluffy!

Extending classes

Any class you create is also extendable. You extend custom classes in exactly the same way as the base class:

var Cat = Animal.extend();

If you define methods in this extend, then they will override methods of the same name which have been inherited from the parent class. For example:

var Animal = Class.extend({
    speak: function () {
        return 'Roar!';
    }
});

var Cat = Animal.extend({
    speak: function () {
        return 'Miaow?';
    }
});

var mrTibbles = new Cat();
mrTibbles.speak(); // Miaow?

If you wish to call the parent method, then that's possible using this.sup, which is a reference to the parent method with the same name as the one being called:

var Animal = Class.extend({
    init: function (name) {
        this.name = name;
    },
    eat: function () {
        return this.name + ' is eating';
    }
});

var Cat = Animal.extend({
    eat: function () {
        return this.sup() + ' like a good kitty';
    }
});

var pet = new Cat('Mr Tibbles');
pet.eat(); // Mr Tibbles is eating like a good kitty

Extending Non-Chic Classes

This feature is planned, and will be introduced in the near future. In the meantime, @jhnns has this functionality working in his fork.

Development

To develop Chic, you'll need to clone the repo and install dependencies with make deps. If you're on Windows, you'll also need to install Make for Windows.

Once you're set up, you can run the following commands:

$ make deps         # Install dependencies
$ make lint         # Run JSHint with the correct config
$ make test         # Run unit tests in Node
$ make test-server  # Run a server for browser unit testing (visit localhost:3000)

When no build target is specified, make will run deps lint test. This means you can use the following command for brevity:

$ make

Code with lint errors or no/failing tests will not be accepted, please use the build tools outlined above.

Credit

This library was inspired by John Resig's great Simple JavaScript Inheritance post.

License

Chic is licensed under the MIT license.

chic's People

Contributors

rowanmanning avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar  avatar

chic's Issues

Events not working?

A function in my class does something like this:

setup: function() {
    // some stuff that creates a DOM element and adds it to the body...
    this.domElement.addEventListener('click', this.clickListener);
},
clickListener: function(e) {
    console.log('This is outputted');
    this.clickFunction();
},
clickFunction: function() {
    console.log('This is not');
}

The clickFunction() gets not executed. I think it has something to do with scopes; in the setup()-function, this referes to the Class object. In the clickListener(), this refers to the DOM Element itself. Any thoughts on how to work with events here? A small workaround for this is to add a property to the domElement that refers to the class Object, but I'm not sure if this is the only nor the cleanest solution:

setup: function() {
    // some stuff that creates a DOM element and adds it to the body...
    this.domElement.chic = this;
    this.domElement.addEventListener('click', this.clickListener);
},
clickListener: function(e) {
    console.log('This is outputted');
    this.chic.clickFunction();
},
clickFunction: function() {
    console.log('This is now also outputted');
}

Extend class without inheriting, something like an "include" functionality of sorts

Hey!

I've chosen this library over a lot of others I've seen due to its ease of use and functionality. However, I'm in need of something that I bet it would make this even more powerful without getting bloaty (like the rest of class libs):

Let's say I have a class:

var myParent = Class.extend({
func1: function() { ... }
func2: function() { ... }
})

And it's getting long and long and longer. Let's "split" it in another .js file, doing something like:

myParent.extendEvenMore({
func3: function() { ... }
func4: function() { ... }
})

So, one could do:

myParent.func1(); myParent.func2(); myParent.func3(); myParent.func4();

I wonder if it's possible, or do you have a theory on how to do it so I can attempt to fork & code it?

Thanks again for this awesome lib!

Add mixins

Allow for mixing in methods from another class after class definition. E.g.

var MyClass = Class.extend({});

// Mix in a set of functions
MyClass.mixin({
    foo: function () {},
    bar: function () {}
});

// Mix in all prototype methods of another class
MyClass.mixin(MyOtherClass);

// Mix in only certain methods of another class
MyClass.mixin(MyOtherClass, ['baz', 'qux']);

Refactor and expose underlying utilities

There are quite a few useful utilities in here, which could be exposed to allow extra functionality (such as extending non-chic classes).

For example (not necessarily actual API):

  • extend(obj1, obj2): extend one object with the properties of another
  • inherit(fn1, fn2): override fn1's prototype with an instance of fn2.

The rest of the Chic interface would stay the same for now.

Bower support

Could you add Bower support so it shows up when I want to install this nice little thing with Bower?

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.