KnockoutJS - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему KnockoutJS. Доклад-сообщение содержит 43 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

JavaScript Developer Foundation

Слайд 2

Описание слайда:

Слайд 3

Описание слайда:

Agenda TypeScript CoffeeScript asm.js

Слайд 4

Описание слайда:

TypeScript

Слайд 5

Описание слайда:

Open Source Open Source Public Roadmap Superset of JavaScript Transpiles to ES3, ES5, or ES6  no special runtime First preview in 2012, 1.0 in April 2014, 1.5 current

Слайд 6

Описание слайда:

Transpilation

Слайд 7

Описание слайда:

Tooling (Playground) Visual Studio 2012/2013 TypeScript 1.4 Extension Visual Studio 2015 TypeScript 1.5 Built-in NodeJS: Command Line | Build Automation npm install –g typescript

Слайд 8

Описание слайда:

Overview class Greeter { greeting: string; constructor (message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var greeter = new Greeter("world"); var button = document.createElement("button"); button.innerText = "Say Hello"; button.onclick = function() { alert(greeter.greet()); } document.body.appendChild(button);

Слайд 9

Описание слайда:

JavaScript function greeter(person) { return "Hello " + person; } var user = "Bill"; alert(greeter(user));

Слайд 10

Описание слайда:

Type Annotation function greeter(person: string) { // any | () => string | { a: number; b: string; } return "Hello " + person; } var user = "Bill"; alert(greeter(user));

Слайд 11

Описание слайда:

Return types function toupper(input: string): string { // void return input.toUpperCase(); }

Слайд 12

Описание слайда:

Array types var list1: Array = []; var list2: number[] = []; list1.push(1); list1.push("2"); // Error. list2.push(1); numArr2list2.push("2"); // Error.

Слайд 13

Описание слайда:

Generics function greeter(person: T) { return "Hello " + person; } var user = "Bill"; alert(greeter(user));

Слайд 14

Описание слайда:

Interface interface IPerson { firstName: string; lastName?: string; // Optional property. } function greeter(person: IPerson) { return "Hello " + person.firstName + " " + person.lastName; } var user = {firstName: "Bill", lastName: "Gates"}; alert(greeter(user));

Слайд 15

Описание слайда:

Function type // Interface. interface SearchFunc { (source: string, subString: string): number; } var mySearch: SearchFunc = function (source: string, subString: string) { return source.search(subString); } // Annotation. var myAdd: (a: number, b: number) => number = function (x, y) { return x + y; };

Слайд 16

Описание слайда:

Array type interface StringArray { [index: number]: string; } var myArr: StringArray = ["Hello", "world"]; interface Dictionary { [index: string]: string; } var myDict: Dictionary = { a: "Hello", b: "world" };

Слайд 17

Описание слайда:

Class class Student { fullName: string; constructor(public firstName, private middleName, public lastName = "") { // Optional param. this.fullName = firstName + " " + middleName + " " + lastName; } } interface IPerson { firstName: string; lastName: string; } function greeter(person: IPerson) { return "Hello " + person.firstName + " " + person.lastName; } var user = new Student("Bill", "H.", "Gates"); alert(greeter(user));

Слайд 18

Описание слайда:

Implements class Student implements IPerson { fullName: string; constructor(public firstName, private middleName, public lastName = "") { // Optional param. this.fullName = firstName + " " + middleName + " " + lastName; } } interface IPerson { firstName: string; lastName: string; } function greeter(person: IPerson) { return "Hello " + person.firstName + " " + person.lastName; } var user = new Student("Bill", "H.", "Gates"); alert(greeter(user));

Слайд 19

Описание слайда:

Method class Student { fullName: string; constructor(public firstName, private middleName, public lastName) { this.fullName = firstName + " " + middleName + " " + lastName; } greet() { return "Hello " + this.firstName + " " + this.lastName; } } var user = new Student("Bill", "H.", "Gates"); alert(user.greet());

Слайд 20

Описание слайда:

Methods in interfaces class Student implements IPerson { fullName: string; constructor(public firstName: string, private middleName: string, public lastName: string) { this.fullName = firstName + " " + middleName + " " + lastName; } greet(): string { return "Hello " + this.firstName + " " + this.lastName; } } interface IPerson { firstName: string; lastName: string; greet(): string; }

Слайд 21

$Getters/Setters class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(value: string) {...$

Описание слайда:

Getters/Setters class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(value: string) { this._fullName = value; } } var employee = new Employee(); employee.fullName = "Bob Smith"; alert(employee.fullName);

Слайд 22

Описание слайда:

Module module Sayings { export class Student { fullName: string; constructor (public firstName, private middleName, public lastName) { this.fullName = firstName + " " + middleName + " " + lastName; } greet() { return "Hello " + this.firstName + " " + this.lastName; } } } var user = new Sayings.Student("Bill", "H.", "Gates"); alert(user.greet());

Слайд 23

Описание слайда:

Static module Sayings { export class Student { fullName: string; constructor (public firstName, private middleName, public lastName) { this.fullName = firstName + " " + middleName + " " + lastName; } greet() { return "Hello " + this.firstName + " " + this.lastName; } static goodbye(name: string) { return "Goodbye " + name; } } } var user = new Sayings.Student("Bill", "H.", "Gates"); alert(Sayings.Student.goodbye(user.fullName));

Слайд 24

Описание слайда:

External objects module Sayings { export declare class JSEncrypt { constructor(options: any); encrypt(input: string): string; decrypt(input: string): string; }; }

Слайд 25

Описание слайда:

Multiple files //---------- Validation.ts module Validation { export interface Validator { } } //---------- StringValidator.ts /// module Validation { export class StringValidator implements Validator { } } //---------- Test.ts /// /// var stringValidator: Validation.StringValidator = new Validation.StringValidator();

Слайд 26

Описание слайда:

Inheritance class animal { eats: bool; constructor (public name) { }; move(meters) { alert(this.name + " moved " + meters + "m."); } } class dog extends animal { constructor(name) { super(name); }; move() { alert("Barks ..."); super.move(5); } }

Слайд 27

Описание слайда:

Multiple inheritance interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; } var square = {}; square.color= "blue"; square.sideLength = 10; square.penWidth = 5.0;

Слайд 28

Описание слайда:

Enums enum Color { red, blue, green, } var myColor = Color.red; alert(Color[myColor]); // red.

Слайд 29

Описание слайда:

Function parameters function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } var employeeName = buildName("George", "Alexander", "Louis", "of Cambridge");

Слайд 30

Описание слайда:

this var person = { name: "Bill Gates", greeter: function () { return function () { alert(this.name); // Error. }; } } var person = { name: "Bill Gates", greeter: function () { return function () { alert(this.name); }.bind(this); // Solution 1. } } var greet = person.greeter(); greet();

Слайд 31

$Lambda var person = { name: "Bill Gates", greeter: function () { var _this = this; return function () { alert(_this.name); // Solution 2....$

Описание слайда:

Lambda var person = { name: "Bill Gates", greeter: function () { var _this = this; return function () { alert(_this.name); // Solution 2. }; } } var person = { name: "Bill Gates", greeter: function () { return () => { // Solution 3. alert(this.name); }; } } var greet = person.greeter(); greet();

Слайд 32

Описание слайда:

Overloading function add(a: string, b: string): string; function add(a: number, b: number): number; function add(a: any, b: any): any { return a + b; } alert(add(1, 2)); alert(add("Hello ", "world")); alert(add("Hello ", 1234)); // Error.

Слайд 33

Описание слайда:

Union Types function f(x: number | number[]) { if (typeof x === "number") { return x + 10; } else { // Return sum of numbers. } }

Слайд 34

Описание слайда:

Type Aliases type PrimitiveArray = Array; type MyNumber = number; type Callback = () => void;

Слайд 35

Описание слайда:

Type Definition files module zoo { function open(): void; } declare module "zoo" { export = zoo; }

Слайд 36

Описание слайда:

CoffeeScript

Слайд 37

Описание слайда:

Overview # Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x

Слайд 38

Описание слайда:

asm.js

Слайд 39

Описание слайда:

JavaScript function DiagModuleJS(stdlib, foreign?, heap?) { // Variable Declarations. var sqrt = stdlib.Math.sqrt; // Function Declarations. function square(x) { x = +x; return +(x * x); } function diag(x, y) { x = +x; y = +y; return +sqrt(+square(x) + +square(y)); } return { diag: diag }; }

Слайд 40

Описание слайда:

use asm function DiagModule(stdlib, foreign, heap) { "use asm"; // Variable Declarations. var sqrt = stdlib.Math.sqrt; // Function Declarations. function square(x) { x = +x; return +(x * x); } function diag(x, y) { x = +x; y = +y; return +sqrt(+square(x) + +square(y)); } return { diag: diag }; }

Слайд 41

Описание слайда:

Speed comparison var limit = 1000000; var diagJs = DiagModuleJS({ Math: Math }).diag; var start = +new Date(); for (var i = 0; i < limit; i++) { var result = diagJs(10, 100); } alert("JS: " + (+new Date() - start) + " ms"); var diag = DiagModule({ Math: Math }).diag; var start = +new Date(); for (var i = 0; i < limit; i++) { var result = diag(10, 100); } alert("asm.js: " + (+new Date() - start) + " ms");

Слайд 42

Описание слайда:

Characteristics Only for number types Data stored on heap No garbage collection or dynamic types Fallback to JS if not supported ~1.5x slower than compiled C++ (like C# or Java) ~4-10x faster than latest browser builds running JS