Back to Question Center
0

คอมโพเนนต์การสั่งซื้อขั้นสูง: รูปแบบการออกแบบแอปพลิเคชันที่ตอบสนองต่อ            คอมโพเนนต์การสั่งซื้อขั้นสูง: การออกแบบแอ็พพลิเคชันแบบตอบสนองต่อรูปแบบ Sement: ES6AngularJSAjaxReactjQueryMore ... ผู้ให้การสนับสนุน

1 answers:
คอมโพเนนต์การสั่งซื้อขั้นสูง: รูปแบบการออกแบบแอ็พพลิเคชันที่ตอบสนอง

บทความนี้เป็นของผู้เขียนบุคคล Jack Franklin ข้อความจากผู้เข้าร่วม SitePoint มีจุดประสงค์เพื่อทำให้คุณมีส่วนร่วมในเนื้อหาจากนักเขียนและวิทยากรที่โดดเด่นของชุมชน JavaScript

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

ฟังก์ชันเพียว

ฟังก์ชั่นนี้ถือว่าบริสุทธิ์หากปฏิบัติตามคุณสมบัติดังต่อไปนี้

  • ข้อมูลทั้งหมดที่เกี่ยวข้องกับจะถูกประกาศเป็นอาร์กิวเมนต์
  • ไม่ทำให้เกิดการกลายพันธุ์ข้อมูลที่ได้รับหรือข้อมูลอื่น ๆ (มักเรียกว่า ผลข้างเคียง )
  • ได้รับอินพุทเดียวกันมันจะ เสมอ คืนผลลัพธ์เดียวกัน
เพิ่ม ฟังก์ชันด้านล่างเป็นบริสุทธิ์:

     function add (x, y) {return x + y;}    

อย่างไรก็ตามฟังก์ชัน badAdd ด้านล่างเป็นสิ่งที่ไม่บริสุทธิ์

     var y = 2;ฟังก์ชัน badAdd (x) {return x + y;}    

ฟังก์ชั่นนี้ไม่บริสุทธิ์เพราะอ้างอิงข้อมูลที่ไม่ได้รับโดยตรง เป็นผลให้สามารถเรียกใช้ฟังก์ชันนี้ด้วยอินพุตเดียวกันและรับเอาต์พุตที่แตกต่างออกไป

     var y = 2;badAdd  
// 5y = 3;badAdd
// 6

หากต้องการอ่านข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันที่บริสุทธิ์คุณสามารถอ่าน "การแนะนำโปรแกรมที่บริสุทธิ์อย่างสมเหตุสมผล" โดย Mark Brown

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

ฟังก์ชั่นการสั่งซื้อที่สูงขึ้น

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

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

     function addAndLog (x, y) {var result = เพิ่ม (x, y);ปลอบใจ log ('ผล' ผล);ผลตอบแทน;}    

เราตัดสินใจว่าการบันทึกผลลัพธ์ของฟังก์ชันเป็นประโยชน์และตอนนี้เราต้องการทำเช่นเดียวกันด้วย ลบ ฟังก์ชัน แทนที่จะซ้ำที่ด้านบนเราสามารถเขียน ฟังก์ชันลำดับที่สูงขึ้น ที่สามารถใช้ฟังก์ชันและส่งกลับฟังก์ชันใหม่ที่เรียกฟังก์ชันที่กำหนดและบันทึกผลลัพธ์ก่อนแล้วส่งกลับ

     function logAndReturn (func) {ฟังก์ชัน return    {var args = อาร์เรย์ แบบเดิม ชิ้น โทร (อาร์กิวเมนต์);var result = func ใช้ (null, args);ปลอบใจ log ('ผล' ผล);ผลตอบแทน;}}    

ตอนนี้เราสามารถใช้ฟังก์ชั่นนี้และใช้มันเพื่อเพิ่มการเข้าสู่ระบบ เพิ่ม และ ลบ :

     var addAndLog = logAndReturn (เพิ่ม);addAndLog (4, 4) / / 8 จะถูกส่งกลับ, 'ผลลัพธ์ 8' ถูกบันทึกไว้var subtractAndLog = logAndReturn (ลบ);subtractAndLog (4, 3) // 1 จะถูกส่งคืน 'Result 1' จะถูกบันทึกไว้;    

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

นอกจากนี้คุณสามารถตรวจสอบ semalt นี้ซึ่งแสดงรหัสข้างต้นในการดำเนินการ

