การวิเคราะห์ที่ครอบคลุมของคำสั่งใน AngularJs (ต้องอ่าน)

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

คำสั่งเป็นส่วนที่สำคัญที่สุดของ AngularJs ดังนั้นกรอบนี้เองมาพร้อมกับคำแนะนำเพิ่มเติม แต่ในการพัฒนาคำแนะนำเหล่านี้มักจะไม่สามารถตอบสนองความต้องการของเราได้ดังนั้นเราจึงจำเป็นต้องปรับแต่งคำแนะนำบางอย่าง จากนั้นคำสั่ง AngularJS สามารถมีการแสดงออกสี่รูปแบบในรหัส HTML:

1. ใช้เป็นองค์ประกอบ HTML ใหม่

 <helle> </สวัสดี> หรือ <สวัสดี/>

2. ใช้เป็นคุณลักษณะขององค์ประกอบ

 <div hello> </div>

3. ใช้เป็นคลาสองค์ประกอบ

 <div> </div>

4. ใช้เป็นความคิดเห็น

 <!-คำสั่ง: สวัสดี->

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

 .Directive ('Hello', function () {return {จำกัด : 'AECM', เทมเพลต: '<Button> คลิกฉัน </button>'}}))

ข้างต้นเป็นรหัสที่ง่ายที่สุดในการกำหนดคำสั่งไม่ต้องสงสัยเลยว่ามัน ในรหัสข้างต้นวิธี Directive () กำหนดคำสั่งใหม่ วิธีการมีพารามิเตอร์สองตัว 'สวัสดี' ครั้งแรกคือการระบุว่าชื่อของคำสั่งคือสวัสดีและพารามิเตอร์ที่สองคือฟังก์ชั่นที่ส่งคืนวัตถุคำสั่ง ดังนั้นในรหัสข้างต้นฟังก์ชั่นส่วนใหญ่ใช้คุณสมบัติสองคุณสมบัติเพื่อกำหนดคำสั่งสวัสดีนี้:

1. แอตทริบิวต์ข้อ จำกัด [สตริง] ส่วนใหญ่จะใช้เพื่อระบุรูปแบบของการแสดงออกที่สามารถใช้ในรหัส HTML A แสดงถึงแอตทริบิวต์ E หมายถึงองค์ประกอบ C หมายถึงคลาสและ M แสดงถึงความคิดเห็น ในสถานการณ์จริงเรามักจะใช้สองวิธีของ AE

2. แอตทริบิวต์เทมเพลต [สตริงหรือฟังก์ชั่น] ระบุมาร์กอัป HTML ที่สร้างขึ้นโดยคำสั่งหลังจากรวบรวมและเชื่อมโยงด้วย Angular แอตทริบิวต์นี้สามารถง่ายเหมือนข้อความ HTML เพียงข้อความเดียวเท่านั้นหรืออาจซับซ้อนเป็นพิเศษ เมื่อค่าของแอตทริบิวต์เป็นฟังก์ชันวิธีการส่งคืนสตริงที่แสดงถึงเทมเพลตและสามารถใช้นิพจน์ {{}} ได้

 เทมเพลต: function () {return '<button> คลิกฉัน </button>'; -

แต่โดยทั่วไปแอตทริบิวต์เทมเพลตจะถูกแทนที่ด้วย templateUrl และใช้เพื่อชี้ไปที่ที่อยู่ไฟล์ภายนอกดังนั้นเรามักจะวางเทมเพลตในไฟล์ HTML ภายนอกแล้วใช้ TemplateUrl เพื่อชี้ไปที่

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

1. แอตทริบิวต์ลำดับความสำคัญ [หมายเลข] แอตทริบิวต์นี้ใช้เพื่อระบุลำดับความสำคัญของคำแนะนำที่กำหนดเอง เมื่อมีคำสั่งมากกว่าหนึ่งคำสั่งในองค์ประกอบ DOM คุณต้องเปรียบเทียบลำดับความสำคัญของคำแนะนำ คำแนะนำที่มีลำดับความสำคัญสูงกว่าจะถูกดำเนินการก่อน ลำดับความสำคัญนี้ใช้ในการเรียงลำดับฟังก์ชั่นคอมไพล์ก่อนที่จะดำเนินการคำสั่ง ดังนั้นเราจะพูดคุยเกี่ยวกับฟังก์ชั่นคอมไพล์อย่างรอบคอบด้านล่าง

2. แอตทริบิวต์เทอร์มินัล [บูลีน] พารามิเตอร์นี้ใช้เพื่อกำหนดว่าจะหยุดคำแนะนำในองค์ประกอบปัจจุบันที่มีลำดับความสำคัญต่ำกว่าคำสั่งนี้หรือไม่ หากค่าเป็นจริงมันเป็นเรื่องปกติ มันถูกดำเนินการตามลำดับความสำคัญ หากตั้งค่าเป็นเท็จคำแนะนำในองค์ประกอบปัจจุบันที่มีลำดับความสำคัญต่ำกว่าคำสั่งนี้จะไม่ถูกดำเนินการ

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

เมื่อเราตั้งค่าเป็นเท็จมันจะมีลักษณะเช่นนี้:

-

4. แอตทริบิวต์ลิงก์ [ฟังก์ชั่น] ในตัวอย่างข้างต้นคำสั่งที่เราปรับแต่งจริง ๆ แล้วไม่มีความหมายมากนัก นี่เป็นเพียงคำสั่งที่ง่ายที่สุด มีคุณลักษณะมากมายที่เราไม่ได้กำหนดไว้ดังนั้นจึงไม่ได้ใช้มากนัก ตัวอย่างเช่นฟังก์ชั่นลิงค์นี้มีสามพารามิเตอร์: ขอบเขตองค์ประกอบและ attrs ฟังก์ชั่นลิงค์นี้ส่วนใหญ่จะใช้เพื่อเพิ่มการตรวจสอบเหตุการณ์ในองค์ประกอบ DOM, การตรวจสอบการเปลี่ยนแปลงแอตทริบิวต์โมเดลและอัปเดต DOM มันมีสามพารามิเตอร์:

1: พารามิเตอร์ขอบเขต เมื่อเราไม่ได้กำหนดคุณลักษณะขอบเขตสำหรับคำสั่งมันแสดงถึงขอบเขตของตัวควบคุมหลัก

2: พารามิเตอร์องค์ประกอบคือ JQLite (ชุดย่อยของ jQuery) ของคำสั่งเพื่อห่อองค์ประกอบ DOM หากคุณแนะนำ jQuery ก่อนที่จะแนะนำ AngularJs องค์ประกอบนี้เป็นองค์ประกอบ jQuery ไม่ใช่องค์ประกอบ jqlite เนื่องจากองค์ประกอบนี้ถูกห่อหุ้มด้วย jQuery/jqlite เราจึงไม่จำเป็นต้องใช้ $ () เพื่อห่อมันอีกต่อไปเมื่อดำเนินการ DOM

สาม: พารามิเตอร์ attrs ซึ่งมีวัตถุพารามิเตอร์มาตรฐานของแอตทริบิวต์ขององค์ประกอบที่คำสั่งตั้งอยู่

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

เมื่อเป็นจริงหมายความว่า Angular สร้างขอบเขตที่สืบทอดมาจากขอบเขตหลักสำหรับคำสั่ง

 var myapp = angular.module ('myapp', []). controller ('myctrl', ['$ scope', ฟังก์ชั่น ($ scope) {$ scope.color = 'red';}]). directive ('hello', function () {return {retrict: 'aecm' style = "พื้นหลัง-สี: {{color}}"> คลิกฉัน </button> ', ขอบเขต: จริง, ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attrs) {elements.bind (' คลิก ', ฟังก์ชั่น () {elements.css (

ที่นี่เรากำหนดแอตทริบิวต์สีสำหรับขอบเขตหลักและกำหนดให้เป็นสีแดง ในคุณลักษณะขอบเขตของ Hello Directive เราให้จริงดังนั้น Angular จึงสร้างขอบเขตที่สืบทอดมาจากขอบเขตหลักสำหรับคำสั่งนี้ จากนั้นในแอตทริบิวต์เทมเพลตเราใช้ {{}} เพื่อใช้แอตทริบิวต์สีที่สืบทอดมาจากขอบเขตพาเรนต์ดังนั้นปุ่มจะเป็นสีแดง

เมื่อ {} หมายความว่าขอบเขตที่แยกถูกสร้างขึ้นและคุณสมบัติของขอบเขตหลักจะไม่ได้รับการสืบทอด แต่บางครั้งเราก็ต้องเข้าถึงคุณสมบัติหรือวิธีการในขอบเขตหลักดังนั้นเราควรทำอย่างไร? Angular มีความคิดมานานสำหรับเรา มีสามวิธีในการจดจำการดำเนินการข้างต้น:

1: ใช้ @ เพื่อใช้การผูกทางเดียว หากเราให้ขอบเขตเฉพาะค่า {} นี้สีพื้นหลังของปุ่มในรหัสด้านบนจะเป็นสีเทา และถ้าเราต้องการใช้แอตทริบิวต์สีของขอบเขตหลักเราสามารถเขียนสิ่งนี้:

 ขอบเขต {color: '@color'}

 <hello color = "{{color}}"> </สวัสดี>

มีสองจุดที่ควรทราบที่นี่: 1. สีคุณสมบัติในขอบเขตแสดงถึงสีในนิพจน์ {{}} และทั้งสองจะต้องสอดคล้องกัน 2. ค่าของสีแอตทริบิวต์ในขอบเขตนั่นคือสีหลังจาก @แสดงถึงสีแอตทริบิวต์ในองค์ประกอบ HTML ด้านล่างดังนั้นทั้งสองจึงต้องสอดคล้องกัน หากชื่อแอตทริบิวต์ที่นี่เหมือนกับชื่อที่ใช้ในนิพจน์ {{}} ในเทมเพลตชื่อแอตทริบิวต์หลังจาก @ สามารถละเว้นและเขียนในแบบฟอร์มต่อไปนี้

 ขอบเขต {color: '@'}

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

สอง: ใช้ = เพื่อใช้การผูกสองทาง

 .Directive ('hello', function () {return {retrict: 'aecm', แทนที่: true, template: '<button style = "พื้นหลังสี: {{color}}"> คลิกฉัน </button>', ขอบเขต: {color: '='}, ลิงก์: ฟังก์ชั่น (ขอบเขต Elements.css ('พื้นหลังสี', 'blue');

 <hello color = "color"> </hello> <input type = "text" ng-model = "color"/>

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

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

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

สาม: ใช้และโทรหาวิธีการในขอบเขตหลัก

 var myapp = angular.module ('myapp', []). controller ('myctrl', ['$ scope', ฟังก์ชั่น ($ scope) {$ scope.color = 'red'; $ scope.sayhello = function () {'hello' แทนที่: จริง, แม่แบบ: '<ปุ่ม ng-click = "sayhello ()" style = "พื้นหลัง-สี: {{color}}"> คลิกฉัน </button>', ขอบเขต: {color: '=', sayhello: '&'}, ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attrs) Elements.css ('พื้นหลังสี', 'blue');

 <hello color = "color" sayshello = "sayhello ()"> </hello> <input type = "text" ng-model = "color"/>

ที่นี่เรายังมีสองสิ่งที่ควรทราบ: 1. เราไม่เพียง แต่จำเป็นต้องใช้คำสั่ง NG-click ในเทมเพลตเพื่อเชื่อมโยงวิธีการในขอบเขตหลักที่จะเรียก แต่ยังเพิ่มคุณสมบัติให้กับองค์ประกอบปัจจุบันและคุณสมบัตินี้ชี้ไปที่วิธีการของขอบเขตหลักที่จะเรียก 2. แอตทริบิวต์ขอบเขตการเรียนการสอนสามรายการ Sayshello แอตทริบิวต์องค์ประกอบปัจจุบัน Sayshello และชื่อวิธีการเหตุการณ์ที่ผูกแม่แบบจะต้องสอดคล้องกัน จากนั้นเราสามารถคลิกปุ่มและกล่องโต้ตอบจะปรากฏขึ้น

6. แอตทริบิวต์ transclude [boolean] แอตทริบิวต์นี้ใช้เพื่อให้เราสามารถระบุได้ว่าคำสั่งสามารถมีเนื้อหาใด ๆ ได้

 .Directive ('hello', function () {return {listrict: 'aecm', แทนที่: true, transclude: true, scope: {}, template: '<div ng-transclude> </div>',}})

 <์สวัสดี> สวัสดี <pan> {{color}} </span> </hello>

เมื่อค่าของมันเป็นจริงนี่คือเอาต์พุตค่าบนหน้า เมื่อเท็จหน้าจะว่างเปล่า มีสถานที่ให้ความสนใจที่นี่ซึ่งก็คือ <span> {{color}} </span> สีที่นี่คือสีในขอบเขตหลัก มันไม่ใช่แอตทริบิวต์สีของขอบเขตในคำสั่ง

7. พารามิเตอร์รวบรวม [ฟังก์ชั่น] วิธีนี้มีองค์ประกอบพารามิเตอร์สองตัวคือ attrs องค์ประกอบพารามิเตอร์แรกหมายถึงองค์ประกอบที่อยู่ในตำแหน่งและ attrs ที่สองหมายถึงรายการมาตรฐานของพารามิเตอร์ที่กำหนดไว้ในองค์ประกอบ ที่นี่เรายังมีสถานที่ที่ควรทราบ: ฟังก์ชั่นคอมไพล์ไม่สามารถเข้าถึงขอบเขตและต้องส่งคืนฟังก์ชั่นลิงค์ อย่างไรก็ตามหากไม่ได้ตั้งค่าฟังก์ชั่นคอมไพล์คุณสามารถกำหนดค่าฟังก์ชั่นลิงค์ได้ตามปกติ (ด้วยการคอมไพล์คุณไม่สามารถใช้ลิงก์ได้ฟังก์ชันลิงก์จะถูกส่งคืนโดยการรวบรวม)

 .Directive ('hello', function () {return {retrict: 'aecm', แทนที่: จริง, แปล: จริง, เทมเพลต: '<ปุ่ม ng-click = "sayhello ()" style = "พื้นหลัง-สี: {{color}}" (ขอบเขต, องค์ประกอบ, attrs) {elements.bind ('คลิก', function () {elements.css ('พื้นหลัง-สี', 'blue'); ขอบเขต $ ใช้ (ฟังก์ชั่น () {scope.color = 'Pink';})})};

ตอนนี้ลองคลิกปุ่มนี้

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

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

8. รวบรวมคำแนะนำอย่างไร

เมื่อการบูตแอปพลิเคชันเชิงมุมของเราเริ่มต้น Angular จะใช้บริการ $ Compile เพื่อสำรวจองค์ประกอบ DOM หลังจากได้รับการยอมรับคำแนะนำทั้งหมดวิธีการรวบรวมของคำสั่งจะถูกเรียกใช้ฟังก์ชันลิงก์จะถูกส่งคืนและจากนั้นฟังก์ชันลิงก์จะถูกเพิ่มลงในรายการของฟังก์ชั่นลิงก์ที่ดำเนินการในภายหลัง กระบวนการนี้เรียกว่าขั้นตอนการรวบรวม คำแนะนำเช่น NG-repeat จำเป็นต้องทำซ้ำและโคลนหลายครั้ง ฟังก์ชั่นคอมไพล์จะถูกดำเนินการเพียงครั้งเดียวในระหว่างขั้นตอนการรวบรวมและเทมเพลตเหล่านี้จะถูกคัดลอก แต่ฟังก์ชั่นลิงก์จะถูกดำเนินการสำหรับแต่ละอินสแตนซ์ที่คัดลอก ดังนั้นเราสามารถจัดการแยกต่างหากเพื่อปรับปรุงประสิทธิภาพของเรา (ประโยคนี้ไม่สมจริงเล็กน้อยฉันคัดลอกมาจากที่อื่น

9. คอนโทรลเลอร์ [สตริงหรือฟังก์ชั่น] และต้องการ [สตริงหรือสตริง []] พารามิเตอร์ เมื่อเราต้องการอนุญาตให้คำแนะนำอื่น ๆ โต้ตอบกับคำแนะนำของคุณเราจำเป็นต้องใช้ฟังก์ชั่นคอนโทรลเลอร์ เมื่อคำสั่งอื่นต้องการโต้ตอบมันจำเป็นต้องประกาศการอ้างอิงถึงอินสแตนซ์คอนโทรลเลอร์ของคำสั่งของคุณ

 .directive ('hello', function () {return {scope: {}, ต้องการ: '^เขา', คอมไพล์: ฟังก์ชั่น (องค์ประกอบ, attrs) {ฟังก์ชั่น return (ขอบเขต, องค์ประกอบ, attrs, cntins) {cntins.fn () {}}}}}) ($ scope, $ compile, $ http) {this.fn = function () {Alert ('Hello');

 <he> <สวัสดี color = "color" sayshello = "sayhello ()"> </hello> </he>

เมื่อโหลดหน้ากล่องโต้ตอบจะปรากฏขึ้น

ข้างต้นคือสิ่งที่ฉันเรียนรู้เกี่ยวกับคำแนะนำที่ฉันได้เรียนรู้ในช่วงเวลานี้ มาเขียนอันนี้กันเถอะ

การวิเคราะห์ที่ครอบคลุมของคำแนะนำใน AngularJs (ต้องอ่าน) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น