運用Closure Compiler 打造高品質的JavaScript

運用Closure Compiler 打造高品質的JavaScript Hedger 王璽

前端工程師 Yahoo! 2004 - 2008 Google 2008 - Present

適用場合 Complex JS Application Object-Oriented JavaScript

// John Resig's Approach. function User(name){ if ( !(this instanceof User) ) return new User(name); this.name = name; } var userA = new User('John'); // An instance. var userB = User('Jane'); // Also an instance.

// Crockford's approach. function User(name) { var _name = name; // Getter for the private name. this.getName = function() { return _name; }; }

// Global is evil. var myProjectDemoUserName = 'foo'; // Meeh... my.project.demo.user.Name = 'foo';

jQuery MooTool prototype script.aculo.us YUI ExtJS Dojo Closure

Functional OO? or var p1 = new Person('John'); var p2 = new Person('Jane'); var people = new People(); people.add(p1); people.add(p2); document.write(people.getCount());

人人都是 JavaScript 忍者

if (!('a' in window)) { var a = 1; } alert(a);

It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

/** * @constructor */ function MyClass() { } // Pass. var obj1 = new MyClass(); // ERROR: Constructor function (this:MyClass): // class should be called with the "new" keyword. var obj2 = MyClass(); // Error.

// File demo1.js // File demo2.js /** // Create a user. * A User. var me = new User(); * @constructor */ // Print out its birth year. function User() { document.write(me. getBirthYear().toString()); /** * The creation date. // Error * @private document.write(me. * @type {Date} _birthDay.toString()); */ this._birthDay = new Date(); } /** * @return {number} The creation year. */ User.prototype.getBirthYear = function() { return this._birthDay.getYear(); };

/** * The shape * @constructor */ function Shape() { } /** * The Box. * @constructor * @extends {Shape} */ function Box()) { }

/** * The shape * @constructor */ function Shape() { } /** @return {number} */ Shape.prototype.getSize = function() {}; /** * The Box. * @constructor * @imnplements {Shape} */ function Box()) { } /** @inheritDoc */ Box.prototype.getSize = function() {return 0;};

// Create namespaces. var demo = {}; demo.example = {}; demo.example.exercise = {}; /** * @constructor */ demo.example.exercise.Foo = function() { demo.example.exercise.Foo.print(this.value1); demo.example.exercise.Foo.print(this.value2); };

STRICT type checking 嚴格的類型檢查

/** * @constructor */ function User() { } /** * @constructor */ function UsersGroup() { /** * @private * @type {Array.<User>} */ this.users_ = []; } /** * @param {User} user */ UsersGroup.prototype.add = function(user) { this.users_.push(user); };

/** * @constructor * @param {Project.Status} status */ function Project(status) { /** /** * @return {boolean} * @type {Project.Status} */ * @private Project.prototype.isBusy = function() { */ switch (this.status_) { this.status_ = status; case Project.Status.BUSY:; } case Project.Status.SUPER_BUSY: return true; /** default: * @enum {number} return false; */ } Project.Status = { }; BUSY: 0, SUPER_BUSY: 1, var p1 = new Project(Project.Status.BUSY); IDLE: 2 var p2 = new Project( }; Project.Status.SUPER_BUSY); var p3 = new Project(Project.Status.IDLE); document.write(p1.isBusy().toString()); document.write(p2.isBusy().toString()); document.write(p3.isBusy().toString());

/** * namespace for the Logger. */ var Logger = {}; /** * Whether logging should be * enabled. /** * @define {boolean} * A User. */ * @param {string} name Logger.ENABLED = true; * @constructor */ /** function LoggerUser(name) { * the log API. Logger.log('New User', name); * @param {...*} args } */ Logger.log = function(args) { var me = new LoggerUser('me'); if (!Logger.ENABLED) { // Don't do anything if logger is disabled. return; } var console = window['console']; if (console) { console['log'].apply(console, arguments); } };

/** /** * The Model definition. * A static method that creates a * @constructor * User from a model. */ * @param {UserModel} model function UserModel() { * @return {User} The user created. /** */ * @type {string} User.createFromUserModel = */ function(model) { this.firstName = ''; return new User( model.firstName, /** model.lastName); * @type {string} }; */ this.lastName = ''; // Cast a simple JSON Object as } // {UserModel}. /** var data = /** @type {UserModel} */({ * The User constructor. firstName : 'foo', * @constructor lastName : 'bar' * @param {string} firstName }); * @param {string} lastName */ // Create a user from the model. function User(firstName, var user = User.createFromUserModel(data); lastName) { document.write(user.fullName); /** * @type {string} */ this.fullName = firstName + ' ' + lastName; }

良好的代碼風格可讀性 / 可維護性 / 可用性 Developer, IDE, Compiler, JSDocBuilder

詳細合理的註釋 progressive enhancemen

良好的開發週期開發/測試/發佈

JavaScript Everywhere PS3 . iPhone . Android ChromeOS . WebOS

JavaScript Everything Mobile App . Game . RIA

運用Closure Compiler 打造高品質的JavaScript

More Related Content

What's hot

Viewers also liked

Similar to 運用Closure Compiler 打造高品質的JavaScript

More from taobao.com

Recently uploaded

運用Closure Compiler 打造高品質的JavaScript