Cajon هو مُحمل وحدة JavaScript للمتصفح الذي يمكنه تحميل وحدات CommonJS/node وAMD. إنه مبني على رأس RequireJS.
يمكنك استخدامه لترميز الوحدات النمطية لمشروعك بأسلوب CommonJS/node، ثم استخدام RequireJS Optimizer لإنشاء جميع الوحدات في حزمة متوافقة مع AMD. يتيح لك هذا بعد ذلك استخدام شريحة AMD API صغيرة، مثل اللوز، للحصول على تعليمات برمجية محسّنة بشكل جيد دون الحاجة إلى محمل وقت التشغيل الكامل.
لماذا تستخدم هذا بدلاً من RequireJS؟ بعض الأسباب المحتملة:
define ( function ( require ) {
/*module code here */
} ) ;
بخلاف ذلك، يجب أن تستخدم RequireJS، أو محمل AMD آخر.
لاحظ قسم القيود أدناه. من المحتمل أن تصر بأسنانك بسبب الإحباط إذا لم تستمع إليها.
إذا كنت لا تحب هذا المُحمل تحديدًا، ولكنك تحب فكرة مُحمل الوحدة النمطية المزدوج AMD وCommonJS/node، فقد تفضل مُحمل Inject الخاص بـ LinkedIn بشكل أفضل.
يتكون الكاجون من:
//@ sourceURL=
لتحديد أسماء البرامج النصية لمصححات البرامج النصية. لن يستخدم Cajon أسلوب XHR+eval إلا إذا كان الطلب موجهًا إلى نفس المجال مثل مستند HTML. إذا تم اعتبار طلب البرنامج النصي موجودًا في مجال آخر، فسيتم تفويضه فقط إلى وظيفة requirejs.load() الافتراضية، حيث سيتم تحميل البرنامج النصي بعلامة ، ويتوقع أن يكون بتنسيق AMD، أو البرنامج النصي "المتصفح العالمي" التقليدي.
يمكنك تجاوز هذا السلوك لاستخدام XHR لبعض الطلبات عبر النطاقات إذا كنت تعلم أن المستخدمين لديك سيستخدمون المتصفحات والخوادم التي تدعم CORS. راجع قسم التكوين أدناه.
يتم تغليف البرامج النصية التي تم جلبها في غلاف AMD التالي:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
ويسمح باستخدام __dirname و__filename داخل هذا الكود المغلف.
يقوم Cajon بتعيين متغير cajon
ليكون هو نفسه المتغير requirejs
، لذا يمكنك استخدام ذلك إذا كنت تريد استدعاء استخدام cajon على وجه التحديد. ومع ذلك، فإن مُحسِّن requirejs لا يفهم سوى require
و requirejs
و define
، ولن يفهم cajon
. يعد هذا مهمًا بشكل خاص إذا كنت تستخدم خيار mainConfigFile
الخاص بالمُحسِّن.
من الأفضل استخدام require
العالمي فقط إذا كنت تريد أن يكون الكود قابلاً للنقل إلى RequireJS، واللوز، ولوازم AMD الأخرى، ولا تقوم بالكشف عن cajon
إلا إذا كنت تريد معرفة ما إذا كان الكاجون متاحًا أم لا.
يوجد دليل demo
يُظهر أمثلة الاستخدام، ولكن بشكل أساسي، ضع cajon.js في علامة وقم بتحميل الوحدات عبر
require([])
. لاحظ قسم القيود أدناه بالرغم من ذلك.
لتحسين العرض التوضيحي، قم بتشغيل:
node tools/r.js -o demo/app.build.js
سيؤدي هذا إلى إنشاء المشروع الأمثل في دليل demo-built
. سيتم تحويل جميع الوحدات الموجودة في مخرجات البناء إلى نمط AMD، بحيث يمكن تحميلها عبر المجال دون الحاجة إلى اعتبارات CORS خاصة.
يتطلب ملف تعريف بناء app.build.js أن يكون مُحسِّن r.js هو الإصدار 2.0.2 أو إصدار أحدث، لأنه يستخدم خيار بناء cjsTranslate
الخاص بالإصدار 2.0.2 والذي يحول وحدات CommonJS/node إلى ملف تعريف () للبناء.
في حالة استخدام فولو:
volo add cajon
في حالة استخدام npm:
npm install cajon
أو عنوان URL لأحدث إصدار:
https://raw.github.com/requirejs/cajon/latest/cajon.js
لذلك لا تتوقع أن npm install
بعض التعليمات البرمجية، ثم تكون قادرًا على طلبها باستخدام cajon.
تستخدم Node عمليات بحث متعددة عن مسارات node_modules
للعثور على التعليمات البرمجية وهذا ليس فعالاً للقيام به في سياق المتصفح. أيضًا، تعتمد العديد من وحدات العقد على المكتبة القياسية للعقدة أو بيئة العقدة، والتي لا تتوفر افتراضيًا في متصفح الويب.
إذا كنت تريد استخدام بعض التعليمات البرمجية المثبتة على npm، وتعلم أنها ستعمل في المتصفح، فيمكنك جعلها تعمل مع cajon، ولكنك ستحتاج على الأرجح إلى استخدام المسارات والخريطة والحزم requirejs config للوصول إليها عمل.
أنظمة الوحدة النمطية CommonJS/node هي أنظمة IO للملفات المحلية متزامنة. لذا فهم يسمحون بهذه الأنواع من البنيات:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
سيفشل المثال الأول في بيئة متصفح AMD، حيث يجب معرفة جميع التبعيات وتنزيلها وتنفيذها قبل تشغيل التعليمات البرمجية. إذا لم يكن "a" و"b" في تلك الحالة بالفعل، فمن المحتمل أن يؤدي المثال الأول إلى حدوث خطأ.
المثال الثاني يمكن أن يعمل، لكن اعلم أن برنامج تحميل AMD سيقوم بتنزيل وتنفيذ "a" و"b" قبل تشغيل هذا الرمز.
إذا كنت تستخدم قرارًا في وقت التشغيل للحصول على تبعية، فاستخدم نمط رد الاتصال require() المدعوم بواسطة محمل AMD:
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
أو فكر في إنشاء مكون إضافي لمحمل AMD يمكنه القيام بمنطق القرار ولكن لا يزال يتم التعامل معه على أنه تبعية حرفية لسلسلة واحدة:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
يمكن استخدام كل من المكونات الإضافية التي تتطلب نمط رد الاتصال والمحمل مع cajon نظرًا لأنها تستخدم requirejs فقط خلف الكواليس.
لن يستخدم Cajon أسلوب XHR+eval إلا إذا كان الطلب موجهًا إلى نفس المجال مثل مستند HTML. يمكنك تجاوز هذا السلوك إذا كنت تعلم أنه سيتم استخدام المتصفحات والخوادم التي تدعم CORS.
قم بإعداد وظيفة useXhr
في تكوين cajon
الذي تم تمريره إلى المُحمل:
require . config ( {
cajon : {
useXhr : function ( url , protocol , hostname , port ) {
//Return true if XHR is usable, false if the
//script tag approach to an AMD module/browser globals
//script should be used.
//url is the url being requested.
//protocol, hostname and port area all values from the
//current page that is using cajon. Compare them with
//what is in `url` to make your decision.
}
}
} ) ;
إذا كنت بحاجة إلى تكوين كل كائن XHR قبل أن يرسل طلبه، فيمكنك تنفيذ طريقة onXhr
التي يتم استدعاؤها بعد xhr.open()، ولكن قبل إعداد xhr.onreadystatechange() وقبل استدعاء xhr.send() :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
معهد ماساتشوستس للتكنولوجيا
مدونة قواعد السلوك لمؤسسة jQuery.