ตัวอย่างที่สมบูรณ์
ฉันได้กล่าวไว้ข้างต้นมากและจุดความรู้ค่อนข้างกระจัดกระจายดังนั้นในที่สุดฉันก็วางแผนที่จะใช้ตัวอย่าง SEAJS ที่สมบูรณ์เพื่อรวบรวมคะแนนความรู้เหล่านี้เข้าด้วยกันเพื่อให้เพื่อนของคุณสรุปและตรวจสอบ ตัวอย่างนี้มีไฟล์ต่อไปนี้:
1.index.html - หน้าหลัก
2.Sea.js-seajs สคริปต์
3.init.js-โมดูลในโมดูลรายการอาศัยข้อมูล jQuery และสไตล์ โหลดจากหน้าหลัก
4.Data.js-data โมดูลโมดูลข้อมูล JSON บริสุทธิ์โหลดโดย init
5.JQuery.js-โมดูล jQuery, การห่อหุ้มแบบแยกส่วนของไลบรารี jQuery, โหลดโดย init
6. Style.css-แผ่นสไตล์ CSS โหลดโดย Init เป็นโมดูลสไตล์
7. รหัสของ Sea.js และ jQuery.js เป็นของรหัสห้องสมุดดังนั้นฉันจะไม่เข้าไปในรายละเอียด
html:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> </title>
</head>
<body>
<div id = "เนื้อหา">
<p> </p>
<p> <a href = "#"> บล็อก </a> </p>
</div>
<script src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
JavaScript:
การคัดลอกรหัสมีดังนี้:
//init.js
กำหนด (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {
var $ = ต้องการ ('./ jQuery');
ข้อมูล var = ต้องการ ('./ data');
var css = ต้องการ ('./ style.css');
$ ('. ผู้แต่ง'). html (data.author);
$ ('. blog'). attr ('href', data.blog);
-
//data.js
กำหนด({
ผู้แต่ง: 'Zhangyang'
บล็อก: 'http://blog.codinglabs.org'
-
CSS:
การคัดลอกรหัสมีดังนี้:
.author {color: red; font-size: 10pt;}
.blog {ตัวอักษรขนาด: 10pt;}
เอฟเฟกต์การดำเนินการมีดังนี้: