Better Structure JavaScript

Better Structure JavaScript Zafar Saleem

Agenda § Traditional JavaScript File Injection § Requirejs (Asynchronous Module Definition) § Structure
JS using frameworks

Traditional JS file injection <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Title</title> </head> <body> <script src="vendors/jquery.js"></script> <script src="vendors/mutators.js"></script> <script src="vendors/memento.js"></script> <script src="vendors/workflow.js"></script> <script src="vendors/validation.js"></script> <script src="vendors/nested.js"></script> <script src="vendors/relational.js"></script> <script src="scripts/InvoiceItemModel.js"></script> <script src="scripts/BuyerModel.js"></script> <script src="scripts/main.js"></script> </body> </html>

Requirejs § Asynchronous Module Definition (AMD) § 3 main methods §  define
§  require §  config

Requirejs JS file injection <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Title</title> </head> <body> <script data-main=”scripts/main.js" src=”libs/require.js"></script> </body> </html>

config(); require.config({ paths: { 'jquery' : 'libs/jquery/dist/jquery', ’mutators' : 'libs/mutators/mutators',
’validation' : 'libs/validation/validation', 'text' : 'plugins/text' } });

require() require(['app'], function (App) { new App(); });

define() define(‘moduleName’, [‘dep1’, ‘dep2’], function (Dep1, Dep2) { });

Alternative solutions § Commonjs § Browserify

Structure JavaScript using Frameworks

§ Models § Views § Collections § Routers

Models var BuyerModel = Backbone.Model.extend({ });

Requirejs + Models define( [‘backbone’], function (Backbone) { var BuyerModel
= Backbone.Model.extend({ }); return BuyerModel; });

Models attributes define( [‘backbone’], function (Backbone) { var BuyerModel =
Backbone.Model.extend({ defaults: { ‘firstName’: ‘John’, ‘LastName’: ‘Woo’ } }); return BuyerModel; });

Models attributes + Methods define( [‘backbone’], function (Backbone) { var
BuyerModel = Backbone.Model.extend({ validate: function (attr) { } }); return BuyerModel; });

Models attributes + Methods define( [‘backbone’], function (Backbone) { var
BuyerModel = Backbone.Model.extend({ relations: [{ type: Backbone.HasOne, key: 'user', relatedModel: UserModel, reverseRelation: { type: Backbone.HasOne, key: 'buyer' } }] }); return BuyerModel; });

Collections var BuyerCollection = Backbone.Collection.extend({ });

Requirejs + Collections define( [‘backbone’], function (Backbone) { var BuyerCollections
= Backbone.Collection.extend({ }); return BuyerCollection; });

Collections + Model define( [‘backbone’, ‘BuyerModel’], function (Backbone, BuyerModel) {
var BuyerCollections = Backbone.Collection.extend({ model: BuyerModel }); return BuyerCollection; });

Views var BuyerView = Backbone.View.extend({ });

Requirejs + Views define( [‘backbone’], function (Backbone) { var BuyerView
= Backbone.View.extend({ }); return BuyerView; });

Views Usage define( [‘backbone’], function (Backbone) { var BuyerView =
Backbone.View.extend({ }); return BuyerView; }); new BuyerModel({ collection: BuyerCollection });

Views Attributes + Methods define( [‘backbone’], function (Backbone) { var
BuyerView = Backbone.View.extend({ el: ‘ul’, }); return BuyerView; });

Views Attributes + Methods define( [‘backbone’], function (Backbone) { var
BuyerView = Backbone.View.extend({ events: { ‘click .button’: ‘callbackMethod’ }, callbackMethod: function () { alert(‘I am called’); } }); return BuyerView; });

Views Attributes + Methods define([‘backbone’], function (Backbone) { var BuyerView
= Backbone.View.extend({ initialize: function () { alert(‘I am constructor method’); } }); return BuyerView; });

Views Attributes + Methods define([‘backbone’], function (Backbone) { var BuyerView
= Backbone.View.extend({ render: function () { this.$el.append(‘<li>I am rendered</li>’); } }); return BuyerView; });

Summary § Traditional way of injecting JavaScript Files § Requirejs (Asynchronous Module
Definition) § define(), require(), config() § Structure JS using frameworks using Backbone § Views, Collections and Models

The end

Better Structure JavaScript

Better Structure JavaScript

Other Decks in Programming

Featured

Transcript