Có thể sử dụng require()(hoặc thứ gì đó tương tự) ở phía máy khách không?
Thí dụ
var myClass = require('./js/myclass.js');
Có thể sử dụng require()(hoặc thứ gì đó tương tự) ở phía máy khách không?
Thí dụ
var myClass = require('./js/myclass.js');
Câu trả lời:
Bạn nên nhìn vào require.js hoặc head.js cho việc này.
Tôi đã sử dụng Browserify cho điều đó. Nó cũng cho phép tôi tích hợp các mô-đun Node.js vào mã phía máy khách của tôi.
Tôi đã viết blog về nó tại đây: Thêm phong cách node.js / CommonJS request () vào JavaScript phía máy khách với Browserify
Nếu bạn muốn có kiểu Node.js, requirebạn có thể sử dụng một cái gì đó như sau:
var require = (function () {
var cache = {};
function loadScript(url) {
var xhr = new XMLHttpRequest(),
fnBody;
xhr.open('get', url, false);
xhr.send();
if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
cache[url] = (new Function(fnBody)).call({});
}
}
function resolve(module) {
//TODO resolve urls
return module;
}
function require(module) {
var url = resolve(module);
if (!Object.prototype.hasOwnProperty.call(cache, url)) {
loadScript(url);
}
return cache[url];
}
require.cache = cache;
require.resolve = resolve;
return require;
}());
Lưu ý: mã này hoạt động nhưng không đầy đủ (đặc biệt là giải quyết url) và không triển khai tất cả các tính năng của Node.js (tôi vừa tổng hợp điều này vào đêm qua). BẠN KHÔNG NÊN SỬ DỤNG MÃ NÀY trong các ứng dụng thực nhưng nó cung cấp cho bạn một điểm khởi đầu. Tôi đã thử nghiệm nó với mô-đun đơn giản này và nó hoạt động:
function hello() {
console.log('Hello world!');
}
exports.hello = hello;
Tôi đã tự hỏi mình những câu hỏi tương tự. Khi tôi xem xét nó, tôi thấy các lựa chọn áp đảo.
May mắn thay, tôi đã tìm thấy bảng tính tuyệt vời này giúp bạn chọn trình tải tốt nhất dựa trên yêu cầu của bạn:
https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ
Tôi nhận thấy rằng nói chung, nên xử lý trước các tập lệnh tại thời điểm biên dịch và gói chúng trong một (hoặc rất ít) gói với việc requiređược viết lại thành một số "shim nhẹ" cũng tại thời điểm biên dịch.
Tôi đã tìm hiểu trên Google về các công cụ "mới" có thể làm điều đó
Và những thứ đã được đề cập browserifycũng khá phù hợp - http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/
Giải thích Tràn ngăn xếp cũ hơn - Mối liên quan giữa CommonJS, AMD và RequiJS?
Thảo luận chi tiết về các khung mô-đun khác nhau và require()chúng cần có trong Addy Osmani - Viết JavaScript mô-đun với AMD, CommonJS & ES Harmony
Bạn có thể tạo các phần tử cho DOM để tải các mục.
Như vậy:
var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file
Đơn giản chỉ cần sử dụng Browserify, một cái gì đó giống như một trình biên dịch xử lý các tệp của bạn trước khi nó đi vào sản xuất và đóng gói tệp theo gói.
Hãy nghĩ rằng bạn có một tệp main.js yêu cầu các tệp trong dự án của bạn, khi bạn chạy Browserify trong đó, nó chỉ cần xử lý tất cả và tạo một nhóm với tất cả các tệp của bạn, cho phép sử dụng requiređồng bộ các lệnh gọi trong trình duyệt mà không cần yêu cầu HTTP và chẳng hạn với chi phí rất ít cho hiệu suất và cho kích thước của gói.
Xem liên kết để biết thêm thông tin: http://browserify.org/
Một số câu trả lời đã có - nhưng tôi muốn chỉ bạn đến YUI3 và tải mô-đun theo yêu cầu của nó. Nó hoạt động trên cả máy chủ (node.js) và máy khách - Tôi có một trang web demo sử dụng cùng một mã JS chính xác chạy trên máy khách hoặc máy chủ để xây dựng các trang, nhưng đó là một chủ đề khác.
YUI3: http://developer.yahoo.com/yui/3/
Video: http://developer.yahoo.com/yui/theater/
Thí dụ:
(điều kiện tiên quyết: các chức năng YUI3 cơ bản trong 7k yui.js đã được tải)
YUI({
//configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
//sandboxed application code
//...
//If you already have a "Y" instance you can use that instead
//of creating a new (sandbox) Y:
// Y.use('moduleX','moduleY', function (Y) {
// });
//difference to YUI().use(): uses the existing "Y"-sandbox
}
Mã này tải mô-đun YUI3 "nút" và "io", và mô-đun "own-app-module1", sau đó chạy hàm gọi lại. Một hộp cát mới "Y" với tất cả các chức năng YUI3 và own-app-module1 được tạo. Không có gì xuất hiện trong không gian tên chung. Việc tải các mô-đun (tệp .js) được xử lý bởi trình tải YUI3. Nó cũng sử dụng cấu hình (tùy chọn, không hiển thị ở đây) để chọn phiên bản -debug hoặc -min (ified) của các mô-đun để tải.
Đây là một giải pháp có cách tiếp cận rất khác: gói tất cả các mô-đun thành một đối tượng JSON và yêu cầu các mô-đun bằng cách đọc và thực thi nội dung tệp mà không có yêu cầu bổ sung.
https://github.com/STRd6/require/blob/master/main.coffee.md
STRd6 / request phụ thuộc vào việc có một gói JSON trong thời gian chạy. Các requirechức năng được tạo ra cho gói đó. Gói chứa tất cả các tệp mà ứng dụng của bạn có thể yêu cầu. Không có thêm yêu cầu http được thực hiện vì gói này bao gồm tất cả các phần phụ thuộc. Điều này gần như người ta có thể nhận được yêu cầu kiểu Node.js trên máy khách.
Cấu trúc của gói như sau:
entryPoint: "main"
distribution:
main:
content: "alert(\"It worked!\")"
...
dependencies:
<name>: <a package>
Không giống như Node, một gói không biết đó là tên bên ngoài. Nó tùy thuộc vào nhịp độ bao gồm cả sự phụ thuộc để đặt tên cho nó. Điều này cung cấp sự đóng gói hoàn chỉnh.
Với tất cả những gì thiết lập, đây là một chức năng tải tệp từ bên trong một gói:
loadModule = (pkg, path) ->
unless (file = pkg.distribution[path])
throw "Could not find file at #{path} in #{pkg.name}"
program = file.content
dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)
module =
path: dirname
exports: {}
context =
require: generateRequireFn(pkg, module)
global: global
module: module
exports: module.exports
PACKAGE: pkg
__filename: path
__dirname: dirname
args = Object.keys(context)
values = args.map (name) -> context[name]
Function(args..., program).apply(module, values)
return module
Bối cảnh bên ngoài này cung cấp một số biến mà các mô-đun có quyền truy cập.
Một requirechức năng được tiếp xúc với các mô-đun nên chúng có thể yêu cầu các mô-đun khác.
Các thuộc tính bổ sung như tham chiếu đến đối tượng toàn cục và một số siêu dữ liệu cũng được hiển thị.
Cuối cùng, chúng tôi thực thi chương trình trong mô-đun và ngữ cảnh nhất định.
Câu trả lời này sẽ hữu ích nhất cho những ai muốn có câu lệnh yêu cầu kiểu node.js đồng bộ trong trình duyệt và không quan tâm đến các giải pháp tải tập lệnh từ xa.
Tôi nhận thấy dự án thành phần cung cấp quy trình làm việc hợp lý hơn nhiều so với các giải pháp khác (bao gồm request.js), vì vậy tôi khuyên bạn nên xem https://github.com/component/component . Tôi biết đây là câu trả lời hơi muộn nhưng có thể hữu ích cho ai đó.
Đây là một cách nhẹ nhàng để sử dụng request và export trong ứng dụng web của bạn. Đó là một trình bao bọc đơn giản tạo ra một biến chung "không gian tên" và bạn bọc mã tương thích CommonJS của mình trong một hàm "xác định" như sau:
namespace.lookup('org.mydomain.mymodule').define(function (exports, require) {
var extern = require('org.other.module');
exports.foo = function foo() { ... };
});
Tài liệu khác tại đây:
Các clientside-yêu cầu thư viện cung cấp một không đồng bộ load()chức năng có thể được sử dụng để tải bất kỳ tập tin JS hoặc NPM mô-đun (mà sử dụng module.exports), bất kỳ .csstập tin, bất kỳ .json, bất kỳ .html, bất kỳ tập tin nào khác dưới dạng văn bản.
ví dụ,
npm install clientside-require --save
<script src = '/node_modules/clientside-require/dist/bundle.js'></script>
<script>
load('color-name') // an npm module
.then(color_name=>{
console.log(color_name.blue); // outputs [0, 0, 255]
})
</script>
Một phần thực sự thú vị của dự án này là bên trong bất kỳ load()tập lệnh ed nào , bạn có thể sử dụng require()hàm đồng bộ giống như cách bạn mong đợi trong node.js!
ví dụ,
load('/path/to/functionality.js')
và bên trong /path/to/functionality.js:
var query_string = require("qs") // an npm module
module.exports = function(name){
return qs.stringify({
name:name,
time:new Date()
}
}
Phần cuối cùng đó, thực hiện require()phương pháp đồng bộ , là thứ cho phép nó sử dụng các gói NPM được xây dựng để chạy trên máy chủ.
Mô-đun này được thiết kế để triển khai requirechức năng càng chặt chẽ càng tốt trong trình duyệt. Tuyên bố từ chối trách nhiệm: Tôi đã viết mô-đun này.