RequiJS - Hướng dẫn nhanh

RequestJS là một thư viện JavaScript và trình tải tệp quản lý sự phụ thuộc giữa các tệp JavaScript và trong lập trình mô-đun. Nó cũng giúp cải thiện tốc độ và chất lượng của mã.

RequestJS được phát triển bởi David Mark và phiên bản đầu tiên v1.0.0 được phát hành vào năm 2009. Đây là một mã nguồn mở và phiên bản 2.3.3 là phiên bản ổn định gần đây của nó.

Tại sao sử dụng RequestJS?

  • Nó là một thư viện JavaScript mã nguồn mở theo giấy phép MIT.

  • Nó cung cấp tải mô-đun không đồng bộ.

  • Nó có khả năng tải các phụ thuộc lồng nhau.

  • Nếu bạn có nhiều tệp nhỏ, thì không cần phải lo lắng về việc theo dõi thứ tự các phần phụ thuộc.

  • Nó cung cấp hỗ trợ cho các plugin và tải nhiều hơn một tệp JavaScript.

Các tính năng của RequestJS

  • Nó quản lý sự phụ thuộc giữa các tệp JavaScript và cải thiện tốc độ và chất lượng của mã.

  • Nó kết hợp và thu nhỏ các mô-đun thành một tập lệnh để có trải nghiệm tối ưu.

  • Nó làm giảm độ phức tạp của mã trong các ứng dụng lớn.

  • Nó tập hợp các tệp JavaScript khác nhau từ các mô-đun khác nhau tại thời điểm biên dịch.

  • Nó cho phép gỡ lỗi dễ dàng vì nó tải các tệp từ các thẻ script đơn giản.

Trong chương này, chúng ta sẽ hiểu cách thiết lập môi trường cho RequestJS. Đối với điều này, bạn cần tải xuống phiên bản mới nhất của thư viện RequestJS. Bạn có thể tải xuống phiên bản thu nhỏ hoặc phiên bản chi tiết .

Sau khi tải xuống, chúng tôi cần bao gồm require.js tệp trong thư mục libs của bạn và cấu trúc dự án của bạn sẽ như hình dưới đây:

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

Chúng ta cần xác định một tệp html là index.html trong đó RequestJS được tải như hình dưới đây.

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

Lưu ý rằng chỉ require.js với lệnh gọi RequestJS được đưa vào thẻ script để tải script.

RequestJS trong Node

Có hai cách để lấy bộ điều hợp Node.

  • npm - Bạn có thể cài đặt bản phát hành mới nhất của requestjs từ dấu nhắc lệnh như hình dưới đây.

npm install requirejs

  • Tải xuống r.js - Bạn có thể tải xuống r.jstệp từ trang tải xuống và nguồn từr.js trang kho .

Yêu cầuJS có thể được khởi tạo bằng cách chuyển cấu hình chính trong mẫu HTML thông qua thuộc tính data-main . Nó được dùng bởi RequestJS để biết mô-đun nào cần tải trong ứng dụng của bạn.

Ví dụ -

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

Để bao gồm tệp Request.js, bạn cần thêm thẻ script trong tệp html. Trong thẻ script, hãy thêmdata-mainthuộc tính để tải mô-đun. Đây có thể được coi là điểm nhập cảnh chính cho đơn đăng ký của bạn. Các script / main là một tệp JavaScript chính của một ứng dụng có chứa cấu hình RequestJS.

Tùy chọn cấu hình

