Definition, initialization, inheritance of the Ember class

Ember JS provides its own class system, JavaScript standard classes do not automatically update property values, Ember JS classes automatically trigger observers, automatically update property values, automatically refresh property values on templates. I f a class is provided by Ember JS, you can see that the prefix namespace Ember.Object Ember class definition extend() creation of class create() which can pass in parameters in the hash lists.

Ember JS rewrites the array class Array of the standard JavaScript and named Ember.Enumerable distinguish it from the standard JavaScript class (API introduction)

Ember JS also extends the nature String property to provide a unique set of treatments, described in the API.

The naming rules for classes are not introduced here, so find a Java naming rules textbook online.

Get ready before you start, first create an HTML file and introduce the files that Ember JS needs (a simpler way to EmberJS project methods is described later, although you can also learn about EmberJS projects Ember CLI if you have EmberJS

  
    
    Ember.js • Guides 
  
   
    
    
//  在这里编写Ember代码
  
   
   
  
  
  

The code above is a simple HTML requires the Ember to use the CDN

Class definition

Here's how to define a Person class:

Person = Ember.Object.extend({
  say(thing) {
    alert(name);
  }
});

The above code defines a Person class, and also defines a method say class, which is passed in with a parameter thing The method body simply prints the incoming parameters.

Class inheritance

The method of the parent class is overridten in the child class, and _super() method is called in the method to trigger the behavior of the parent method by calling the corresponding method in the parent class.

Person = Ember.Object.extend({
    
  say(thing) {
    var name = this.get('name');
    alert(name + " says: " + thing);
  }
});
Soldier = Person.extend({
    
  say(thing) {
    // this will call the method in the parent class (Person#say), appending
    // the string ", sir!" to the variable `thing` passed in
    this._super(thing + ", sir!");
  }
});
var yehuda = Soldier.create({
  name: "Yehuda Katz"
});
yehuda.say("Yes"); // alerts "Yehuda Katz says: Yes, sir!"

Run the code, refresh the browser, and you'll see the following results:

The results are correct, but we don't yet know how the class was initialized, and what is the order in which it was initialized? I n fact, each class has a default initialization method, 555... Don't worry, look down.

Class instantiation

To get an instance of a class, you only need to call the create() method.

Person = Ember.Object.extend({
    show() {
        console.log("My name is " + this.get('name'));
    }
});
var person = Person.create({
    name: 'ubuntuvim'
});
person.show();  // My name is ubuntuvim
    
var person2 = Person.create({
    pwd: 'ubuntuvim'
});
//  由于创建person2的时候没有设置name的值，默认是undefined
person2.show();  // My name is undefined

Note: When creating an instance using the create() method for performance reasons, no new definitions, rewriting create() nor is it recommended for new definitions, rewriting normal methods, Ember recommends simply passing simple parameters when using create() such as {name: 'ubuntuvim'} If you need a new definition, rewrite method, create a new sub-class to implement.

Define create() within the create() method and run it directly to report the error information in the figure below.

Person = Ember.Object.create({
    show() {
        console.log("My name is " + this.get('name'));
    },
    fullName: Ember.computed(function() {
        console.log("computed properties.");
    })
});

Class initialization

As mentioned earlier, how exactly the class is initialized when the class is inherited, this section describes the initialization of the class, Ember init() is called automatically when the class is instantiated.

Parent = Ember.Object.extend({
    init() {
        console.log("parent init...");
    },
    show() {
        console.log("My name is " + this.get('name'));
    },
    others() {
        console.log("the method in parent class..");
    }
});
//parent = Parent.create({
//    name: 'parent'
//});  
    
Child = Parent.extend({
    init() {
        console.log("child init...");
    },
    show() {
        this._super();
    }
});
child = Child.create({
    name: 'child'
});    
child.show();
child.others();

Note: init() is called automatically only when the create() method is called, and in the example above, if child.others() method parent class does not call the init() the init() method is executed only when Parent.create() init() The above code, if Parent.create() results in the following:

You can see that init() is not called, then modify the code, comment out child.others() and then remove the comments for Parent.create() The following results are obtained

You can see that the init() method is called! T his shows init() method is called only when the create() method is called. In a project where it is possible that you need to inherit components provided by Ember such as Ember.Component class, you should be aware that when you inherit the components of Ember you must this._super() the class you Component or get unpredictable results.

The access to the class property

Ember accessing the properties of the class get、set method. You can also obj.prop but if you don't use the accessor, you can cause a lot of problems: calculated properties can't be recalculated, object properties can't be detected, templates can't be updated automatically.

Person = Ember.Object.extend({
    name: 'ubuntuvim'
});
// Ember 推荐的访问方式
var person = Person.create();
console.log("My name is " + person.get('name'));
person.set('name', "Tobias Funke");
console.log("My name is " + person.get('name'));   
console.log("---------------------------");
//  不推荐的方式
var person2 = Person.create();    
console.log("My name is " + person2.name);
person2.name = "Tobias Funke";
console.log("My name is " + person2.name);

Ember encapsulates get、set details for us, and developers can use them directly.
Finally, THENKS to the 靑 of the gaze.
The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit of a github project for you, give me star Yours is definitely the biggest motivation for me!!