ดูลำดับการทำงานของ javascript และ angularjs ตอนที่ 13
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeeangularjs javascript
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ angularjs javascript
ดูแล้ว 7,860 ครั้ง
ไปที่
Copy
ตัวอย่างโค้ดและการทำงาน นี้เป้นตัวอย่างสำหรับการทดสอบ
ลำดับการทำงาน ของ javascript แบบปกติ และส่วนที่ใช้งาน
angularjs เนื้อหาจะไม่อธิบายอะไรมาก แต่มีความสำคัญ เพื่อ
ให้เราเข้าใจ เส้นทางการทำงานของโปรแกรม
ไฟล์ app.js
console.log("1"); angular.module('app',[]) .controller('appController',function($scope){ console.log("2"); $scope.greeting="Hello World"; }); console.log("3");
ไฟล์ index.html
กรณีแรก มีการเรียกใช้งาน ฟังก์ชั่น angular.bootstrap
เป็นการเรียกใช้งาน angularjs แบบกำหนดเอง
โดยไม่ได้ กำหนด ng-app ในแท็กเปิด html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-resource.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-route.min.js"></script> --> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> <script type="text/javascript"> console.log(0); </script> <script src="app.js"></script> <title>My Learn AngularJs 7</title> <style type="text/css"> </style> </head> <body ng-controller="appController"> <br> <div class="container"> {{greeting}} </div> <script type="text/javascript"> angular.element(document).ready(function() { console.log(7); }); console.log(4); angular.bootstrap(document,['app'],[]); console.log(5); </script> </body> </html> <script type="text/javascript"> console.log(6); </script>
ผลลัพธ์ใน console
0 (index):12 1 app.js:1 3 app.js:7 4 (index):32 2 app.js:4 5 (index):34 6 (index):39 7 (index):30
จะเห็นว่า การทำงานของ javascript ของคำสั่งที่ไม่ได้ใช้งาน angularjs
0 (index):12
จะทำงานเรียงจากบนลงล่าง ตามลำดับ
ถ้ามีการ include ไฟล์ js การทำงานก็จะเข้าไปทำงานในไฟล์นั้นก่อน
1 app.js:1
3 app.js:7
ค่าด้านบนคือการที่โปรแกรมวิ่งเข้าไปทำงานในไฟล์ js ที่ include แต่ยังไม่ทำงานใน
ส่วนของ angularjs
และออกมาทำงานด้านนอกไฟล์ js
4 (index):32
และเมื่อถึงบรรทัดที่ มีการเรียกใช้งาน angular.bootstrap โปรแกรมจึงเข้าไป
ทำงานในไฟล์ js ในส่วนของ angularjs
2 app.js:4
และออกมาทำงานด้านนอกไฟล์ js ของส่วน angularjs
5 (index):34
6 (index):39
และส่วนสุดท้าย ที่ทำงานท้ายสุดคือ ฟังก์ชั่น
angular.element(document).ready(function() { console.log(7); });
ส่วนนี้จะเป็นการตรวจสอบว่า มีการ rendeed หน้าเพจ เสร็จเรียบร้อย
แล้วก่อนถึงจะทำงาน
7 (index):30
มาดูส่วนทำงานรูปแบบที่สอง
ไฟล์ index.html
กรณีที่ 2 ไม่มีการเรียกใช้งาน ฟังก์ชั่น angular.bootstrap (comment ปิดไว้)
และกำหนด ng-app ในแท็กเปิด html
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-resource.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-route.min.js"></script> --> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> <script type="text/javascript"> console.log(0); </script> <script src="app.js"></script> <title>My Learn AngularJs 7</title> <style type="text/css"> </style> </head> <body ng-controller="appController"> <br> <div class="container"> {{greeting}} </div> <script type="text/javascript"> angular.element(document).ready(function() { console.log(7); }); console.log(4); // angular.bootstrap(document,['app'],[]); console.log(5); </script> </body> </html> <script type="text/javascript"> console.log(6); </script>
ผลลัพธ์ใน console
0 (index):12 1 app.js:1 3 app.js:7 4 (index):32 5 (index):34 6 (index):39 2 app.js:4 7 (index):30
จะเห็นว่า angularjs ทำงานหลังจาก มีการ rendered หน้าเพจเรียบร้อยแล้ว
2 app.js:4
การรู้จักลำดับการทำงาน ของ javascript ข้างต้น มีประโยชน์ในการนำไปใช้ ในการพัฒนา
mobile app รวมทั้งการได้รู้จักการใช้งาน
angular.bootstrap และ angular.element(document).ready(function() {
จะมีประโยชน์ในการประยุกต์ต่อไป
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
Tags::
javascript
angularjs
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