แนวทางปฏิบัติที่ดีที่สุดในการจัดระเบียบไลบรารี Javascript และโครงสร้างโฟลเดอร์ CSS [ปิด]

คุณจัดระเบียบโฟลเดอร์ js & css ในเว็บแอปพลิเคชันของคุณอย่างไร?

โครงสร้างโครงการปัจจุบันของฉันเป็นแบบนี้:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

แต่มันซับซ้อนกว่าเมื่อฉันใช้ไลบรารี javascript & ปลั๊กอิน css จำนวนมาก ปลั๊กอิน Javascript มาพร้อมกับไฟล์. js ของตัวเองและบางครั้งก็มีไฟล์. css ของตัวเอง

ตัวอย่างเช่นเมื่อฉันใช้ JQuery กับปลั๊กอิน JQueryUI ฉันใส่ jquery.js และ jquery-ui.js ไว้ในไดเร็กทอรี js / lib แต่ JQueryUI มาพร้อมกับไฟล์ css ของตัวเอง ฉันควรใส่ css จากปลั๊กอิน javascript เพื่อแนวทางปฏิบัติที่ดีที่สุด? ฉันควรใส่ไว้ในโฟลเดอร์ lib เพื่อแยกความแตกต่างของปลั๊กอิน css และ javascript css หรือไม่ หรือที่อื่น?

ฉันรู้ว่ามันเป็นความชอบส่วนตัว แต่ฉันแค่อยากรู้ว่าพวกคุณจัดระเบียบโฟลเดอร์โครงการของคุณอย่างไร

ขอบคุณล่วงหน้า :)

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

โครงการของคุณ

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

• appcropolis- โครงการ
• my-index.html

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

• appcropolis- โครงการ
• ทรัพยากร
• ผู้ขาย
• my-index.html

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

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

• appcropolis- โครงการ
• ทรัพยากร
• css
• js
• ภาพ
• ข้อมูล
• ผู้ขาย
• my-index.html

jsโฟลเดอร์จะถือรหัส Javascript ของคุณ ในทำนองเดียวกันโฟลเดอร์imagesเป็นที่ที่คุณควรเพิ่มรูปภาพที่ใช้โดยตรงจาก index.html หรือหน้าอื่น ๆ ในแอปพลิเคชันของคุณ ไม่ควรใช้โฟลเดอร์รูปภาพนี้เพื่อโฮสต์ไฟล์ที่เกี่ยวข้องกับสไตล์ชีท โค้ด CSS และรูปภาพที่เกี่ยวข้องควรอยู่ในโฟลเดอร์css ด้วยการทำเช่นนี้คุณสามารถสร้างเพจที่สามารถใช้ธีมต่างๆได้อย่างง่ายดายและคุณอนุญาตให้แอปพลิเคชันของคุณพกพาได้มากขึ้น

• appcropolis- โครงการ
• ทรัพยากร
• css
• ธีมสีฟ้า
• background.png
• ภาพ
• background.png
• blue-theme.css
• my-index.css
• js
• my-index.js
• my-contact-info.js
• ภาพ
• ผลิตภัณฑ์
• computer.jpg
• cellphone.png
• printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• ข้อมูล
• some-data.json
• เพิ่มเติม data.xml
• ตาราง data.csv
• extra-data.txt
• ผู้ขาย
• jquery
• ภาพ
• ajax-loader.gif
• ไอคอน -18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• บาง css ไลบรารี
• plugin.jquery บางตัว
• my-index.html
• my-contact-info.html
• my-products.html

ตัวอย่างก่อนหน้านี้แสดงเนื้อหาของโฟลเดอร์css สังเกตว่ามีไฟล์ชื่อ default.css ซึ่งควรใช้เป็นไฟล์ CSS หลักของคุณ รูปภาพที่ใช้โดยสไตล์ชีตเริ่มต้นควรอยู่ในโฟลเดอร์รูปภาพ หากคุณต้องการสร้างสไตล์ชีตอื่นหรือหากคุณต้องการลบล้างกฎที่กำหนดไว้ในสไตล์ชีตเริ่มต้นของคุณคุณสามารถสร้างไฟล์ CSS เพิ่มเติมและโฟลเดอร์ที่ติดต่อได้ ตัวอย่างเช่นคุณสามารถสร้างสไตล์ชีต blue-theme.css และวางรูปภาพที่เกี่ยวข้องทั้งหมดไว้ในธีมสีน้ำเงินโฟลเดอร์ หากคุณมีโค้ด CSS หรือ Javascript ที่ใช้กับเพจเดียว (ในกรณีนี้คือ my-index.html) คุณสามารถจัดกลุ่มโค้ดเฉพาะเพจภายในไฟล์. css และ. js ที่มีชื่อเพจเดียวกันได้ (ei my-index .css และ my-index.js) โค้ด CSS และ Javascript ของคุณควรเป็นแบบทั่วไปเท่าที่จะทำได้ แต่คุณสามารถติดตามข้อยกเว้นได้โดยวางไว้ในไฟล์แยกกัน

คำแนะนำขั้นสุดท้าย

คำแนะนำขั้นสุดท้ายบางประการจะต้องทำตามชื่อโฟลเดอร์และไฟล์ ตามกฎทั่วไปตรวจสอบให้แน่ใจว่าคุณใช้อักษรตัวพิมพ์เล็กในชื่อโฟลเดอร์และไฟล์ทั้งหมด เมื่อใช้คำหลายคำเพื่อตั้งชื่อไฟล์หรือโฟลเดอร์ให้คั่นด้วยยัติภังค์ (เช่น my-company-logo-small.png) หากคุณทำตามคำแนะนำในบทความนี้คุณควรจะสามารถรวมหลาย ๆ เพจได้ในขณะที่เก็บทรัพยากรทั่วไปไว้ด้วยกันและแยกโค้ดที่กำหนดเองออกจากกันอย่างดี

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

เครดิตที่มา: วิธีจัดระเบียบไฟล์ HTML, CSS และ Javascript ของคุณ

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

นี่คือวิธีที่ฉันจัดระเบียบทรัพยากรคงที่ของแอปพลิเคชันของฉัน