AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

JavaScript The Good Part-JS的优缺点[Douglas Crockford, 2009]

发布者 jser
发布于 1429781446897  浏览 5280 关键词 English, JavaScript 
分享到
2009年的演讲,当时的JavaScript远没有现在流行,Node.js/AngularJS刚刚发布,人们对JS还有很多质疑和误解


第1页

JavaScript: The Good Parts
Douglas Crockford
Yahoo! Inc.
http://www.crockford.com/codecamp/

第2页

The World's Most Misunderstood Programming Language

第3页

A language of many contrasts.

第4页

The broadest range of programmer skills of any programming language.

From computer scientists to cut-n-pasters and everyone in between.

第5页

Complaints
"JavaScript is not a language I know."
"The browser programming experience is awful."
"It's not fast enough."
"The language is just a pile of mistakes."

第6页

Hidden under a huge steaming pile of good intentions and blunders is an elegant, expressive programming language.

JavaScript has good parts.

第7页

JavaScript is succeeding very well in an environment where Java was a total failure.

第8页

Influences
Self
prototypal inheritance
dynamic objects
Scheme
lambda
loose typing
Java
syntax
conventions
Perl
regular expressions

第9页

Bad Parts
Global Variables
+ adds and concatenates
Semicolon insertion
typeof
with and eval
phony arrays
== and !=
false, null, undefined, NaN

第10页

Transitivity? What's That?
'' == '0'          // false
0 == ''            // true
0 == '0'           // true
false == 'false'   // false
false == '0'       // true
false == undefined // false
false == null      // false
null == undefined  // true
" \t\r\n " == 0    // true 

第11页

value = myObject[name];
if (value == null) {
   alert(name + ' not found.');
}

Two errors that cancel each other out.

第12页

value = myObject[name];
if (value === undefined) {
   alert(name + ' not found.');
}

第13页

Good features that interact badly
Objects can inherit from other objects.
Functions can be members of objects.
for..in statement mixes inherited functions with the desired data members.

第14页

for in is troublesome
Design question: Should for..in do a shallow skim or a deep dredge?
Decision: Deep dredge. The programmer must explicitly filter out the deep members.
Except: They didn't tell anybody!
Consequence: Lots of confusion about how to use for..in.

第15页

for in is troublesome
Better Decision: Don't release the language broadly until we have enough experience to have confidence that we made the right choice.
Historical Context: Getting it right at Netscape wasn't an option.

第16页

Bad Heritage
Blockless statements
if (foo)
    bar();
Expression statements
foo;
Floating point arithmetic
0.1 + 0.2 !== 0.3
++ and --
switch

第17页

Good Parts
Lambda
Dynamic Objects
Loose Typing
Object Literals

第18页

Inheritance
Inheritance is object-oriented code reuse.
Two Schools:
Classical
Prototypal

第19页

Prototypal Inheritance
Class-free.
Objects inherit from objects.
An object contains a link to another object: Delegation. Differential Inheritance.
      var newObject = 
            Object.create(oldObject);
newObject
oldObject

第20页

Prototypal Inheritance
if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

第21页

new
The new operator is required when calling a Constructor function.
If new is omitted, the global object is clobbered by the constructor.
There is no compile-time or run-time warning.

第22页

Global
 
var names = ['zero', 'one', 'two', 
        'three', 'four', 'five', 'six', 
        'seven', 'eight', 'nine'];

var digit_name = function (n) {
    return names[n];
};

alert(digit_name(3));    // 'three'

第23页

Slow
var digit_name = function (n) { 
    var names = ['zero', 'one', 'two', 
        'three', 'four', 'five', 'six', 
        'seven', 'eight', 'nine'];

 
    return names[n];
};

alert(digit_name(3));    // 'three'

第24页

Closure
var digit_name = (function () {
    var names = ['zero', 'one', 'two', 
        'three', 'four', 'five', 'six', 
        'seven', 'eight', 'nine'];

    return function (n) {
        return names[n];
    };
}());
alert(digit_name(3));    // 'three'

第25页

A Module Pattern
var singleton = (function () {
    var privateVariable;
    function privateFunction(x) {
        ...privateVariable...
    }
    return {
        firstMethod: function (a, b) {
            ...privateVariable...
        },
        secondMethod: function (c) {
            ...privateFunction()...
        }
    };
}());

第26页

Module pattern is easily transformed into a powerful constructor pattern.

第27页

Power Constructors
Make an object.
Object literal
new
Object.create
call another power constructor

第28页

Power Constructors
Make an object.
Object literal, new, Object.create, call another power constructor
Define some variables and functions. 
These become private members.

第29页

Power Constructors
Make an object.
Object literal, new, Object.create, call another power constructor
Define some variables and functions. 
These become private members.
Augment the object with privileged methods.

第30页

Power Constructors
Make an object.
Object literal, new, Object.create, call another power constructor
Define some variables and functions. 
These become private members.
Augment the object with privileged methods.
Return the object.

第31页

Step One
function myPowerConstructor(x) {
    var that = otherMaker(x);
}

第32页

Step Two
function myPowerConstructor(x) {
    var that = otherMaker(x);
    var secret = f(x);
}

第33页

Step Three
function myPowerConstructor(x) {
    var that = otherMaker(x);
    var secret = f(x);
    that.priv = function () {
        ... secret x that ...
    };
}

第34页

Step Four
function myPowerConstructor(x) {
    var that = otherMaker(x);
    var secret = f(x);
    that.priv = function () {
        ... secret x that ...
    };
    return that;
}

第35页

Closure
A function object contains
A function (name, parameters, body)
A reference to the environment in which it was created (context).

This is a very good thing.

第36页

Style Isn't Subjective
block
{
    ....
}

Might work well in other languages
block {
    ....
}


Works well in JavaScript

第37页

Style Isn't Subjective
return
{
    ok: false
};

SILENT ERROR!
return {
    ok: true
};


Works well in JavaScript

第38页

Style Isn't Subjective
return
{
    ok: false
};

第39页

Style Isn't Subjective
return; // semicolon insertion
{
    ok: false
};

第40页

Style Isn't Subjective
return;
{ // block
    ok: false
};

第41页

Style Isn't Subjective
return;

    ok: false  // label
};

第42页

Style Isn't Subjective
return;
{              // useless
    ok: false  // expression
};             // statement

第43页

Style Isn't Subjective
return;

    ok: false; // semicolon
};             // insertion

第44页

Style Isn't Subjective
return;

    ok: false;
};  // empty statement

第45页

Style Isn't Subjective
return;
{  // unreachable statement
    ok: false;
}

第46页

Style Isn't Subjective
return
{
    ok: false
};

Bad style
return;
{
    ok: false;
}

Bad results

第47页

Working with the Grain

第48页

A Personal Journey
Beautiful Code

第49页

JSLint
JSLint defines a professional subset of JavaScript.
It imposes a programming discipline that makes me much more confident in a dynamic, loosely-typed environment.
http://www.JSLint.com/

第50页

WARNING!
JSLint will hurt your feelings.

第51页

Unlearning Is Really Hard

Perfectly Fine == Faulty

第52页

It's not ignorance does so much damage; it's knowin' so derned much that ain't so. 

Josh Billings

第53页

The Very Best Part:Stability

No new design errors 
since 1999!

第54页

Coming Soon
[ES3.1] ECMAScript Fifth Edition
Corrections
Reality
Support for object hardening
Strict mode for reliability
"use strict";
Waiting on implementations

第55页

Not Coming Soon
[ES4] This project has been cancelled.


Instead, [ES-Harmony].
So far, this project has no defined goals or rules.

第56页

Safe Subsets
The most effective way to make this language better is to make it smaller.
FBJS
Caja & Cajita
Web Sandbox
ADsafe
The next edition of ECMAScript might include a secure formal subset.

第57页

The Good Parts
Your JavaScript application can reach a potential audience of billions.
If you avoid the bad parts, JavaScript works really well. There is some brilliance in it.
It is possible to write good programs with JavaScript.

第58页

支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。