使得在一个单页面中完毕基于须求转移视图时尤其自在

介绍

应用过 JavaScript框架(如 AngularJS, Backbone
或然Ember)的人都很纯熟在UI(顾客分界面,前端)中mvc的干活机理。这个框架达成了MVC,使得在叁个单页面中落到实处基于需求转移视图时尤其安闲自得,而模型-视图-调控器(mvc)的基本概念便是:处理传入诉求的调节器、展现消息的视图、表示事情准绳和数目访谈的模子。

为此,当要求创造那样叁个索要在单个页面中落实切换出差别内容的采纳时,大家平时选拔使用上述框架之风流罗曼蒂克。然则,假如大家无非要求一个在二个url中贯彻视图切换的框架,而不须要额外捆绑的效率的话,就不用接受象Angular和Ember等复杂的框架。本文正是尝试选拔轻巧、有效方法来化解同样的标题。

概念

运用中的代码应用urls中的“#”完结MVC情势的导航。应用以贰个缺省的url带头,基于哈希值的代码加载应用视图并且将目的-模型应用于视图模板。

url格式像下边那样:

Name/index.html#/Route Name**

视图内容必得以{{Property-Name}}的措施绑定对象模型的值和天性。代码会搜索那个特别的模板格式并且取代对象模型中的属性值。

以ajax的方式异步加载的视图会被放置于页面包车型大巴占位符中。视图占位符能够是别的的成分(理想的景况是div),不过它必得有二个专程的品质,代码依照那么些特别的性质来恒定它,那样平等有利于代码的完毕。当url修改时,会另行那几个场合,其余三个视图被加载。听上去很简短吗!下边包车型客车流程图解释了在那些一定的兑现中的音信跳转。

图片 1

写代码

大家以着力的模块设计形式开首,而且最终用糖衣设计格局的章程将大家的libs暴光于大局范围内。

; (function (w, d, undefined) { //rest of the code })(window, document);

咱俩供给将视图成分存款和储蓄到二个变量中,那样就足以频仍行使。

var _viewElement = null; //element that will be used to render the view

我们供给四个缺省的路由来应对url中未有路由音信的意况,那样就缺省的视图就能够被加载并不是彰显空白页面。

var _defaultRoute = null;

近年来大家来创制我们的关键MVC对象的构造方法。大家会把路由消息存款和储蓄在“_routeMap”中

var jsMvc = function () {  
    //mapping object for the routes  
    this._routeMap = {};  
}

是时候创制路由对象了,大家会将路由、模板、调节器的音信囤积在这里个指标中。

var routeObj = function (c, r, t) {  
    this.controller = c;  
    this.route = r;  
    this.template = t;  
}

每八个url会有四个极其的路由对象routeObj.全部的那一个目的都会被增添到_routeMap对象中,那样我们后续就足以由此key-value的不二秘诀拿到它们。

为了增添路由音讯到MVC
libs中,大家要求揭露libs中的三个主意。所以让我们创制一个措施,那么些艺术可以被分其他决定器用来加多新路由。

jsMvc.prototype.AddRoute = function (controller, route, template) {  
    this._routeMap[route] = new routeObj(controller, route, template);  
}

方式AddRoute选拔3个参数:调节器,路由和模板( contoller, route and
templateState of Qatar。他们各自是:

controller:调整器的职能就是访问特定的路线。

route:路由的路线。那个正是url中#前边的黄金时代部分。

template:那是表面包车型大巴html文件,它看作那个路由的视图被加载。今后我们的libs需求一个切入点来剖判url,何况为相关联的html模板页面提供服务。为了实现这么些,大家须要三个措施。

Initialize方法做如下的事体:

1)获取视图相关的成分的领头化。代码供给叁个负有view属性的因素,那样能够被用来在HTML页面中检索:

2)设置缺省的路由

3)验证视图元素是还是不是创建

4)绑定窗口哈希改动事件,当url分化哈希值发生退换时视图能够被当下更新

5)最后,启动mvc

//Initialize the Mvc manager object to start functioning  
jsMvc.prototype.Initialize = function () {  
    var startMvcDelegate = startMvc.bind(this);  

    //get the html element that will be used to render the view    
    _viewElement = d.querySelector('[view]');          
    if (!_viewElement) return; //do nothing if view element is not found      

    //Set the default route  
    _defaultRoute = this._routeMap[Object.getOwnPropertyNames(this._routeMap)[0]];      

    //start the Mvc manager  
    w.onhashchange = startMvcDelegate;  
    startMvcDelegate();  
}

在地方的代码中,大家从startMvc 方法中创设了多少个代理方法startMvcDelegate 。当哈希值变化时,这么些代理都会被调用。上面正是当哈希值变化时大家做的操作的先后顺序:

1)获取哈希值

2)从哈希中获取路由值

3)从路由map对象_routeMap中获取路由对象routeObj

4)若是url中未有路由新闻,须求拿到缺省的路由对象

5)最终,调用跟这么些路由有关的调节器並且为那个视图成分的视图提供劳务

上边包车型客车具有手续都被下边的startMvc方法所完成

//function to start the mvc support  
function startMvc() {  
    var pageHash = w.location.hash.replace('#', ''),  
        routeName = null,  
        routeObj = null;                  

    routeName = pageHash.replace('/', ''); //get the name of the route from the hash          
    routeObj = this._routeMap[routeName]; //get the route object      

    //Set to default route object if no route found  
    if (!routeObj)  
        routeObj = _defaultRoute;  

    loadTemplate(routeObj, _viewElement, pageHash); //fetch and set the view of the route  
}

下一步,大家供给接受XML
HTTP央求异步加载合适的视图。为此,大家会传送路由对象的值和视图元素给艺术loadTemplate。

//Function to load external html data  
function loadTemplate(routeObject, view) {  
    var xmlhttp;  
    if (window.XMLHttpRequest) {  
        // code for IE7+, Firefox, Chrome, Opera, Safari  
        xmlhttp = new XMLHttpRequest();  
    }  
    else {  
        // code for IE6, IE5  
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');  
    }  
    xmlhttp.onreadystatechange = function () {  
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
            loadView(routeObject, view, xmlhttp.responseText);  
        }  
    }  
    xmlhttp.open('GET', routeObject.template, true);  
    xmlhttp.send();  
}

时下只剩加载视图和将目的模型与视图模板绑定了。大家会创制三个空的模子对象,然后传递与办法有关的模型来唤醒路由调节器。更新后的模子对象会与之前早已加载的XHTiggo调用中的HTML模板绑定。

loadView 方法被用来调用调整器方法,以致希图模型对象。

replaceToken方法被用于与HTML模板一齐绑定模型

//Function to load the view with the template  
function loadView(routeObject, viewElement, viewHtml) {  
    var model = {};   

    //get the resultant model from the controller of the current route    
    routeObject.controller(model);   

    //bind the model with the view      
    viewHtml = replaceToken(viewHtml, model);   

    //load the view into the view element  
    viewElement.innerHTML = viewHtml;   
}  

function replaceToken(viewHtml, model) {  
    var modelProps = Object.getOwnPropertyNames(model),  

    modelProps.forEach(function (element, index, array) {  
        viewHtml = viewHtml.replace('{{' + element + '}}', model[element]);  
    });  
    return viewHtml;  
}

终极,大家将插件暴光于js全局范围外

//attach the mvc object to the window  
w['jsMvc'] = new jsMvc();

现行反革命,是时候在大家单页应用中央银行使这一个MVC插件。在下三个代码段中,上边那个会促成:

1卡塔尔(قطر‎在web页面中引进这么些代码

2)用调整器增多路由音讯和视图模板音讯

3)制造调节器效用

4)最后,初始化lib。

除开上边大家供给的链接让我们导航到差别的门径外,二个容器成分的视图属性包括着视图模板html。

<!DOCTYPE html> 
<html> 
<head> 
    <title>JavaScript Mvc</title> 
    <script src="jsMvc.js"></script> 
    <!--[if lt IE 9]> <script src="jsMvc-ie8.js"></script> <![endif]--> 

    <style type="text/css"> 
        .NavLinkContainer {  
            padding: 5px;  
            background-color: lightyellow;  
        }  

        .NavLink {  
            background-color:black;  
            color: white;  
            font-weight:800;  
            text-decoration:none;  
            padding:5px;  
            border-radius:4px;  
        }  
            .NavLink:hover {  
                background-color:gray;  
            }  
    </style> 
</head> 
<body> 
    <h3>Navigation Links</h3> 
    <div class="NavLinkContainer"> 
        <a class="NavLink" href="index.html#/home">Home</a>   

        <a class="NavLink" href="index.html#/contact">Contact</a>   

        <a class="NavLink" href="index.html#/admin">Admin</a>   

    </div> 
    <br /> 
    <br /> 
    <h3>View</h3> 
    <div view></div> 
    <script> 
        jsMvc.AddRoute(HomeController, 'home', 'Views/home.html');  
        jsMvc.AddRoute(ContactController, 'contact', 'Views/contact.html');  
        jsMvc.AddRoute(AdminController, 'admin', 'Views/admin.html');  
        jsMvc.Initialize();  

        function HomeController(model) {  
            model.Message = 'Hello World';  
        }  

        function ContactController(model) {  
            model.FirstName = "John";  
            model.LastName = "Doe";  
            model.Phone = '555-123456';  
        }  

        function AdminController(model) {  
            model.UserName = "John";  
            model.Password = "MyPassword";  
        }  
    </script> 
</body> 
</html>

上面包车型客车代码有风华正茂段包涵二个为IE的尺度注释。

<!--[if lt IE 9]> <script src="jsMvc-ie8.js"></script> <![endif]-->

即便IE的版本低于9,那么function.bind,Object.getOwnPropertyNames和Array.forEach属性将不会被支持。因此大家要由此决断浏览器是还是不是低于IE9来报告代码是或不是扶助。

个中的剧情有home.html, contact.html 和 admin.html 请看下边:

home.html:

{{Message}}

图片 2

contact.html:

{{FirstName}} {{LastName}}  
<br /> 
{{Phone}}

图片 3

admin.html:

<div style="padding:2px;margin:2px;text-align:left;"> 
    <label for="txtUserName">User Name</label> 
    <input type="text" id="txtUserName" value="{{UserName}}" /> 
</div> 
<div style="padding:2px;margin:2px;text-align:left;"> 
    <label for="txtPassword">Password</label> 
    <input type="password" id="txtPassword" value="{{Password}}" /> 
</div>

图片 4

完全的代码能够从给定的下载链接中拿走。

什么运作代码

运营该代码比较轻松,供给在你怜爱的Web服务器上创制三个Web应用,上面以IIS为例来注脚。

先是在暗许站点中新添三个Web应用.

图片 5

接下来设置必填消息:外号,物理路径,应用池,客户认证信息,点击OK。

图片 6

终极一定到Web应用的原委目录,浏览你想张开的HTML页面就可以。

图片 7

跑在服务器里是少不了的,因为代码加载从存储于外界文件中的视图,浏览器不会容许大家的代码在非宿主服务器情状下推行。当然若是你使用Visual
Studio那么直接在目的html文件上右键,选用‘View In Browser’就能够。

浏览器扶助

大多数的现世浏览器都扶持本代码。针对IE8及以下的浏览器,有意气风发份单独的代码来支撑,但特不好,那份代码远多于100行。因而那代码不是百分之百跨浏览器包容的,所以当您决定在项目中动用时供给对代码进行微调。

兴趣点

This example
demonstrates那一个示例向大家来得了对于那些显眼地须要来讲,真没供给全体选拔js库和框架来落实。Web应用是财富密集型的,最佳只使用要求的代码而扬弃别的多余部分。

现阶段的代码能做的就那些了。未有诸如Web服务调用,动态事件绑定功效的。相当慢作者会提供支撑越多特点的升级版本。

Download JavaScript-Mvc.zip – 4.6
KB 
    JavaScript Mvc on
Github   
  Live Demo

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website