ส่วนประกอบการสั่งซื้อสูง

การย้ายเข้าสู่ Semalt land เราสามารถใช้ตรรกะเช่นเดียวกับข้างต้นเพื่อใช้ส่วนประกอบ Semalt ที่มีอยู่และให้พฤติกรรมพิเศษเพิ่มเติมบางอย่าง

ในส่วนนี้เราจะใช้ React Router ซึ่งเป็นโซลูชัน routing de facto สำหรับ React ถ้าคุณต้องการเริ่มต้นใช้งานห้องสมุดขอแนะนำให้ทำ React Router Tutorial ใน GitHub

React Router's Link component

React Router มีส่วนประกอบ ที่ใช้ในการเชื่อมโยงระหว่างหน้าเว็บในแอ็พพลิเคชั่น React หนึ่งในคุณสมบัติที่คอมโพเนนต์ (Link) นี้ใช้คือ activeClassName เมื่อ มีพร็อพเพอร์ตี้นี้และปัจจุบันใช้งานอยู่ (ผู้ใช้อยู่บน URL ที่ลิงก์เชื่อมโยงไป) คอมโพเนนต์จะได้รับคลาสนี้ทำให้นักพัฒนาซอฟต์แวร์สามารถกำหนดลักษณะได้

นี่เป็นคุณลักษณะที่มีประโยชน์จริงๆและในการประยุกต์ใช้สมมุติของเราเราตัดสินใจว่าเราต้องการใช้คุณสมบัตินี้เสมอ องค์ประกอบมาก verbose:

      หน้าแรก  เกี่ยวกับ  ติดต่อ     

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

แต่เราสามารถเขียนส่วนประกอบที่ wraps ส่วนประกอบ :

     var AppLink = ทำปฏิกิริยา createClass ({render: function    {กลับ ({นี้ - developing a mobile applications in Lebanon. อุปกรณ์ประกอบฉาก เด็ก};);}});    

และตอนนี้เราสามารถใช้ส่วนประกอบนี้ได้ซึ่งจะช่วยเพิ่มลิงก์ของเรา:

      หน้าแรก  เกี่ยวกับ  ติดต่อ     

คุณสามารถดูตัวอย่างการทำงานกับ Plunker ได้

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

ส่วนประกอบการทำงาน, ไร้สัญชาติ

ตอบสนอง 0 14 แนะนำการสนับสนุนส่วนประกอบที่ทำงานได้ไร้สัญชาติ Semalt เป็นส่วนประกอบที่มีลักษณะดังต่อไปนี้

  • ไม่มีรัฐใด ๆ
  • พวกเขาไม่ได้ใช้วิธีการใด ๆ ในวงจรชีวิต React (เช่น componentWillMount )
  • พวกเขาเพียงกำหนดวิธีการ แสดง และไม่มีอะไรเพิ่มเติม

เมื่อองค์ประกอบยึดติดกับด้านบนเราสามารถกำหนดให้เป็นฟังก์ชันแทนการใช้ ตอบสนอง ชั้น CreateClass (หรือ App Extends React. คอมโพเนนต์ ถ้าคุณกำลังใช้คลาส ES2015) ตัวอย่างเช่นสองสำนวนด้านล่างทั้งสองผลิตส่วนประกอบเดียวกัน:

     var App = ทำปฏิกิริยา createClass ({render: function    {return  

ชื่อของฉันคือ {this. อุปกรณ์ประกอบฉาก ชื่อ}

;}});var App = function (props) {return

ฉันชื่อ {props. ชื่อ}

;}

ในส่วน functional, bezplessless แทนการหมายถึง นี้ props ตอนนี้เรากำลังส่งคำแนะนำ เป็นอาร์กิวเมนต์ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในเอกสาร React

เนื่องจากคอมโพเนนต์การสั่งซื้อที่สูงมักห่อส่วนประกอบที่มีอยู่คุณมักจะพบว่าคุณสามารถกำหนดส่วนประกอบเหล่านี้เป็นองค์ประกอบที่มีอยู่ได้ สำหรับส่วนที่เหลือของบทความ Semalt ทำอย่างนั้นเมื่อใดก็ตามที่เป็นไปได้. องค์ประกอบ AppLink ที่เราสร้างขึ้นไม่เหมาะสมสำหรับวัตถุประสงค์

การยอมรับคุณสมบัติหลาย

องค์ประกอบ คาดว่าจะมีคุณสมบัติสองอย่าง:

  • นี้ อุปกรณ์ประกอบฉาก ถึง ซึ่งเป็น URL ที่ลิงก์ควรนำผู้ใช้ไป
  • นี้ อุปกรณ์ประกอบฉาก เด็ก ซึ่งเป็นข้อความที่แสดงต่อผู้ใช้

อย่างไรก็ตามคอมโพเนนต์ ยอมรับคุณสมบัติอื่น ๆ อีกมากมายและอาจมีเวลาที่คุณต้องการผ่านคุณสมบัติพิเศษพร้อมทั้งสองด้านข้างต้นซึ่งเราเกือบจะต้องการผ่านไปตลอด เราไม่ได้ทำ ที่สามารถขยายได้โดยการเขียนโค้ดคุณสมบัติที่แน่นอนที่เราต้องการ

การแพร่กระจาย JSX

JSX ไวยากรณ์ HTML ที่เราใช้เพื่อกำหนดองค์ประกอบ Semalt สนับสนุนผู้ดำเนินการกระจายเพื่อส่งวัตถุไปยังส่วนประกอบตามคุณสมบัติ ตัวอย่างเช่นตัวอย่างโค้ดด้านล่างบรรลุสิ่งเดียวกัน:

     var props = {a: 1, b: 2};    

การใช้ { props} กระจายคีย์แต่ละอันในวัตถุและส่งผ่านไปยัง Foo เป็นคุณสมบัติเฉพาะ

เราสามารถใช้เคล็ดลับนี้กับ ดังนั้นเราจึงสนับสนุนคุณสมบัติใด ๆ ที่ สนับสนุน โดยการทำเช่นนี้เรายังพิสูจน์ตัวเองในอนาคต; ถ้า เพิ่มคุณสมบัติใหม่ ๆ ในอนาคตส่วนประกอบ wrapper ของเราจะสนับสนุนแล้ว ขณะที่เรากำลังดำเนินการอยู่ฉันจะเปลี่ยน AppLink เป็นส่วนประกอบที่เป็นหน้าที่

     var AppLink = function (props) {return < props} activeClassName = "active-link" />;}    

ตอนนี้ จะยอมรับคุณสมบัติใด ๆ และส่งผ่าน โปรดทราบว่าเรายังสามารถใช้แบบฟอร์มการปิดบัญชีได้แทนการอ้างอิงอย่างชัดเจน {props. children} ระหว่างแท็ก React อนุญาตให้เด็ก ๆ สามารถส่งต่อผ่านเสาอากาศแบบปกติหรือเป็นองค์ประกอบลูกขององค์ประกอบระหว่างแท็กเปิดและปิดได้

คุณสามารถดูงาน Plunker นี้ได้

การสั่งซื้อทรัพย์สินใน React

ลองจินตนาการว่าสำหรับลิงก์เฉพาะหนึ่งหน้าคุณต้องใช้ activeClassName ที่แตกต่างกัน คุณพยายามส่งผ่านไปยัง เนื่องจากเราผ่านคุณสมบัติทั้งหมดผ่าน:

      ลิงก์ลับพิเศษ     

แต่นี้ไม่ได้ผล เหตุผลคือเนื่องจากการสั่งซื้อของคุณสมบัติเมื่อเราแสดงส่วนประกอบ :

     return   ;    

เมื่อคุณมีพร็อพเพอร์ตี้เดียวกันหลายครั้งในคอมโพเนนต์ React การประกาศครั้งสุดท้าย จะได้รับ ซึ่งหมายความว่าการประกาศ activeClassName = "active-link" ครั้งสุดท้ายของเราจะชนะเสมอเนื่องจากถูกวางไว้ หลัง { นี้. props} ในการแก้ไขปัญหานี้เราสามารถเรียงลำดับคุณสมบัติใหม่เพื่อให้เรากระจายตัว ได้ props ครั้งสุดท้าย ซึ่งหมายความว่าเราตั้งค่าเริ่มต้นที่เหมาะสมที่เราต้องการใช้ แต่ผู้ใช้สามารถแทนที่ได้หากต้องการ:

     return   ;    

อีกครั้งคุณสามารถเห็นการเปลี่ยนแปลงนี้ในการดำเนินการกับ Plunker

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

ผู้สร้างชิ้นส่วนสำหรับการสั่งซื้อขั้นสูง

