Home > Developer > JavaScript
Now, we can often see complex JavaScript applications. As these applications become more and more complex, a long string of jQuery callback statements or different function calls are executed in different States through applications, these practices will become unacceptable, which leads JavaScript developers to start looking for a better way of development that is organized and more efficient.
One of the most common architecture modes to achieve organization and efficiency is the well-known Model View Controller MVC, this mode encourages developers to divide different parts of their applications into modules that are easier to manage. We do not need to use a function to directly call the database by creating a Model or entity) to manage databases; to simplify code display through Template or View); finally, to process the requests of our applications by using Controller, the MVC mode minimizes the Coupling Degree between each module and provides program development efficiency.
The well-known Javascript MVC frameworks include Ember. js, Backbone. js, Knockout. js, Spine. js, Batman. js, and Angular. js.
Figure 1 Javascript MVC framework
Through this, we can clearly understand the features, complexity, and learning curve differences between Javascript MVC frameworks. From left to right, we can see whether various Javascript MVC frameworks support Data Binding) template Templating, persistence, and other features, the complexity of the MVC Framework increases from bottom to top. To be honest, I have not compared the advantages and disadvantages of each framework, if you have made some comparisons or read related articles, you will not be enlightened.
In the next blog, we will introduce the use of Ember. js.
1.1.2 text
Ember. js is a JavaScript MVC framework that evolved from the rename of SproutCore 2.0 created by Apple's former employee. Ember has been released to 1.0.0-RC.3.
MVC Definition
Before introducing Ember, let's first review the MVC pattern. Here we will introduce the role of MVC pattern in programming through an example, for example:
1. the user performs an operation, such as hitting the keyboard or clicking the mouse button.
2. Controller) receives the input and triggers a message to the Model ).
3. Modify the CRUD operation of the model based on the message content ).
4. View) monitors changes in the model and displays corresponding updates on the user interface.
Through the above, we learned the role and connection between various components in MVC. After learning about the MVC mode, we can make it clearer whether Javascript MVC frameworks need to be introduced in our project.
When building an Ember Application, we will use six main components: Application), Model), View), Template), and Routing) and Controller ).
Next, we will introduce the use of Ember by implementing a specific program.
Set Ember
First, we need to reference a series of Javascript libraries, So we add js files in the program and save the following js files to this folder:
Ember. js: ember 1.0.0-rc.3
Ember-data.js: revision 12.
Handlebars. js: handlebars 1.2.rc.3
Jquery. js: jQuery 1.9.1
App. js: Our application code
Renewal page.
- <!DOCTYPE html>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="description" content="" />
- <meta name="description" content="" />
- <meta name="keywords" content="" />
- <meta name="author" content="" />
- <title></title>
- <link rel="stylesheet" href="" type="text/css" />
- <link rel="stylesheet" href="" type="text/css" />
- <body>
- <!-- Add Javascript libs Reference -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/libs/handlebars-1.0.0-rc.3.js"></script>
- <script src="js/libs/ember-1.0.0-rc.2.js"></script>
- <script src="js/libs/ember-data.js"></script>
- <script src="js/app.js"></script>
- </body>
Now we have implemented the first Ember program, but it does not have specific features. Next, we will add features to the program.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
