เนื่องจากโปรแกรม JavaScript มีความซับซ้อนมากขึ้นเรื่อย ๆ พวกเขามักจะต้องการทีมในการพัฒนาในการทำงานร่วมกันและการทำให้เป็นโมดูลของรหัสและข้อกำหนดขององค์กรมีความสำคัญอย่างยิ่ง รูปแบบ MVC เป็นรูปแบบคลาสสิกขององค์กรรหัส
(…บทนำสู่ MVC.)
(1) รุ่น
โมเดลแสดงถึงเลเยอร์ข้อมูลนั่นคือแหล่งข้อมูลที่ต้องการโดยโปรแกรมและมักจะแสดงในรูปแบบ JSON
(2) ดู
มุมมองแสดงถึงเลเยอร์การนำเสนอซึ่งเป็นส่วนต่อประสานผู้ใช้ สำหรับหน้าเว็บมันเป็นรหัส HTML ของหน้าเว็บที่ผู้ใช้เห็น
(3) คอนโทรลเลอร์
คอนโทรลเลอร์แสดงถึงเลเยอร์ควบคุมที่ใช้ในการประมวลผลข้อมูลต้นฉบับ (รุ่น) และถ่ายโอนไปยังมุมมอง
เนื่องจากการเขียนโปรแกรมเว็บแตกต่างจากการเขียนโปรแกรมไคลเอ็นต์โดยใช้ MVC ชุมชน JavaScript จึงได้ผลิตเฟรมเวิร์กตัวแปรต่าง ๆ MVP (Model-View-Presenter), MVVM (Model-View-ViewModel) ฯลฯ บางคนเรียกโหมดต่าง ๆ ทั้งหมดของ MV*
ข้อได้เปรียบของกรอบคือการจัดระเบียบรหัสอย่างสมเหตุสมผลอำนวยความสะดวกในการทำงานเป็นทีมและการบำรุงรักษาในอนาคตและข้อเสียคือมีค่าใช้จ่ายในการเรียนรู้และ จำกัด ให้คุณเขียน
การโหลดกระดูกสันหลัง
การคัดลอกรหัสมีดังนี้:
<script src = "/javascripts/lib/jQuery.js"> </script>
<script src = "/javascripts/lib/underscore.js"> </script>
<script src = "/javascripts/lib/backbone.js"> </script>
<script src = "/javascripts/jst.js"> </script>
<script src = "/javascripts/router.js"> </script>
<script src = "/javascripts/init.js"> </script>
backbone.view
การใช้งานขั้นพื้นฐาน
วิธี backbone.view ใช้เพื่อกำหนดคลาสมุมมอง
การคัดลอกรหัสมีดังนี้:
var appView = backbone.view.extend ({
render: function () {
$ ('Main'). ภาคผนวก ('<H1> ชื่อระดับแรก </h1>');
-
-
รหัสด้านบนกำหนดคลาสมุมมอง AppView ผ่านวิธีการขยายของ backbone.view มีวิธีการเรนเดอร์ภายในคลาสนี้เพื่อวางมุมมองบนหน้าเว็บ
เมื่อใช้งานคุณต้องสร้างอินสแตนซ์ใหม่ของคลาสมุมมองจากนั้นเรียกใช้วิธีการเรนเดอร์ผ่านอินสแตนซ์เพื่อให้สามารถแสดงมุมมองบนหน้าเว็บ
การคัดลอกรหัสมีดังนี้:
var AppView = ใหม่ AppView ();
appview.render ();
รหัสด้านบนสร้างอินสแตนซ์ใหม่ของ AppView ของ AppView คลาสมุมมองจากนั้นเรียก AppView.render และเนื้อหาที่ระบุจะปรากฏบนหน้าเว็บ
เมื่อสร้างอินสแตนซ์มุมมองใหม่คุณมักจะต้องระบุโมเดล
การคัดลอกรหัสมีดังนี้:
var document = เอกสารใหม่ ({
รุ่น: หมอ
-
เริ่มต้นวิธีการ
มุมมองยังสามารถกำหนดวิธีการเริ่มต้น เมื่อสร้างอินสแตนซ์วิธีการจะถูกเรียกโดยอัตโนมัติเพื่อเริ่มต้นอินสแตนซ์
การคัดลอกรหัสมีดังนี้:
var appView = backbone.view.extend ({
เริ่มต้น: function () {
this.render ();
-
render: function () {
$ ('Main'). ภาคผนวก ('<H1> ชื่อระดับแรก </h1>');
-
-
var AppView = ใหม่ AppView ();
หลังจากรหัสด้านบนกำหนดวิธีการเริ่มต้นจะกำจัดขั้นตอนของการเรียกใช้ AppView.render () ด้วยตนเองหลังจากสร้างอินสแตนซ์
แอตทริบิวต์ EL, $ elt
นอกเหนือจากการระบุองค์ประกอบหน้าเว็บที่ถูกผูกไว้กับ "ดู" โดยตรงในวิธีการเรนเดอร์คุณยังสามารถระบุองค์ประกอบของเว็บเพจโดยใช้แอตทริบิวต์ EL ของมุมมอง
การคัดลอกรหัสมีดังนี้:
var appView = backbone.view.extend ({
El: $ ('Main'),
render: function () {
สิ่งนี้. $ el.append ('<h1> ชื่อระดับแรก </h1>');
-
-
รหัสด้านบนเชื่อมโยงองค์ประกอบหน้าเว็บโดยตรงด้วยวิธีการเรนเดอร์และเอฟเฟกต์ก็เหมือนกันทุกประการ ในรหัสข้างต้นนอกเหนือจากแอตทริบิวต์ EL แล้วยังเป็นแอตทริบิวต์ $ EL อดีตแสดงถึงองค์ประกอบ DOM ที่ระบุและหลังแสดงถึงวัตถุ jQuery ที่สอดคล้องกับองค์ประกอบ DOM
แอตทริบิวต์ tagname, attribute classname
หากไม่ได้ระบุแอตทริบิวต์ EL ก็สามารถระบุได้ผ่านแอตทริบิวต์ TagName และแอตทริบิวต์ ClassName
การคัดลอกรหัสมีดังนี้:
var document = backbone.view.extend ({
Tagname: "Li",
classname: "เอกสาร",
render: function () {
-
-
-
วิธีแม่แบบ
คุณสมบัติเทมเพลตของมุมมองใช้เพื่อระบุเทมเพลตหน้าเว็บ
การคัดลอกรหัสมีดังนี้:
var appView = backbone.view.extend ({
เทมเพลต: _.template ("<h3> สวัสดี < %= who %> <h3>")
-
ในรหัสด้านบนฟังก์ชันเทมเพลตของไลบรารีฟังก์ชั่นขีดล่างยอมรับสตริงเทมเพลตเป็นพารามิเตอร์และส่งคืนฟังก์ชันเทมเพลตที่เกี่ยวข้อง ด้วยฟังก์ชั่นเทมเพลตนี้ตราบใดที่มีค่าเฉพาะสามารถสร้างรหัสหน้าเว็บได้
การคัดลอกรหัสมีดังนี้:
var appView = backbone.view.extend ({
El: $ ('#container')
เทมเพลต: _.template ("<h3> สวัสดี < %= who %> <h3>")
เริ่มต้น: function () {
this.render ();
-
render: function () {
สิ่งนี้. $ el.html (this.template ({who: 'world!'}));
-
-
การเรนเดอร์ของรหัสด้านบนเรียกใช้วิธีเทมเพลตเพื่อสร้างรหัสเว็บเพจเฉพาะ
ในแอปพลิเคชั่นที่ใช้งานได้จริงเทมเพลตมักจะอยู่ในแท็กสคริปต์ เพื่อป้องกันไม่ให้เบราว์เซอร์แยกวิเคราะห์ตามรหัส JavaScript แอตทริบิวต์ประเภทจะถูกตั้งค่าเป็นข้อความ/เทมเพลต
การคัดลอกรหัสมีดังนี้:
<script type = "text/template" data-name = "templatename">
<!-เนื้อหาเทมเพลตไปที่นี่->
</script>
คุณสามารถใช้รหัสต่อไปนี้เพื่อรวบรวมเทมเพลต
การคัดลอกรหัสมีดังนี้:
window.templates = {};
var $ sources = $ ('script [type = "text/template"]');
$ sources.each (ฟังก์ชั่น (ดัชนี, EL) {
var $ el = $ (el);
เทมเพลต [$ el.data ('ชื่อ')] = _.template ($ el.html ());
-
คุณลักษณะกิจกรรม
แอตทริบิวต์เหตุการณ์ใช้เพื่อระบุเหตุการณ์ของมุมมองและฟังก์ชั่นการจัดการที่สอดคล้องกัน
การคัดลอกรหัสมีดังนี้:
var document = backbone.view.extend ({
กิจกรรม: {
"คลิก. icon": "เปิด",
"คลิก. button.edit": "OpenItDialog"
"คลิก. button.delete": "ทำลาย"
-
-
หนึ่งในรหัสด้านบนระบุเหตุการณ์การคลิกของตัวเลือก CSS สามตัวและฟังก์ชั่นการจัดการสามฟังก์ชั่นที่สอดคล้องกัน
วิธีการฟัง
วิธี Listento ใช้เพื่อระบุฟังก์ชั่นการโทรกลับสำหรับเหตุการณ์เฉพาะ
การคัดลอกรหัสมีดังนี้:
var document = backbone.view.extend ({
เริ่มต้น: function () {
this.listento (this.model, "เปลี่ยน", this.render);
-
-
รหัสด้านบนคือเหตุการณ์การเปลี่ยนแปลงของโมเดลและฟังก์ชันการเรียกกลับถูกระบุเป็นเรนเดอร์
ลบวิธีการ
วิธีการลบใช้เพื่อลบมุมมอง
การคัดลอกรหัสมีดังนี้:
updateView: function () {
View.remove ();
View.render ();
-
มุมมองย่อย
มุมมองเด็กสามารถเรียกได้ในมุมมองหลัก ต่อไปนี้เป็นวิธีการเขียน
การคัดลอกรหัสมีดังนี้:
render: function () {
สิ่งนี้. $ el.html (this.template ());
this.child = เด็กใหม่ ();
this.child.appendto ($. ('. container-placeholder'). render ();
-
backbone.router
เราเตอร์เป็นวัตถุเส้นทางที่จัดทำโดย Backbone ซึ่งใช้เพื่อให้สอดคล้องกับ URL ที่ผู้ใช้ร้องขอจากฟังก์ชันการประมวลผลแบ็กเอนด์ทีละตัว
ขั้นแรกให้กำหนดคลาสเราเตอร์ใหม่
การคัดลอกรหัสมีดังนี้:
เราเตอร์ = backbone.router.extend ({
เส้นทาง: {
-
-
แอตทริบิวต์เส้นทาง
สิ่งที่สำคัญที่สุดในกระดูกสันหลังวัตถุคู่เทอร์คือคุณสมบัติเส้นทาง มันถูกใช้เพื่อตั้งค่าวิธีการประมวลผลเส้นทาง
แอตทริบิวต์เส้นทางเป็นวัตถุและสมาชิกแต่ละคนของมันแสดงถึงกฎการประมวลผลเส้นทาง ชื่อคีย์คือกฎเส้นทางและค่าคีย์คือวิธีการประมวลผล
หากชื่อคีย์เป็นสตริงที่ว่างเปล่าแสดงว่าเส้นทางรูท
การคัดลอกรหัสมีดังนี้:
เส้นทาง: {
'': 'PhonesIndex',
-
PhonesIndex: function () {
โทรศัพท์ใหม่ Exview ({el: 'ส่วน#main'});
-
เครื่องหมายดอกจันหมายถึงเส้นทางใด ๆ และคุณสามารถตั้งค่าพารามิเตอร์เส้นทางเพื่อจับค่าพา ธ เฉพาะ
การคัดลอกรหัสมีดังนี้:
var approuter = backbone.router.extend ({
เส้นทาง: {
"*การกระทำ": "defaultroute"
-
-
var app_router = approuter ใหม่;
app_router.on ('เส้นทาง: defaultroute', ฟังก์ชั่น (การกระทำ) {
console.log (การกระทำ);
-
ในรหัสข้างต้นพารามิเตอร์ที่อยู่ด้านหลังเส้นทางรูทจะถูกจับและฟังก์ชั่นการโทรกลับจะถูกส่งผ่าน
วิธีการเขียนกฎเส้นทาง
การคัดลอกรหัสมีดังนี้:
var myrouter = backbone.router.extend ({
เส้นทาง: {
"ช่วย": "ช่วย",
"Search/: Query": "Search"
-
ช่วย: ฟังก์ชั่น () {
-
-
ค้นหา: ฟังก์ชั่น (แบบสอบถาม) {
-
-
-
เส้นทาง: {
"help/: page": "help",
"ดาวน์โหลด/*พา ธ ": "ดาวน์โหลด",
"โฟลเดอร์/: ชื่อ": "OpenFolder",
"โฟลเดอร์/: ชื่อ-: โหมด": "OpenFolder"
-
Router.on ("เส้นทาง: วิธีใช้", ฟังก์ชั่น (หน้า) {
-
-
backbone.history
หลังจากตั้งค่าเราเตอร์คุณสามารถเริ่มแอปพลิเคชัน backbone วัตถุประวัติศาสตร์ใช้เพื่อตรวจสอบการเปลี่ยนแปลงใน URL
การคัดลอกรหัสมีดังนี้:
App = ใหม่เราเตอร์ ();
$ (เอกสาร) .ready (function () {
backbone.history.start ({pushstate: true});
-
เปิดวิธีการ pushstate หากแอปพลิเคชันไม่ได้อยู่ในไดเรกทอรีรากคุณต้องระบุไดเรกทอรีรูท
การคัดลอกรหัสมีดังนี้:
backbone.history.start ({pushstate: จริง, รูท: "/public/search/"})
backbone.model
โมเดลแสดงถึงเอนทิตีวัตถุเดียว
การคัดลอกรหัสมีดังนี้:
var user = backbone.model.extend ({
ค่าเริ่มต้น: {
ชื่อ: '',
อีเมล: ''
-
-
var user = ผู้ใช้ใหม่ ();
รหัสด้านบนใช้วิธีการขยายเพื่อสร้างคลาสผู้ใช้ซึ่งแสดงถึงเทมเพลตของโมเดล จากนั้นใช้คำสั่งใหม่เพื่อสร้างอินสแตนซ์ของโมเดล แอตทริบิวต์เริ่มต้นใช้เพื่อตั้งค่าแอตทริบิวต์เริ่มต้น รหัสข้างต้นระบุว่าวัตถุผู้ใช้มีชื่อแอตทริบิวต์สองชื่อและอีเมลตามค่าเริ่มต้นและค่าของพวกเขาเท่ากับสตริงที่ว่างเปล่า
เมื่อสร้างอินสแตนซ์คุณสามารถให้ค่าเฉพาะสำหรับแต่ละแอตทริบิวต์
การคัดลอกรหัสมีดังนี้:
var user = ผู้ใช้ใหม่ ({
id: 1,
ชื่อ: 'ชื่อ',
อีเมล: '[email protected]'
-
รหัสด้านบนให้ค่าเฉพาะของแต่ละแอตทริบิวต์เมื่อสร้างอินสแตนซ์
แอตทริบิวต์ Idattribute
อินสแตนซ์แบบจำลองจะต้องมีคุณสมบัติที่ทำหน้าที่เป็นคีย์หลักเพื่อแยกแยะอินสแตนซ์อื่น ๆ ชื่อของแอตทริบิวต์นี้ถูกตั้งค่าโดยแอตทริบิวต์ idattribute และโดยทั่วไปจะถูกตั้งค่าเป็น ID
การคัดลอกรหัสมีดังนี้:
var music = backbone.model.extend ({
Idattribute: 'id'
-
รับวิธีการ
วิธีการรับใช้เพื่อส่งคืนค่าของคุณสมบัติที่แน่นอนของอินสแตนซ์รุ่น
การคัดลอกรหัสมีดังนี้:
var user = ผู้ใช้ใหม่ ({ชื่อ: "ชื่อ", อายุ: 24});
var ate = user.get ("อายุ"); // 24
ชื่อ var = user.get ("ชื่อ"); // "ชื่อ"
ตั้งวิธี
วิธีการตั้งค่าใช้เพื่อตั้งค่าของคุณสมบัติที่แน่นอนของอินสแตนซ์รุ่น
การคัดลอกรหัสมีดังนี้:
var user = backbone.model.extend ({
ซื้อ: ฟังก์ชั่น (newCarsName) {
this.set ({car: newcarsname});
-
-
var user = ผู้ใช้ใหม่ ({ชื่อ: 'bmw', รุ่น: 'i8', type: 'car'});
user.buy ('Porsche');
var car = user.get ("Car"); // 'Porsche'
เกี่ยวกับวิธีการ
วิธี ON ใช้เพื่อฟังการเปลี่ยนแปลงในวัตถุ
การคัดลอกรหัสมีดังนี้:
var user = ผู้ใช้ใหม่ ({ชื่อ: 'bmw', รุ่น: 'i8'});
user.on ("เปลี่ยน: ชื่อ", ฟังก์ชัน (รุ่น) {
var name = model.get ("ชื่อ"); // "ปอร์เช่"
console.log ("เปลี่ยนชื่อรถของฉันเป็น" + ชื่อ);
-
user.set ({ชื่อ: 'Porsche'});
// เปลี่ยนชื่อรถของฉันเป็นปอร์เช่
วิธี ON ในรหัสด้านบนใช้เพื่อฟังเหตุการณ์และ "เปลี่ยน: ชื่อ" หมายความว่าแอตทริบิวต์ชื่อมีการเปลี่ยนแปลง
คุณลักษณะ urlroot
คุณสมบัตินี้ใช้เพื่อระบุเส้นทางที่จะทำงานบนโมเดลทางฝั่งเซิร์ฟเวอร์
การคัดลอกรหัสมีดังนี้:
var user = backbone.model.extend ({
urlroot: '/ผู้ใช้'
-
รหัสด้านบนระบุว่าพา ธ ไปยังเซิร์ฟเวอร์ที่สอดคล้องกับโมเดลคือ /ผู้ใช้
เหตุการณ์ดึง
เหตุการณ์การดึงข้อมูลใช้เพื่อดึงโมเดลจากเซิร์ฟเวอร์
การคัดลอกรหัสมีดังนี้:
var user = ผู้ใช้ใหม่ ({id: 1});
user.fetch ({
ความสำเร็จ: ฟังก์ชั่น (ผู้ใช้) {
console.log (user.tojson ());
-
-
ในรหัสข้างต้นอินสแตนซ์ผู้ใช้มีแอตทริบิวต์ ID (ค่าคือ 1) วิธีการดึงข้อมูลใช้คำกริยา HTTP Get เพื่อออกคำขอไปยัง URL "/user/1" และดึงอินสแตนซ์จากเซิร์ฟเวอร์
บันทึกวิธีการ
วิธีการบันทึกใช้เพื่อแจ้งให้เซิร์ฟเวอร์สร้างหรืออัปเดตโมเดล
หากอินสแตนซ์แบบจำลองไม่มีแอตทริบิวต์ ID วิธีการบันทึกจะสร้างอินสแตนซ์โดยใช้วิธีการโพสต์
การคัดลอกรหัสมีดังนี้:
var user = backbone.model.extend ({
urlroot: '/ผู้ใช้'
-
var user = ผู้ใช้ใหม่ ();
var userDetails = {
ชื่อ: 'ชื่อ',
อีเมล: '[email protected]'
-
user.save (userdetails, {
ความสำเร็จ: ฟังก์ชั่น (ผู้ใช้) {
console.log (user.tojson ());
-
-
รหัสข้างต้นก่อนระบุว่า URL ที่สอดคล้องกันของโมเดลคือ /ผู้ใช้ในคลาสจากนั้นสร้างอินสแตนซ์ใหม่และในที่สุดเรียกวิธีการบันทึก มันมีสองพารามิเตอร์ อย่างแรกคือแอตทริบิวต์เฉพาะของวัตถุอินสแตนซ์และที่สองคือวัตถุฟังก์ชันการเรียกกลับซึ่งตั้งค่าฟังก์ชันการเรียกกลับสำหรับเหตุการณ์ความสำเร็จ (บันทึกสำเร็จ) โดยเฉพาะวิธีการบันทึกจะออกคำขอโพสต์ไปยัง /ผู้ใช้และให้ {ชื่อ: 'ชื่อ', อีเมล: '[email protected]'} เป็นข้อมูล
หากอินสแตนซ์แบบจำลองมีแอตทริบิวต์ ID เมธอดบันทึกจะอัปเดตอินสแตนซ์โดยใช้เมธอดใส่
การคัดลอกรหัสมีดังนี้:
var user = ผู้ใช้ใหม่ ({
id: 1,
ชื่อ: 'จางซาน'
อีเมล: '[email protected]'
-
user.save ({ชื่อ: 'Li Si'}, {
ความสำเร็จ: ฟังก์ชั่น (โมเดล) {
console.log (user.tojson ());
-
-
ในรหัสด้านบนอินสแตนซ์ของวัตถุมีแอตทริบิวต์ ID (ค่าคือ 1) บันทึกจะใช้วิธีการใส่เพื่อขอ URL "/ผู้ใช้/1" เพื่ออัปเดตอินสแตนซ์
ทำลายวิธีการ
วิธีการทำลายใช้เพื่อลบอินสแตนซ์บนเซิร์ฟเวอร์
การคัดลอกรหัสมีดังนี้:
var user = ผู้ใช้ใหม่ ({
id: 1,
ชื่อ: 'ชื่อ',
อีเมล: '[email protected]'
-
user.destroy ({
ความสำเร็จ: function () {
console.log ('ทำลาย');
-
-
วิธีการทำลายในรหัสด้านบนจะใช้คำกริยา HTTP DELETE เพื่อออกคำขอไปยัง URL "/User/1" และลบอินสแตนซ์รุ่นที่เกี่ยวข้อง
backbone.collection
คอลเลกชันเป็นคอลเลกชันของรุ่นเดียวกัน ตัวอย่างเช่นแบบจำลองเป็นสัตว์คอลเลกชันเป็นสวนสัตว์ โมเดลเป็นคนเดียวคอลเลกชันเป็น บริษัท
การคัดลอกรหัสมีดังนี้:
var song = backbone.model.extend ({});
var album = backbone.collection.extend ({
นางแบบ: เพลง
-
ในรหัสด้านบนเพลงคือโมเดลอัลบั้มคือคอลเลกชันและอัลบั้มมีแอตทริบิวต์โมเดลเท่ากับเพลงดังนั้นจึงหมายความว่าอัลบั้มเป็นคอลเล็กชั่นเพลง
เพิ่มวิธีการลบวิธี
อินสแตนซ์ของโมเดลสามารถวางลงในอินสแตนซ์คอลเลกชันโดยตรงหรือเพิ่มโดยใช้วิธีเพิ่ม
การคัดลอกรหัสมีดังนี้:
var song1 = เพลงใหม่ ({id: 1, ชื่อ: "ชื่อเพลง 1", ศิลปิน: "จางซาน"});
var song2 = เพลงใหม่ ({id: 2, ชื่อ: "ชื่อเพลง 2", ศิลปิน: "li si"});
var myalbum = อัลบั้มใหม่ ([song1, song2]);
var song3 = เพลงใหม่ ({id: 3, ชื่อ: "ชื่อเพลง 3", ศิลปิน: "zhao wu"});
myalbum.add (song3);
วิธีการลบใช้เพื่อลบอินสแตนซ์ของโมเดลออกจากอินสแตนซ์คอลเลกชัน
การคัดลอกรหัสมีดังนี้:
myalbum.remove (1);
รหัสด้านบนแสดงให้เห็นว่าพารามิเตอร์ของวิธีการลบคือแอตทริบิวต์ ID ของอินสแตนซ์ของรุ่น
รับวิธีการวิธีการ
วิธีการรับใช้เพื่อรับอินสแตนซ์ของรุ่นของ ID ที่ระบุจากคอลเลกชัน
การคัดลอกรหัสมีดังนี้:
myalbum.get (2))
วิธีดึงข้อมูล
วิธีการดึงข้อมูลใช้เพื่อดึงข้อมูลการรวบรวมจากเซิร์ฟเวอร์
การคัดลอกรหัสมีดังนี้:
var songs = new backbone.collection;
songs.url = '/songs';
songs.fetch ();
backbone.events
การคัดลอกรหัสมีดังนี้:
var obj = {};
_.extend (obj, backbone.events);
obj.on ("show-message", function (msg) {
$ ('#display') ข้อความ (msg);
-
obj.trigger ("show-message", "Hello World");