Sau đây là các tùy chọn cấu hình có thể được đặt trong khi tải mô-đun ứng dụng đầu tiên -

  • baseUrl- Đây là một đường dẫn định tuyến cho tất cả các mô-đun được tải thông qua RequestJS. BaseUrl được biểu thị bằng một chuỗi bắt đầu bằng "gạch chéo (/)", chứa giao thức và kết thúc bằng phần mở rộng ".js". Nếu không có baseUrl nào được chỉ định, thì RequestJS sử dụng đường dẫn thuộc tính data-main làm baseUrl.

  • paths- Nó chỉ định ánh xạ đường dẫn cho các mô-đun có liên quan đến baseUrl. Nó tự động thêm phần mở rộng .js vào đường dẫn khi ánh xạ tên mô-đun.

  • shim - Nó cung cấp việc sử dụng các thư viện không phải của AMD với RequiJS bằng cách định cấu hình các phần phụ thuộc của chúng và xuất các giá trị toàn cục của chúng.

  • map - Đối với mô-đun đã cho, ứng dụng sử dụng cùng một mô-đun của các phiên bản khác nhau cho các mục tiêu khác nhau bằng cách chia sẻ id của chúng để sử dụng cùng một mã cho các điều kiện khác nhau.

  • config- Nó cung cấp cấu hình cho một mô-đun bằng cách sử dụng tùy chọn cấu hình và điều này có thể được thực hiện bằng cách sử dụng "mô-đun" phụ thuộc đặc biệt và gọi nómodule.config() chức năng.

  • urlArgs- Các đối số chuỗi truy vấn được sử dụng để tìm nạp tất cả các tài nguyên được tải bằng cách sử dụng RequestJS. Nó được sử dụng để chặn bộ nhớ cache khi có cấu hình trình duyệt hoặc máy chủ không đúng.

  • waitSeconds- Nó chỉ định số giây phải chờ trước khi tải tập lệnh. Mặc định là "7" giây và "0" tắt thời gian chờ.

  • packages - Nó cung cấp các gói CommonJS để cấu hình các mô-đun tải.

  • context - Nó cung cấp tên để tải ngữ cảnh, cho phép tải các mô-đun khác nhau trong một trang.

  • deps - Nó là một mảng các phụ thuộc được yêu cầu khi Yêu cầu được chỉ định làm đối tượng cấu hình trước khi tải Yêu cầu.

  • callback - Nó thực thi một chức năng sau khi tải các phụ thuộc và được yêu cầu khi Yêu cầu được chỉ định làm đối tượng cấu hình trước khi tải Yêu cầu.

  • xhtml - Nó được sử dụng để tạo các phần tử script bằng cách sử dụng document.createElementNS()khi tùy chọn này được đặt thành true .

  • scriptType- Nó xác định giá trị cho thuộc tính kiểu tập lệnh được sử dụng trong tài liệu. Loại mặc định là "text / javascript".

  • skipDataMain- Nó bỏ qua quá trình quét thuộc tính dữ liệu-chính trong khi tải mô-đun, nếu tùy chọn này được đặt thành true .

Một mô-đun trong RequestJS là một đối tượng có phạm vi và không có sẵn trong không gian tên chung. Do đó, không gian tên toàn cầu sẽ không bị ô nhiễm. Cú pháp RequestJS cho phép tải các mô-đun nhanh hơn mà không cần lo lắng về việc theo dõi thứ tự của các phụ thuộc. Bạn có thể tải nhiều phiên bản của cùng một mô-đun trong cùng một trang.

Xác định mô-đun

Mô-đun được xác định bằng cách sử dụng define()chức năng; chức năng tương tự cũng được sử dụng để tải mô-đun.

Tên / cặp giá trị đơn giản

Nếu mô-đun chỉ là một tập hợp các cặp tên và giá trị, thì bạn có thể sử dụng cú pháp sau:

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

Xác định chức năng

Một mô-đun cũng có thể sử dụng một hàm cho các khuôn khổ mà không cần có các phần phụ thuộc. Điều này có thể được thực hiện bằng cách sử dụng cú pháp sau:

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

Xác định các chức năng với các phụ thuộc

Nếu mô-đun có phụ thuộc, thì vị trí của đối số đầu tiên (mảng tên phụ thuộc), đối số thứ hai (xác định hàm) và đối tượng trả về xác định mô-đun được hiển thị theo cú pháp sau:

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

Định nghĩa Mô-đun như một chức năng

Không bắt buộc mô-đun chỉ trả về các đối tượng, bất kỳ giá trị hợp lệ nào từ một hàm cũng có thể được trả về. Cú pháp sau được sử dụng để xác định mô-đun dưới dạng một hàm:

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

Xác định Mô-đun có tên

Trong một số trường hợp, bạn có thể phải bao gồm tên cho mô-đun làm đối số đầu tiên define(). Điều này có thể được thực hiện bằng cách sử dụng cú pháp sau:

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

Đang tải mô-đun

Hàm define () có thể được sử dụng để tải các mô-đun (mô-đun có thể là một đối tượng, hàm, lớp hoặc một mã được thực thi sau khi tải một mô-đun). Bạn có thể tải các phiên bản khác nhau của cùng một mô-đun trong cùng một trang. Các phiên bản khác nhau có thể được phân tích theo cùng một thứ tự, ngay cả khi chúng được tải theo một thứ tự khác.

Cú pháp

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

Bạn có thể chuyển một danh sách tên mô-đun khi bạn xác định một mô-đun và RequestJS có thể được sử dụng để truy xuất các mô-đun này trước khi thực thi mô-đun. Các mô-đun này có thể được chuyển dưới dạng tham số củadefinition function.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng hàm define () trong khi tải các mô-đun. Tạo tệp html với tên index.html và đặt mã sau vào đó:

<!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>

Tạo một jstệp với tên main.js và thêm mã sau vào đó:

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

Bây giờ, hãy tạo thêm hai jstệp có tên team.js và player.js và đặt mã sau tương ứng:

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);
      }
   };
});

Đầu ra

Mở tệp HTML trong trình duyệt; bạn sẽ nhận được đầu ra như trong ảnh chụp màn hình sau:

Nhấp vào nút "OK", bạn sẽ nhận được một đầu ra khác từ các mô-đun -

Trong chương này, chúng ta sẽ thảo luận về tối ưu hóa trong RequestJS. Trình tối ưu hóa trong RequestJS có các đặc điểm sau:

  • Kết hợp các tệp kịch bản với sự trợ giúp của UglifyJS để sử dụng mặc định hoặc Trình biên dịch đóng cửa để sử dụng Java

  • Kết hợp các tệp CSS với nhau.

Trình tối ưu hóa là một thành phần của r.jsbộ chuyển đổi cho Node và Nashorn . Nó được phát triển để trở thành một phần của quá trình xây dựng chứ không phải cho quá trình phát triển.

Thí dụ

Sau khi tải xuống r.js trong thư mục dự án của bạn, cấu trúc của thư mục sẽ giống như bên dưới:

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

Tệp HTML của bạn sẽ trông như hình dưới đây -

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

Tệp main.js của bạn sẽ trông như hình dưới đây:

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

Tệp main.css của bạn sẽ trông như hình dưới đây -

@import url("other.css");

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

Thiết lập cơ bản của Trình tối ưu hóa

Bạn có thể sử dụng đối số dòng lệnh hoặc thuộc tính xây dựng hồ sơ để thiết lập dự án, cả hai đều có thể trao đổi với nhau.

Sau đây là cú pháp cho dòng lệnh:

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

Sau đây là cú pháp để xây dựng hồ sơ:

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

Sau đó, bạn có thể chuyển tên hồ sơ bản dựng cho trình tối ưu hóa trong dòng lệnh, như được hiển thị bên dưới:

node r.js -o build.js

Có một số thiếu sót về cú pháp đối số dòng lệnh. Việc sử dụng kết hợp cả đối số dòng lệnh hoặc thuộc tính xây dựng hồ sơ có thể khắc phục những thiếu sót này.

Tối ưu hóa một tệp JS duy nhất