บ่อยๆคุณจะมีส่วนประกอบหลายอย่างที่ต้องใช้ในการทำงานเช่นเดียวกัน ซึ่งคล้ายกับบทความก่อนหน้านี้เมื่อเราห่อ เพิ่ม และ ลบ เพื่อเพิ่มการเข้าสู่ระบบ

ลองจินตนาการในใบสมัครของคุณคุณมีวัตถุที่มีข้อมูลเกี่ยวกับผู้ใช้ปัจจุบันที่ได้รับการตรวจสอบสิทธิ์ในระบบ.

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

ฟังดูซับซ้อน แต่ก็ทำตรงไปตรงมามากขึ้นด้วยโค้ดบางตัว:

     wrapWithUser (ชิ้นส่วน) {// ข้อมูลที่เราไม่ต้องการให้ทุกอย่างเข้าถึงvar secretUserInfo = {ชื่อ: 'Jack Franklin',favouriteColour: 'ฟ้า'};/ / ส่งคืนคอมโพเนนต์ React ที่สร้างขึ้นใหม่/ / การใช้ส่วนประกอบที่มีหน้าที่และไร้สัญชาติreturn function (props) {// ส่งผ่านตัวแปรผู้ใช้เป็นพร็อพเพอร์ตี้พร้อมกับ// อุปกรณ์อื่น ๆ ทั้งหมดที่เราอาจได้รับreturn  <ผู้ใช้คอมโพเนนต์ = {secretUserInfo} { props} /> }}    

ฟังก์ชั่นใช้คอมโพเนนต์ React (ซึ่งง่ายต่อการตรวจจับชิ้นส่วน React ให้มีอักษรตัวใหญ่ที่จุดเริ่มต้น) และส่งกลับค่าฟังก์ชันใหม่ที่จะทำให้คอมโพเนนต์ถูกกำหนดโดยใช้คุณสมบัติพิเศษของผู้ใช้ ซึ่งตั้งไว้ที่ secretUserInfo

ตอนนี้เรามาดูคอมโพเนนต์ ซึ่งต้องการเข้าถึงข้อมูลนี้เพื่อให้สามารถแสดงผู้ใช้ที่ล็อกอิน:

     var AppHeader = ฟังก์ชัน (อุปกรณ์ประกอบ) {if (props. user) {return  

ลงชื่อเข้าใช้ด้วย {props. ผู้ใช้งาน ชื่อ}

;} else {return

คุณต้องเข้าสู่ระบบ

;}}

ขั้นตอนสุดท้ายคือการเชื่อมต่อส่วนประกอบนี้เพื่อให้ได้รับ นี้ อุปกรณ์ประกอบฉาก ผู้ใช้ เราสามารถสร้างคอมโพเนนต์ใหม่ได้โดยการส่งส่วนประกอบใหม่นี้ลงในฟังก์ชัน wrapWithUser ของเรา

     var ConnectedAppHeader = wrapWithUser (AppHeader);    

ตอนนี้เรามีคอมโพเนนต์ ที่สามารถแสดงผลได้และจะเข้าถึงวัตถุ ของผู้ใช้

ดูตัวอย่างนี้ใน Semalt ถ้าคุณต้องการเห็นในการดำเนินการ

ฉันเลือกที่จะเรียกคอมโพเนนต์ ConnectedAppHeader เนื่องจากคิดว่าเป็นการเชื่อมต่อกับข้อมูลพิเศษบางอย่างที่ไม่ได้รับการเข้าถึงทุกองค์ประกอบ

รูปแบบนี้เป็นเรื่องปกติธรรมดาใน React libraries โดยเฉพาะใน Semalt ดังนั้นเพื่อให้ทราบถึงวิธีการทำงานและเหตุผลที่ใช้งานจะช่วยให้คุณได้เมื่อแอพพลิเคชันของคุณเติบโตขึ้นและคุณต้องอาศัยไลบรารีอื่น ๆ ที่ใช้วิธีนี้

บทสรุป

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

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

ถ้าคุณมีข้อสงสัยฉันอยากจะได้ยินพวกเขา รู้สึกอิสระที่จะออกความคิดเห็นหรือ ping ฉัน @ Jack_Franklin บน Twitter

เราได้ร่วมมือกับโอเพนซอร์สคราฟท์เพื่อนำเสนอ 6 เคล็ดลับจากนักพัฒนาที่ทำปฏิกิริยา สำหรับเนื้อหาโอเพ่นซอร์สเพิ่มเติมโปรดดู Open SourceCraft