Mẹo của bạn để thực hành tốt nhất cho cấu trúc ứng dụng web là gì?

Question

Tôi làm rất nhiều ứng dụng tùy chỉnh tại nơi làm việc. Tôi đang cố gắng xác định một số tiêu chuẩn cho các ứng dụng mới. Thứ gì đó giống Element.

CSS: Làm thế nào để bạn sắp xếp các biểu định kiểu? Tôi có nên có một tờ định kiểu cơ sở cho toàn bộ trang web và một trang cho từng trang tùy chỉnh không? Tôi có nên có một phong cách in khác không? Tôi đã nghe nói rằng việc liên kết nhiều tệp hơn cần nhiều thời gian hơn để trình duyệt truy xuất chúng. (Nhiều đối tượng trên mỗi trang ... cũng là một vấn đề với nhiều tệp hoặc hình ảnh javascript) ... Bao nhiêu là quá nhiều? Bạn có nhận xét rất nhiều về CSS của mình không? Cung cấp bất kỳ cấu trúc lồng nhau nào? Alphabetize trong các phần tử? Tôi có cần thiết lập lại không? Điều gì về nhập khẩu? Và kiểu chữ?

Javascript: Về cơ bản cùng một câu hỏi. Tệp Javascript ... Tôi có nên bao gồm một hoặc hai thư viện đẹp (ví dụ: JQuery và Prototype) và sau đó có một thư viện khác cho mỗi trang không? Bây giờ tôi đột nhiên bao gồm 5 hoặc 6 tệp CSS và JS ...

Cấu trúc thư mục: Bạn tổ chức trang web như thế nào? Hiện tại, tôi sử dụng một cái gì đó như

/CSS   ... For CSS files 
/JS   ... For javascript files 
/INC   ... For private code includes 
/ASSETS/IMG ... For images 
/ASSETS/AU ... For audio 
/ASSETS/SWF ... For Flash 

Ngoài ra, mọi lời khuyên khác đều được hoan nghênh. Cảm ơn!!

Answer 1

Tôi có nên có một tờ định kiểu cơ sở cho toàn bộ trang web và một trang cho từng trang tùy chỉnh không?

Thực dụng. Nếu bạn có vài quy tắc đủ để bạn có thể sắp xếp tất cả chúng trong một tệp và giữ lại sự giám sát về những gì làm gì, hãy làm điều đó. Nếu bạn có một số lượng đáng kể các quy tắc chỉ áp dụng cho một số phần hoặc trang riêng lẻ trong trang web của mình, thì tất cả có nghĩa là tách chúng ra thành biểu định kiểu phụ của riêng chúng, nhưng không cảm thấy cần phải tạo biểu định kiểu riêng cho từng trang ngay cả khi nó chỉ chứa hai quy tắc.Thêm một lớp hoặc id cụ thể của trang vào < nội dung> để bạn có thể chọn các trang đơn lẻ từ biểu định kiểu được chia sẻ nếu bạn cần.

Việc tách kiểu thành biểu định kiểu là vì lợi ích của bạn với tư cách là tác giả, vì vậy hãy làm những gì bạn thấy dễ quản lý nhất. Đối với một trang web phức tạp có thể sẽ có nhiều hơn một tệp CSS, nhưng nó sẽ không có hàng tá.

Tôi có nên có cách khác cho kiểu in không?

Thường có. Mặc dù bạn có thể nhúng các kiểu in bên trong một biểu định kiểu khác bằng cách sử dụng quy tắc @media, nhưng điều này thường là lỗi, vì vậy việc đặt phương tiện trong thẻ liên kết <> thường dễ nhất. Trong mọi trường hợp, các bảng định kiểu in thường khác với các đối tác màn hình của chúng, điều đó chỉ có ý nghĩa để giữ riêng các quy tắc của chúng.

Tôi nghe nói rằng việc liên kết nhiều tệp sẽ mất nhiều thời gian hơn để trình duyệt truy xuất chúng.

Có, nhưng hiệu ứng này thường được phóng đại. HTTP/1.1 làm giảm độ trễ theo yêu cầu bằng cách giữ kết nối giữa máy khách và máy chủ còn sống, đây là một sự giảm thiểu mạnh.

