MDN wants to learn about developers like you:

翻譯不完整。請協助 翻譯此英文文件

這一系列的文章將介紹 open web app 架構的核心概念:包含 MVC、建議的框架、工具...等等。

要建立 open web 程式有很多不同的方法、包含了工具的抉擇、以及許多要了解的理論。這個系列會介紹面對當代網路開發時,可能派得上用場的工具。接著,會帶著你理解「模型─視圖─控制器」(Model View Controller,MVC)這 Web 上最常見的軟體架構背後的理論。有了理論的加持後,我們會開始一連串的教學,帶著你從零開始,一步步的建立屬於自己的 MVC app。

注意:本系列假設你已經熟悉構成當代 web app 的 HTML、JavaScript、CSS 技術基礎。如果你對這些東西不太熟,我們會建議你先去看這方面的教學打基礎。MDN 學習專區是個很好的開始。

注意:本系列 假設你已經熟悉 MVC 架構或是 web 框架,and holds your hand through the basics of such things. If you are experienced in MVC/app development and just want a quickstart guide that shows you how to build up a modern web app rapidly with little handholding, you should check out our Apps Quickstart instead.


If you're just starting to build complex modern web applications and have tried to research what tools to use, it's easy to become frustrated by the sheer number of choices available. Throughout this series of articles we'll recommend tools for you and show you how to use them, simply as a means to demonstrate the theory we are explaining, and to show you examples that work.

The tools we'll use form part of the Mozilla Recommended Toolchain, a set of tools that our web apps team have tried and tested to make sure they work well with a minimum of fuss. The emphasis here is on "recommended": we aren't trying to promote a specific set of tools for any other reason than pragmatism. We aren't trying to say that you shouldn't try other tools, or that our choices are the best for everyone. If you already have web app development experience, you probably already have your favorites.

The main tool we will use in this set of docs is Ember.js/Ember CLI. Ember.js is a well-known framework for rapid development of MVC applications, and Ember CLI is a command line interface for generating Ember code. You'll learn how to install it in Creating an Ember app [zh-TW]


MVC architecture
This article explains the different features of an MVC architecture in a general sense, before running through how Ember implements this at a base level.
Creating an Ember app
Next, we take you through the basic steps required to create a new Ember app.
Views and templates
At this point, you'll learn about Views (the V in MVC), and how they are implemented by Ember using templates (which define what content you'll see at each view), and routes (which define the URL where you'll find each view).
Controllers (the C in MVC) provide the logic that defines what should happen when the application state changes, e.g., in response to user activity, and update the view and/or model in response. This article introduces controllers and explains how Ember implements them.
Models and application data
This article looks at models in detail (the M in MVC), including explaining how to use them in Ember. Models represent the form and structure of our application data, and manage requests from the view and the controller. We'll also look at handling data in Ember, and how you can incorporate functionality from third-party JS libraries.
Styling your Ember app
Now that the functionality of your app is finished, you'll no doubt want to style it to make it look more appealing to use. As with most things in Ember (and other frameworks), there are strict rules for doing this. In this article we'll explore how to use CSS, images, and fonts in your Ember app.
Publishing your app
Once you're satisfied with your app and are ready to release it to the public, you'll need to host it someplace where others can access it. This article covers the steps needed to build an Ember app for production, and publish it on Github as an easy test mechanism.


有點感覺後,我們就能開始探索 MVC 架構背後的理論,還有它怎麼實做到 Ember.js 裡面。


 此頁面的貢獻者: iigmir, stephaniehobson
 最近更新: iigmir,