RequireJS - คู่มือฉบับย่อ

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

RequireJS ได้รับการพัฒนาโดย David Mark และเวอร์ชันเริ่มต้น v1.0.0 ได้รับการเผยแพร่ในปี 2009 เป็นโอเพ่นซอร์สและเวอร์ชัน 2.3.3 เป็นเวอร์ชันเสถียรล่าสุด

ทำไมต้องใช้ RequireJS?

เป็นไลบรารี JavaScript โอเพ่นซอร์สภายใต้ใบอนุญาต MIT
ให้โหลดโมดูลแบบอะซิงโครนัส
มีความสามารถในการโหลดการอ้างอิงที่ซ้อนกัน
หากคุณมีไฟล์ขนาดเล็กจำนวนมากไม่ต้องกังวลกับการติดตามลำดับการอ้างอิง
ให้การสนับสนุนปลั๊กอินและโหลดไฟล์ JavaScript มากกว่าหนึ่งไฟล์

คุณสมบัติของ RequireJS

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

ในบทนี้เราจะเข้าใจวิธีการตั้งค่าสภาพแวดล้อมสำหรับ RequireJS สำหรับสิ่งนี้คุณต้องดาวน์โหลดไลบรารี RequireJS เวอร์ชันล่าสุด คุณสามารถดาวน์โหลดทั้งรุ่น minifiedหรือรุ่นรายละเอียด

หลังจากดาวน์โหลดเราจะต้องรวมไฟล์ require.js ไฟล์ในโฟลเดอร์ libs ของคุณและโครงสร้างของโครงการของคุณควรเป็นดังที่แสดงด้านล่าง -

projectname/
|--index.html
|--libs/
   |---main.js
   |---require.js
   |---helper/
      |----util.js

เราจำเป็นต้องกำหนดไฟล์ html เป็น index.html โดยที่ RequireJS ถูกโหลดตามที่แสดงด้านล่าง

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

โปรดทราบว่าเท่านั้น require.js ด้วยการเรียก RequireJS จะรวมอยู่ในแท็กสคริปต์เพื่อโหลดสคริปต์

RequireJS ในโหนด

มีสองวิธีในการรับ Node adapter

npm - คุณสามารถติดตั้ง requirejs รุ่นล่าสุดจากพรอมต์คำสั่งดังที่แสดงด้านล่าง

npm install requirejs

ดาวน์โหลด r.js - คุณสามารถดาวน์โหลดไฟล์ r.jsไฟล์จากหน้าดาวน์โหลดและแหล่งที่มาจากr.js เพจที่เก็บ

RequireJS สามารถเตรียมใช้งานได้โดยส่งผ่านคอนฟิกูเรชันหลักในเทมเพลต HTML ผ่านdata-main attribute RequireJS ใช้เพื่อทราบว่าจะโหลดโมดูลใดในแอปพลิเคชันของคุณ

ตัวอย่างเช่น -

<script data-main = "scripts/main" src = "scripts/require.js"></script>

ในการรวมไฟล์ Require.js คุณต้องเพิ่มแท็กสคริปต์ในไฟล์ html ภายในแท็กสคริปต์ให้เพิ่มไฟล์data-mainเพื่อโหลดโมดูล สิ่งนี้สามารถใช้เป็นจุดเริ่มต้นของแอปพลิเคชันของคุณได้ สคริปต์ / หลักเป็นไฟล์ JavaScript หลักของแอพลิเคชันที่มีการกำหนดค่า RequireJS

ตัวเลือกการกำหนดค่า

ต่อไปนี้เป็นตัวเลือกการกำหนดค่าที่สามารถตั้งค่าได้ในขณะโหลดโมดูลแอปพลิเคชันแรก -

baseUrl- เป็นเส้นทางเส้นทางสำหรับโมดูลทั้งหมดที่โหลดผ่าน RequireJS baseUrl ถูกระบุด้วยสตริงที่ขึ้นต้นด้วย "slash (/)" ซึ่งมีโปรโตคอลและลงท้ายด้วยนามสกุล ".js" หากไม่มีการระบุ baseUrl ดังนั้น RequireJS จะใช้เส้นทางแอตทริบิวต์data-mainเป็น baseUrl
paths- ระบุการแมปพา ธ สำหรับโมดูลที่สัมพันธ์กับ baseUrl โดยจะเพิ่มนามสกุล. js ไปยังพา ธ โดยอัตโนมัติเมื่อแมปชื่อโมดูล
shim - ให้การใช้งานไลบรารีที่ไม่ใช่ AMD กับ RequireJS โดยกำหนดค่าการอ้างอิงและส่งออกค่าส่วนกลาง
map - สำหรับโมดูลที่กำหนดแอปพลิเคชันจะใช้โมดูลเวอร์ชันเดียวกันสำหรับวัตถุประสงค์ที่แตกต่างกันโดยการแบ่งปันรหัสเพื่อใช้รหัสเดียวกันสำหรับเงื่อนไขที่แตกต่างกัน
config- จัดเตรียมการกำหนดค่าให้กับโมดูลโดยใช้ตัวเลือกconfigและสามารถทำได้โดยใช้ "โมดูล" ที่พึ่งพาพิเศษและเรียกใช้module.config() ฟังก์ชัน
urlArgs- อาร์กิวเมนต์สตริงแบบสอบถามใช้เพื่อดึงทรัพยากรทั้งหมดที่โหลดโดยใช้ RequireJS ใช้สำหรับการป้องกันแคชเมื่อมีการกำหนดค่าเบราว์เซอร์หรือเซิร์ฟเวอร์ที่ไม่เหมาะสม
waitSeconds- ระบุจำนวนวินาทีที่ต้องรอก่อนที่จะโหลดสคริปต์ ค่าเริ่มต้นคือ "7" วินาทีและ "0" ปิดใช้งานการหมดเวลา
packages - มีแพ็คเกจ CommonJS สำหรับกำหนดค่าโมดูลการโหลด
context - มีชื่อสำหรับการโหลดบริบทซึ่งอนุญาตให้โหลดโมดูลต่างๆในหน้า
deps - เป็นอาร์เรย์ของการอ้างอิงที่จำเป็นเมื่อต้องการระบุเป็นวัตถุ config ก่อนที่จะโหลด RequireJS
callback - เรียกใช้ฟังก์ชันหลังจากโหลดการอ้างอิงและจำเป็นเมื่อกำหนด Require เป็นวัตถุ config ก่อนที่จะโหลด RequireJS
xhtml - ใช้เพื่อสร้างองค์ประกอบสคริปต์โดยใช้ไฟล์ document.createElementNS()วิธีการเมื่อตัวเลือกนี้ถูกตั้งค่าเป็นจริง
scriptType- กำหนดค่าสำหรับแอตทริบิวต์ประเภทสคริปต์ที่ใช้ในเอกสาร ประเภทเริ่มต้นคือ "text / javascript"
skipDataMain- มันข้ามสแกนแอตทริบิวต์ข้อมูลหลักในขณะที่โหลดโมดูลถ้าตัวเลือกนี้ถูกกำหนดเป็นจริง

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

การกำหนดโมดูล

โมดูลถูกกำหนดโดยใช้ define()ฟังก์ชัน; ฟังก์ชันเดียวกันนี้ใช้สำหรับโหลดโมดูลด้วย

ชื่อง่าย / คู่ค่า

หากโมดูลเป็นเพียงชุดของคู่ชื่อและค่าคุณสามารถใช้ไวยากรณ์ต่อไปนี้ -

define({
   state: "karnataka",
   city: "bangalore"
});

การกำหนดฟังก์ชัน

โมดูลยังสามารถใช้ฟังก์ชันสำหรับเฟรมเวิร์กได้โดยไม่ต้องพึ่งพา ซึ่งสามารถทำได้โดยใช้ไวยากรณ์ต่อไปนี้ -

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

การกำหนดฟังก์ชันด้วยการอ้างอิง

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

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

การกำหนดโมดูลเป็นฟังก์ชัน

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

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

การกำหนดโมดูลด้วยชื่อ

ในบางกรณีคุณอาจต้องใส่ชื่อโมดูลเป็นอาร์กิวเมนต์แรก define(). ซึ่งสามารถทำได้โดยใช้ไวยากรณ์ต่อไปนี้ -

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

กำลังโหลดโมดูล

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

ไวยากรณ์

define(['module1', 'module2'], function (module1, module2) {
   //define the module value by returning a value
   return function () {};
});

คุณสามารถส่งผ่านรายการชื่อโมดูลเมื่อคุณกำหนดโมดูลและสามารถใช้ RequireJS เพื่อดึงข้อมูลโมดูลเหล่านี้ก่อนที่จะเรียกใช้โมดูล โมดูลเหล่านี้สามารถส่งผ่านเป็นพารามิเตอร์ของdefinition function.

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ฟังก์ชันdefine ()ขณะโหลดโมดูล สร้างไฟล์ html ด้วยชื่อindex.htmlและวางโค้ดต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <title>Define() Function</title>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Define() Function Example</h2>
   </body>
</html>

สร้างไฟล์ jsไฟล์ที่มีชื่อmain.jsและเพิ่มรหัสต่อไปนี้ -

define(function (require) {
   var myteam = require("./team");
   var mylogger = require("./player");
   alert("Player Name : " + myteam.player);
   mylogger.myfunc();
});

ตอนนี้สร้างอีกสอง jsไฟล์ที่มีชื่อteam.jsและplayer.jsและวางรหัสต่อไปนี้ตามลำดับ -

team.js

define({
   player: "Sachin Tendulkar",
   team : "India"
});

player.js

define(function (require) {
   var myteam = require("./team");

   return {
      myfunc: function () {
         document.write("Name: " + myteam.player + ", Country: " + myteam.team);
      }
   };
});

เอาต์พุต

เปิดไฟล์ HTML ในเบราว์เซอร์ คุณจะได้รับผลลัพธ์ดังภาพหน้าจอต่อไปนี้ -

คลิกที่ปุ่ม "ตกลง" คุณจะได้รับผลลัพธ์จากโมดูลอื่น -

ในบทนี้เราจะพูดถึงการเพิ่มประสิทธิภาพใน RequireJS Optimizer ใน RequireJS มีลักษณะดังต่อไปนี้ -

รวมไฟล์สคริปต์เข้าด้วยกันด้วยความช่วยเหลือของUglifyJSสำหรับการใช้งานดีฟอลต์หรือClosure Compilerสำหรับการใช้งาน Java
รวมไฟล์ CSS เข้าด้วยกัน

เครื่องมือเพิ่มประสิทธิภาพเป็นส่วนประกอบของไฟล์ r.jsอะแดปเตอร์สำหรับNode และ Nashorn ได้รับการพัฒนาเพื่อเป็นส่วนหนึ่งของกระบวนการสร้างไม่ใช่สำหรับกระบวนการพัฒนา

ตัวอย่าง

หลังจากดาวน์โหลดr.jsในโฟลเดอร์โครงการของคุณโครงสร้างของโฟลเดอร์ควรมีลักษณะดังที่ระบุด้านล่าง -

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

ไฟล์ HTML ของคุณจะมีลักษณะดังที่แสดงด้านล่าง -

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

ไฟล์main.jsของคุณจะมีลักษณะดังที่แสดงด้านล่าง -

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

ไฟล์main.cssของคุณจะมีลักษณะดังที่แสดงด้านล่าง -

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

การตั้งค่าพื้นฐานของเครื่องมือเพิ่มประสิทธิภาพ

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

ต่อไปนี้เป็นไวยากรณ์สำหรับบรรทัดคำสั่ง -

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

ต่อไปนี้เป็นไวยากรณ์สำหรับการสร้างโปรไฟล์ -

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

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

node r.js -o build.js

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

การเพิ่มประสิทธิภาพไฟล์ JS เดียว

ในการเพิ่มประสิทธิภาพไฟล์ JS เดียวคุณต้องสร้างไฟล์ JS ที่มีเนื้อหาของการอ้างอิงทั้งหมด ไฟล์ของคุณควรมีลักษณะดังที่ระบุด้านล่าง -

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

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

การใช้ทรัพยากร CDN

เครื่องมือเพิ่มประสิทธิภาพไม่โหลดสคริปต์โดยใช้ทรัพยากรเครือข่าย / CDN (Content Delivery Network) ในกรณีที่สคริปต์ต้องโหลดโดยใช้ CDN จากนั้นคุณต้องแม็พไฟล์เหล่านี้กับชื่อโมดูลและดาวน์โหลดไฟล์ไปยังพา ธ ไฟล์ในเครื่องของคุณ คุณสามารถใช้คำพิเศษ "ว่าง" ในการกำหนดค่าพา ธ ของโปรไฟล์บิลด์ดังที่แสดงในไวยากรณ์ต่อไปนี้ -

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

ไฟล์หลักจะมีลักษณะดังภาพด้านล่าง -

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

การเพิ่มประสิทธิภาพไฟล์ CSS เดี่ยว

ไฟล์ CSS ได้รับการปรับให้เหมาะสมโดยใช้พารามิเตอร์ต่อไปนี้โดยตรงในบรรทัดคำสั่งดังที่แสดงด้านล่าง -

node ../../r.js -o cssIn = main.css out = main-built.css

ไฟล์ CSS ยังสามารถปรับให้เหมาะสมในไฟล์บิลด์โดยใช้คุณสมบัติเดียวกันดังที่แสดงด้านล่าง -

...
cssIn:"main.css",
out:"main-built.css"
...

ทั้งสองวิธีการดังกล่าวจะได้รับอนุญาตและจะสร้างไฟล์ที่เรียกว่าprojectfolder css / / mainbuild.css ไฟล์นี้จะมีเนื้อหาของ main.css เส้นทาง url () ได้รับการปรับแต่งอย่างเหมาะสมและความคิดเห็นจะถูกลบออก

การเพิ่มประสิทธิภาพทั้งโครงการ

เครื่องมือเพิ่มประสิทธิภาพใช้โปรไฟล์การสร้างเพื่อเพิ่มประสิทธิภาพ css และ jsไฟล์. ในตัวอย่างต่อไปนี้ไฟล์build.jsถูกสร้างขึ้น

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

build.jsไฟล์สั่ง RequireJS เพื่อคัดลอกโฟลเดอร์แอป (appDir พารามิเตอร์) เพื่อโฟลเดอร์ออกตัว (พารามิเตอร์ dir) และนำไปใช้เพิ่มประสิทธิภาพทั้งหมดไปยังไฟล์ที่อยู่ในโฟลเดอร์ออก เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโปรไฟล์ในโฟลเดอร์แอพ -

node r.js -o build.js

RequireJS ใช้ jQuery เป็นตัวอ้างอิงอื่นและลงทะเบียนเป็นjqueryโมดูลที่มีชื่อเป็นตัวพิมพ์เล็กและโดยค่าเริ่มต้นจะลงทะเบียนตัวเองโดยใช้ฟังก์ชันส่วนกลาง$และjQueryในขณะที่ใช้ AMD / RequireJS

กำลังโหลด jQuery

require(['jquery'], function($) {
   //code here
}

คุณสามารถโหลดไลบรารีที่กำหนดเองได้หลายไลบรารีพร้อมกับ jQuery ดังที่แสดงด้านล่าง -

require(['custom_library_path','jquery'], function(load_library,$) {
   //related code of $ and load_library
});

ตารางต่อไปนี้แสดงการใช้ jQuery กับ RequireJS เพื่อระบุการอ้างอิง

ซีเนียร์	ประเภทและคำอธิบาย
1	ใช้ Shim Config jQuery ใช้การกำหนดค่า shim เพื่อกำหนดการอ้างอิงสำหรับปลั๊กอิน jQuery
2	กำลังโหลด jQuery จาก CDN jQuery ใช้ CDN เพื่อกำหนดการอ้างอิงสำหรับปลั๊กอิน jQuery

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

โหนดจะโหลดโมดูลจากดิสก์ภายในเครื่องเท่านั้นและตัวเลือกการกำหนดค่าเช่นแผนที่แพ็คเกจเส้นทาง ฯลฯ จะถูกนำไปใช้ก็ต่อเมื่อโหลดโมดูลโดย RequireJS

การติดตั้ง Node

คุณสามารถติดตั้ง Node adapter โดยใช้คำสั่งต่อไปนี้ซึ่งจะติดตั้งไฟล์รีลีสล่าสุด -

npm install requirejs

คุณสามารถติดตั้ง Node ได้ด้วยวิธีต่อไปนี้เช่นกัน -

คุณสามารถดาวน์โหลดr.js ได้จากลิงค์นี้และเก็บไว้ในโฟลเดอร์โปรเจ็กต์ของคุณ
ขอรับแหล่งที่มาจากr.js พื้นที่เก็บข้อมูลหรือติดตั้งมันผ่านdist.js โหนด

การใช้งาน Node

ในการใช้โหนดคุณต้องมี('requirejs')และย้ายฟังก์ชันที่ต้องการในการกำหนดค่าไปยังไฟล์ main.js ระดับบนสุด

ตัวอย่างเช่น -

var requirejs = require('requirejs');

requirejs.config({
   //load the mode modules to top level JS file 
   //by passing the top level main.js require function to requirejs
   nodeRequire: require
});

requirejs(['name1', 'name2'],
   function (name1, name2) {
      //by using requirejs config, name1 and name2 are loaded
      //node's require loads the module, if they did not find these
   }
);

การสร้างโมดูลโหนดด้วย AMD หรือ RequireJS

คุณสามารถทำให้โมดูลโค้ดทำงานกับ RequireJS และ Node ได้โดยไม่ต้องใช้ผู้ใช้ไลบรารีจากนั้นใช้แพ็คเกจamdefineเพื่อทำงานนี้ให้สำเร็จ

ตัวอย่างเช่น -

if (typeof define !== 'function') {
   var define = require('amdefine')(module);
}

define(function(require) {
   var myval = require('dependency');

   //The returned value from the function can be used 
   //as module which is visible to Node.
   return function () {};
});

เครื่องมือเพิ่มประสิทธิภาพเป็นโมดูลโหนด

โมดูลโหนดใช้เครื่องมือเพิ่มประสิทธิภาพ RequireJS เป็นวิธีการปรับให้เหมาะสมโดยใช้การเรียกใช้ฟังก์ชันแทนการใช้เครื่องมือบรรทัดคำสั่ง

ตัวอย่างเช่น -

var requirejs = require('requirejs');

var config = {
   baseUrl: '../directory/scripts',
   name: 'main',
   out: '../build/main-built.js'
};

requirejs.optimize(config, function (buildResponse) {

   //The text output of the modules specify by using buildResponse 
   //and loads the built file for the contents
   //get the optimized file contents by using config.out 
   var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
   //code for optimization err callback
});

Dojo เป็นชุดเครื่องมือ JavaScript ซึ่งใช้สถาปัตยกรรมโมดูลของ AMD ที่มีโมดูลเพิ่มเติมเพื่อเพิ่มฟังก์ชันพิเศษให้กับเว็บแอปพลิเคชันและยังช่วยประหยัดเวลาและขนาดในกระบวนการพัฒนาเว็บแอปพลิเคชัน

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการใช้ Dojo พร้อมกับ RequireJS สร้างไฟล์ html ด้วยชื่อindex.htmlและวางโค้ดต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS Dojo</title>
      <script data-main="app" src="lib/require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS  Dojo</h2>
      <p>
         Hello... ...
      </p>
   </body>
</html>

สร้างไฟล์ jsไฟล์ที่มีชื่อapp.jsและเพิ่มรหัสต่อไปนี้ -

require ({
   //You can configure loading modules from the lib directory
   baseUrl: 'lib',
   
   paths: {
      //mapping of package
      dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
   }
   
}, [
      //modules which we are using here
      'dojo/dom'
   ], function(dom) { 
   
      //using the 'byId' method from dom module
      var mydojo = dom.byId('dojo_val')
      mydojo.innerHTML = "The text is displaying via dojo/dom";   
   }
);

เอาต์พุต

เปิดไฟล์ HTML ในเบราว์เซอร์ คุณจะได้รับผลลัพธ์ต่อไปนี้ -

รูปแบบโมดูลถูกกำหนดโดย CommonJS ถูกกำหนดโดยไม่ให้ตัวเลือกที่เท่าเทียมกันของเบราว์เซอร์กับสภาพแวดล้อม JavaScript อื่น ๆ ดังนั้นข้อกำหนด CommonJS recomends รูปแบบการขนส่งและตรงกันต้อง คุณสามารถแปลงรูปแบบโมดูล CommonJS แบบเดิมเพื่อทำงานกับ RequireJS ได้อย่างง่ายดาย แต่โมดูลทั้งหมดจะไม่แปลงเป็นรูปแบบใหม่ ข้อยกเว้นบางประการมีดังต่อไปนี้ -

โมดูลที่มีรหัสเงื่อนไขเพื่อทำการโทร
โมดูลที่มีการอ้างอิงแบบวงกลม

การแปลงด้วยตนเอง

โมดูล CommonJS สามารถแปลงเป็นรูปแบบ RequireJS ได้ด้วยตนเองโดยใช้ไวยากรณ์ต่อไปนี้ -

define(function(require, exports, module) {
   //place CommonJS module content here
});

เครื่องมือแปลง

โมดูล CommonJS สามารถแปลงเป็นรูปแบบ RequireJS โดยใช้เครื่องมือตัวแปลงโปรเจ็กต์ r.jsซึ่งสร้างขึ้นในไฟล์r.js คุณควรระบุเส้นทางของไฟล์ที่จะแปลงและโฟลเดอร์ผลลัพธ์ตามที่แสดงด้านล่าง -

node r.js -convert path/to/commonjs/modules/ path/to/output

การตั้งค่ามูลค่าที่ส่งออก

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

define(function (require) {
   var name = require('name');

   //Define the module as exporting a function
   return function () {
      name.doSomething();
   };
});

ไวยากรณ์ทางเลือก

วิธีทางเลือกในการระบุการอ้างอิงผ่านอาร์กิวเมนต์อาร์เรย์พึ่งพาdefine () แต่ลำดับของชื่อในอาร์เรย์การอ้างอิงควรตรงกับลำดับของอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันนิยาม define ()ดังที่แสดงด้านล่าง -

define(['name'], function (name) {
   
   return function () {
      name.doSomething();
   };
});

กำลังโหลดโมดูลจากแพ็คเกจ CommonJS

หากต้องการทราบเกี่ยวกับตำแหน่งและโมดูลแอ็ตทริบิวต์แพ็กเกจจะถูกโหลดในแพ็กเกจ CommonJS โดยใช้ RequireJS โดยการตั้งค่าคอนฟิกูเรชัน RequireJS

เครื่องมือเพิ่มประสิทธิภาพ

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

RequireJS มีปลั๊กอินชุดเล็ก ๆ ซึ่งอนุญาตให้โหลดทรัพยากรประเภทต่างๆเป็นการอ้างอิง ต่อไปนี้เป็นรายการปลั๊กอินที่มีอยู่ใน RequireJS -

text
domReady
i18n
กำลังโหลด CSS

ข้อความ

ข้อความ plug-in ที่ใช้สำหรับทรัพยากรตามข้อความในการโหลดแบบไม่พร้อมกันซึ่งส่วนใหญ่จะใช้สำหรับการแทรกเนื้อหา HTML ในไฟล์ JavaScript สามารถโหลดได้เมื่อคุณใช้ข้อความ! คำนำหน้าในการเรียกโมดูลที่ต้องการหรือกำหนดและส่งผ่านนามสกุลไฟล์ไปยังปลั๊กอิน เปรียบเทียบกับการโหลดโมดูลปกติปลั๊กอินข้อความจะโหลดโมดูลโดยใช้ XHR และจะไม่เพิ่มโค้ดลงในส่วนหัวเป็นscript แท็ก

ทรัพยากรไฟล์ข้อความสามารถรวมเป็นการอ้างอิงในรหัสเป็น -

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

คุณสามารถใช้ RequireJS เพื่อโหลดสคริปต์ก่อนที่ DOM จะพร้อมและนักพัฒนาสามารถโต้ตอบกับ DOM ได้ก็ต่อเมื่อสคริปต์โหลดอย่างสมบูรณ์เท่านั้น บางครั้งสคริปต์สามารถโหลดได้ก่อนที่ DOM จะพร้อมใช้งาน ดังนั้นเพื่อเอาชนะปัญหานี้ RequireJS จึงจัดเตรียมแนวทางสมัยใหม่ที่เรียกว่าเหตุการณ์DOMContentLoadedซึ่งเรียกใช้ฟังก์ชัน domReady เมื่อ DOM พร้อม

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

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

ตัวอย่างเช่นสมมติว่าเรามีไฟล์ js หนึ่งไฟล์ชื่อcountry.js ที่มีเนื้อหาต่อไปนี้และวางไว้ในไดเร็กทอรีเป็นmydirectory / nls / country.js -

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

คุณสามารถเพิ่มการแปลเฉพาะลงในไฟล์ได้โดยใช้fr-fr locale และโค้ดด้านบนจะเปลี่ยนเป็น -

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

จากนั้นระบุไฟล์ที่mydirectory / nls / es-es / country.jsโดยมีเนื้อหาดังนี้ -

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

คุณสามารถตั้งค่าโลแคลได้โดยส่งไปยังปลั๊กอินด้วยความช่วยเหลือของโมดูล config ในไฟล์main.jsดังที่แสดงด้านล่าง -

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

โหลด CSS โดยใช้ RequireJS

คุณสามารถใช้ปลั๊กอินบางตัวเพื่อโหลดไฟล์ CSS โดยต่อท้ายลิงก์ส่วนหัวเพื่อโหลดไฟล์ CSS

คุณสามารถโหลด CSS ได้โดยใช้ฟังก์ชันของคุณเองดังที่แสดงด้านล่าง -

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}