Super einfache Implementierung von Framework_Javascript-Fähigkeiten im JavaScript-MVC-Stil-js-Tutorial-php.cn

Einleitung

Personen, die JavaScript-Frameworks (wie AngularJS, Backbone oder Ember) verwendet haben, sind mit dem Arbeitsmechanismus von MVC in der Benutzeroberfläche (Benutzeroberfläche, Front-End) vertraut. Diese Frameworks implementieren MVC und erleichtern so das Ändern der Ansicht nach Bedarf auf einer einzelnen Seite. Die Kernkonzepte von Model-View-Controller (MVC) sind: ein Controller, der eingehende Anforderungen verarbeitet, eine Ansicht, die Informationen anzeigt, und ein Präsentationsmodell für Geschäftsregeln und Datenzugriff.

Wenn wir daher eine Anwendung erstellen müssen, die unterschiedliche Inhalte auf einer einzigen Seite austauschen muss, entscheiden wir uns normalerweise für die Verwendung eines der oben genannten Frameworks. Wenn wir jedoch nur ein Framework benötigen, das die Ansichtsumschaltung in einer URL ohne zusätzliche gebündelte Funktionen implementiert, besteht keine Notwendigkeit, komplexe Frameworks wie Angular und Ember zu verwenden. Dieser Artikel ist ein Versuch, mit einfachen und effektiven Methoden dasselbe Problem zu lösen.

Konzept

Der Code in der Anwendung verwendet das „#“ in URLs, um die Navigation im MVC-Modus zu implementieren. Die Anwendung startet mit einer Standard-URL, Hash-basierter Code lädt die Anwendungsansicht und wendet das Objektmodell auf die Ansichtsvorlage an.

Das URL-Format lautet wie folgt:

　http://Domain Name/index.html#/Route Name

Der Ansichtsinhalt muss die Werte und Eigenschaften des Objektmodells in Form von {{Property-Name}} binden. Der Code sucht nach diesem speziellen Vorlagenformat und ersetzt die Eigenschaftswerte im Objektmodell.

Die asynchron über Ajax geladene Ansicht wird im Platzhalter der Seite platziert. Der Ansichtsplatzhalter kann ein beliebiges Element sein (idealerweise ein Div), er muss jedoch über ein spezielles Attribut verfügen und der Code positioniert ihn basierend auf diesem speziellen Attribut, was auch bei der Implementierung des Codes hilft. Wenn sich die URL ändert, wird das Szenario wiederholt und eine andere Ansicht geladen. Klingt einfach? Das folgende Flussdiagramm erläutert die Nachrichtensprünge in dieser speziellen Implementierung.

Code schreiben

Wir begannen mit dem grundlegenden Modulentwurfsmuster und verwendeten schließlich das Fassadenentwurfsmuster, um unsere Bibliotheken dem globalen Geltungsbereich zugänglich zu machen.

;(function(w,d,undefined){//restofthecode})(window,document);

Nach dem Login kopieren

Wir müssen das Ansichtselement in einer Variablen speichern, damit es mehrmals verwendet werden kann.

var_viewElement=null;//elementthatwillbeusedtorendertheview

Nach dem Login kopieren

Wir benötigen eine Standardroute, um mit der Situation umzugehen, in der die URL keine Routing-Informationen enthält, damit die Standardansicht geladen werden kann, anstatt eine leere Seite anzuzeigen.

var_defaultRoute=null;

Nach dem Login kopieren

Jetzt erstellen wir den Konstruktor unseres MVC-Hauptobjekts. Wir speichern Routing-Informationen in „_routeMap“

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

Nach dem Login kopieren

Es ist Zeit, ein Routing-Objekt zu erstellen. In diesem Objekt speichern wir Routing-, Vorlagen- und Controller-Informationen.

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

Nach dem Login kopieren

Jede URL verfügt über ein dediziertes Routing-Objekt routeObj. Alle diese Objekte werden dem _routeMap-Objekt hinzugefügt, damit wir sie später über den Schlüsselwert abrufen können.

Um Routing-Informationen zu MVC-Bibliotheken hinzuzufügen, müssen wir eine Methode in den Bibliotheken verfügbar machen. Erstellen wir also eine Methode, mit der der jeweilige Controller neue Routen hinzufügen kann.

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

Nach dem Login kopieren

Die Methode AddRoute empfängt 3 Parameter: Controller, Route und Vorlage. Sie sind:

Controller: Die Funktion des Controllers besteht darin, auf bestimmte Routen zuzugreifen.

Route: Route der Route. Dies ist der Teil nach # in der URL.

Vorlage: Dies ist die externe HTML-Datei, die als Ansicht dieser Route geladen wird. Jetzt benötigen unsere Bibliotheken einen Einstiegspunkt, um die URL zu analysieren und die zugehörige HTML-Vorlagenseite bereitzustellen. Um dies zu erreichen, brauchen wir eine Methode.

Die Initialize-Methode führt Folgendes aus:

　1) Holen Sie sich die Initialisierung ansichtsbezogener Elemente. Der Code erfordert ein Element mit einem View-Attribut, mit dem in der HTML-Seite gesucht werden kann:

　2) Legen Sie die Standardroute fest

　3) Überprüfen Sie, ob die Ansichtselemente angemessen sind

4) Binden Sie das Fenster-Hash-Änderungsereignis. Wenn sich die verschiedenen Hash-Werte der URL ändern, kann die Ansicht rechtzeitig aktualisiert werden

5) Zum Schluss starten Sie 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(&apos;[view]&apos;);    
  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();
}

Nach dem Login kopieren

Im obigen Code haben wir aus der startMvc-Methode eine Proxy-Methode startMvcDelegate erstellt. Dieser Agent wird immer dann aufgerufen, wenn sich der Hashwert ändert. Das Folgende ist die Abfolge der Vorgänge, die wir ausführen, wenn sich der Hash-Wert ändert:

　1) Holen Sie sich den Hash-Wert

　2) Holen Sie sich den Routing-Wert aus dem Hash

　3) Erhalten Sie das Routenobjekt routeObj aus dem Routenkartenobjekt _routeMap

4) Wenn die URL keine Routing-Informationen enthält, müssen Sie das Standard-Routing-Objekt abrufen

5) Rufen Sie abschließend den Controller auf, der sich auf diese Route bezieht, und stellen Sie Dienste für die Ansicht dieses Ansichtselements bereit

Alle oben genannten Schritte werden durch die unten stehende startMvc-Methode implementiert

//function to start the mvc support
function startMvc() {
  var pageHash = w.location.hash.replace(&apos;#&apos;, &apos;&apos;),
    routeName = null,
    routeObj = null;        
     
  routeName = pageHash.replace(&apos;/&apos;, &apos;&apos;); //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
}

Nach dem Login kopieren

　　下一步，我们需要使用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(&apos;Microsoft.XMLHTTP&apos;);
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      loadView(routeObject, view, xmlhttp.responseText);
    }
  }
  xmlhttp.open(&apos;GET&apos;, routeObject.template, true);
  xmlhttp.send();
}

Nach dem Login kopieren

　　当前只剩加载视图和将对象模型与视图模板绑定了。我们会创建一个空的模型对象，然后传递与方法相关的模型来唤醒路由控制器。更新后的模型对象会与先前已经加载的XHR调用中的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(&apos;{{&apos; + element + &apos;}}&apos;, model[element]);
  });
  return viewHtml;
}

Nach dem Login kopieren

　　最后，我们将插件曝光于js全局范围外

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

Nach dem Login kopieren

　　现在，是时候在我们单页应用中使用这个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, &apos;home&apos;, &apos;Views/home.html&apos;);
    jsMvc.AddRoute(ContactController, &apos;contact&apos;, &apos;Views/contact.html&apos;);
    jsMvc.AddRoute(AdminController, &apos;admin&apos;, &apos;Views/admin.html&apos;);
    jsMvc.Initialize();
 
    function HomeController(model) {
      model.Message = &apos;Hello World&apos;;
    }
 
    function ContactController(model) {
      model.FirstName = "John";
      model.LastName = "Doe";
      model.Phone = &apos;555-123456&apos;;
    }
 
    function AdminController(model) {
      model.UserName = "John";
      model.Password = "MyPassword";
    }
  </script>
</body>
</html>

Nach dem Login kopieren

　　上面的代码有一段包含一个为IE的条件注释。

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

Nach dem Login kopieren

　　如果IE的版本低于9，那么function.bind，Object.getOwnPropertyNames和Array.forEach属性将不会被支持。因此我们要通过判断浏览器是否低于IE9来反馈代码是否支持。

　　其中的内容有home.html， contact.html 和 admin.html 请看下面：

　　home.html:

{{Message}}

Nach dem Login kopieren

　　contact.html:

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

Nach dem Login kopieren

　　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>

Nach dem Login kopieren