WebRocketX

ยินดีต้อนรับสู่ WebRocketX© พัฒนาเว็บแอปพลิเคชันหน้าเดียว (SPA) ได้อย่างมีประสิทธิภาพมากขึ้น 10 เท่าด้วยระบบจัดส่งเนื้อหาที่เบาและรวดเร็วเป็นพิเศษ WebRocketX ใช้งานง่ายและมีประสิทธิภาพมากจนใครก็ตามที่ใช้มันทันทีจะสงสัยว่าการแทรก HTML ซ่อนอยู่ที่ไหนตลอดหลายปีที่ผ่านมา

WebRocketX คืออะไร?

WebRocketX เป็น javascript API ฝั่งเบราว์เซอร์ที่มีการเรียก async ไปยังเซิร์ฟเวอร์ทั้งหมด กลไกหลักของการอัปเดตเพจคือการแทรก DOM ของตัวอย่าง HTML โดยใช้คุณสมบัติ innerHTML ด้วยการมีจุดโต้ตอบกับเซิร์ฟเวอร์เพียงจุดเดียว นักพัฒนาจึงมีฟังก์ชันการทำงานต่อไปนี้ที่จัดทำโดย API

• จัดเตรียมส่วนหน้าของแอปพลิเคชันหน้าเดียว (SPA) ให้กับเทคโนโลยีใดๆ ที่นำเสนอ HTML จากส่วนหลัง เช่น Springboot, PHP, Laravel, Django, Rails เป็นต้น
• การควบคุมด้านเบราว์เซอร์ของการโต้ตอบของผู้ใช้ระหว่างการโทรแบบอะซิงโครนัส
• การจัดการข้อผิดพลาดฝั่งเบราว์เซอร์ของข้อยกเว้นฝั่งเซิร์ฟเวอร์
• การแคชมุมมองด้านข้างของเบราว์เซอร์ ~ ทำให้ปุ่มย้อนกลับทำงานได้อย่างสมบูรณ์ได้อย่างง่ายดาย
• การนำทางมุมมองด้านข้างของเบราว์เซอร์

สำหรับคำอธิบายโดยละเอียดเพิ่มเติมเกี่ยวกับประโยชน์ของการใช้ WebRocketX SPA ไปที่นี่ ประโยชน์ของการใช้ WebRocketX SPA

ทำไมต้องเอ็กซ์?

WebRocketX เป็นลูกผสม เป็นโซลูชันที่อยู่กึ่งกลางระหว่างโลกเก่าของเว็บไซต์รีเฟรชแบบเต็มหน้าและโซลูชัน JSON JSMVC ล่าสุด เช่น Angular

• เช่นเดียวกับสถาปัตยกรรมแบบเต็มหน้า WebRocketX คาดว่าเค้าโครงที่มาจากเซิร์ฟเวอร์จะรวมข้อมูลไว้ด้วย สิ่งนี้แตกต่างจากสถาปัตยกรรม JSMVC ที่ข้อมูลจะถูกส่งแยกจากโครงร่างในออบเจ็กต์ JSON อย่างไรก็ตาม WebRocketX รองรับ JSON เมื่อจำเป็น แต่ไม่ใช่กระบวนทัศน์ที่เน้น JSON เป็นศูนย์กลาง
• เช่นเดียวกับสถาปัตยกรรม JSMVC WebRocketX เป็นเว็บแอปพลิเคชันหน้าเดียว (SPA) และอาศัยการเรียก AJAX เพื่อส่งข้อมูลและดึงมุมมองใหม่ๆ

สิ่งที่ยอดเยี่ยมอื่นๆ เกี่ยวกับ WebRocketX

เขียนไว้ ทั้งหมดในจาวาสคริปต์ เมื่อใช้ Jquery เป็น API ไปยังเบราว์เซอร์ มันจะทำงานบนเบราว์เซอร์หลักทั้งหมดและแม้แต่บนอุปกรณ์มือถือ

ช่วยให้นักพัฒนาเว็บแอปพลิเคชันสามารถสร้างประสบการณ์ผู้ใช้ที่หลากหลายได้อย่างง่ายดาย HTML มาตรฐาน และจาวาสคริปต์ คล้ายกับประสบการณ์การใช้ระบบปฏิบัติการเดสก์ท็อปหลัก เช่น Apple หรือ Windows แต่มันก็เป็นอย่างมาก น้ำหนักเบา รันโค้ดจำนวนเล็กน้อย และจัดเก็บสถานะส่วนใหญ่ของผู้ใช้ไว้ในเบราว์เซอร์ ลดความจำเป็นในการสื่อสาร กับเซิร์ฟเวอร์

ให้นักพัฒนาแอปพลิเคชันเว็บมี แพลตฟอร์มที่มีโครงสร้าง เพื่อส่งมอบและจัดการเนื้อหาภายในเบราว์เซอร์ ถึงแม้จะมีโครงสร้าง แต่ก็ยังปล่อยให้นักพัฒนามีอิสระอย่างสมบูรณ์ในการใช้ประโยชน์จากพลังและความสะดวกสบายของ HTML และสไตล์ชีตมาตรฐาน และใช้ไลบรารีวิดเจ็ตของบุคคลที่สาม

ปลอดภัยอย่างแท้จริง เนื่องจากกระบวนทัศน์การเรนเดอร์ html ฝั่งเซิร์ฟเวอร์จัดเก็บการอนุญาตของผู้ใช้ในเซสชันเซิร์ฟเวอร์ซึ่งเป็นเรื่องยากสำหรับผู้ใช้ที่จะแก้ไข นอกจากนี้ เนื่องจากมุมมองที่ไม่ได้ใช้และไม่ได้รับอนุญาตไม่ได้ถูกแคชไว้ฝั่งไคลเอ็นต์ ผู้ไม่ประสงค์ดีจึงไม่มีพื้นผิวการโจมตี เฟรมเวิร์กเช่น Vue, Angular และ React ช่วยให้ผู้ใช้ทุกคนได้รับการโจมตีบัญชีผู้ดูแลระบบตามค่าเริ่มต้นเป็นมุมมองที่แคชไว้ เว้นแต่ว่าเว็บแอปพลิเคชันของผู้ดูแลระบบจะถูกดาวน์โหลดและจัดการเป็นแอปพลิเคชันแยกต่างหาก

สิ่งที่ WebRocketX ไม่ใช่

ไม่ใช่โซลูชันฝั่งเซิร์ฟเวอร์ เนื่องจากส่วนประกอบส่วนหน้า (เบราว์เซอร์) ไม่ได้เชื่อมต่อกับส่วนประกอบหน่วยความจำส่วนหลัง (เซิร์ฟเวอร์) ความสัมพันธ์เพียงอย่างเดียวระหว่างสิ่งที่ส่งจากเซิร์ฟเวอร์และเฟรมเวิร์ก WebRocketX คือข้อตกลงง่ายๆ สำหรับการส่ง HTML ไปยังเบราว์เซอร์ สถาปัตยกรรมแบบแยกส่วนนี้ทำให้นักพัฒนาสามารถใช้เฟรมเวิร์กแบ็กเอนด์ที่ต้องการได้ เช่น Django, Ruby on Rails, Spring MVC, Php, Asp, Struts เป็นต้น เนื้อหาจะถูกส่งจากเซิร์ฟเวอร์ในรูปแบบ HTML และส่งจาก WebRocketX เป็นพารามิเตอร์แบบฟอร์ม มันง่ายอย่างที่คิด

ไม่ใช่ CSS หรือโซลูชันเลย์เอาต์ - เป็น API การแคชเนื้อหาและการจัดส่งที่ออกแบบมาเพื่อทำให้แอปพลิเคชันเว็บไดนามิกของคุณกลายเป็น SPA ได้อย่างง่ายดาย นักพัฒนาซอฟต์แวร์มีอิสระในการจัดวางเว็บแอปพลิเคชันของตนได้ตามต้องการ รูปลักษณ์ของเว็บไซต์ที่ให้ข้อมูลนี้ไม่ได้บ่งชี้ว่าเว็บไซต์ของคุณจะมีลักษณะอย่างไรเมื่อใช้ WRX

ไม่รองรับ SEO สำหรับเว็บไซต์แบบคงที่ - การใช้ WRX สำหรับเว็บไซต์แบบคงที่โดยหลักแล้วเป็นเพียงแนวคิดการใช้งานเท่านั้น และน่าเสียดายที่เครื่องมือค้นหาไม่พร้อมสำหรับการสร้างดัชนีของเว็บไซต์ SPA ไม่มีเฟรมเวิร์กหน้าเดียวเช่น React, Angular หรือ Vue ใดที่สอดคล้องกับ SEO นอกเหนือไปจากหน้า Landing Page ในทางกลับกัน WRX เหมาะอย่างยิ่งสำหรับเว็บแอปพลิเคชันแบบไดนามิก โดยเฉพาะเว็บไซต์ที่กำหนดให้ผู้ใช้เข้าสู่ระบบเพื่อจัดการบัญชีหรือธุรกิจทุกประเภท

