text Javascript OO备忘单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text Javascript OO备忘单相关的知识，希望对你有一定的参考价值。
/***********************************************************************************************************************
***********************************************************************************************************************
* CONTENTS:
* Native Object
* Object Literal
* Basic Object
* Psuedo-Class
* Self Executing/Invoking Structure
* Lazy Function
* Module Pattern
* Reveal Module Pattern
* Singleton Module
* "Real" Singleton
* Widget Pattern
* Curried Function
* JR's Simple Javascript Inheritance
* jQuery Plugin Pattern
***********************************************************************************************************************
***********************************************************************************************************************/
/***********************************************************************************************************************
* Object
* Work with Intellij Structure but Object Literal works slightly better
*/
var NewObject = new Object();
NewObject.foo = 123;
NewObject.bar = 123;
NewObject.method = function(){
//do stuff
};
/***********************************************************************************************************************
* Object Literal (Static Class, psuedo-Singleton)
* Object Literal is often confused with Singleton, it's similar to a Static Class
* Object Literals don't have Function.prototype and Function.prototype.constructor
* Singletons are instance of a class which can only be create once
*/
var ObjectLiteral = {
foo : 123,
bar : 456,
method : function() {
//do stuff
}
};
/***********************************************************************************************************************
* Simple Javascript Psuedo-Class (Object Constructor, Object Prototype and Prototype Chaining)
* Technically these are Object Constructors not Classes since classes implies datatypes which javascript doesn't support
* Reference:
* http://helephant.com/2008/09/constructor-functions/
* http://helephant.com/2009/01/javascript-object-prototype/
* http://helephant.com/2009/08/javascript-prototype-chaining/
*
* Pros:
* Javascript 101 so it's easy to understand.
* No External libraries or custom create, init, extend or inherit needed
* Works well with IDE's code completion
* Cons:
* Classically trained people don't like it
*
* Sort of works with Intellij Structure...
* Occassionally it gets confused and loses the Constructors properties and methods
*/
function SimpleClass() {
this.x = 123;
this.y = 456;
this.instanceMethod = function() {
//Specific to the instance
}
}
/** Caution: Object Prototype Overwrite
* NOTE don't use object literal. It overwrites the SimpleClass.prototype.constructor
* SimpleClass.prototype = {
* foo = function(){},
* bar = function(){}
* }
* Fix for the constructor.
* SimpleClass.prototype = {
* foo : function(){},
* bar : function(){}, `
* constructor : SimpleClass
* }
*/
SimpleClass.prototype.protoMethod = function() {
//Same across all object of the same class
};
/**
* a static function (aka class or shared function) lives on the Object but does not have access to the instance.
* http://www.komodomedia.com/blog/2008/09/javascript-classes-for-n00bs
* It seems a bit superfluous since we can create a prototype function
**/
SimpleClass.staticMember = 555;
SimpleClass.staticFunction = function() {
return new Date();
};
var simpleObject = new SimpleClass();
simpleObject.foo();
SimpleSubClass.prototype = new A;
SimpleSubClass.prototype.constructor = SimpleSubClass;
function SimpleSubClass() {
SimpleClass.call(this);
this.z = 555;
}
SimpleSubClass.prototype.protoMethod = function() {
//Overrides SimpleClass.protoMethod
SimpleClass.prototype.protoMethod.call(this); //call super class method
};
SimpleSubClass.prototype.protoMethodSub = function() {
//define new SimpleSubClass method
};
var simpleSubObject = new SimpleSubClass();
console.log(simpleSubObject instanceof SimpleObject); //true
console.log(simpleSubObject instanceof SimpleSubObject); //true
/***********************************************************************************************************************
* Self Executing/Invoking Anonymous Function
* Good for intensive computations once at loadtime
* Work with Intellij Structure
**/
var selfExecuting = (function() {
var result = true;
//result = "intensive calculation goes here"
return result;
})();
console.log(selfExecuting);
/***********************************************************************************************************************
* Lazy Function Pattern using closure
* Good for intensive computations once at runtime
* http://michaux.ca/articles/lazy-function-definition-pattern
* Work with Intellij Structure
**/
function lazyOuter() {
var closed = new Date();
//closed = "intensive calculation goes here"
return function lazyInner() {
console.log(closed);
};
}
//First call to outer gets date and returns a new function which "closes-over" the date
//All subsequent calls to "outer" are actually calling "inner" so the date is the same.
outer();
outer();
outer();
/***********************************************************************************************************************
* Module Pattern by Cornford/Crockford
* Module Pattern is often confused with Singleton. Modules don't have Function.prototype and Function.prototype.constructor
* http://jibbering.com/faq/notes/closures/#clEncap
* http://www.crockford.com/javascript/private.html
* Work surprisingly well with Intellij Structure
**/
var Module = (function() {
var privateVar;
function privateMethod() {
// ...
}
return { // public interface
publicMethod1: function () {
// private members can be accessed here
},
publicMethod2: function () {
// ...
}
};
})();
/***********************************************************************************************************************
* Reveal Module Pattern:
* Same as the Module patterns but returns an object literal which maps public methods to private functions
* http://www.wait-till-i.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/
* Work surprisingly well with Intellij Structure
**/
var RevealModule = (function() {
var privateVar;
function privateMethod() {
// ...
}
function publicMethod1() {
// private members can be accessed here
}
function publicMethod2() {
// ...
}
return { // public interface
pub1 : publicMethod1,
pub2 : publicMethod2
};
})();
/***********************************************************************************************************************
* Singleton Using a module, closure and function redefinition
* Allows for private variables and function closed in scope
* Function.constructor property for debugger
* http://stackoverflow.com/questions/1895635/javascript-singleton-question
*/
//This version isn't preferred since it is confusing to follow and causes problems with debugging.
/*function SingletonModule() {
var instance = (function() {
var privateVar;
function privateMethod() {
// ...
}
return { // public interface
publicMethod1: function () {
// private members can be accessed here
},
publicMethod2: function () {
// ...
}
};
})();
SingletonModule = function SingletonModule() { // re-define the function for subsequent calls
return instance;
};
// call the new function
return SingletonModule();
}*/
//console.log(singleton)
//console.log(typeof singleton == 'function')
//console.log(singleton() == singleton())
//console.log(singleton() === singleton())
//console.log(singleton.prototype)
//console.log(singleton.prototype.constructor)
//console.log(singleton.name)
/***********************************************************************************************************************
* Real Singletons
* Allows for private variables and function closed in scope
* Singletons are instantiated from classes so they have prototype chains and constructor reference
* http://stackoverflow.com/questions/1895635/javascript-singleton-question
*
* Confuses Intellij Structure.
* singletion() appears as a private despite being global
* methods and properties are not shown
*/
(function (global) {
var singleton;
function Singleton () {
// singleton does have a constructor that should only be used once
this.foo = "bar";
delete Singleton; // disappear the constructor if you want
}
Singleton.prototype.log = function(){
console.log('hello, ', this)
};
global.singleton = function singleton() {
return singleton || (singleton = new Singleton());
};
})(window);
console.log(singleton)
console.log(typeof singleton == 'function')
console.log(singleton() == singleton())
console.log(singleton() === singleton())
console.log(singleton.prototype)
console.log(singleton.prototype.constructor)
console.log(singleton.name)
/***********************************************************************************************************************
* Javascript Widget Pattern Using the Module Pattern
* http://michaux.ca/articles/how-i-write-javascript-widgets
* NOTE: this pattern is used by John Resig for SimpleJavaScriptInheritance
*
* Pros
* "global" is references "this" which is returned to the global namespace
* Anything attached to "globaL" is publically available but not internally available
* Provides an additional closure level for helper functions
*
* Cons:
* More difficult to understand and debug
* Confuse Intellij Structure
* global and helperFunction appear as private
* PublicObject doesn't appear at all
*/
(function() {
var global = this;
// helper functions
var helperFunction = function(msg) {
//...
};
// widget constructor function
global.PublicObject = function() {
// private instance methods
var privateMethod = function() {
//..
};
var anotherPrivate = function() {
//..
};
// public instance methods
return {
publicMethod1 : function() {return privateMethod;},
publicMethod2 : anotherPrivate
};
};
})();
/***********************************************************************************************************************
* Curried Function
* http://flesler.blogspot.com/2008/11/haskell-functions-for-javascript.html
* http://www.svendtofte.com/code/curried_javascript/
* Essentially they are partially executed functions. Or in javascripts case, they are functions which are redefined
* The new returned function will accept the additional missing parameter to complete the functions purpose.
* Pros: Convenient tool for certain circumstances
* Cons: Not widely understood
*
* Sort of works with Intellij. The primary function works, but subsequent references are lost
*/
function add(a, b) {
if (arguments.length < 1) {
return add;
} else {
if (arguments.length < 2) {
return function(c) {
return a + c
}
} else {
return a + b;
}
}
}
//console.log(add(2, 2)); // alerts 4
//var adds4 = add(4); // adds4, is now a function,
//// which adds 4, to it's argument.
//console.log(adds4(5)); // alerts 9.
/***********************************************************************************************************************
* John Resig's Simple JavaScript Inheritance
* Works fairly well with Intellij Structure
* Intellij Structure fails to recognize super members in the inherited classes
* IOW: Intellij Structure does not show Ninja.foo() (.foo() is inherited from Person)
*/
var Person = Class.extend({
init: function(isDancing) {
this.dancing = isDancing;
},
foo: function(){}
});
var Ninja = Person.extend({
init: function() {
this._super(false);
},
bar: function(){}
});
var person = new Person(true);
console.log(person.dancing); // => true
var ninja = new Ninja();
console.log(ninja.dancing); // => false
/***********************************************************************************************************************
* jQuery Basic Plugin Pattern
* http://docs.jquery.com/Plugins/Authoring
*/
(function( $ ){
$.fn.tooltip = function( options ) {
var settings = {
'location' : 'top',
'background-color' : 'blue'
};
return this.each(function() {
// If options exist, lets merge them
// with our default settings
if ( options ) {
$.extend( settings, options );
}
// Tooltip plugin code here
});
};
})( jQuery );
/******************
*
* Full jQuery plugin template
* http://docs.jquery.com/Plugins/Authoring
*
*********************/
(function ($) {
var methods = {
init: function (options) {
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
//NOTE: here the 'this' refers to the $ wrapped object
return this.each(function () {
//NOTE: here 'this' refers to the element, re-wrap and set to $this
var $this = $(this),
data = $this.data('tooltip'), //fetch existing data
tooltip = $('<div />', { //create elements
text: $this.attr('title')
});
// If the plugin hasn't been initialized yet
if (!data) {
/* Do more setup stuff here */
$(this).data('tooltip', { //store object literal on the data attribute of the element
target: $this,
tooltip: tooltip
});
}
$(window).bind('over.tooltip', methods.show); //bind events to element. NOTE the event namespace ".tooltip"
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'); //fetch existing data
$(window).unbind('.tooltip'); //remove (unbind) namespaced events from element
data.tooltip.remove(); //remove element stoted on data
$this.removeData('tooltip'); //remove data from tooltip
});
},
show: function () {
return this.each(function () {
var $this = $(this);
});
},
hide: function () {
return this.each(function () {
var $this = $(this);
});
},
update: function (content) {
return this.each(function () {
var $this = $(this);
});
}
};
$.fn.tooltip = function (method) {
// Method calling logic
if (methods[method]) {
return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
/** jQuery UI Plugin Template
* http://jqueryui.com/docs/Developer_Guide
* Core widget template with some additional properties and comments for clarity
*/
$.widget("ui.mywidget", {
//options: instance level options
options: {
option1: "defaultValue",
hidden: true
},
//_create: called on construction
_create: function() {
var self = this;
//this: references the instance of the widget, commonly refferred to as 'self'
//this.element: references the jQuery object
// creation code for mywidget, can use this.options
if (self.options.hidden) {
// and this.element
self.element
.addClass('foobar')
.bind('eventname', function () {})
.hide();
}
},
//_init: called on construction and re-initialization
_init : function () {
this.refresh(); //offloading to refresh() is common in jQuery UI widgets
},
refresh : function() {
this.element.find('selector, selector')//update the HTML
.addClass('foobar');
},
_privateMethod: function() {
//private functions should be named with a leading underscore
},
pubicMethod: function() {
//public functions do not have an underscore
},
pubicMethodWithCallback: function(x,y,z,callback) {
var result = 1 + 1;
console.log(x, y, z, callback);
//_trigger looks for a callback on this.options['eventName']
//then triggers an event named <widgetName><eventName>
this._trigger('eventName', evt, result);
},
//combo getter/setter
value: function(newValue) {
if (newValue === undefined) {
return this._value();
}
this._setOption('value', newValue);
return this;
},
//_setOption: probably don't need to override the default _setOption
//but if you do then be sure to apply the original like this
_setOption : function (key, value) {
if (key === 'special') {
//do something special
}
$.Widget.prototype._setOption.apply(this, arguments); // default setOption
},
//destroy: returns the HTML to it's original state
destroy: function() {
this.element
.removeClass('foobar')//remove classes the widget added
.removeAttr(); //remove attributes the widget
$.Widget.prototype.destroy.apply(this, arguments); // default destroy
// now do other stuff particular to this widget
}
});
$.extend($.ui.mywidget, {
enhancement : function() {
}
});以上是关于text Javascript OO备忘单的主要内容，如果未能解决你的问题，请参考以下文章