编辑“︁JavaScriptMVC”︁

{{Infobox Software
| name = JavaScriptMVC
| logo = [[Image:Javascriptmvc.png|192px]]
| developer = Justin B. Meyer, Brian Moschel
| operating_system = [[跨平台]]
| programming_language = [[JavaScript]]
| license = [[MIT License]]<ref name="github.com/jupiterjs/javascriptmvc">{{cite web|url=https://github.com/jupiterjs/javascriptmvc/blob/master/MIT-LICENSE.txt/|title=Javascipt MVC license|publisher=jupiterjs|accessdate=16 April 2012}}{{dead link|date=2017年11月 |bot=InternetArchiveBot |fix-attempted=yes }}</ref>
| website = {{URL|www.javascriptmvc.com}}
}}

'''JavaScriptMVC''' 是一套[[開放原始碼]]的[[多樣化網際網路應用程式]][[軟體框架|框架]]，以 [[jQuery]] 與 [[OpenAJAX]] 為基礎。JavaScriptMVC 利用 [[MVC]] 架構與工具擴展這些[[函式庫]]，以便開發與測試。由於 JavaScriptMVC 不需要任何伺服器端的配合，因此它可以和任何的網站服務介面與程式語言整合，如 [[ASP.NET]]、[[Java]]、[[Perl]]、[[PHP]]、[[Python]] 或 [[Ruby]]。

== 歷史 ==
JavaScriptMVC 的第一個版本是在2008年5月釋出。穩定版的 JavaScriptMVC 2.0 在2009年6月釋出，並以 jQuery 為基礎。主要開發目標為維持程式碼的簡短和專注在它獨特的功能上。3.0版本在2010年12月釋出。而從  JavaScriptMVC 中所獨立出來的 MVC 架構「[[CanJS]]」則在2012年4月釋出。

== 控制器 ==
控制器（Controller）是由許多函式所組成，這些函式會在適當的事件發生時被呼叫。函式名稱提供這些函式被呼叫時的描述。只要正確地命名函式，控制器就能夠辨認這些函式並在正確的時機呼叫它們。舉例來說：

<syntaxhighlight lang="javascript">
 $.Controller('TodosController',{
   ".todo mouseover": function(el, ev){
     el.css("backgroundColor","red")
   },
   ".todo mouseout": function(el, ev){
     el.css("backgroundColor","")
   },
   "#create_todo click" : function(){
     this.find("ol").append("New Todo");
   }
 });
</syntaxhighlight>

在控制器中也可以處理 OpenAjax 事件，例如：

<syntaxhighlight lang="javascript">
 $.Controller('TodosController',{
   "main.test subscribe": function(ev, publisherData){
     // TODO: do something
   },
   "other.event subscribe": function(ev, publisherData){
     // TODO: do something
   }
 });
</syntaxhighlight>

== 視圖 ==
JavaScriptMVC 使用 EJS 樣板來處理控制器裡的 HTML 資料並且將它們插入 [[文件物件模型|DOM]] 中。這些語法是借鏡自 [[ERuby]]，且與 [[PHP]] 或其他伺服器端語言的樣板引擎相似。

以「test.ejs」（data = [ "Hello", "World" ]）為例：

<syntaxhighlight lang="html4strict">
<ul>
<% for( var i=0, len = data.length; i < len; i++ ) { %>
 <li><%= data[i] %></li>
<% } %>
<ul>
</syntaxhighlight>

這會輸出如下的結果：

<syntaxhighlight lang="html4strict">
<ul>
 <li>Hello</li>
 <li>World</li>
</ul>
</syntaxhighlight>

== 模型 ==
模型（Model）類別提供了組織應用程式資料層級的基本功能。

<syntaxhighlight lang="javascript">
 $.Model('Todo',{
  findAll: '/todos',
  findOne: '/todos/{id}',
  create: '/todos',
  update: '/todos/{id}'
  destroy : '/todos/{id}'
 },{});
</syntaxhighlight>

== 測試 ==
JavaScriptMVC 還提供了一套完整的測試外掛，支援模型的單元測試，以及需要處理事件驅動結構的功能性測試。測試工具可以在 [[Rhino]] 引擎的命令列模式執行。

== 參考資料 ==
{{Reflist}}

== 外部連結 ==
*[https://web.archive.org/web/20120901073622/http://javascriptmvc.com/ 官方網站] {{en}}
*[https://github.com/jupiterjs/javascriptmvc GitHub 專案]{{Wayback|url=https://github.com/jupiterjs/javascriptmvc |date=20191017191113 }} {{en}}
*[http://code.google.com/p/javascriptmvc/ Google Code 上的舊專案頁面]{{Wayback|url=http://code.google.com/p/javascriptmvc/ |date=20100215023311 }} {{en}}

[[Category:網站開發]]
[[Category:AJAX]]
[[Category:JavaScript]]
[[Category:MVC]]