ถ้าคุณชอบ WebRocketX ให้ดาวเราที่นี่ใน Github ขอบคุณ!

การติดตั้งแอปพลิเคชันหน้าเดียวของคุณ

สร้างหน้า Landing Page/ยินดีต้อนรับตามที่แสดงด้านล่างและรวมไลบรารีต่อไปนี้ไว้ด้วย โดยปกติแล้วหน้า Landing Page จะดีที่สุดหากอยู่ด้านหลังหน้าเข้าสู่ระบบแบบฟอร์มของคุณ กล่าวอีกนัยหนึ่งคือคุณส่งต่อผู้ใช้ไปหลังจากที่พวกเขาเข้าสู่ระบบ ทุกอย่างยกเว้นไลบรารี jquery มีอยู่ในโฟลเดอร์ซอร์สโค้ดรูท WebRocketX ที่พบด้านบน

jquery[latest version].js including the draggable library from jquery UI
domUtil.js
desktopContext.js
webapi.js
webRocketXStyles.css

ตัวอย่าง HTML อย่างง่ายสำหรับเว็บแอปพลิเคชันหน้าเดียวแบบไดนามิก (SPA)

เทมเพลตตัวอย่างที่รันได้สำหรับ PHP และ Django สามารถพบได้ในโฟลเดอร์เทมเพลตในซอร์สโค้ด

หน้า Landing/ยินดีต้อนรับ

หน้าต้อนรับคือหน้า Landing Page ของเว็บแอปพลิเคชันของคุณ ซึ่งโดยปกติจะอยู่ด้านหลังหน้าเข้าสู่ระบบของคุณ หน้ายินดีต้อนรับคือจุดเริ่มต้นของสปาของคุณ ส่วนสำคัญคือไลบรารีที่มีการตั้งค่าตัวแปรเฟรมเวิร์ก เป้าหมายเริ่มต้น และการแจ้งเตือนข้อผิดพลาดในการสื่อสาร

 <!DOCTYPE html >

< html >
    < head >
                
        < title > Welcome </ title >

         <!-- The jquery UI library should include draggable if you want to implement draggable modals-->
        < script language =" javascript " type =" text/javascript " src =" javascripts/jquery/jquery-ui-1.11.4.custom/external/jquery/jquery-1.12.4.min.js " > </ script >
        
        < script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/domUtil.js " > </ script >
        < script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/desktopContext.js " > </ script >
        < script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/webapi.js " > </ script >
        < link rel =" stylesheet " type =" text/css " href =" javascripts/webRocketX/v1_10_1/webRocketXStyles.css " >
        
        < script type =" text/javascript " >           
            var asyncDebugMode = true ;
            var signInPageURI = "" ;
            var pageLoadTimeStamp = "" ;
            var modalTargetSpacing = 10 ;
            var staticPage = false ;
            var disableNavigation = false ;
        </ script > 

        < link rel =" stylesheet " type =" text/css " href =" styles/demo/styles.css " >
        < link rel =" stylesheet " type =" text/css " href =" styles/demo/menu.css " >
        < meta name =" viewport " content =" width=device-width " >    
    </ head >
    
    < body >             
    
        <!-- header -->        
        < table class =" bodytext " >        
            < tr >
                < td width =" 20 " > </ td >                    
                < td >
                    My Header                    
                </ td >
                < td width =" 20 " > </ td >                
            </ tr >
            
            < tr >
                < td width =" 20 " > </ td >                    
                < td class =" menuBar " >
                    < div id =" menu " > </ div >                        
                </ td >
                < td width =" 20 " > </ td >
            </ tr >
            
        </ table >
        
        < div id =" errorSpan " style =" color:red;text-align:center; " > </ div >
                
        < div id =" winMain " class =" startingTarget bodytext " >
            
            <!-- Unused or default capsule attributes do not need to be included.  They are just included here for teaching purposes. -->
            < div id =" welcome " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " jsOnload ="" reloadPage =" false " saveOriginalRequest =" false " saveResponse =" false " trackPage =" true " windowTitle =" welcome " errorPage =" false " >
                Hello World
                < br /> < br />
                < a href =" # " onclick =" test1();return false; " > Test1 </ a >
            </ div >
                                                        
        </ div >
       
        <!-- footer -->     
        < table class =" bodytext " >        
            < tr >
                < td width =" 20 " > </ td >                    
                < td class =" menuBar " style =" padding: 10px 10px 10px 10px; " >
                    Powered By&nbsp;&nbsp; < a target =" _blank " href =" http://www.webrocketx.com " style =" text-decoration: none; " > < span style =" color:black;background-color:white;font-weight:bold; " > &nbsp;WebRocket </ span > < span style =" color:red;background-color:white;font-weight:bold; " > X&nbsp; </ span > </ a >                     
                </ td >
                < td width =" 20 " > </ td >                
            </ tr >                       
        </ table >
                
        < div id =" communicationErrorAlertWrapper " style =" display:none; " >
                                                               
            < div id =" communicationErrorAlert " class =" metaCapsule " capsuleType =" modal " >
                < div id =" dialogLayer " class =" BDT_Dialog_Layer " >
                    < div class =" BDT_Dialog_Center " >
                        < div class =" BDT_Dialog_Decoration " >                    
                            < table class =" expand " >
                                < tr >
                                    < td >
                                        < div id =" communicationErrorMessage " > </ div >
                                        < br /> < br />
                                        < a href =" # " onclick =" $('#communicationErrorAlertWrapper').hide(); return false; " > Ok </ a >                            
                                    </ td >
                                </ tr >                            
                            </ table >                          
                        </ div >
                    </ div >
                </ div >
            </ div >
                 
        </ div >               
        
    </ body >

</ html >

ตัวอย่างหน้าที่แทรก

หน้านี้จะมาแทนที่เนื้อหาหลัก เราจะใส่ไว้ในไฟล์ชื่อ test1.html เนื้อหาถูกห่อไว้ในแคปซูล (แท็ก div) ที่กำหนดค่าด้วยแอตทริบิวต์ XML ของข้อมูลเมตา ข้อมูลเมตาคือประเภทของโปรแกรมประกาศที่เฟรมเวิร์กใช้เพื่อตัดสินใจว่าจะทำอย่างไรกับเนื้อหาของคุณ

 < div id =" test1 " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " windowTitle =" Test 1 " >
    Hello World Test 1.
</ div >

ตัวอย่างฟังก์ชันจาวาสคริปต์

สายนี้จะแทนที่เนื้อหาใน winMain สิ่งที่ยอดเยี่ยมจริงๆ ก็คือปุ่มย้อนกลับบนเบราว์เซอร์จะนำทางกลับไปยังหน้าก่อนหน้าได้อย่างสมบูรณ์แบบ แต่คุณจะยังคงอยู่ในหน้า SPA หน้าเดียวตลอดเวลา นี่เป็นเรื่องจริงสำหรับการนำทางใดๆ ในเฟรมเวิร์ก และคุณสามารถควบคุมได้อย่างสมบูรณ์และง่ายดาย หากคุณตัดสินใจว่าคุณต้องการให้เพจรีเฟรชจากเซิร์ฟเวอร์เสมอเมื่อคุณนำทางกลับมา แทนที่จะมาจากแคชของเบราว์เซอร์ การทำเครื่องหมายแคปซูลของเพจด้วยแอตทริบิวต์ reloadPage เท่ากับ "true" จะเป็นการส่งเพจอีกครั้งไปยังเซิร์ฟเวอร์ด้วยพารามิเตอร์เดิมทั้งหมดที่ได้รับการร้องขอตั้งแต่แรก และแม้กระทั่งเรียกการเรียกกลับแบบเดียวกับที่ได้รับมอบหมายให้แต่เดิม ในขอบเขตการปิดเดิม

 function test1 ( ) {
    var successfulCallback = function ( innerHTMLObject ) {                        
       alert ( "this my callback" ) ;              
    }
        
    var webapi = new Webapi ( ) ;
    webapi . setSuccessCallbackReference ( successfulCallback ) ;    
    webapi . setUrl ( "test1.html" ) ;
    webapi . submitAsync ( ) ;    
}

มันจะง่ายกว่านี้ได้ไหม?

รายการคุณลักษณะแคปซูลทั้งหมดที่มีให้ใช้งานในโหมด Dynamic Web App

สถาปัตยกรรมแคปซูล WebRocketX ช่วยให้นักพัฒนาสามารถควบคุมพฤติกรรมการดูส่วนใหญ่ได้อย่างเปิดเผย
ด้านล่างนี้คือคุณลักษณะแคปซูลที่เป็นไปได้ทั้งหมด สิ่งนี้จะทำให้คุณเข้าใจถึงฟังก์ชันการทำงานของเฟรมเวิร์กส่วนใหญ่ และวิธีที่เฟรมเวิร์กครอบคลุมกรณีการใช้งานการนำทางผู้ใช้ส่วนใหญ่

คุณสมบัติที่ไม่รวมอยู่ในแคปซูลจะถูกตั้งค่าเป็นค่าเริ่มต้น คุณลักษณะที่จำเป็นจะมีเครื่องหมายดอกจัน*

• id* - ใช้เพื่อติดตามเพจในกรอบงาน WebRocketX ส่งต่อผ่านพารามิเตอร์ CapsuleId ในตัวอย่างเทมเพลต ไม่จำเป็นต้องใช้เทมเพลต
  
  
• class* - ต้องตั้งค่าเป็น "metaCapsule" ใช้โดยกรอบงานเพื่อค้นหา div แคปซูล
  
  
• CapsuleType* - สามารถตั้งค่าเป็นสี่ค่าต่อไปนี้ ซึ่งกำหนดวิธีการและว่าจะฉีดแคปซูลหรือไม่
  
  
  • อินไลน์ - เนื้อหาจะถูกแทรกลงใน div ที่ระบุโดยแอตทริบิวต์ targetId
    
    
  • โมดอล - เนื้อหาจะถูกแทรกลงในเลเยอร์โมดอลแบบลอย
    
    
  • ข้อมูล - เนื้อหาจะไม่ถูกติดตามสำหรับการนำทางโดยเฟรมเวิร์ก นักพัฒนาสามารถตัดสินใจได้ว่าจะระบุ targetId หรือวางเนื้อหาด้วยตนเอง หรือแม้แต่ใช้เนื้อหาโดยไม่ต้องวางลงในเพจ เนื้อหาจะถูกส่งกลับไปยังนักพัฒนาในการเรียกกลับซึ่งเป็นพารามิเตอร์แรก ในรูปแบบของออบเจ็กต์ DOM ของแคปซูลและเนื้อหาที่รวมอยู่ นี่เป็นประเภทแคปซูลที่เหมาะสมที่สุดสำหรับใช้กับส่วนเล็กๆ ของเพจที่สามารถรีเฟรชได้ ซึ่งไม่ได้ถูกนำทางทั้งหน้า ตัวอย่างเช่น ผลการค้นหา ทิคเกอร์ ฯลฯ
    
    
  • json - เพียงแสดงข้อความ json ลงในฝั่งเซิร์ฟเวอร์แคปซูลและข้อความจะถูกส่งในการเรียกกลับฝั่งเบราว์เซอร์ซึ่งกลายเป็นวัตถุ json แล้ว การส่งพารามิเตอร์ json ไปยังเซิร์ฟเวอร์สามารถทำได้โดยการตั้งค่าของพารามิเตอร์เป็นสตริง json โดยใช้วัตถุ AsyncParametersList
    
    