Để tối ưu hóa một tệp JS duy nhất, bạn cần tạo một tệp JS có chứa nội dung của tất cả các phần phụ thuộc của nó. Tệp của bạn sẽ trông như dưới đây -

({
   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"
})

Bây giờ, bạn có thể tạo tệp main.js có tất cả các phụ thuộc cho ứng dụng. Tệp này được sử dụng trong tệp HTML để tải tất cả các tệp JS với một yêu cầu. Lưu ý rằng các tệp được tạo không nên có trong thư mục mã nguồn; các tệp phải ở trong bản sao của dự án.

Sử dụng tài nguyên CDN

Trình tối ưu hóa không tải tập lệnh bằng tài nguyên mạng / CDN (Mạng phân phối nội dung). Trong trường hợp, các tập lệnh cần được tải bằng CDN thì bạn cần ánh xạ các tệp này thành tên mô-đun và tải tệp xuống đường dẫn tệp cục bộ của bạn. Bạn có thể sử dụng từ đặc biệt "trống" trong cấu hình đường dẫn của hồ sơ xây dựng như được hiển thị trong cú pháp sau:

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

Tệp chính sẽ trông như hình dưới đây -

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

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

Tối ưu hóa tệp CSS đơn

Tệp CSS được tối ưu hóa bằng cách sử dụng các tham số sau trực tiếp trong dòng lệnh như hình dưới đây:

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

Tệp CSS cũng có thể được tối ưu hóa trong tệp xây dựng bằng cách sử dụng các thuộc tính tương tự như hình dưới đây:

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

Cả hai phương pháp trên đều được phép và sẽ tạo một tệp có tên là projectfolder / css / mainbuild.css . Tệp này sẽ có nội dung của main.css, các đường dẫn url () được điều chỉnh thích hợp và các nhận xét bị xóa.

Tối ưu hóa toàn bộ dự án

Trình tối ưu hóa sử dụng hồ sơ bản dựng để tối ưu hóa tất cả css và jscác tập tin. Trong ví dụ sau, tệp build.js được tạo.

({
   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"
})

Tệp build.js hướng dẫn RequestJS sao chép tất cả các thư mục ứng dụng (tham số appDir) vào thư mục đầu ra được xây dựng (tham số dir) và áp dụng tất cả các tối ưu hóa cho các tệp nằm trong thư mục đầu ra. Chạy lệnh sau để tạo hồ sơ trong thư mục ứng dụng -

node r.js -o build.js

RequestJS sử dụng jQuery như một phụ thuộc khác và đăng ký dưới dạng jquery mô-đun được đặt tên bằng chữ thường và theo mặc định, cũng tự đăng ký bằng cách sử dụng các hàm chung $ và jQuery trong khi sử dụng AMD / RequiJS.

Đang tải jQuery

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

Bạn có thể tải nhiều thư viện tùy chỉnh cùng với jQuery như hình dưới đây -

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

Bảng sau đây cho thấy việc sử dụng jQuery với RequestJS để xác định các phụ thuộc của chúng.

Sr.No. Loại & Mô tả
1 Sử dụng cấu hình Shim

jQuery sử dụng cấu hình shim để xác định các phụ thuộc cho các plugin jQuery.
2 Đang tải jQuery từ CDN

jQuery sử dụng CDN để xác định các phụ thuộc cho các plugin jQuery.

Bộ điều hợp Node có thể được sử dụng cùng với việc thực hiện Yêu cầu và đường dẫn tìm kiếm của Node. Nếu không có cấu hình mô-đun nào được dùng bởi RequestJS, bạn có thể sử dụng các mô-đun dựa trên Node hiện có mà không cần thay đổi chúng. Bạn có thể cài đặt các gói nút trong thư mục node_modules của dự án bằng cách sử dụng lệnh npm.

Node sẽ chỉ tải các mô-đun từ đĩa cục bộ và các tùy chọn cấu hình như bản đồ, gói, đường dẫn, v.v. sẽ chỉ được áp dụng khi mô-đun được tải bởi RequestJS.

Cài đặt Node

Bạn có thể cài đặt bộ điều hợp Node bằng cách sử dụng lệnh sau sẽ cài đặt các tệp phát hành mới nhất:

npm install requirejs

Bạn cũng có thể cài đặt Node theo các cách sau:

  • Bạn có thể tải xuống r.js từ liên kết này và giữ nó trong thư mục dự án của bạn.

  • Lấy nguồn từ kho r.js hoặc cài đặt nó thông qua dist.js nút .

Sử dụng Node

Để sử dụng nút, bạn cần phải có yêu cầu ( 'requirejs') và di chuyển các yêu cầu chức năng trong cấu hình vào file main.js cấp cao nhất.

Ví dụ -

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
   }
);

Xây dựng mô-đun nút với AMD hoặc RequestJS

Bạn có thể làm cho mô-đun mã hoạt động với RequestJS và Node mà không yêu cầu người dùng thư viện, sau đó sử dụng gói amdefine để thực hiện công việc này.

Ví dụ -

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 () {};
});

Trình tối ưu hóa dưới dạng Mô-đun nút

Mô-đun Node sử dụng trình tối ưu hóa RequestJS như một phương pháp tối ưu hóa bằng cách sử dụng lệnh gọi hàm thay vì sử dụng công cụ dòng lệnh.

Ví dụ -

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 là một bộ công cụ JavaScript dựa trên kiến ​​trúc mô-đun AMD cung cấp các mô-đun bổ sung để thêm chức năng bổ sung cho ứng dụng web và cũng tiết kiệm thời gian và quy mô trong quá trình phát triển ứng dụng web.

Thí dụ

Ví dụ sau đây cho thấy cách sử dụng Dojo cùng với RequestJS. Tạo tệp html với tên index.html và đặt mã sau vào đó:

<!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>

Tạo một jstệp với tên app.js và thêm mã sau vào đó:

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";   
   }
);

Đầu ra

Mở tệp HTML trong trình duyệt; bạn sẽ nhận được kết quả sau:

Định dạng mô-đun được xác định bởi CommonJS. Nó được định nghĩa mà không cung cấp tùy chọn trình duyệt bình đẳng cho các môi trường JavaScript khác. Do đó, đặc tả CommonJS đề xuất các định dạng Giao thông vận tải và một yêu cầu không đồng bộ . Bạn có thể dễ dàng chuyển đổi định dạng mô-đun CommonJS truyền thống để hoạt động với RequestJS. Tuy nhiên, tất cả các mô-đun sẽ không chuyển đổi sang định dạng mới. Một số trường hợp ngoại lệ được liệt kê bên dưới -

  • Các mô-đun có mã điều kiện để thực hiện một cuộc gọi yêu cầu.
  • Các mô-đun với phụ thuộc vòng tròn.

Chuyển đổi thủ công

Mô-đun CommonJS có thể được chuyển đổi thủ công sang định dạng RequestJS bằng cách sử dụng cú pháp sau:

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

Công cụ chuyển đổi

Mô-đun CommonJS có thể được chuyển đổi sang định dạng RequestJS bằng cách sử dụng công cụ chuyển đổi dự án r.js , được tích hợp trong tệp r.js. Bạn nên chỉ định đường dẫn của tệp sẽ được chuyển đổi và thư mục đầu ra như hình dưới đây -

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

Đặt giá trị đã xuất

Một số hệ thống trong CommonJS, cho phép đặt giá trị đã xuất bằng cách gán giá trị đã xuất dưới dạng module.exports Nhưng RequiJS, hỗ trợ cách dễ dàng hơn để trả về giá trị từ hàm được truyền để xác định. Ưu điểm của điều này là bạn không cần các đối số xuất và hàm mô-đun, vì vậy bạn có thể bỏ chúng khỏi định nghĩa mô-đun như hình dưới đây -

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

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

Cú pháp thay thế

Cách thay thế để chỉ định phụ thuộc là thông qua đối số mảng phụ thuộc xác định () . Tuy nhiên, thứ tự của các tên trong mảng phụ thuộc phải khớp với thứ tự của các đối số được truyền vào hàm định nghĩa define () như hình dưới đây:

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

Đang tải các mô-đun từ các gói CommonJS

Để biết về vị trí và thuộc tính gói, các mô-đun được tải trong gói CommonJS sử dụng RequestJS bằng cách thiết lập cấu hình RequestJS.

Công cụ tối ưu hóa

Công cụ tối ưu hóa có mặt trong RequestJS có thể kết hợp các định nghĩa mô-đun với nhau thành các gói được tối ưu hóa để phân phối trình duyệt. Nó hoạt động như một công cụ dòng lệnh để bạn có thể sử dụng nó như một phần của việc triển khai mã.

RequestJS chứa một tập hợp nhỏ các plugin cho phép tải nhiều loại tài nguyên khác nhau dưới dạng phụ thuộc. Sau đây là danh sách các plugin có sẵn trong RequestJS -

  • text
  • domReady
  • i18n
  • Tải CSS

bản văn

Trình cắm văn bản được sử dụng để tải không đồng bộ các tài nguyên dựa trên văn bản, chủ yếu được sử dụng để chèn nội dung HTML trong các tệp JavaScript. Nó có thể được tải khi bạn sử dụng văn bản! tiền tố trong bất kỳ lệnh gọi mô-đun yêu cầu hoặc xác định nào và chuyển phần mở rộng tệp vào trình cắm thêm. So với tải mô-đun thông thường, trình cắm văn bản tải mô-đun bằng XHR và sẽ không thêm mã vào tiêu đề dưới dạngscript nhãn.

Tài nguyên tệp văn bản có thể được bao gồm dưới dạng phụ thuộc trong mã như:

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

Yêu cầu có thể được sử dụng để tải các tập lệnh trước khi DOM sẵn sàng và các nhà phát triển có thể tương tác với DOM, chỉ khi các tập lệnh tải hoàn toàn. Đôi khi các tập lệnh có thể được tải trước khi DOM sẵn sàng. Vì vậy, để khắc phục vấn đề này, RequiJS cung cấp cách tiếp cận hiện đại được gọi là sự kiện DOMContentLoaded gọi hàm domReady khi DOM đã sẵn sàng.

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

Nó có thể được sử dụng với nhiều ngôn ngữ cung cấp i18nhỗ trợ gói sẽ được tải tự động khi một mô-đun hoặc phần phụ thuộc chỉ định "i18n!" tiếp đầu ngữ. Để sử dụng điều này, hãy tải xuống và đặt nó vào cùng thư mục nơi có tệp JavaScript chính của bạn. Đặt plugin này trong thư mục có tên "nls" để định vị các tệp bản địa hóa của bạn.

Ví dụ: giả sử rằng chúng ta có một tệp js được gọi là country.js với nội dung sau và đặt nó vào thư mục dưới dạng mydirectory / nls / country.js -

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

Bạn có thể thêm bản dịch cụ thể vào một tệp bằng cách sử dụng ngôn ngữ fr-fr và mã trên sẽ thay đổi thành:

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

Tiếp theo, chỉ định tệp tại mydirectory / nls / es-es / country.js với nội dung sau:

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

Bạn có thể đặt ngôn ngữ bằng cách chuyển nó vào plugin với sự trợ giúp của cấu hình mô-đun trong tệp main.js như hình dưới đây -

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

Tải CSS bằng RequestJS

Bạn có thể sử dụng một số plugin để tải tệp CSS bằng cách chỉ cần thêm vào liên kết tiêu đề để tải tệp CSS.

CSS có thể được tải bằng cách sử dụng chức năng của riêng bạn như hình dưới đây -

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved