AirJD 焦点
AirJD

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

现代JavaScript编程和设计模式[英]

发布者 jser
发布于 1430895559465  浏览 5633 关键词 JavaScript 
分享到

第1页

MODERN

JAVASCRIPT

APPLICATIONS



Rivne 2013



Volodymyr Voityshyn



第2页

How to get well structured JavaScript code?



第4页

Client JavaScript Evolution

1. Client JavaScript resolved auxiliary tasks

2. Single Page Web Applications

3. Real time applications



第5页

Contents

I. Some Useful Constructions II. What is wrong? III. JavaScript & OOP IV. Module Pattern V. Object Oriented Design Patterns VI. MV* Patterns via BackboneJS VII. Dependencies Management



第6页

I. Some Useful Constructions



第7页

Closures



第8页

IIFE



第9页

Named Parameters



Must be documented



It’s useful for 4 and more parameters



第10页

II. What is wrong?



第11页

Global Functions

 Avoid global functions

 Use instead:

 Classes  Modules



第12页

Mixing JavaScript with HTML

▪ Place HTML and JavaScript in separated files

▪ Assign event handlers with JavaScript



第13页

Mixing JS & Server Code is Bad

ASP.NET MVC Razor



第14页

Mixing JS & Server Code is Acceptable

ASP.NET MVC Razor



第15页

III. JavaScript & OOP



第16页

Fact #1

Everything is an object



第17页

… even primitives and functions



第18页

Creating an Object



第19页

Fact # 2

Object members can be added/deleted dynamically



第20页

Defining Members



第21页

Creating an Object with JSON Notation



第22页

Deleting Members



第23页

Fact #3

All object members are public



第24页

Fact #4

Objects are hash tables



第25页

Access to a Property with []



第26页

Fact #5

Inheritance is based on prototypes



第27页

Inheritance



Obj ect

v ehicle + name + run()

bicycle + wheels

Sample_2_01



第28页

Fact #6

Functions can be considered as classes



第29页

Pseudo Class



Object

Vehicle + name + run()



第30页

The “prototype” Property



Object



Vehicle + name + run()



第31页

Pseudo Class Inheritance



Obj ect



Vehicle + name + run()

Bicycle + wheels

Sample_2_02



第32页

Inheritance: Practice Hints

 Avoid a too long prototype chain

 Avoid extending prototypes of built-in objects

 Use framework functions for extending objects:

 $.extend()  _.extend()  _.mixin()



第33页

Virtual Functions



第34页

Static Members



第35页

IV. Module Pattern



第36页

Module Pattern Intent

Provides both private and public encapsulation for classes



第37页

Module Example

▪ Closure is used for private state

▪ “Public” object is returned

▪ Created by IIFE

Sample_3_01_Module_Counter



第38页

Import Dependencies



第39页

Extending

Sample_3_02_Module_Strings



第40页

Extending jQuery Module



第41页

Extending Underscore Module



第42页

Page Code Behind as Module



Page

(HTML + CSS)



Handle Events Read Data Put Data



Code Behind

(JavaScript Module)



Sample_3_04_PageCodeBehind_Module



第43页

Advantages vs. Disadvantages

 Advantages

 Simple in development  Possibility of using a page base class

 Disadvantages

 Becomes too large in case of a complex page  Hard in automated testing  Can’t be used with SPA



第44页

Class as Module



第45页

V. Object Oriented Design Patterns



第46页

V.1. Creational Patterns

“… help make a system independent of how its objects are

created, composed, and represented” (GoF)



第47页

Factory Pattern Intent

Provides an interface for creating families of related or dependent objects without specifying

their concrete classes.

(GoF)



第48页

Classical Abstract Factory



AbstractComponentFactory - components + create(string)

ChComponentFactory IEComponentFactory



Calendar + render()



IECalendar + render()



ChCalendar + render()



Grid + render()



IEGrid + render()



ChGrid + render()



Sample_4_01_AbstractFactory_CrossBrowser_Component



第49页

Service Locator & IoC

 Provides abstract interface for instantiating objects  Resolves dependencies among objects  Manages objects’ life cycle



第50页

Prototype Pattern Intent



Specify the kinds of objects to create using a prototypical instance, and create

new objects by copying this prototype.

(GoF)



Prototype



clone()



New Object



第51页

Prototype by Native JavaScript

Object p

id, name

p1 p2



第52页

Prototype as a Shallow Copy



Object



p3

id, name



p4

id, name



p5

id, name



第53页

Prototype as a Deep Copy



Object



p6

id, name



p7

id, name



第54页

Classical Prototype



第55页

Cloning DOM Elements



第56页

V.2. Structural Patterns

“… are concerned with how classes and objects are composed to form larger structures” (GoF)



第57页

Adapter Pattern Intent

Convert the interface of a class into another interface clients expect

(GoF)



Client



Old Interface

Expected Interface



第58页

Adapting to Underscore Interface



第59页

Decorator Pattern Intent



Attach additional responsibilities to an object dynamically

(GoF)



Client



Decorator 2 Decorator 1

an Object



第60页

Classical Decorator



第61页

Decorator and IIFE



第62页

Decorator with Closure



第63页

Façade Pattern Intent

Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that

makes the subsystem easier to use.

(GoF)

Client

Façade

A Complex System



第64页

Façade in jQuery



Client

$.ajax()

XMLHttpRequest



Client

$(“<tag>”)

document.createElement()



第65页

Façade: Important Consideration



Performance



Comfortable Interface



第66页

V.3. Behavioral Patterns

“… are concerned with algorithms and the assignment of responsibilities among objects”

(GoF)



第67页

Observer Pattern Intent



Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

(GoF)



Subject



Notify about changes



Observer 1 Observer 2 Observer 3



第68页

Publish/Subscribe



第69页

Publish/Subscribe & Backbone Event



第70页

Mediator Pattern Intent

Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you

vary their interaction independently.

(GoF)



第71页

Mediator as Event Buss



Module 1

Publishes an event



Module 2

Listens an event



Event Buss

Transfers an event from the publisher to the listeners

http://thejacklawson.com/Mediator.js/



第72页

Mediator as Web Modules Manager



Web Module 1



 Manage user’s interaction

 Don’t know about each other



 Everything a web module knows about the application



Web Module Context



Web Module 2

Web Module ↓

an independent part of GUI



Web Modules Manager



 Manages a web module life cycle

 Manages collaboration among modules



Nicholas Zakas: Scalable JavaScript Application Architecture



第73页

Strategy Pattern Intent

Define a family of algorithms, encapsulate each one, and make them interchangeable.

(GoF)



第74页

Sorting Algorithms as Strategy



第75页

VI. MV* Patterns via BackboneJS



第76页

Model – View – Controller

View



Model



Controller



Main goal - separate view and data



第77页

Top JavaScript MVC Frameworks

Backbone.js Angular.js Ember.js Knockout.js



第78页

Backbone Object Types

 Events  Model  Collection  View  Router



第79页

Backbone.js Typical Stack

Backbone.js



jQuery



Require.js Underscore.js



第80页

Backbone Advantages

 Simple in usage  Defines major types of an application objects  Gets much freedom for application structure  Easily extensible  Gets on well with other frameworks



第81页

VII. Dependencies Management



第82页

What is a bad design?

 Inflexibility  Fragility  Solidity



第83页

Coupling

A measure of how much a module relies on other modules



第84页

Cohesion

A measure of how closely related the members of a module are to the other members of the same module

Low High



第85页

What is a good design?

 Flexible  Robust  Reusable



第86页

What’s a main problem?



第87页

What is a key to success?

Manage dependencies!



第88页

Dependency Inversion Principle

A. High level modules should not depend upon low level modules. Both should depend upon abstractions.

B. Abstractions should not depend upon details. Details should depend upon abstractions.

(Robert C. Martin)

The Dependency Inversion Principle (by Robert C. Martin)



第89页

Dependency Inversion Formula

X Y

X IY Y



第90页

Design Quality Criteria

 How easily could your code be covered by unit tests?

 Could web modules be used independently?



第91页

Class Dependencies



 Passive Injection

 Constructor  Method  Field



 Active Injection

 Service Locator



第92页

Module Dependencies

 Asynchronous Module Definition (AMD)

define(id?, dependencies?, factory)

https://github.com/amdjs/amdjs-api/wiki/AMD



第93页

RequireJS Module Sample



第94页

Web Modules Dependencies (1)



第95页

Web Modules Dependencies (2)



View 1



View 1



View 1



View 1



View 1



Root View



View 2



Models & Collections



第96页

For further reading…

1. JavaScript Good Parts 2. JavaScript Garden 3. Leaning JavaScript Design Patterns (by Addy Osmani) 4. JavaScript Module Pattern: In-Depth (by Ben Cherry) 5. Scalable JavaScript Application Architecture (by Nicholas

Zakas) 6. Journey Through The JavaScript MVC Jungle (by Addy

Osmani) 7. Developing Backbone.js Applications (by Addy Osmani) 8. superhero.js



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