Menu

Best Practices in JavaScript Library Design

April 18, 2017 - javascript

Video

Writing Solid API

Orthagonal code

Fear Adding Methods

Embrace removing code

Provide an Upgrade Path

Reduce to a common root

.method (function() {
  // this == DOMElement
}

Implementation

Evolution of a JS COder

Functional Programming

(function() {
})();
var event = ['click','focus','blur' ...];
jQuery.each(event, function(i, name) {
jQuery.prototype[name] = function(fn) {
return.this.bind(name, fn);
};

Quick tip: Local Vars

(function() {
// code
var test = false;
this method(function() {
return test;
});
}).call(this);

Encapsulation

(function() {
})();

BONUS! Your code compresses really well with Dojo Compressor

Namespacing

Don’t wxtend native objects

Perform Type checking

Quick Tip for OO

function jquery(str, con) {
    if (window == this )
                return new jQuery(str, con);
}
new jQuery('#foo') becomes jquery('#foo);

Quick Tip for Errors

Complex Applications

Extensibility

// Methods
jQuery.fn.method = fn; 
$(...).method()

// Selectors
jQuery.expr[':'].foo = '... '
$(":foo")

// Animations
jQuery.easing.easeout = fn;
.animate({height:100}, 'slow', 'easeout');;

Custom events

.bind('drag', fn)
.trigger('refresh')

Browser Bugs

The Quirksmode Problem

Solving a problem

When to run the fix

USers Want to Help

Focus on Leverage

Test-drive Development

Maintinence

Tackling new Bugs