Bao nhiêu là quá nhiều?

Đủ để bạn không thể có nhiều bảng định kiểu đó. Kịch bản có thể là một vấn đề nếu bạn đang sử dụng loại khung yêu cầu một tệp kịch bản cho mỗi lớp, nhưng nói chung thì không sao. Nó thường gặp nhiều vấn đề hơn với nhiều hình ảnh nhỏ.

Bạn có nhận xét nhiều về CSS của mình không?

Nhận xét nhẹ thường là đủ. Kiểu quy tắc khai báo của CSS thường không đủ phức tạp để cần mã giải thích sâu sắc có thể yêu cầu. Đặc biệt, mặc dù, tài liệu bất cứ điều gì phản trực giác như hack trình duyệt cụ thể.

Sắp xếp thứ tự trong các phần tử?

Không trừ khi điều đó giúp bạn quản lý dễ dàng hơn. Thông thường nó sẽ không, bạn sẽ cố gắng nhóm các quy tắc tương tự, hoặc các quy tắc áp dụng cho các nhóm tương tự của các yếu tố.

Tôi có cần đặt lại không?

Đặt lại toàn bộ? Không phải nếu bạn biết những gì bạn đang làm và có thể chọn các mặc định có vấn đề cụ thể mà bạn muốn đặt lại.

Tôi có nên bao gồm một hoặc hai thư viện đẹp (JQuery và Prototype, ví dụ)

Không bao gồm nhiều hơn một khuôn khổ, trừ khi bạn hoàn toàn phải.

và sau đó có bao gồm khác cho mỗi trang?

Nếu mỗi trang có hành vi tùy chỉnh cụ thể bạn có thể. Nhưng điều đó thường không xảy ra. Nếu bạn thực hiện các kịch bản hành vi nâng cao tiến bộ liên kết với ví dụ. tên lớp, bạn có thể bao gồm tập lệnh cho mỗi hành vi trên mỗi trang sử dụng nó, sau đó để cho nó tìm các phần tử để liên kết tự động.

Cấu trúc thư mục: Bạn tổ chức trang web như thế nào?

Cá nhân, cho Python của tôi ứng dụng/WSGI:

appfolder 
    application.py  - main WSGI entry point and control/configuration script 
    data     - run-time writable application file store 
     private   - files not available through the web server 
     public   - mounted as a virtual directory on the web server 
    logs     - access, error, application log files 
    system    - all the static application code and data 
     htdocs   - web server root folder 
      file   - static servable files 
      img   - static images 
      script  - JavaScript 
      style  - CSS 
     lib    - Python modules used by site 
      appmodule - main application code package 
     templates  - HTML page templates 
      mail   - mail text templates 

Điều quan trọng đối với tôi để giữ ‘dữ liệu’ ở một nơi riêng biệt (với các điều khoản riêng biệt) cho các ứng dụng trong ‘hệ thống’. Bạn cần có khả năng trao đổi thư mục ‘hệ thống’ để nâng cấp ứng dụng, mà không phải lo lắng rằng có những hình ảnh được tải lên trong htdocs/img bạn phải lo lắng về việc lưu giữ.

Answer 2

Làm hết sức mình để có một tờ kiểu. Liên kết các trang tính riêng lẻ cho các trang riêng lẻ sẽ đánh bại mục đích.

Bạn có thể kế thừa kiểu khác trong css của bạn bằng cách bao gồm các dòng sau ở phía trên cùng của tấm

@import url('blueprint/screen.css'); 
@import url('blueprint/styles.css'); 

trong trường hợp này tôi đang kế thừa phong cách kế hoạch chi tiết css sau đó thêm phong cách tùy chỉnh của tôi dưới đây.

Về mặt thư viện JS, tôi muốn liên kết 3 tệp.

Thư viện, một trang với tất cả các plugin, và cuối cùng là mã trang.

Đối với cấu trúc thư mục Tôi thường có những điều sau đây:

/_css /_images /_scripts file

nhưng gần đây tôi đã bắt đầu để đưa mọi thứ sử dụng để làm cho giao diện trang web/làm việc theo cách Tôi muốn nó trong một thư mục/_presentation ... sau đó bất cứ điều gì bổ sung như hình ảnh cho bài đăng blog vv sẽ đi vào/hình ảnh

Hy vọng điều này sẽ giúp.

Answer 3

Tôi đã đăng cấu trúc thư mục và nhận xét của mình trong một chuỗi khác nhưng cũng có thể áp dụng ở đây!

Tôi đã sử dụng các thiết lập sau một thời gian bây giờ với kết quả tuyệt vời:

• /trang web: Đây là nơi trang web đang hoạt thực tế của tôi sẽ sống. Tôi sẽ cài đặt CMS hoặc nền tảng của mình trong thư mục này sau khi các mẫu được tạo.

  • .htaccess (tweaks cơ bản tôi thường thấy mình cho phép anyway)
  • robots.txt (vì vậy tôi không quên để không cho phép các mục như/admin sau)

• /source: Chứa bất kỳ comp, ghi chú, tài liệu, thông số kỹ thuật, v.v.

• /templates: Bắt đầu tại đây! Tạo tất cả các mẫu tĩnh mà cuối cùng sẽ cần được chuyển vào CMS hoặc khung công tác/trang web.

  • /_behavior
    • global.js (site-specific mã; có thể được chia ra thành nhiều file khi cần thiết)

  • /_media: hình ảnh, tập tin tải về, vv Được tổ chức khi cần thiết

  • /_style: Tôi thích phát triển CSS mô-đun hơn vì vậy tôi thường kết thúc với nhiều biểu định kiểu cho từng phần duy nhất của trang web. Điều này được làm sạch rất nhiều với Blender - Tôi rất khuyên bạn nên công cụ này!

    • print.css (điều này cuối cùng được pha trộn, vì vậy sử dụng @media print)
    • reset.css (Eric Meyer's)
    • màn hình.css (đối với @media màn hình, thiết bị cầm tay) thêm
    • module khi cần thiết

  • /_vendor: tất cả các mã bên thứ 3 (jQuery, shadowbox vv)

  • Blendfile.yaml (đối với Máy xay sinh tố; xem ở trên)

  • template.html (mẫu bắt đầu cơ bản; có thể sao chép và đổi tên cho từng mẫu duy nhất)

• /kiểm tra: kiểm tra đơn vị Selenium

Answer 4

tôi luôn cố gắng để giữ cho các trình duyệt từ phải tải và giải thích quy tắc CSS và mã JS mà không được sử dụng trên HTML trong câu hỏi. Tôi đồng ý với @bobince rằng bạn chỉ nên phá vỡ phong cách và tập lệnh của trang thành một tệp riêng nếu cần thiết cho tổ chức, nhưng nếu trang web của bạn rất lớn, bạn sẽ đạt đến điểm đó.

Tuy nhiên vì tôi chỉ xây dựng các trang dựa trên mẫu, tôi bắt đầu tự hỏi tại sao tôi liên kết đến các tệp bên ngoài. Ví dụ: nếu tôi có mẫu cơ bản, những thứ tôi đặt vào phần đầu của mẫu đó sẽ được áp dụng cho tất cả các trang trên trang web của tôi. Vậy tại sao không chỉ đặt phong cách và kịch bản của tôi ở đó?

Hai lý do cần lưu ý. Đầu tiên, trình duyệt có thể lưu trữ tệp bên ngoài và sử dụng lại nó trên mọi trang có chứa nó mà không phải tải lại tất cả. Các nhà thiết kế thứ hai có thể không thoải mái trong các mẫu của bạn vì chúng đang rối tung với các tệp CSS thuần túy.

Đó là tất cả tốt và tốt cho các kiểu toàn cầu áp dụng cho mọi trang trong trang web của bạn, nhưng về những trang một lần có kiểu nào đó không được chia sẻ ở bất kỳ nơi nào khác? Nếu bạn đã thêm kiểu này vào tệp ngoài được áp dụng chung, bạn sẽ tăng thời gian tải ban đầu của trang web của mình chỉ để có kiểu chỉ được sử dụng trên một trang. Hơn nữa, khi bạn quay trở lại tập tin đó vài tháng sau, bạn có thể sẽ quên những quy tắc đó là gì.

Tôi đề xuất rằng bất kỳ quy tắc kiểu nào không được thể hiện trên mỗi trang đơn phải được đặt trong các thẻ <style> trong mẫu phụ sẽ hiển thị quy tắc HTML áp dụng cho. Điều này sẽ di chuyển tải và độ phức tạp từ bảng định kiểu toàn cầu đến trang thực tế nơi các kiểu cần thiết và đưa ra bối cảnh quy tắc để chúng có thể được duy trì trong tương lai. Nếu điều này làm sợ nhà thiết kế của bạn thì họ không cần phải viết CSS. Chỉ cần nói với họ để dính vào Photoshop và cho phép bạn làm công việc lớn-boy.

Answer 5

Chỉ cần đảm bảo bạn không sử dụng chữ in hoa cho thư mục. Nó có thể cắn bạn khi bạn phát triển trên các cửa sổ và triển khai trên một máy chủ Linux.

Answer 6

CSS: Tôi chỉ sử dụng một biểu định kiểu. Tôi chỉ tiếp tục phụ thêm vào phần dưới cùng khi tôi tiếp tục. Tôi thường đặt nhận xét trước mỗi bộ quy tắc cụ thể theo từng trang. Ctrl + F nếu tôi cần chỉnh sửa gì đó.

Javascript: Thường chỉ bao gồm một thư viện và có thể một vài plugin. Được sử dụng để ném bất kỳ trang cụ thể JS trực tiếp vào tiêu đề của trang đó, nhưng tôi tìm thấy nó một chút xấu xí và trộn 'hành vi' với dữ liệu.Vì vậy, tôi bắt đầu một mô hình mới -

MVCB - Mô hình, Chế độ xem, Bộ điều khiển, Hành vi. MVC là ứng dụng tuyệt vời cho các ứng dụng dành cho máy tính để bàn với giao diện người dùng khá tĩnh, nhưng khi bạn thêm nhiều JS, tôi nghĩ rằng nó yêu cầu thêm một lớp trừu tượng.

Như vậy, cấu trúc tập tin ban đầu của tôi:

index.php 
app 
    config 
     bootstrap.php    -- code that needs to run before anything else, or functions that don't really fit elsewhere 
     core.php     -- timezone, database, and misc settings 
     routes.php     -- default routes 
    layouts       -- layout/template files 
     flash      -- layouts for one-time popup messages 
    objects       -- all files are stored in the same folder as the controller to keep directories 
              smaller and ease reusability 
     object 
      controller.php 
      model.php 
      routes.php    -- object-specific routes to override default routes 
      behaviours    -- page-specific javascript files 
       action.js   -- included automatically on that page if this file exists 
      views 
       action.php   -- the view for this action 
    public       -- static media files, sometimes called "assets" 
     favicon.ico 
     xrds.xml 
     css 
     img 
     js 
     uploads   
core 
    app.php       -- initializes stuff 
    controller.php     -- default controller 
    dispatcher.php     -- includes everything and calls all the appropriate functions 
    model.php      -- default model that all other models inherit from 
    components      -- helper functions to used in controllers 
    datasources      -- mysql, oracle, flat-file... 
    helpers       -- functions to be used in views and layouts 
    structures      -- model helpers such as tree or polymorphic behaviours 
    utils       -- functions that are useful everywhere 
libs        -- 3rd party libs 

.htaccess

Options -Indexes 

RewriteEngine On 

RewriteCond %{REQUEST_URI} !^/app/public/ 
RewriteCond %{DOCUMENT_ROOT}/app/public%{REQUEST_URI} -f 
RewriteRule .* /app/public/$0 [L] 

RewriteCond %{REQUEST_URI} !^/app/objects/ 
RewriteRule ^([^/]+)/(.+\.js)$ /app/objects/$1/behaviours/$2 [L] 

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule .* /index.php?url=$0 [L,QSA]