1. คำนำ
ในหัวข้อก่อนหน้านี้ฉันได้แนะนำจุดความรู้ที่เกี่ยวข้องกับ Knockoutjs อย่างรวดเร็วและเขียนตัวอย่างง่ายๆ ฉันหวังว่าจากตัวอย่างเหล่านี้คุณสามารถเริ่มต้นได้อย่างรวดเร็วด้วย KnockoutJs เพื่อให้ทุกคนเห็นแอปพลิเคชันของ KnockoutJs ในโครงการจริงหัวข้อนี้จะแนะนำวิธีใช้ WebAPI+Bootstrap+KnockoutJS+ASP.NET MVC เพื่อสร้างโปรแกรมเว็บหน้าเดียว รุ่นนี้ยังใช้ในโครงการจริงของ บริษัท ส่วนใหญ่ในขณะนี้
2. สปา (หน้าเดียว) ผลประโยชน์
ก่อนที่จะแนะนำการใช้งานเฉพาะฉันรู้สึกว่าจำเป็นต้องแนะนำสปาในรายละเอียด SPA ตัวย่อของเว็บแอปพลิเคชันหน้าเดียวเป็นเว็บแอปพลิเคชันที่โหลดหน้า HTML เดียวและอัปเดตหน้าแบบไดนามิกเมื่อผู้ใช้โต้ตอบกับแอปพลิเคชัน เบราว์เซอร์จะโหลด HTML, CSS และ JavaScript ที่ต้องการในตอนต้น การดำเนินการทั้งหมดเสร็จสมบูรณ์ในหน้านี้และควบคุมโดย JavaScript
ประโยชน์ของโปรแกรมหน้าเดียวคือ:
ประสบการณ์การใช้งานที่ดีขึ้นช่วยให้ผู้ใช้ได้สัมผัสกับความเร็วและความราบรื่นของแอพดั้งเดิมในเว็บแอป
แยกข้อกังวลด้านหน้าและด้านหลังส่วนหน้ามีหน้าที่รับผิดชอบในการแสดงผลอินเตอร์เฟสและด้านหลังมีหน้าที่รับผิดชอบในการจัดเก็บข้อมูลและการคำนวณแต่ละปฏิบัติหน้าที่ของตัวเองและจะไม่ผสมตรรกะของด้านหน้าและด้านหลังเข้าด้วยกัน
เพื่อลดแรงกดดันบนเซิร์ฟเวอร์เซิร์ฟเวอร์จะต้องสร้างข้อมูลโดยไม่คำนึงถึงตรรกะการแสดงผลและตรรกะของหน้าและเพิ่มปริมาณงานเซิร์ฟเวอร์ ส่วนหน้าที่เขียนในไวยากรณ์มีดโกนใน MVC ต้องการเซิร์ฟเวอร์เพื่อให้การสังเคราะห์หน้าเสร็จสมบูรณ์แล้วส่งออก
ชุดของโปรแกรมแบ็คเอนด์ชุดเดียวกันสามารถใช้โดยตรงกับไคลเอนต์หลายตัวเช่นเว็บอินเตอร์เฟสโทรศัพท์มือถือแท็บเล็ต ฯลฯ โดยไม่ต้องแก้ไข
แน่นอนนอกเหนือจากข้อดีที่ระบุไว้ข้างต้นโปรแกรมหน้าเดียวยังมีข้อบกพร่องของพวกเขา:
ไม่เอื้อต่อ SEO หากนี่คือระบบการจัดการมันจะไม่ส่งผลกระทบต่อมัน
เวลาในการโหลดเริ่มต้นค่อนข้างเพิ่มขึ้น เนื่องจากทรัพยากร JS และ CSS ทั้งหมดจะถูกโหลดในครั้งแรกทำให้หน้าต่อมาราบรื่น สำหรับสิ่งนี้คุณสามารถใช้ Bundle ใน ASP.NET MVC เพื่อผูกไฟล์ สำหรับการใช้งานอย่างละเอียดของ Bundle โปรดดูบทความ: http://www.vevb.com/article/84329.htm, http://www.vevb.com/article/84329.htm และ http://www.vevb.com/article/82174.HTM
การนำทางไม่สามารถใช้ได้ หากคุณต้องนำทางคุณต้องก้าวไปข้างหน้าและล่าถอยด้วยตัวเอง สำหรับสิ่งนี้คุณสามารถตระหนักถึงฟังก์ชั่นไปข้างหน้าและด้านหลังด้วยตัวเองเพื่อชดเชยมัน อันที่จริงนี่คือสิ่งที่หน้าเว็บมือถือทำตอนนี้และตอนนี้พวกเขายังคงต้องเป็นการนำทางด้านบน สิ่งนี้สามารถทำได้สำหรับระบบการจัดการแบ็คเอนด์ขององค์กร
ต้นทุนการพัฒนาที่สูงสำหรับนักพัฒนา นี่ไม่ใช่ปัญหา โปรแกรมเมอร์จำเป็นต้องเรียนรู้ที่จะเรียกเก็บเงิน โชคดีที่เฟรมเวิร์กส่วนหน้าใช้งานง่ายมาก
3. ใช้ asp.net MVC+webapi+bootstrap+knockoutjs เพื่อใช้งาน SPA
มีการแนะนำข้อดีและข้อเสียของสปาในรายละเอียดก่อนหน้านี้ ถัดไปให้เราใช้ ASP.NET MVC+WebAPI+BS+KO เพื่อใช้โปรแกรมหน้าเดียวเพื่อสัมผัสกับความราบรื่นของ SPA และเปรียบเทียบผลกระทบของหน้าเว็บที่ทำโดย ASP.NET MVC+Razor ดั้งเดิม
1. ใช้ VS2013 เพื่อสร้างโครงการแอปพลิเคชันเว็บ ASP.NET ตรวจสอบไลบรารี MVC และ WebAPI ดูรูปด้านล่างสำหรับรายละเอียด:
2. สร้างคลังสินค้าและรุ่นที่สอดคล้องกัน นี่คือระบบการจัดการงานที่เรียบง่าย โมเดลและรหัสคลังสินค้าเฉพาะมีดังนี้:
การใช้งานระดับเอนทิตีงาน:
taskState enum สาธารณะ {active = 1, เสร็จสิ้น = 2} /// <summary> /// task entity //// </summary> งานคลาสสาธารณะ {ID ID สาธารณะ {get; ชุด; } ชื่อสตริงสาธารณะ {get; ชุด; } คำอธิบายสตริงสาธารณะ {get; ชุด; } Public DateTime CreationTime {get; ชุด; } Public DateTime FinishTime {รับ; ชุด; } เจ้าของสตริงสาธารณะ {รับ; ชุด; } สถานะ taskState สาธารณะ {รับ; ชุด; } งานสาธารณะ () {creationTime = dateTime.parse (datetime.now.tolongDatestring ()); state = taskState.active; -การใช้งานคลังสินค้างาน: การใช้งาน:
/// <summary> /// ที่นี่คลังสินค้าใช้ข้อมูลตัวอย่างเป็นการสาธิต โครงการจริงจะต้องมีการโหลดแบบไดนามิกจากฐานข้อมูล /// </summary> taskRepository คลาสสาธารณะ {#Egion Static Filed Lazy Static Private Static <TaskRepository> _TaskRepository = new Lazy <TaskRepository> () () งานสาธารณะคงที่สาธารณะปัจจุบัน {รับ {return _taskrepository.value; }} #ENDEGION #REGION ฟิลด์ส่วนตัวรายการแบบอ่านอย่างเดียว <TASK> _TASKS = รายการใหม่ <SOCH> () {งานใหม่ {id = 1, name = "สร้างโปรแกรมสปา", คำอธิบาย = "SPA (เว็บแอปพลิเคชันหน้าเดียว) ข้อได้เปรียบของ SPA คือแบนด์วิดธ์จำนวนเล็กน้อยและเป็นประสบการณ์ที่ราบรื่น" datetime.parse (datetime.now.adddays (1) .toString (cultureInfo.invariantCulture))}, งานใหม่ {id = 2, name = "การเรียนรู้ที่น่าพิศวง", คำอธิบาย = "Knockoutjs เป็นห้องสมุด MVVM datetime.parse (datetime.now.adddays (2) .tostring (cultureinfo.invariantculture))}, งานใหม่ {id = 3, name = "เรียนรู้ Angularjs", คำอธิบาย = "Angularjs เป็นเฟรมเวิร์ก MVVM datetime.parse (datetime.now.adddays (3) .toString (cultureInfo.invariantCulture)), งานใหม่ {id = 4, name = "เรียนรู้เว็บไซต์ asp.net mvc", description = "Glimpse เป็นเครื่องมือทดสอบประสิทธิภาพภายใต้. รหัสของโครงการดั้งเดิมและสามารถส่งออกเวลาดำเนินการของแต่ละลิงก์ของการดำเนินการรหัส ", เจ้าของ =" tonny li ", finishtime = datetime.parse (datetime.now.adddays (4) .tostring #ENDREGION #REGION วิธีการสาธารณะ iEnUmerable <SOCH> GetAll () {return _TASKS; } งานสาธารณะรับ (int id) {return _tasks.find (p => p.id == id); } งานสาธารณะเพิ่ม (รายการงาน) {if (item == null) {โยน argentNullexception ใหม่ ("item"); } item.id = _tasks.count + 1; _tasks.add (รายการ); รายการส่งคืน; } โมฆะสาธารณะลบ (int id) {_tasks.removeAll (p => p.id == id); } การอัปเดตบูลสาธารณะ (รายการงาน) {if (item == null) {โยน argentNullexception ใหม่ ("item"); } var taskItem = get (item.id); if (taskItem == null) {return false; } _tasks.remove (TaskItem); _tasks.add (รายการ); กลับมาจริง; } #endregion}3. เพิ่มห้องสมุด bootstrap และ knockoutjs ผ่าน NuGet
4. ใช้บริการข้อมูลแบ็คเอนด์ ที่นี่บริการแบ็กเอนด์ถูกนำไปใช้โดยใช้ ASP.NET WebAPI รหัสการใช้งานเฉพาะมีดังนี้:
/// <summary> /// task webapi ให้บริการข้อมูล /// </summary> คลาสสาธารณะ TasksController: Apicontroller {ส่วนตัวอ่านงานส่วนตัว _TaskRepository = taskRepository.current; ienumerable สาธารณะ <Song> getAll () {return _TaskRepository.getAll (). orderby (a => a.id); } งานสาธารณะรับ (int id) {var item = _taskRepository.get (id); if (item == null) {โยน httpresponseException ใหม่ (httpstatuscode.notfound); } return item; } [เส้นทาง ("API/TASKS/GETBYSTATE")] สาธารณะ IENUMERABLE <SOCH> GetByState (สถานะสตริง) {IENUMERABLE <SOCHT> ผลลัพธ์ = รายการใหม่ <SOCHT> (); switch (state.toLower ()) {case "": กรณี "ทั้งหมด": results = _taskRepository.getAll (); หยุดพัก; กรณี "ใช้งาน": results = _taskRepository.getAll (). โดยที่ (t => t.state == taskState.active); หยุดพัก; กรณี "เสร็จสิ้น": ผลลัพธ์ = _taskRepository.getAll (). โดยที่ (t => t.state == taskState.completed); หยุดพัก; } results = results.orderby (t => t.id); ผลลัพธ์กลับมา; } [httppost] งานสาธารณะสร้าง (รายการงาน) {return _taskrepository.add (รายการ); } [httpput] โมฆะสาธารณะใส่ (รายการงาน) {ถ้า (! _taskrepository.update (รายการ)) {โยน httpresponseException ใหม่ (httpstatuscode.notfound); }} โมฆะสาธารณะลบ (int id) {_taskrepository.remove (id); -5. ใช้ ASP.NET MVC Bundle เพื่อบรรจุทรัพยากร รหัสการใช้งาน BundleConfig ที่เกี่ยวข้องมีดังนี้:
/// <summary> /// เพียงเพิ่มไฟล์ CSS และ JS ที่หายไป เนื่องจากมีการเพิ่มไฟล์ CSS และ JS บางไฟล์เมื่อสร้างเทมเพลต /// </summary> คลาสสาธารณะ BundleConfig {// สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการรวมกลุ่มเยี่ยมชม http://go.microsoft.com/fwlink/?linkid=301862 scriptBundle ("~/bundles/jQuery") รวม ("~/scripts/jQuery- {เวอร์ชัน} .js")); Bundles.add (ScriptBundle ใหม่ ("~/Bundles/jQueryVal") รวม ("~/scripts/jQuery.validate*")); // ใช้เวอร์ชันการพัฒนาของ Modernizr เพื่อพัฒนาและเรียนรู้จาก จากนั้นเมื่อคุณ // พร้อมสำหรับการผลิตให้ใช้เครื่องมือสร้างที่ http://modernizr.com เพื่อเลือกเฉพาะการทดสอบที่คุณต้องการ Bundles.add (ScriptBundle ใหม่ ("~/Bundles/Modernizr") รวมถึง ("~/scripts/modernizr-*")); Bundles.add (ScriptBundle ใหม่ ("~/Bundles/Bootstrap") รวมถึง ("~/scripts/bootstrap.js", "~/scripts/bootstrap-datepicker.min.js")); Bundles.add (Stylebundle ใหม่ ("~/content/css") รวม ("~/content/bootstrap.css", "~/content/bootstrap-datepicker3.min.css", "~/content/site.css")); BUNDLES.ADD (ScriptBundle ใหม่ ("~/Bundles/Knockout") รวม ("~/scripts/knockout- {เวอร์ชัน} .js", "~/scripts/knockout.validation.min.js", "~/scripts/scripts/scripts.mapping-latest.js")); Bundles.add (ScriptBundle ใหม่ ("~/Bundles/App") รวม ("~/scripts/app/app.js")); -6. เพราะเราต้องทำให้ประเภท enum ปรากฏเป็นสตริงบนหน้า การแจงนับจะถูกแปลงเป็นประเภทตัวเลขเมื่ออนุกรมโดยค่าเริ่มต้น ดังนั้นเราจำเป็นต้องทำการเปลี่ยนแปลงต่อไปนี้ในคลาส webapiconfig:
คลาสสแตติกระดับสาธารณะ webapiconfig {public static void register (httpConfiguration config) {// การกำหนดค่า Web API และบริการ // Web API การกำหนดเส้นทาง config.maphttpatributeroutes (); config.routes.maphttproute (ชื่อ: "defaultApi", routetemplate: "api/{คอนโทรลเลอร์}/{id}", ค่าเริ่มต้น: ใหม่ {id = routeparameter.optional}); // ทำให้การทำให้เป็นอนุกรมใช้รูปแบบเคส CAMEL Serialization Property Config.Formatters.jsonformatter.serializerSettings.Contractresolver = CamelCasePropertyNamesContractresolver (); // serialize สตริง config.formatters.jsonformatter.serializerSettings.converters.add (ใหม่ stringenumconverter ()); -หมายเหตุ: หากไม่ได้ใช้การทำให้เป็นอนุกรมตัวพิมพ์เล็กอูฐด้านบนคุณควรทำการปรับเปลี่ยนเมื่อข้อมูลที่มีผลผูกพันในหน้า ตัวอย่างเช่นเมื่อแอตทริบิวต์ชื่อที่มีผลผูกพันให้ใช้การพิมพ์ชื่อชื่อโดยตรง หากคุณใช้เมธอดชื่อมันจะแจ้งให้ทราบว่าไม่มีข้อผิดพลาดคำจำกัดความในแอตทริบิวต์นี้ เนื่องจาก JS ใช้สไตล์ตัวพิมพ์เล็กอูฐเพื่อตั้งชื่อตัวแปร ดังนั้นขอแนะนำให้คุณใช้สไตล์ตัวพิมพ์เล็กอูฐสำหรับการทำให้เป็นอนุกรม ในเวลานี้คุณสามารถใช้รูปแบบของ "ชื่อ" เพื่อผูกได้เท่านั้น นี่เป็นข้อมูลเพิ่มเติมเกี่ยวกับข้อกำหนดของรหัส JS
7. แก้ไขไฟล์เค้าโครงที่สอดคล้องกันและเนื้อหาไฟล์ดัชนี
รหัสเฉพาะของไฟล์เลย์เอาต์มีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"/> <meta name = "viewport" content = "width = อุปกรณ์-ความกว้าง, ระดับเริ่มต้น = 1.0"> <title> แอปพลิเคชันการเรียนรู้ hardhard </title> @styles.render ("~/csss") <body> <div> <div> <div> <p> ระบบการจัดการงานง่าย ๆ </p> </div> <div> <ul> <li> <a href = "/"> บ้าน </a> </li> </ul> </div> </div> </div> แอปพลิเคชัน </p> </footer> </div> @scripts.render ("~/bundles/jQuery") @scripts.render ("~/bundles/bootstrap") @scripts.render ("~/bundles/knockout") @scripts.render ("~/bundles" </body> </html> รหัสหน้าดัชนีมีดังนี้: @{viewbag.title = "ดัชนี"; layout = "~/views/thared/_layout.cshtml";} <div id = "list" data-bind = "ถ้า: cancreate"> <h2> งาน </h2> <div> <table> <th> เวลาเสร็จสิ้น </th> <th> statu </th> <th> </th> </tr> </t> <tbody data-bind = "foreach: งาน"> <tr> <td data-bind = "ข้อความ: id"> </td> <td> data-bind = "ข้อความ: คำอธิบาย"> </td> <td data-bind = "ข้อความ: เจ้าของ"> </td> <td data-bind = "ข้อความ: creationtime"> </td> <td data-bind = "text: finishtime"> </td> href = "javascript: void (0)"> ลบ </a> </td> </tbody> </table> </div> <div> <a href = "JavaScript: void (0)" data-bind = "คลิก: ฟังก์ชั่น (ข้อมูล, เหตุการณ์) <a href = "JavaScript: void (0)" data-bind = "คลิก: ฟังก์ชั่น (ข้อมูล, เหตุการณ์) {setTaskList ('active')}"> active </a> | <a href = "javascript: void (0)" data-bind = "คลิก: ฟังก์ชั่น (ข้อมูล, เหตุการณ์) {setTaskList ('เสร็จสิ้น')}"> เสร็จสิ้น </a> </viv> <div> <a href = "Javascript: void (0) ซ่อน "> <h2> เพิ่มงาน </h2> <br/> <div> <div> <label for =" taskname "> ชื่อ*</label> <div> <อินพุต type =" text "data-bind =" value: name "id =" taskname "</div> </div> </div data-bind = "value: คำอธิบาย" rows = "3" id = "taskdesc" name = "taskDesc" placeholder = "คำอธิบาย"> </textarea> </div> </div> <div> <label for = "taskowner"> บุคคลที่มีค่าใช้จ่าย* <div> <label for = "taskfinish"> เวลาที่เสร็จสมบูรณ์โดยประมาณ*</label> <div> <อินพุต id = "taskfinish" data-bind = "ค่า: finishtime" name = "taskfinish"> </div> </div> <div> <label for = "taskowner" <potion> เสร็จสิ้น </optup> </select> </div> </div> </div> <div> <ปุ่ม data-bind = "คลิก: handlesaveClick"> บันทึก </button> <button data-bind = "คลิก: handlebackclick"> back </pution> </div> </div> </div>8. สร้างตรรกะสคริปต์ front-end ที่สอดคล้องกัน ใช้รหัส JS เพื่อขอข้อมูลและสร้างวัตถุ ViewModel ที่สอดคล้องกันสำหรับการเชื่อมต่อส่วนหน้า รหัสการใช้งาน JS เฉพาะมีดังนี้:
var taskListViewModel = {งาน: ko.observablearray (), cancreate: ko.observable (จริง)}; var taskModel = function () {this.id = 0; this.name = ko.observable (); this.description = ko.observable (); this.finishtime = ko.observable (); this.owner = ko.observable (); this.state = ko.observable (); this.fromjs = function (data) {this.id = data.id; this.name (data.name); this.description (data.description); this.finishtime (data.finishtime); this.owner (data.owner); this.state (data.state); };}; ฟังก์ชั่น getAllTasks () {sendajaxrequest ("รับ", ฟังก์ชั่น (ข้อมูล) {tasklistViewModel.tasks.removeAll (); สำหรับ (var i = 0; i <data.length; i ++) });} ฟังก์ชั่น setTaskList (สถานะ) {sendajaxrequest ("รับ", ฟังก์ชั่น (ข้อมูล) {tasklistViewModel.tasks.removeAll (); สำหรับ (var i = 0; i <data.length; i ++) });} ฟังก์ชั่นลบ (รายการ) {sendajaxrequest ("ลบ", function () {getAllTasks ();}, item.id);} var task = taskModel ใหม่ (); ฟังก์ชั่น handleCreateorupdate (รายการ) {task.fromjs (รายการ); initDatePicker (); TaskListViewModel.cancreate (เท็จ); $ ('#create'). css ('การมองเห็น', 'มองเห็น');} ฟังก์ชั่น handlebackclick () {tasklistviewmodel.cancreate (จริง); $ ('#create'). css ('การมองเห็น', 'hidden');} ฟังก์ชั่น handlesaveclick (รายการ) {ถ้า (item.id == undefined) {sendajaxrequest ("โพสต์", ฟังก์ชั่น (newItem) {// newItem คำอธิบาย: item.description, finishtime: item.finishtime, เจ้าของ: item.owner, state: item.state}); } else {sendajaxrequest ("ใส่", function () {getAllTasks ();}, null, {id: item.id, ชื่อ: item.name, คำอธิบาย: item.description, finishtime: item.finishtime, เจ้าของ: item.owner, state: item.state}); } taskListViewModel.cancreate (จริง); $ ('#create'). css ('การมองเห็น', 'hidden');} ฟังก์ชั่น sendajaxrequest (httpmethod, callback, url, reqdata) {$ .ajax ("/api/tasks" + (url? "/" + url: "") initDatePicker = function () {$ ('#create .DatePicker'). datePicker ({autoclose: true});}; $ ('. nav'). on ('คลิก', 'li', ฟังก์ชั่น () {$ ('. nav li.active'). () {getAllTasks ();ณ จุดนี้โปรแกรมหน้าเดียวของเราได้รับการพัฒนา ถัดไปให้เรียกใช้เพื่อดูผลของมัน
จากแผนภาพการสาธิตผลการดำเนินการข้างต้นเราจะเห็นได้ว่าเมื่อโหลดหน้าเว็บการดำเนินการทั้งหมดดูเหมือนจะทำงานในหน้าเดียวและรู้สึกเหมือนหน้าเบราว์เซอร์จะวนเวียนอยู่ เมื่อเทียบกับหน้าเว็บที่พัฒนาขึ้นโดยใช้ ASP.NET MVC + มีดโกนมาก่อนคุณรู้สึกถึงความราบรื่นของสปาหรือไม่? ก่อนหน้านี้หน้าเว็บที่พัฒนาขึ้นโดยใช้ ASP.NET MVC + มีดโกนคุณเพียงแค่ต้องขอหน้าหนึ่งหน้าและคุณสามารถรู้สึกถึงการรีเฟรชของทั้งหน้าซึ่งทำให้ประสบการณ์ผู้ใช้แย่มาก
4. เปรียบเทียบกับรูปแบบการพัฒนามีดโกน
ฉันเชื่อว่าทุกคนได้เห็นข้อดีของสปาจากผลลัพธ์ ต่อไปฉันคิดว่าจำเป็นต้องเปรียบเทียบกับวิธีการใช้เว็บเพจแบบดั้งเดิม มีความแตกต่างหลักสองประการจากวิธีการพัฒนามีดโกน:
1. เมื่อหน้าแสดงผลข้อมูลจะถูกประมวลผลทางด้านเบราว์เซอร์ ไม่ได้อยู่บนเซิร์ฟเวอร์ จัดสรรแรงกดดันการแสดงผลไปยังด้านเบราว์เซอร์ของผู้ใช้แต่ละคนซึ่งจะช่วยลดแรงกดดันบนเซิร์ฟเวอร์เว็บไซต์ หากเป็นไวยากรณ์มีดโกนคำสั่งการเชื่อมหน้าส่วนหน้าควรมีดังนี้:
@model ienumerable <nockoutjsspa.models.task> @foreach (รายการ var ในรุ่น) {<tr> <td>@item.name </td> <td>@item.description </td> </tr>}}สิ่งเหล่านี้แสดงผลโดยเอ็นจิ้นมีดโกนทางฝั่งเซิร์ฟเวอร์ นี่คือเหตุผลที่หน้าพัฒนาโดยใช้มีดโกนจะเห็นหน้าวนรอบ เนื่องจากทุกครั้งที่คุณสลับหน้าคุณจะต้องขอให้เซิร์ฟเวอร์แสดงผลและหลังจากเซิร์ฟเวอร์แสดงผลให้ส่งคืน HTML ไปยังไคลเอนต์เพื่อแสดงผล
2. ข้อมูลที่ถูกผูกไว้เป็นแบบไดนามิก ซึ่งหมายความว่าการเปลี่ยนแปลงในรูปแบบข้อมูลจะปรากฏบนหน้าทันที ผลกระทบนี้เกิดจากกลไกการผูกสองทางที่ดำเนินการโดย KnockoutJs
การใช้วิธีนี้นั้นง่ายสำหรับการพัฒนาโปรแกรม Web API มีหน้าที่เฉพาะในการให้ข้อมูลและหน้าส่วนหน้ายังช่วยลดการดำเนินงาน DOM จำนวนมาก เนื่องจากการดำเนินงาน DOM นั้นซับซ้อนและผิดพลาดได้ง่าย นอกจากนี้ยังหมายถึงการลดข้อบกพร่องโดยนัยในโปรแกรม ยิ่งไปกว่านั้นบริการแบ็คเอนด์สามารถใช้งานได้โดยโทรศัพท์มือถือเว็บเบราว์เซอร์และหลายแพลตฟอร์มเพื่อหลีกเลี่ยงการพัฒนาซ้ำ
5. สรุป
ณ จุดนี้การแนะนำของบทความนี้จะได้รับการแนะนำ บทความนี้ส่วนใหญ่แนะนำการใช้งานของ KnockoutJs เพื่อให้โปรแกรม SPA เสร็จสมบูรณ์ ในความเป็นจริงในการทำงานจริงรูปแบบของการสร้างโปรแกรมหน้าเดียวจะขึ้นอยู่กับ AngularJs มากขึ้น จากนั้นก็มีหลายสิ่งที่น่าพิศวง แต่การ KnockoutJS เป็นเพียงกรอบ MVVM และกลไกการกำหนดเส้นทางจะต้องใช้กับห้องสมุดชั้นเรียนอื่น ๆ เช่นกลไกการกำหนดเส้นทางใน ASP.NET MVC ที่นี่คุณสามารถใช้เฟรมเวิร์ก เมื่อเทียบกับการ KnockoutJS AngularJS เป็นเฟรมเวิร์ก MVVM+MVC ดังนั้นในหัวข้อถัดไปเราจะแนะนำวิธีใช้ AngularJS เพื่อสร้างโปรแกรมหน้าเดียว (SPA)
ดาวน์โหลดรหัสแหล่งที่มาทั้งหมดในบทความนี้: SpawithKnockoutjs
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน