1
0
Fork 0

Initial redesign providing a more informative About page

Not yet complete, but it's a start.
website
Mike Gerwitz 2012-05-05 14:09:27 -04:00
parent 1e616e8080
commit ca8dd0eed4
No known key found for this signature in database
GPG Key ID: F22BB8158EE30EAB
17 changed files with 517 additions and 57 deletions

View File

@ -1,4 +1,5 @@
Image Credits Image Credits
============= =============
dvsup.png and rough_diagonal.png authored by "Cody L." and "Jorick van Hees" dvsup.png, rough_diagonal.png and cross_scratches.png authored by "Cody L.",
respectively; courtesy of subtlepatterns.com. "Jorick van Hees" and "Andrey Ovcharov" respectively; courtesy of
subtlepatterns.com.

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -4,12 +4,6 @@
Copyright &copy; 2011 <a href="http://mikegerwitz.com">Mike Gerwitz</a> Copyright &copy; 2011 <a href="http://mikegerwitz.com">Mike Gerwitz</a>
</p> </p>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js">
</script>
<script type="text/javascript" src="scripts/ease.min.js"></script> <script type="text/javascript" src="scripts/ease.min.js"></script>
<script type="text/javascript" src="scripts/ui.js"></script> <script type="text/javascript" src="scripts/ui.js"></script>
</body> </body>

View File

@ -3,8 +3,6 @@
<head> <head>
<title>ease.js</title> <title>ease.js</title>
<link type="text/css" rel="stylesheet" href="style.css" /> <link type="text/css" rel="stylesheet" href="style.css" />
<link type="text/css" rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" />
</head> </head>
<body> <body>
<div id="header"> <div id="header">

View File

@ -1,26 +1,187 @@
<p> <p>
ease.js is a Classical Object-Oriented framework for JavaScript, <span class="bigemph">ease.js is a Classical Object-Oriented framework for
intended to &ldquo;ease&rdquo; the transition into JavaScript from other JavaScript,</span> intended to eliminate boilerplate code and
Object-Oriented languages. Features include: &ldquo;ease&rdquo; the transition into JavaScript from other Object-Oriented
languages. Features include:
</p> </p>
<div class="ex excode">
<!--%inc scripts/ex/class.js -->
</div>
<ul class="features"> <ul class="features">
<li>Simple and intuitive class definitions</li> <li><a href="#class-dfn">Simple and intuitive class definitions</a></li>
<li>Classical inheritance</li> <li><a href="#inheritance">Classical inheritance</a></li>
<li>Abstract classes and methods</li> <li><a href="#abstract">Abstract classes and methods</a></li>
<li>Interfaces</li> <li><a href="#interfaces">Interfaces</a></li>
<li>Access modifiers (public, protected and private)</li> <li>
<li>Static and constant members</li> <a href="#access-modifiers">
Access modifiers (public, protected and private)
</a>
</li>
<li><a href="#static">Static and constant members</a></li>
</ul> </ul>
<p class="info"> <p class="info">
ease.js is a framework, not a compiler. It may be used wherever ease.js is a framework, not a compiler. It may be used wherever JavaScript may
JavaScript may be used, including with other compilers/parsers. ease.js be used, including with other compilers/parsers. ease.js also provides
also provides support for older, pre-ES5 environments by gracefully support for older, pre-ES5 environments by gracefully degrading features (such
degrading features (such as visibility support), but remaining as visibility support), but remaining functionally consistent.
functionally consistent.
</p> </p>
<h3 id="class-dfn" class="bigemph">
Simple and Intuitive Class Definitions
<span class="anchor"><a href="#class-dfn">&para;</a></span>
</h3>
<p>
Class definitions closely resemble the familiar syntax of languages like Java,
C++, C# and PHP.
</p>
<pre class="js">
<!--%inc scripts/ex/class.js -->
</pre>
<p>
Classes can be anonymous or named, the latter being more useful for debugging.
Since classes may be anonymous, constructors are styled after PHP:
</p>
<pre class="js">
<!--%inc scripts/ex/class-anon.js -->
</pre>
<p>
Classes can be instantiated with or without the <tt>new</tt> keyword. Omission
aids in concise method chaining and the use of temporary classes.
</p>
<pre class="js">
var inst = Foo( "John Doe" );
var inst = new Foo( "John Doe" );
// temporary class
Foo( "John Doe" ).sayHello();
</pre>
<h3 id="inheritance" class="bigemph">
Classical Inheritance
<span class="anchor"><a href="#inheritance">&para;</a></span>
</h3>
<p>
Classes can be extended to create subtypes. Like C++, methods are
<em>not</em> virtual by default. In Java terminology, all methods are
final by default. Multiple inheritance, like Java, is unsupported (see
<a href="#interfaces">Interfaces</a>).
</p>
<pre class="js">
<!--%inc scripts/ex/class-extend.js-->
</pre>
<p>
Alternatively, if creating an anonymous subtype, the supertype's
<tt>extend()</tt> method may be used.
</p>
<pre class="js">
var SturdyCow = Cow.extend( { /*...*/ } );
</pre>
<p>
To prevent a class from being extended, <tt>FinalClass</tt> can be used.
</p>
<pre class="js">
<!--%inc scripts/ex/class-final.js-->
</pre>
<h3 id="abstract" class="bigemph">
Abstract Classes and Methods
<span class="anchor"><a href="#abstract">&para;</a></span>
</h3>
<p>
If a class contains abstract members, it must be declared as an
<tt>AbstractClass</tt>. Abstract methods must be overridden by subtypes and
are implicitly virtual.
</p>
<pre class="js">
<!--%inc scripts/ex/class-abstract.js-->
</pre>
<h3 id="interfaces" class="bigemph">
Interfaces
<span class="anchor"><a href="#interfaces">&para;</a></span>
</h3>
<p>
ease.js supports the Java concept of Interfaces, which act much like abstract
classes with no implementation. Each method is implicitly abstract. Properties
cannot be defined on interfaces.
</p>
<pre class="js">
<!--%inc scripts/ex/interface.js -->
</pre>
<p>
Concrete classes may implement one or more interfaces. If a concrete class
does not provide a concrete implementation for every method defined on the
interface, it must be declared an <a
href="#abstract"><tt>AbstractClass</tt></a>.
</p>
<pre class="js">
<!--%inc scripts/ex/interface-2.js -->
</pre>
<p>
Polymorphic methods may check whether a given object implements a certain
interface.
</p>
<pre class="js">
<!--%inc scripts/ex/interface-3.js -->
</pre>
<h3 id="access-modifiers" class="bigemph">
Access Modifiers
<span class="anchor"><a href="#access-modifiers">&para;</a></span>
</h3>
<p>
All three common access modifiers &mdash; public, protected and private
&mdash; are supported, but enforced only in ECMAScript 5 and later
environments.
</p>
<pre class="js">
<!--%inc scripts/ex/access-modifiers.js -->
</pre>
<p>
In the above example, the database connection remains encapsulated within
<tt>DatabaseRecord</tt>. Subtypes are able to query and escape strings and
external callers are able to retrieve a name for a given id. Attempting to
access a private or protected member externally will result in an error.
Attempting to access a private member from within a subtype will result in an
error.
</p>
<h3 id="static" class="bigemph">
Static and Constant Members
<span class="anchor"><a href="#static">&para;</a></span>
</h3>
<p>
Static members are bound to the class itself, rather than a particular
instance. Constants are immutable static members (unlike languages like PHP,
they may use any access modifier). In order to support both
pre- and post-ECMAScript 5 environments, the syntax requires use of a static
accessor method &mdash; <tt>$()</tt>.
</p>
<pre class="js">
<!--%inc scripts/ex/static-members.js -->
</pre>
<script type="text/javascript" src="scripts/highlight.pack.js"></script>
<script type="text/javascript">
try
{
// JS syntax highlighting, ES5
Array.prototype.slice.call( document.querySelectorAll( '.js' ) )
.forEach( function( element )
{
hljs.highlightBlock( element, ' ' );
} );
}
catch ( e ) {};
</script>

View File

@ -0,0 +1,35 @@
var DatabaseRecord = Class( 'DatabaseRecord',
{
'private _connection': null,
__construct: function( host, user, pass )
{
this._connection = this._connect( host, user, pass );
},
'private _connect': function( host, user, pass )
{
// (do connection stuff)
return { host: host };
},
'protected query': function( query )
{
// perform query on this._connection, rather than exposing
// this._connection to subtypes
},
'protected escapeString': function( field )
{
return field.replace( "'", "\\'" );
},
'public getName': function( id )
{
return this._query(
"SELECT name FROM users WHERE id = '" +
this._escapeString( id ) + "' LIMIT 1"
);
},
} );

View File

@ -0,0 +1,23 @@
var Database = AbstractClass( 'Database',
{
'public connect': function( user, pass )
{
if ( !( this.authenticate( user, pass ) ) )
{
throw Error( "Authentication failed." );
}
},
// abstract methods define arguments as an array of strings
'abstract protected authenticate': [ 'user', 'pass' ],
} );
var MongoDatabase = Class( 'MongoDatabase' )
.extend( Database,
{
// must implement each argument for Database.authenticate()
'protected authenticate': function( user, pass )
{
// ...
},
} );

View File

@ -0,0 +1,13 @@
var Foo = Class(
'private _name': '',
__construct: function( name )
{
this._name = ''+( name );
},
'public sayHello': function()
{
return this._name + " says 'Hello!'";
},
);

View File

@ -0,0 +1,16 @@
var Cow = Class( 'Cow',
{
'virtual public tip': function()
{
return "Omph.";
},
} );
var SturdyCow = Class( 'SturdyCow' )
.extend( Cow,
{
'override public tip': function()
{
return "Moo.";
},
} );

View File

@ -0,0 +1,7 @@
var Foo = FinalClass( 'Foo',
{
'public describe': function()
{
return "I cannot be extended.";
},
} );

View File

@ -1,22 +1,16 @@
// define class Dog var Class = easejs.Class;
var Dog = Class( 'Dog',
{
'private _name': '',
__construct: function( name ) var Stack = Class( 'Stack',
{ {
this._name = name; 'private _stack': [],
'public push': function( value )
{
this._stack.push( value );
}, },
'public bark': function() 'public pop': function()
{ {
console.log( this._name + ' says: Woof!' ); return this._stack.pop();
} },
} ); } );
// invoke method 'bark' on a new instance of 'Dog'
Dog( 'Fluffy' ).bark();
// alternatively, we can use the 'new' keyword
var inst = new Dog( 'Bob' );
inst.bark();

View File

@ -0,0 +1,25 @@
var ConcreteFilesystem = Class( 'ConcreteFilesystem' )
.implement( Filesystem ) // multiple interfaces as separate arguments
{
'public open': function( path, mode )
{
return { path: path, mode: mode };
},
'public read': function( handle, length )
{
return "";
},
'public write': function( handle, data )
{
// ...
return data.length;
},
'public close': function( handle )
{
// ...
return this;
},
} );

View File

@ -0,0 +1,2 @@
var inst = ConcreteFilesystem();
Class.isA( Filesystem, inst ); // true

View File

@ -0,0 +1,10 @@
var Filesystem = Interface( 'Filesystem',
{
'public open': [ 'path', 'mode' ],
'public read': [ 'handle', 'length' ],
'public write': [ 'handle', 'data' ],
'public close': [ 'handle' ],
} );

View File

@ -0,0 +1,27 @@
var Cow = Class( 'Cow',
{
'const LEGS': 4,
'private static _number': 0,
__construct: function()
{
// __self refers to the class associated with this instance
this.__self.$( '_number' ) = this.__self.$( 'number' ) + 1;
},
'public static create': function()
{
return Cow();
},
'public static getNumber': function(){
{
return this.__self.$( '_number' );
},
} );
Cow.$( 'LEGS' ); // 4
Cow.getNumber(); // 0
Cow.create();
Cow.getNumber(); // 1

File diff suppressed because one or more lines are too long

179
style.css
View File

@ -16,6 +16,14 @@ html, body {
font-size: 16px; font-size: 16px;
} }
a, a:active {
color: #204a87;
text-decoration: none;
}
a:visited {
color: #729fcf;
}
#header { #header {
position: relative; position: relative;
@ -68,19 +76,7 @@ html, body {
#content { #content {
position: relative; position: relative;
background-color: white; background-color: rgba( 255, 255, 255, 0.5 );
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(238,238,236))
);
background-image: -moz-linear-gradient(
center top,
rgb(255,255,255) 0%,
rgb(238,238,236) 100%
);
border: 2px solid #babdb6; border: 2px solid #babdb6;
border-top: 0px; border-top: 0px;
@ -325,3 +321,160 @@ div.git-commit-body pre {
font-size: 0.8em; font-size: 0.8em;
} }
.bigemph {
font-size: 1.7em;
}
h3 > .anchor {
display: none;
}
h3 > .anchor > a {
text-decoration: none;
color: inherit;
float: right;
}
h3:hover > .anchor {
display: inline;
}
h3.bigemph {
border-bottom: 2px solid rgba( 226, 226, 223, 0.75 );
padding-bottom: 0.2em;
}
pre.js {
background-image: url( 'images/cross_scratches.png' );
background-repeat: both;
border: 1px solid #babdb6;
border-radius: 0.25em;
font-size: 0.9em;
padding: 1em;
}
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
Modified slightly from its original by Mike Gerwitz
*/
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .lisp .title,
pre .subst {
color: #000;
font-weight: bold
}
pre .number,
pre .hexcolor {
color: #40a070
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .label,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body {
color: #008080
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .lisp .keyword,
pre .tex .special,
pre .input_number {
color: #990073
}
pre .builtin,
pre .built_in,
pre .lisp .title {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
pre .tex .formula {
opacity: 0.5;
}