RequireJS: Shablonlar va CSS-ni o'z ichiga olgan modullarni yuklash

AMD/RequireJS bilan o'ynab bo'lgach, UI modullarini, shu jumladan shablonlar va CSS-ni yuklash yaxshi fikr edi, shuning uchun ular veb-sahifadan butunlay mustaqildirlar.

Yaxshi ko'rinadi, lekin men yirtqich hayvonlarda buni ko'rmadim, shuning uchun tuzoq bo'lishi mumkin.

Quyidagi tuzilma bilan ba'zi UI modullarini o'ylab ko'ring:

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

Bir jilddagi barcha narsalar. Juda yoqimli ko'rinadi.

Main.js dagi modul shunday ko'rinishga ega:

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {

   //Load CSS (Pseudo Code)
    var cssUrl = "myWidget/styles.css";
    appendToHead(cssUrl);

    return function() {
        return {
            render: function(data) {
                  return TemplateEngine.toHtml(template, data);
            } 
        }
    }
});

Endi savollar:

  1. Biror narsa yo'qmi?
  2. Buni "standart" usulda qanday amalga oshirish mumkinligi haqida plaginlar/tushunchalar bormi?
  3. Bu erda CSS qismini boshqarish uchun kerakli bo'lgan RequireJS optimizatori, aytaylikki, JS qismlari kabi uslublar jadvallarini birlashtirish/minify?
  4. Bu haqda har qanday fikr bormi? Yaxshi yoki yomonmi?
69
Shablonlar uchun buni qilaman va u ajoyib ishlaydi. Menga faqatgina CSS bilan erishish mumkin edi, unda men optimallashni ishga sololmadim. Bu menga sirli xatolik keltirib chiqaradi va men buni hal qilish uchun vaqt topolmadim. Siz hozirda men hal qilmoqchi bo'lgan narsalar ro'yxatimda turibdi, shuning uchun men sizning savolingizga diqqat bilan qarashga harakat qilaman
qo'shib qo'ydi muallif timDunham, manba

2 javoblar

Shabloni matndan foydalangan holda qo'shilishni belgilashingiz mumkin! moduli kabi siz ko'rsatgan. Mo'ylov Shablonlar bilan buni qilaman.

Biroq, Require.js CSS fayllarini aniq qo'llab-quvvatlamaydi.

Here is the official explanation, it's explained pretty well: http://requirejs.org/docs/faq-advanced.html#css

Tartibga solish: Fevral 2012.

Templates such as handlebars can also be precompiled and included just like any other JS module http://handlebarsjs.com/precompilation.html

Tahrir: avgust 2015

Agar ushbu modulyarizatsiyadan so'ng siz " webpack ga va ayniqsa CSS-faylini yuklash . Uni .jsx fayllar bilan .css fayllarini birlashtirilgan "modul" sifatida juftlashtirish va shu bilan bog'liq CSS-ni tiklash vaqtida bitta uslub sahifasiga aylantirish uchun foydalanmoqdaman.

50
qo'shib qo'ydi
Keyin CSS bilan ishlashning "to'g'ri" usuli qanday?
qo'shib qo'ydi muallif hugomg, manba
Ha, bilaman, ko'plab alternativlar mavjud, lekin menda hali ham JS modullari uchun standart tizimimiz bor, lekin CSS-ga kelganda biz yovvoyi G'arbga qaytamiz.
qo'shib qo'ydi muallif hugomg, manba
CSS matnni nima uchun yuklab olish mumkinligini tushunmayapman! plaginmi? CSS faqat utf8 matn emasmi?
qo'shib qo'ydi muallif Alexander Mills, manba
AFAIKda "to'g'ri" yo'l yo'q. variantlar quyidagilar: 1) an'anaviy aloqa yorlig'i 2) JavaScript yordamida uslublar jadvalini dinamik tarzda o'z ichiga oladi. Agar JavaScript CSS-ga bog'liq bo'lsa va siz uni dinamik ravishda yuklashni xohlasangiz, Java-ning vidjetidan oldin yuklangan CSS sinfidan bir xususiyatning mavjudligini tekshirish uchun funktsiya yaratishingiz kerak bo'ladi.
qo'shib qo'ydi muallif Chris Biscardi, manba
matn orqali CSS-ni yuklashingiz mumkin! Modulni ajratib oling va uni ajrim qil.
qo'shib qo'ydi muallif Chris Biscardi, manba
Css fayllarini injectCSS funktsiyasi orqali yuklash uchun yesnope.js dan foydalanishingiz mumkin
qo'shib qo'ydi muallif Saleh, manba

NeedJS uchun uchinchi tomon CSS-ning plaginlari mavjud, ular yaxshi ishlaydigan ko'rinadi: https://github.com/VIISON/ RequireCSS/.

6
qo'shib qo'ydi
r.js optimallashchisini qo'llab-quvvatlaydigan bulardan yaxshiroq foydalanish github.com/guybedford/require-css/ muammolari
qo'shib qo'ydi muallif Offirmo, manba
Plagin juda eski bo'lsa-da, 2015 yilda ham ishlaydi.
qo'shib qo'ydi muallif budhajeewa, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb