如何使用javascript的PureMVC框架 - 初始化

相信写Flex的人都知道PureMVC框架，本人之前就有段时间一直在用它，总体感觉还算不错。

PureMVC实现了经典MVC元设计模式，这三部分由三个单例模式类管理，

分别是Model、View和Controller。三者合称为核心层或核心角色。　　

PureMVC中还有另外一个单例模式类——Facade，Facade提供了与核心层通信的唯一接口，以简化开发复杂度。

PureMVC使用Notification进行通信，实现了模块之间的低耦合度。

废话少说，我们还是来看看实例吧！

首先我们得先准备好库文件

下载地址 http://download.youkuaiyun.com/detail/laogong5i0/4401753 这里是我收集的PureMVC库文件，只要在你的Html里面导入这四个文件就可以了。

或者你可以看本实例的最终源文件

下载地址： http://download.youkuaiyun.com/detail/laogong5i0/4400288

相关教程

如何使用javascript的PureMVC框架 - Command/controller层

如何使用javascript的PureMVC框架 - Mediator/View层

准备工作做好后我们就可以开始了。

新建jsPureMVCDemo.html文件，并在html文件里导入刚刚下载的库文件。

	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/jquery-ui-1.8.16.custom.min.js"></script> 
	<script type="text/javascript" src="lib/objs-2.1.1-min.js"></script>
	<script type="text/javascript" src="lib/puremvc-objs-2.0-min.js"></script>

然后在jsPureMVCDemo.html所在的文件夹新建文件夹 src/demo/

在demo文件夹下新建一个叫ApplicationFacade.js的js文件

并输入一下内容，保存。

/**demo.ApplicationFacade是指文件夹src/demo/下的ApplicationFacade.js文件
 * Facade 是指继承自PureMVC的Facade实
 */
var ApplicationFacade = Objs("demo.ApplicationFacade",
    Facade,
    {
        
        /**
         * 程序开始入口
         * @param {HTMLElement} app
         *         Html 根节点标签
         */
        startup: function( app )
        {
        },
        
        /**
         * 重写initializeController(),并注册commands，在这里不能注册Mediator，
         * 因为View还没有被初始化
         * @override
         */
        initializeController: function()
        {
            alert('initialize');
        }
    }
);

/**
 * 实现程序的单例类
 * @return {ApplicationFacade}
 *         Facade实例类的使用贯穿整个程序
 */
ApplicationFacade.getInstance = function()
{
    if( !Facade.instance ) 
        Facade.instance = new ApplicationFacade();
    
    return Facade.instance;
}; 

接着我们在html文件里添加一下代码

<!-- 先导入ApplicationFacade.js文件 -->
<script type="text/javascript" src="src/demo/ApplicationFacade.js"></script> 









<script type="text/javascript">
	$(document).ready
	(
		function()
		{
			var applicationFacade/*ApplicationFacade*/ = ApplicationFacade.getInstance();
			applicationFacade.startup( $("body") );
		}
	);
</script>

最后完成后文件夹得目录树为

 

好了！！运行试试看是不是有东西输出呢？