• targetId (*จำเป็นหาก CapsuleType เป็นแบบอินไลน์) - ระบุตำแหน่งที่จะแทรก html ขาเข้า เมื่อประเภทแคปซูลเป็น "อินไลน์"
  
  
• jsOnload - ระบุวิธีการจาวาสคริปต์ที่จะถูกเรียกเมื่อการฉีดเสร็จสมบูรณ์ มีประโยชน์มากสำหรับการลงทะเบียนตัวเติมข้อความอัตโนมัติ ส่วนประกอบ jquery ui และการดำเนินการประเภทการโหลดหน้าประเภทอื่นๆ หมายเลขอ้างอิงของแคปซูลที่มีการประกาศฟังก์ชัน jsOnload จะถูกส่งเป็นพารามิเตอร์เดียวไปยังฟังก์ชัน js ของคุณเสมอ
  
  
• jsReturn - ระบุวิธีการจาวาสคริปต์ที่จะถูกเรียกเมื่อเพจนี้ถูกส่งคืนแต่ไม่ได้โหลดซ้ำ คุณสามารถกระตุ้นการกลับไปยังเพจได้โดยใช้ปุ่มย้อนกลับหรือเรียก dtSetCapsuleById กลไกนี้มีประโยชน์เมื่อนักพัฒนาต้องการให้รีเฟรชส่วนหนึ่งของมุมมอง หรือโค้ดอื่นใดที่จะเรียกใช้ เมื่อแสดงผลแบบมีเงื่อนไขหรือไม่มีเงื่อนไข เนื่องจากแอปพลิเคชันทำงานในเพจเดียว จึงสามารถถ่ายทอดเงื่อนไขระหว่างเพจต่างๆ เป็นตัวแปรร่วมได้ หมายเลขอ้างอิงของแคปซูลที่มีการประกาศฟังก์ชัน jsReturn จะถูกส่งเป็นพารามิเตอร์เดียวไปยังฟังก์ชัน js ของคุณเสมอ
  
  
• reloadPage (ค่าเริ่มต้น: false) - เมื่อเป็นจริง การนำทางไปยังหน้านี้ในสแต็กของเบราว์เซอร์จะส่งผลให้มีการดึงเนื้อหาเวอร์ชันใหม่จากเซิร์ฟเวอร์ คำขอเดิมจะถูกส่งอีกครั้งพร้อมพารามิเตอร์เดิมทั้งหมด และวิธีการเรียกกลับเดิมจะถูกเรียก
  
  
• JumpReloadPageOnPrevious (ค่าเริ่มต้น: false) - เมื่อเป็นจริง การนำทางจากหน้านี้ไปยังเพจในสแต็กของเบราว์เซอร์ที่ทำเครื่องหมายว่าโหลดซ้ำจะบล็อกเพจปลายทางนั้นไม่ให้โหลดซ้ำ สิ่งนี้มีประโยชน์อย่างยิ่งในการอนุญาตให้นักพัฒนาควบคุมว่าการไหลกลับที่แตกต่างกันไปยังเพจโหลดซ้ำจะทำให้โหลดซ้ำหรือไม่ ตัวอย่างเช่น มักจะเป็นสิ่งที่ไม่พึงประสงค์เมื่อนำทางกลับไปยังหน้าพื้นหลังจากโมดอลเพื่อให้หน้าพื้นหลังนั้นโหลดซ้ำ อย่างไรก็ตาม คุณอาจต้องการให้หน้าพื้นหลังเดียวกันนั้นโหลดซ้ำเมื่อมีการนำทางกลับไปยังหน้าที่แทนที่หน้านั้น
  
  
• saveOriginalRequest (ค่าเริ่มต้น: false) - เมื่อตั้งค่าเป็นจริง คำขอเดิมจะถูกบันทึกแม้ว่าจะไม่ใช่การโหลดซ้ำก็ตาม
  
  
• saveResponse (ค่าเริ่มต้น: false) - เมื่อตั้งค่าเป็นจริง ออบเจ็กต์การตอบสนองจะถูกจัดเก็บไว้ใน div แคปซูลที่ฉีดเข้าไป ซึ่งสามารถใช้เพื่อกู้คืนเนื้อหาที่แทรกไปเป็นสถานะดั้งเดิมได้ในภายหลังหลังจากผู้ใช้แก้ไข โดยการเรียก RestoreAsyncResponse(id) กรณีที่พบบ่อยที่สุดที่ต้องการความสามารถนี้คือเมื่อเพจมีปุ่มยกเลิก
  
  
• trackPage (ค่าเริ่มต้น: จริง) - ค่าเริ่มต้นเป็นจริงโดยระบุว่าหน้านี้ถูกวางไว้ในแบ็คสแต็กสำหรับการอ้างอิงเพิ่มเติม การตั้งค่านี้ไม่เกี่ยวข้องกับประเภทแคปซูลของข้อมูลและ json เนื่องจากประเภทเหล่านั้นไม่สามารถนำทางได้ตั้งแต่แรก นักพัฒนาซอฟต์แวร์สามารถระบุได้ว่าไม่ควรวางหน้านี้ไว้ในแบ็คสแต็กโดยตั้งค่าแอตทริบิวต์นี้เป็นเท็จ การตั้งค่า trackPage เป็น False เป็นวิธีแก้ไขที่เหมาะสมที่สุดสำหรับเพจที่คุณไม่ต้องการให้ผู้ใช้กลับไปแล้วส่งใหม่ เช่น เพจ "สร้าง" เมื่อผู้ใช้กลับไปที่เพจที่ไม่ได้ติดตาม ผู้ใช้จะข้ามไปและไปที่หน้าที่ติดตามก่อนหน้านั้น
  
  
• windowTitle - ระบุชื่อที่จะตั้งค่าที่ด้านบนของเบราว์เซอร์ จำเป็นเนื่องจากเราไม่เคยเปลี่ยนหน้าดังนั้นจึงไม่เคยอัปเดตแท็กชื่อในส่วนหัว html
  
  
• errorPage - ทำเครื่องหมายหน้านี้ว่าเป็นข้อยกเว้นที่พิมพ์ ซึ่งจะส่งผลให้นักพัฒนากำหนดว่าการเรียกกลับที่สำเร็จถูกข้ามไป และการเรียกกลับที่ล้มเหลวที่กำหนดโดยผู้พัฒนาถูกเรียก
  
  

ประโยชน์ของการสร้าง Django Single Page Application (SPA)

แม้ว่า SPA โดยทั่วไปจะเทียบได้กับเฟรมเวิร์กจาวาสคริปต์ฝั่งไคลเอ็นต์จำนวนมากรวมกับบริการ json แต่ก็ยังเป็นไปได้มากที่จะได้รับประโยชน์จาก SPA ในขณะที่ยังคงเรนเดอร์ฝั่งเซิร์ฟเวอร์ HTML ด้วยเฟรมเวิร์ก SPA จาวาสคริปต์แบบเบาของเรา

• ข้อดีของ Micro Request ในการบำรุงรักษาสถานะ UI - การรีเฟรชเพียงบางส่วนของหน้าหมายความว่าไม่จำเป็นต้องดึงทั้งหน้าทุกครั้ง ต้องดึงข้อมูลโค้ด html หรือออบเจ็กต์ json จากเซิร์ฟเวอร์เท่านั้น สิ่งนี้ทำให้งานของนักพัฒนา UI ง่ายขึ้นมาก เพราะพวกเขาไม่ต้องทำสิ่งต่าง ๆ เช่น เทมเพลตส่วนหัว เมนู และส่วนท้ายในทุกหน้า หรือกังวลเกี่ยวกับสถานะของข้อมูลอื่น ๆ ในส่วนของหน้านอกพื้นที่รีเฟรช แม้แต่อินพุตของผู้ใช้ที่ไม่ได้ส่งไปยังเซิร์ฟเวอร์ก็ยังปลอดภัยตราบใดที่อยู่นอกพื้นที่รีเฟรช ความเจ็บปวดจากการพัฒนา UI ส่วนใหญ่หายไปพร้อมกับคำขอขนาดเล็ก
  
  
• ข้อดีของ Micro Request ในบริการ - เนื่องจากเฉพาะส่วนที่เป็นเป้าหมายของเพจเท่านั้นที่ถูกดึงข้อมูลที่จำเป็นในตำแหน่งเหล่านี้จึงมีความเฉพาะเจาะจงมากขึ้น ซึ่งจะช่วยลดตรรกะทางธุรกิจที่จำเป็นในบริการ ซึ่งทำให้การเรียกข้อมูลจากแอปพลิเคชันภายนอก เช่น ฐานข้อมูลและบริการคลาวด์ทำได้ง่ายขึ้น
  
  
• การจัดเก็บสถานะเพิ่มเติมในเบราว์เซอร์ - การรวมกันของมุมมองแคชและการรีเฟรชเฉพาะบางส่วนของหน้าส่งผลให้มีสถานะคงอยู่ในเบราว์เซอร์มากขึ้น ดังนั้นนักพัฒนาไม่จำเป็นต้องเดินทางไปยังเซิร์ฟเวอร์มากนักเพื่อให้ได้สถานะปัจจุบันนี้ นี่เป็นข้อดีอย่างมากแม้แต่ในเรื่องง่ายๆ เช่น การส่งแบบฟอร์ม เนื่องจากเมื่อเซิร์ฟเวอร์ปฏิเสธอินพุตของผู้ใช้ที่ส่งมา เพจที่มีแบบฟอร์มก็จะยังคงอยู่ในฝั่งไคลเอ็นต์โดยที่อินพุตของผู้ใช้ทั้งหมดยังคงอยู่ เราไม่เคยสูญเสียหน้า ในทางกลับกัน แบบฟอร์มที่ถูกปฏิเสธในการรีเฟรชแบบเต็มหน้าจะสูญเสียการป้อนข้อมูลของผู้ใช้ทั้งหมด เนื่องจากเบราว์เซอร์อยู่ในขั้นตอนการแสดงหน้าถัดไปและหน้าแบบฟอร์มหายไป ดังนั้นในการรีเฟรชการส่งแบบฟอร์มที่ถูกปฏิเสธการรีเฟรชแบบเต็มหน้า อินพุตจะต้องถูกส่งไปยังเซิร์ฟเวอร์และแสดงอีกครั้ง เรนเดอร์แบบฟอร์มทั้งหมดอีกครั้ง และกู้คืนอินพุตของผู้ใช้ที่ยังไม่ได้ยืนยัน พารามิเตอร์แบบฟอร์มจะถูกเรียกคืนจากคำขอ แต่ไม่ได้มาจากฐานข้อมูล เนื่องจากการส่งไม่ถูกต้อง ดังนั้นข้อมูลจึงไม่ไปไกลถึงขนาดนั้น หากคุณไม่สนใจผู้ใช้ของคุณ คุณสามารถแสดงข้อความแสดงข้อผิดพลาดให้พวกเขาและให้พวกเขาพิมพ์ทุกอย่างซ้ำอีกครั้ง ซึ่งทำในบางครั้งและไม่เป็นมิตรอย่างยิ่ง ในกรณีของแอปพลิเคชัน Django หน้าเดียวที่ใช้คำขอขนาดเล็ก หน้านั้นจะไม่ถูกทิ้งไว้ตั้งแต่ต้น และเรามีอิสระที่จะส่งข้อความแสดงข้อผิดพลาดกลับเป็นกล่องโต้ตอบโมดอลแบบลอย
  
  
• การนำทางมุมมองที่มีโครงสร้าง - มุมมองที่แสดงผลก่อนหน้านี้สามารถนำทางไปยังได้โดยใช้ตัวระบุมุมมอง การใช้แอตทริบิวต์แคปซูล ทำให้สามารถระบุมุมมองเป็นแบบแคชได้หรือบังคับให้โหลดซ้ำ (เพื่อไม่ให้เก่า)
  
  
• การควบคุมการโต้ตอบของผู้ใช้ - คุณเคยประสบปัญหากับการที่ผู้ใช้กดปุ่มสองครั้งหรือไม่? ปัญหาประเภทนี้จะไม่เกิดขึ้นอีกต่อไปเนื่องจาก WebRocketX วางเลเยอร์โปร่งใสไว้เหนือ UI ในระหว่างการเดินทางไปกลับไปยังเซิร์ฟเวอร์ที่ป้องกันการโต้ตอบของผู้ใช้ กรอบงานยังแสดงเคอร์เซอร์นาฬิกาทรายที่ดีเพื่อแจ้งให้ผู้ใช้ทราบว่ามีบางอย่างเกิดขึ้น
  
  
• การจัดการข้อผิดพลาดแบบมีโครงสร้าง - ข้อผิดพลาดฝั่งเซิร์ฟเวอร์และการหมดเวลาเซสชันอาจเป็นเรื่องยุ่งยากอย่างแท้จริง เมื่อนักพัฒนาคาดว่าเค้าโครงหรือข้อมูลจะมาจากการโทรกลับแบบอะซิงโครนัส WebRocketX สร้างมาตรฐานการจัดการข้อผิดพลาดและพฤติกรรมการหมดเวลาของเซสชัน เพื่อไม่ให้สิ่งที่คาดเดาไม่ได้เกิดขึ้น คำตอบทั้งหมดจะถูกคัดกรองล่วงหน้าก่อนที่จะส่งการโทรกลับไปยังการโทรกลับของนักพัฒนาเพื่อจัดการกับปัญหาใดๆ นอกจากนี้ยังมี Hooks เพื่อให้นักพัฒนาสามารถกำหนดพฤติกรรมที่กำหนดเองสำหรับความล้มเหลวในการโทรกลับ
  
  

มาเยี่ยมชมเว็บไซต์ของเราเพื่อดูรายละเอียดและเอกสารเพิ่มเติม

เยี่ยมชม WebRocketX