Pelaksanaan yang sangat mudah bagi kemahiran framework_javascript gaya JavaScript MVC-tutorial js-php.cn

Pengenalan

Orang yang telah menggunakan rangka kerja JavaScript (seperti AngularJS, Backbone atau Ember) sudah biasa dengan mekanisme kerja mvc dalam UI (antara muka pengguna, bahagian hadapan). Rangka kerja ini melaksanakan MVC, menjadikannya lebih mudah untuk menukar paparan seperti yang diperlukan dalam satu halaman Konsep teras Model-View-Controller (mvc) ialah: pengawal yang mengendalikan permintaan masuk, paparan yang memaparkan maklumat dan Model pembentangan. untuk peraturan perniagaan dan akses data.

Oleh itu, apabila kami perlu mencipta aplikasi yang perlu menukar kandungan berbeza dalam satu halaman, kami biasanya memilih untuk menggunakan salah satu rangka kerja di atas. Walau bagaimanapun, jika kita hanya memerlukan rangka kerja yang melaksanakan penukaran paparan dalam URL tanpa fungsi gabungan tambahan, tidak perlu menggunakan rangka kerja yang kompleks seperti Angular dan Ember. Artikel ini adalah percubaan untuk menggunakan kaedah yang mudah dan berkesan untuk menyelesaikan masalah yang sama.

Konsep

Kod dalam aplikasi menggunakan "#" dalam url untuk melaksanakan navigasi mod MVC. Aplikasi bermula dengan URL lalai, kod berasaskan cincang memuatkan paparan aplikasi dan menggunakan model objek pada templat paparan.

Format URL adalah seperti berikut:

　http://Domain Name/index.html#/Nama Laluan

Kandungan paparan mesti mengikat nilai dan sifat model objek dalam bentuk {{Property-Name}}. Kod mencari format templat khusus ini dan menggantikan nilai harta dalam model objek.

Pandangan yang dimuatkan secara tak segerak melalui ajax akan diletakkan dalam ruang letak halaman. Pemegang tempat paparan boleh menjadi sebarang elemen (idealnya div), tetapi ia mesti mempunyai atribut khas, dan kod meletakkannya berdasarkan atribut khas ini, yang juga membantu dengan pelaksanaan kod. Apabila url berubah, senario diulang dan paparan lain dimuatkan. Kedengaran mudah? Rajah aliran di bawah menerangkan lompatan mesej dalam pelaksanaan khusus ini.

Tulis kod

Kami bermula dengan corak reka bentuk modul asas, dan akhirnya menggunakan corak reka bentuk fasad untuk mendedahkan libs kami kepada skop global.

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

Salin selepas log masuk

Kita perlu menyimpan elemen paparan ke dalam pembolehubah supaya ia boleh digunakan beberapa kali.

var_viewElement=null;//elementthatwillbeusedtorendertheview

Salin selepas log masuk

Kami memerlukan laluan lalai untuk menangani situasi di mana tiada maklumat penghalaan dalam url, supaya paparan lalai boleh dimuatkan dan bukannya memaparkan halaman kosong.

var_defaultRoute=null;

Salin selepas log masuk

Sekarang mari buat pembina objek MVC utama kami. Kami akan menyimpan maklumat penghalaan dalam "_routeMap"

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

Salin selepas log masuk

Tiba masanya untuk mencipta objek penghalaan Kami akan menyimpan maklumat penghalaan, templat dan pengawal dalam objek ini.

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

Salin selepas log masuk

Setiap URL akan mempunyai objek penghalaan khusus routeObj Semua objek ini akan ditambahkan pada objek _routeMap, supaya kita boleh mendapatkannya kemudian melalui nilai kunci.

Untuk menambah maklumat penghalaan pada lib MVC, kita perlu mendedahkan kaedah dalam lib. Jadi mari kita cipta kaedah yang boleh digunakan oleh pengawal masing-masing untuk menambah laluan baharu.

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

Salin selepas log masuk

Kaedah AddRoute menerima 3 parameter: pengawal, laluan dan templat. Mereka ialah:

Pengawal: Fungsi pengawal adalah untuk mengakses laluan tertentu.

laluan: laluan penghalaan. Ini ialah bahagian selepas # dalam url.

Templat: Ini ialah fail html luaran yang dimuatkan sebagai paparan laluan ini. Kini lib kami memerlukan titik masuk untuk menghuraikan url dan menyampaikan halaman templat html yang berkaitan. Untuk mencapai ini, kita memerlukan kaedah.

Kaedah Initialize melakukan perkara berikut:

　1) Dapatkan permulaan elemen berkaitan paparan. Kod tersebut memerlukan elemen dengan atribut paparan, yang boleh digunakan untuk mencari dalam halaman HTML:

　2) Tetapkan laluan lalai

　3) Sahkan sama ada elemen paparan adalah munasabah

4) Ikat peristiwa perubahan cincang tetingkap Apabila nilai cincang URL yang berbeza berubah, paparan boleh dikemas kini dalam masa

5) Akhir sekali, mulakan 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();
}

Salin selepas log masuk

Dalam kod di atas, kami mencipta kaedah proksi startMvcDelegate daripada kaedah startMvc. Ejen ini dipanggil apabila nilai cincang berubah. Berikut ialah urutan operasi yang kami lakukan apabila nilai cincang berubah:

　1) Dapatkan nilai cincang

　2) Dapatkan nilai penghalaan daripada cincang

　3) Dapatkan objek laluan routeObj daripada objek peta laluan _routeMap

4) Jika tiada maklumat penghalaan dalam url, anda perlu mendapatkan objek penghalaan lalai

5) Akhir sekali, hubungi pengawal yang berkaitan dengan laluan ini dan sediakan perkhidmatan untuk paparan elemen paparan ini

Semua langkah di atas dilaksanakan dengan kaedah startMvc di bawah

//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
}

Salin selepas log masuk

　　下一步，我们需要使用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();
}

Salin selepas log masuk

　　当前只剩加载视图和将对象模型与视图模板绑定了。我们会创建一个空的模型对象，然后传递与方法相关的模型来唤醒路由控制器。更新后的模型对象会与先前已经加载的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;
}

Salin selepas log masuk

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

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

Salin selepas log masuk

　　现在，是时候在我们单页应用中使用这个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>

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

　　home.html:

{{Message}}

Salin selepas log masuk

　　contact.html:

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

Salin selepas log masuk

　　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>

Salin selepas log masuk