Ale.js

Life

Start

In Ale, a component has six life states, which correspond to their life cycle functions of the same name:

  • using (when the component is used)
  • mounting (when the component is inserted into the real DOM)
  • unmounting (when the component moves out of the real DOM)
  • rendering (when the component is rendered)
  • updating (when the component is updated)
  • destroy (when the component is destroyed)
  • staticDataUpdating (when static data is updated)

You can add a property called life when defining a component and add a function to the life property:

1
2
3
4
5
6
7
8
9
10
Ale("test", {
template: "test",
life: {
/* Add the life attribute here, you need to be object */
        /* Add the using function to fire when the component is used */
using: function(){
alert("using!");
}
}
})

Advanced

In addition to the using function, other functions will automatically bind the Ale component object. If you need to change the data, use the form this.data to change:

1
2
3
4
5
6
7
8
9
10
Ale("test", {
template: "test",
life: {
/* Add the life attribute here, you need to be object */
        /* Add the rendering function to fire when the component is rendered */
rendering: function(){
console.log(this.data); /* print data */
}
}
})

Online instance

Let’s make a timer, output the current time, update every second: view on jsfiddle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ale("timer", {
template: function(){
return "Now Time: " + this.data.time
},
data: {
time: new Date().toLocaleTimeString()
},
life: {
mounting: function(){
/* Need to use the arrow function here, because this will not be bound */
this.timer = setInterval(() => {
this.data.time = new Date().toLocaleTimeString();
}, 1000);
},
unmounting: function(){
clearInterval(this.timer);
}
}
})

Ale.render("timer", {
el: "#app"
})

The upper timer does not apply Ale’s built-in diff algorithm because you need to wrap elements that don’t need to be updated with DOM tags:

1
2
3
template: function(){
return "<span>Now Time: </span>" + this.data.time
}

Now you can open the console and compare the refresh of the two instance DOMs. You will find that the Now Time: of this instance is not updated.


Found some errors? Edit on Github!