Last week, at the request of the project director, I standardized the front-end architecture. So I read a lot about the architecture and JavaScript programming in Yui.ArticleAnd carefully read "Writing High QualityCodeThis book. If you have a master who can see my small article, please also point out the bad, I need your experience.
Is my document structure:
In general, it is still divided into four parts:
1. index. php is the main page.
2. The template is the module page, and the public is the public module page.
3. JS is divided into three layers: The underlying jquery, the middle layer com, and the page layer of the specific page.
4. CSS is divided into three layers. The Reset is initialization, The contain is the compatibility code of external control, and the style layer of the specific page.
5. IMG is divided into image files and Flash files corresponding to the specific page of the template.
CSS:
In the CSS layer, I borrowed a lot from Yui's design ideas and processed styles through combination hooks.
1. the reset layer defines the initialization of all HTML tags.
2. The contain layer defines the external control of the module, such as font color padding margin width height background, and compatibility files.
3. The specific page layer is the style of the specific content. I adopt the inline method to reduce HTTP requests and edit the style by the specific page engineer.
(1) The organization form of the In in layer, such:
(2) The organization form of the page layer, for example:
Template:
In the template folder, the content of the specific module page is mainly placed, but I still divide it into two parts: public and specific module page.
1. In the publicfolder, my idea is to set public pages, such as the headers of nav.html, the bottom of footer.html, and public modules.
2. The specific module page is completed by the specific page creation engineer.
IMG:
The IMG folder contains images and Flash files.
JS:
In the JS file, I divide it into three folders: COM jquery page.
1. Put the jquery file as the name suggests. I downloaded the learning version file. I used Google or min for online release.
2. In the com folder, my idea is to use the Yui solution to place On-Demand Loading files, such as jquery plug-ins and self-compiled abstract JavaScript, and public parts.
3. for Modular programming in the page folder, there are three methods in my mind, but I have not decided which one to adopt.
(1): scripts written by specific front-end engineersProgramInline programming in the Organization by using anonymous functions and namespaces on the specific module page,
(2): The uniform file format is still using anonymous functions, but the difference is that the object-oriented programming method is used here,
(3): Unified File format. The original JavaScript function is used here,
(4): How to uniformly manage class functions in JavaScript programming. [Aptana]
Css3 applications and compatible code placement:
1. css3 applications are embedded in a specific page by a specific page maker. They are combined with hooks and marked with annotations, for example:
/* Rounded corner */
. De {-moz-border-radius: 5px; -- WebKit-border-radius: 5px; border-radius: 5px ;}
Note: In Firefox and chrome, the new version is compatible with the standard border-radius and-moz-WebKit kernel prefixes.
2. compatible code placement. My idea is to place files. For example:
<! -- [If IE 6]>
<LINK rel = "stylesheet" type = "text/CSS" href = "CSS/contain/contain.css"/>
<! [Endif] -->
Note: The official Microsoft compatible API is used here.
Index. php homepage organization form:
In the main container, my idea is to use PHP to load modules, but here we still need to pay attention to two points.
1, Encoding Problems, need to use a unified encoding format, UTF-8.
2. Note the frame.
Release Version:
1. Compression: All css js and IMG images are compressed. The file is organized in the same folder with the suffix-min. Yui compressor and Yui smush. It are used.
Yui compressor address: http://refresh-sf.com/yui/
Yui smush. It address: http://www.smushit.com/ysmush.it/
2. js document annotation. If method 1 is adopted, the specific front-end engineer will write the annotation code. If method 2 or 3 is used, yuidoc is used.
Yuidoc address: http://developer.yahoo.com/yui/yuidoc/
Team Cooperation:
1. Actively communicate with backend engineers and be patient.
2. You need to use more and actively search for problems. [Maintenance: the maintenance of a specific page module is jointly maintained by the page creation engineers and front-end engineers. The public part is maintained by the UI group leader]
3. Be sure to write comments and related documents.
4. Communication, communication, communication, and communication.
I don't know how the front-end architecture is organized. The above is my organizational structure. If there is a good way, I 'd like to inform you. thank you first.