1) Dependency inversion principle یا DIP (اصل معکوس سازی وابستگی‌ها)
DIP یکی از اصول طراحی نرم افزار است و D آن همان D معروف SOLID است (اصول پذیرفته شده شیءگرایی).
2) Inversion of Control یا IOC (معکوس سازی کنترل)
الگویی است که نحوه پیاده سازی DIP را بیان می‌کند.
3) Dependency injection یا DI (تزریق وابستگی‌ها)
یکی از روش‌های پیاده سازی IOC است.
4) IOC container
به فریم ورک‌هایی که کار DI را انجام می‌دهند گفته می‌شود.
class Car
{
}
class CarProducer
{
public void DeliverTo(int carsCount, string town)
{
Car[] cars = new Car[carsCount];
...
}
} class Transporter
{
public string Name { get; private set; }
public Transporter(string name)
{
this.Name = name;
}
public void Deliver(Car[] cars, string town)
{
Console.WriteLine("Delivering {0} car(s) to {1} by {2}",
cars.Length, town, this.Name);
}
} static class TransporterLocator
{
static IList<Transporter> transporters = new List<Transporter>();
public static void Register(Transporter transporter)
{
transporters.Add(transporter);
}
public static Transporter Locate(string name)
{
return
transporters
.Where(transporter => transporter.Name == name)
.Single();
}
} class CarProducer
{
public void DeliverTo(int carsCount, string town)
{
Car[] cars = new Car[carsCount];
Transporter transporter = null;
if (carsCount <= 12)
transporter = TransporterLocator.Locate("truck");
else
transporter = TransporterLocator.Locate("train");
transporter.Deliver(cars, town);
}
} TransporterLocator.Register(new Transporter("truck"));
TransporterLocator.Register(new Transporter("train"));
CarProducer producer = new CarProducer();
producer.DeliverTo(7, "Tehran");
producer.DeliverTo(74, "Tehran"); TransporterLocator.Register(new Transporter("truck"));
CarProducer producer = new CarProducer();
producer.DeliverTo(7, "Tehran");
producer.DeliverTo(74, "Tehran"); class CarProducer
{
private Transporter truck;
private Transporter train;
public CarProducer(Transporter truck, Transporter train)
{
if (truck == null)
throw new ArgumentNullException("truck");
if (train == null)
throw new ArgumentNullException("train");
this.truck = truck;
this.train = train;
}
public void DeliverTo(int carsCount, string town)
{
Car[] cars = new Car[carsCount];
Transporter transporter = this.truck;
if (carsCount > 12)
transporter = this.train;
transporter.Deliver(cars, town);
}
} > create-react-app sample-03 > cd sample-03 > npm start
const colors = ["red", "green", "blue"];
const items = colors.map(function(color) {
return "<li>" + color + "</li>";
});
console.log(items); const items2 = colors.map(color => "<li>" + color + "</li>"); console.log(items2);
const items3 = colors.map(color => `<li>${color}</li>`);
console.log(items3); const address = {
street: "street 1",
city: "city 1",
country: "country 1"
}; const street1 = address.street; const city1 = address.city; const country1 = address.country;
const { street, city, country } = address; const { street: st } = address;
console.log(st); const first = [1, 2, 3]; const second = [4, 5, 6];
const combined = first.concat(second); console.log(combined);
const combined2 = [...first, ...second]; console.log(combined2);
const combined2 = [...first, "a", ...second, "b"]; console.log(combined2);
const clone = [...first]; console.log(clone);
const firstObject = { name: "User 1" };
const secondObject = { job: "Job 1" };
const combinedObject = { ...firstObject, ...secondObject, location: "Here" };
console.log(combinedObject); {name: "User 1", job: "Job 1", location: "Here"} const clonedObject = { ...firstObject };
console.log(clonedObject); const person = {
name: "User 1",
walk() {
console.log("walk");
}
};
const person2 = {
name: "User 2",
walk() {
console.log("walk");
}
}; class Person {
constructor(name) {
this.name = name;
}
walk() {
console.log("walk");
}
} const person3 = new Person("User 3");
console.log(person3.name);
person3.walk(); class Teacher {
teach() {
console.log("teach");
}
} class Teacher extends Person {
teach() {
console.log("teach");
}
} 
const teacher = new Teacher("User 4"); console.log(teacher.name); teacher.teach(); teacher.walk();
class Teacher extends Person {
constructor(name, degree) {} Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
class Teacher extends Person {
constructor(name, degree) {
super(name);
this.degree = degree;
}
teach() {
console.log("teach");
}
} const teacher = new Teacher("User 4", "MSc"); export class Teacher extends Person { 
import { Person } from "./Person";
export class Teacher extends Person { import { Person } from "./Person";
import { Teacher } from "./Teacher"; export default class Teacher extends Person { import Teacher from "./Teacher";
import { Person } from "./Person";
export function testTeacher() {
console.log("Test Teacher");
}
export default class Teacher extends Person { import Teacher, { testTeacher } from "./Teacher"; import React, { Component } from 'react'; namespace EmberJS02.Models
{
public class User
{
public int Id { set; get; }
public string UserName { set; get; }
public string Email { set; get; }
}
} using System.Collections.Generic;
using System.Web.Http;
using EmberJS02.Models;
namespace EmberJS02.Controllers
{
public class UsersController : ApiController
{
// GET api/<controller>
public IEnumerable<User> Get()
{
return UsersDataSource.UsersList;
}
}
} using System;
using System.Web.Http;
using System.Web.Routing;
namespace EmberJS02
{
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
} PM> Install-Package EmberJS
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
setupController:function(controller) {
controller.set('content', ['red', 'yellow', 'blue']);
}
}); <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/handlebars.js" type="text/javascript"></script>
<script src="Scripts/ember.js" type="text/javascript"></script>
<script src="Scripts/app.js" type="text/javascript"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>Header</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Hello,
<strong>Welcome to Ember.js</strong>!
<ul>
{{#each item in content}}
<li>
{{item}}
</li>
{{/each}}
</ul>
</script>
</body>
</html> App.Router.map(function() {
this.resource('about');
}); <script type="text/x-handlebars" data-template-name="about"> <h2>Our about page</h2> </script>
<script type="text/x-handlebars" data-template-name="application">
<h1>Ember Demo App</h1>
<ul class="nav">
<li>{{#linkTo 'index'}}Home{{/linkTo}}</li>
<li>{{#linkTo 'about'}}About{{/linkTo}}</li>
</ul>
{{outlet}}
</script> 
App.Router.map(function() {
this.resource('about');
this.resource('users');
}); App.UsersLink = Ember.Object.extend({});
App.UsersLink.reopenClass({
findAll: function () {
var users = [];
$.getJSON('/api/users').then(function(response) {
response.forEach(function(item) {
users.pushObject(App.UsersLink.create(item));
});
});
return users;
}
}); App.UsersRoute = Ember.Route.extend({
model: function() {
return App.UsersLink.findAll();
}
});
App.UsersController = Ember.ObjectController.extend({
customHeader : 'Our Users List'
}); <script type="text/x-handlebars" data-template-name="users">
<h2>{{customHeader}}</h2>
<ul>
{{#each item in model}}
<li>
{{item.Id}}-{{item.UserName}} ({{item.Email}})
</li>
{{/each}}
</ul>
</script> 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ember Blog</title> <link href="Content/bootstrap.css" rel="stylesheet" /> <link href="Content/bootstrap-theme.css" rel="stylesheet" /> <link href="Content/styles.css" rel="stylesheet" /> <script src="Scripts/Libs/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="Scripts/Libs/bootstrap.min.js" type="text/javascript"></script> <script src="Scripts/Libs/handlebars-v2.0.0.js" type="text/javascript"></script> <script src="Scripts/Libs/ember.js" type="text/javascript"></script> <script src="Scripts/Libs/ember-handlebars-loader-0.0.1.js" type="text/javascript"></script> <script src="Scripts/Libs/ember-data.js" type="text/javascript"></script> <script src="Scripts/Libs/localstorage_adapter.js" type="text/javascript"></script> </head> <body> </body> </html>
url: "Scripts/Templates/" + name + ".hbs",
<system.webServer>
<staticContent>
<mimeMap fileExtension=".hbs" mimeType="text/x-handlebars-template" />
</staticContent>
</system.webServer> 
Blogger = Ember.Application.create();
<script src="Scripts/App/blogger.js" type="text/javascript"></script>
Blogger.Router.map(function () {
this.resource('posts', { path: '/' });
}); <script src="Scripts/App/blogger.js" type="text/javascript"></script> <script src="Scripts/App/router.js" type="text/javascript"></script>
<div class="container"> <h1>Emeber.js blog</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
<script> EmberHandlebarsLoader.loadTemplates([ 'posts' ]); </script>
Blogger.Router.map(function () {
this.resource('posts', { path: '/' });
this.resource('about');
}); <h1>About Ember Blog</h1> <p>Bla bla bla!</p>
<script> EmberHandlebarsLoader.loadTemplates([ 'posts', 'about' ]); </script>
<script type="text/x-handlebars" data-template-name="about"> </script>
<div class='container'>
<nav class='navbar navbar-default' role='navigation'>
<ul class='nav navbar-nav'>
<li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>
</nav>
{{outlet}}
</div> <script> EmberHandlebarsLoader.loadTemplates([ 'posts', 'about', 'application' ]); </script>
Blogger.Router.map(function () {
this.resource('posts', { path: '/' });
this.resource('about');
this.resource('contact');
}); <h1>Contact</h1> <ul> <li>Phone: ...</li> <li>Email: ...</li> </ul>
<script> EmberHandlebarsLoader.loadTemplates([ 'posts', 'about', 'application', 'contact' ]); </script>
<div class='container'>
<nav class='navbar navbar-default' role='navigation'>
<ul class='nav navbar-nav'>
<li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
<li>{{#link-to 'contact'}}Contact{{/link-to}}</li>
</ul>
</nav>
{{outlet}}
</div> Blogger.Router.map(function () {
this.resource('posts', { path: '/' });
this.resource('about');
this.resource('contact', function () {
this.resource('email');
this.resource('phone');
});
}); <h2>Email</h2> <p> <span></span> Email name@site.com. </p>
<h2>Phone</h2> <p> <span></span> Call 12345678. </p>
<script> EmberHandlebarsLoader.loadTemplates([ 'posts', 'about', 'application', 'contact', 'email', 'phone' ]); </script>
<h1>Contact</h1>
<div class="row">
<div class="col-md-6">
<p>
Want to get in touch?
<ul>
<li>{{#link-to 'phone'}}Phone{{/link-to}}</li>
<li>{{#link-to 'email'}}Email{{/link-to}}</li>
</ul>
</p>
</div>
<div class="col-md-6">
{{outlet}}
</div>
</div> 
public class Rectangle
{
public double Width;
public double Height;
public double Area()
{
return Width*Height;
}
public double Perimeter()
{
return 2*(Width + Height);
}
}Rectangle rectangle = new Rectangle();
Rectangle rectangle;
Rectangle rectangle1 = new Rectangle(); Rectangle rectangle2 = rectangle1;
Rectangle rectangle = new Rectangle(); rectangle.Width = 10.5; rectangle.Height = 10; double a = rectangle.Area();
// public field (Generally not recommended.) public double Width;
Rectangle rectangle = new Rectangle(); rectangle.Width = 10.5;
public class Rectangle
{
public double Width = 5;
// ...
}public class Rectangle
{
// ...
public double Area()
{
return Width*Height;
}
public double Perimeter()
{
return 2*(Width + Height);
}
}Rectangle rectangle = new Rectangle(); rectangle.Width = 10.5; rectangle.Height = 10; double p = rectangle.Perimeter();
public class SimpleMath
{
public int AddTwoNumbers(int number1, int number2)
{
return number1 + number2;
}
}SimpleMath obj = new SimpleMath(); Console.WriteLine(obj.AddTwoNumbers(1, 2)); int result = obj.AddTwoNumbers(1, 2); Console.WriteLine(result);
column.ColumnItemsTemplate(template =>
{
template.Symbol(data =>
{
if (Enum.IsDefined(typeof(AdobeZapfDingbats), data))
{
return (AdobeZapfDingbats)data;
}
return AdobeZapfDingbats.BallotX;
});
});
<h2>About Ember Blog</h2>
<p>Bla bla bla!</p>
<button class="btn btn-primary" {{action 'showRealName' }}>more info</button> Blogger.AboutController = Ember.Controller.extend({
actions: {
showRealName: function () {
alert("You clicked at showRealName of AboutController.");
}
}
}); <script src="Scripts/Controllers/about.js" type="text/javascript"></script>
<h1>Contact</h1>
<div class="row">
<div class="col-md-6">
<p>
Want to get in touch?
<ul>
<li>{{#link-to 'phone'}}Phone{{/link-to}}</li>
<li>{{#link-to 'email'}}Email{{/link-to}}</li>
</ul>
</p>
<p>
Or, click here to send a secret message:
</p>
<button class="btn btn-primary" {{action 'sendMessage' }}>Send message</button>
</div>
<div class="col-md-6">
{{outlet}}
</div>
</div> Blogger.ContactController = Ember.Controller.extend({
actions: {
sendMessage: function () {
var message = prompt('Type your message here:');
}
}
}); <script src="Scripts/Controllers/contact.js" type="text/javascript"></script>
<h2>About Ember Blog</h2>
<p>Bla bla bla!</p>
<button class="btn btn-primary" {{action 'showRealName' }}>more info</button>
{{#if isAuthorShowing}}
<button class="btn btn-warning" {{action 'hideAuthor' }}>Hide Image</button>
<p><img src="Content/images/ember-productivity-sm.png"></p>
{{else}}
<button class="btn btn-info" {{action 'showAuthor' }}>Show Image</button>
{{/if}} Blogger.AboutController = Ember.Controller.extend({
isAuthorShowing: false,
actions: {
showRealName: function () {
alert("You clicked at showRealName of AboutController.");
},
showAuthor: function () {
this.set('isAuthorShowing', true);
},
hideAuthor: function () {
this.set('isAuthorShowing', false);
}
}
}); 
<h1>Contact</h1>
<div class="row">
<div class="col-md-6">
<p>
Want to get in touch?
<ul>
<li>{{#link-to 'phone'}}Phone{{/link-to}}</li>
<li>{{#link-to 'email'}}Email{{/link-to}}</li>
</ul>
</p>
{{#if messageSent}}
<p>
Thank you. Your message has been sent.
Your confirmation number is {{confirmationNumber}}.
</p>
{{else}}
<p>
Or, click here to send a secret message:
</p>
<button class="btn btn-primary" {{action 'sendMessage' }}>Send message</button>
{{/if}}
</div>
<div class="col-md-6">
{{outlet}}
</div>
</div> 
Blogger.ContactController = Ember.Controller.extend({
messageSent: false,
actions: {
sendMessage: function () {
var message = prompt('Type your message here:');
if (message) {
this.set('confirmationNumber', Math.round(Math.random() * 100000));
this.set('messageSent', true);
}
}
}
}); 