抽象化は危険です
誰もがシンプルさが好きです。 複雑さは殺します。 それは作業を複雑にし、急な学習曲線につながります。 プログラマは、それがどのように機能するかを理解する必要があります。 複雑なシステムで作業する場合、「私はそれを使用する」と「それがどのように機能するかを知っている」との間に大きな距離があります。 たとえば、次のコードは複雑さを隠します。
var page = Framework.createPage({ 'type': 'home', 'visible': true });
これが本当のフレームワークだとしましょう。 createPageは、htmlテンプレートホームをロードする新しいViewクラスをどこかに作成します。 visibleパラメーターに基づいて、作成されたDOM要素をツリーに追加します。 開発者の観点からは、抽象化であるため、すべてがどのように詳細に機能するのかわかりません。
一部のフレームワークには1つではなく、多くの抽象化レベルがあります。 時々、彼の作品の詳細を知る必要があります。 抽象化は、機能のラッパーを作成し、設計上の決定をカプセル化するため、強力なツールです。 しかし、追跡が困難なプロセスにつながるため、賢明に使用する必要があります。
例を次のように変更した場合：
var page = Framework.createPage(); page .loadTemplate('home.html') .appendToDOM();
今、何が起こっているのかが明らかになります。 テンプレートのロードと添付は、APIメソッドとして示されます。 つまり、プロセスを理解して制御することができます。
Ember.jsを取得します。 フレームワークは素晴らしいです。 数行で、1ページのアプリケーションを作成できます。 しかし、価格があります。 彼は舞台裏でクラスを定義します。 例：
App.Router.map(function() { this.resource('posts', function() { this.route('new'); }); });
フレームワークは3つのパスを作成し、それぞれがコントローラーに接続されます。 それらは使用される場合も使用されない場合もありますが、使用されています。 フレームワークでは、それらが機能する必要があります。
多くの場合、プロジェクトには独自の機能が必要です。 すべての場合に設計されたフレームワークはありません。 そして、単純な解決策がないタスクに直面しています。 問題を解決する正しい方法を見つけるには、すべてがどのように機能するかを把握する必要があります。 多くの場合、私たちが行う必要があるのは、フレームワークをハッキングするようなものです。
たとえば、Backbone.jsにはいくつかの定義済みオブジェクトがあります。 それらは基本的な機能を持ち、その実装はプログラマーにかかっています。 DocumentViewクラスは、Backbone.Viewを拡張します。 それだけです。 コードとフレームワークのコア機能の間には1つのレベルしかありません。
var DocumentView = Backbone.View.extend({ 'tagName': 'li', 'events': { 'mouseover .title .date': 'showTooltip', 'click .open': 'render' }, 'render': function() { … }, 'showTooltip': function() { … } });
私は多くの抽象化レベルを持たないフレームワークが好きです-透明性が判明したものです。
消えたコンストラクター
一部のフレームワークは、クラス定義を受け入れますが、コンストラクターを作成しません。 フレームワーク自体が、オブジェクトをいつどこでインスタンス化するかを決定します。 私たちがこれを自分で行うことを可能にするフレームワークを見たいです。 たとえば、Knockoutの場合：
function ViewModel(first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); } ko.applyBindings(new ViewModel("", ""))
モデルを定義して初期化します。 AngularJSでは、状況は少し異なります。
function TodoCtrl($scope) { $scope.todos = [ { 'text': ' angular', 'done': true }, { 'text': ' angular', 'done': false } ]; }
クラスを定義しますが、実行しません。 これがコントローラーであり、フレームワークがそれをどのように操作するかを決定するだけです。 これは混乱する可能性があります アプリケーション内を移動できるようにするコードの重要なポイントを失います。
DOM操作
いずれにしても、DOMと対話する必要があります。 そして、これがどのように起こるかを正確に知る必要があります-通常、ページノードを使用するすべてのアクションは、再描画につながります。 たとえば、次のクラスを考えます。
var Framework = { 'el': null, 'setElement': function(el) { this.el = el; return this; }, 'update': function(list) { var str = '<ul>'; for (var i = 0; i < list.length; i++) { var li = document.createElement('li'); li.textContent = list[i]; str += li.outerHTML; } str += '</ul>'; this.el.innerHTML = str; return this; } }
このフレームワークは、指定されたデータから順序付けられていないリストを作成します。 リストを含むDOM要素を送信し、画面にデータを表示するupdateを呼び出します。
Framework .setElement(document.querySelector('.content')) .update(['JavaScript', '', '']);
結果は次のとおりです。
これがなぜ悪いのかを示します。 ページにリンクを追加し、イベントトラッキングを終了します。 この関数は、他のパラメーターを使用して既にupdateを呼び出します。
document.querySelector('a').addEventListener('click', function() { Framework.update(['', '', '']); });
非常に類似したデータを送信し、配列の最初の要素のみを変更します。 しかし、innerHTMLの使用により、リスト全体が毎回再描画されます。 OperaのDevToolsでこれを見てみましょう。
クリックするたびに、コンテンツ全体が再描画されます。 これは問題です。
ノードのみを使用した方が良いでしょう
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
-
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
..
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for. this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, ,.
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML-. HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
-
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
..
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for. this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, ,.
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML-. HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
-
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
..
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for. this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, ,.
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML-. HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.
. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.. , . , – setElement:
setElement: function(el) { this.list = document.createElement('ul'); el.appendChild(this.list); return this; }
. .
, , update:
'update': function(list) { for (var i = 0; i < list.length; i++) { if (!this.rows[i]) { var row = document.createElement('LI'); row.textContent = list[i]; this.rows[i] = row; this.list.appendChild(row); } else if (this.rows[i].textContent !== list[i]) { this.rows[i].textContent = list[i]; } } if (list.length < this.rows.length) { for (var i = list.length; i < this.rows.length; i++) { if (this.rows[i] !== false) { this.list.removeChild(this.rows[i]); this.rows[i] = false; } } } return this; }
for . this.rows . , textContent. , , .
:
.
React DOM. . .
, .
DOM
JavaScript DOM. , . Backbone.js, :
var Navigation = Backbone.View.extend({ 'events': { 'click .header.menu': 'toggleMenu' }, 'toggleMenu': function() { // … } });
, .header.menu, , . , DOM. .menu. .main-menu, JS-. , , DOM.
, JS. – DOM, HTML.
AngularJS:
<a href="#" ng-click="go()"> </a>
go - , . DOM. HTML. DOM.
HTML. (HMTL) (JS). , . :
<div onclick="javascript:App.doSomething(this);"> </div>
, . :
<div data-component="slideshow" data-items="5" data-select="dispatch:selected"> … </div>
HTML, .
. . – . . , " ". , .
RequireJS – . , , :
require(['ajax', 'router'], function(ajax, router) { // … });
ajax router. require . router :
// router.js define(['jquery'], function($) { return { 'apiMethod': function() { // … } } });
– jQuery. , API – , , .
AngularJS factory (). , :
myModule.factory('greeter', function($window) { return { 'greet': function(text) { alert(text); } }; }); function MyController($scope, greeter) { $scope.sayHello = function() { greeter.greet(' !'); }; }
– require . .
. , . . , :
var router:<inject:Router>;
, . RequireJS AngularJS , , , .
HTML. ? .
<script type="text/x-handlebars"> Hello, <strong> </strong>! </script>
HTML, , .
Ajax
Backbone.View.extend({ 'template': 'my-view-template', 'render': function() { $.get('/templates/' + this.template + '.html', function(template) { var html = $(template).tmpl(); }); } });
HTML- . HTTP-, .
– DOM. HTML , HTTP-, .
JavaScript
var HelloMessage = React.createClass({ render: function() { // JS: return <div>, {this.props.name}</div>; } });
React, , .
-HTML
HTML. JSON YAML.
? . . HTML- . DOM. , .
AngularJS . . . – HTML, AngularJS . , Object.observe , .
. - , . , , , . , , YUI, . JS-, .
"". . – , . .
, . . , . , .
API
API , . . - , , :
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'addRoute': function(path) { var rData = router.resolve(path); var controller = factory.get(rData.controllerType); router.register(path, controller.handler); return controller; } } }; var AboutCtrl = Framework.addRoute('/about');
. , . URK, . , , URL? ? API.
:
var Framework = function() { var router = new Router(); var factory = new ControllerFactory(); return { 'createController': function(path) { var rData = router.resolve(path); return factory.get(rData.controllerType); } 'addRoute': function(path, handler) { router.register(path, handler); } } } var AboutCtrl = Framework.createController({ 'type': 'about' }); Framework.addRoute('/about', AboutCtrl.handler);
, – , . , . , - . API , , . , , . , , .
, , . . , - , . . , , .. – TDD.
, , . , . , – , .
. . Travis. , , .
c PHP, WordPress. – ? – . - . JS- – . , , .
. – , . . – .
:
. . , – . , – . API. . , , . . . , , , . , .
, . , JavaScript.