前端开发文件规范

规范

1. 文件夹规范

  • font —— 字体文件夹（看需求）—— 无需修改，直接拖过去
  • img —— 图片文件夹 —— 无需修改，直接拖过去
  • css —— 样式文件夹
    • base.css —— 公共样式与特殊样式（看需求）
    • p1.css —— 页面1的样式
    • p2.css —— 页面2的样式
    • ……
    • pn.css —— 页面n的样式
  • js —— js文件夹
    • script.js —— 全局事件代码存放（页面拖动，音乐播放等）
    • p1.js —— 页面1的交互
    • p2.js —— 页面2的交互
    • ……
    • pn.js —— 页面n的交互
  • media —— 媒体文件夹（看需求） —— 无需修改，直接拖过来
  • index.html

2. 页面 html规范

index.html 页面标签固定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>document</title>
        <link rel="stylesheet" type="text/css" href="css/base.css"/>
        <link rel="stylesheet" type="text/css" href="css/p1.css"/>
        <link rel="stylesheet" type="text/css" href="css/p2.css"/>
        <link rel="stylesheet" type="text/css" href="css/p3.css"/>
        <!-- ...... -->
    </head>
    <body>
        <div class="content">
            <div class="music"><!-- 视需求确定是否有 music功能 -->
                <img src="/img/music.png" alt="" />
                <audio id="music">
                    <source src="" type="audio/mp3">
                </audio>
            </div>
            <div class="loading"></div><!-- 视需求确定是否有 loading页面 -->
            <div class="page page1 active"></div><!-- 页面出现效果使用 active类加载 -->
            <div class="page page2">
                <div class="p2_title">XXX</div><!-- 注意给当前页面的子元素添加页面前缀 -->
            </div>
            <div class="page page3"></div>
            <!-- ...... -->
        </div>

        <script src="/js/script.js"></script>
        <script src="/js/p1.js"></script>
        <script src="/js/p2.js"></script>
        <script src="/js/p3.js"></script>
        <!-- ...... -->
    </body>
</html>
  • 每个 div.page 都是一页内容
  • 每个页面都有对应的 css文件 与 js文件
  • 根据给定需求来添加有没有 loading页面、music功能、弹窗特效等等
  • 特殊需求的样式全部写在 base.css文件中
  • 能够使用图 ps切图实现的则使用 ps切图实现，切图命名按照页面添加前缀（如 p1_xxx、p2_xxx）

3. CSS样式规范

(1) 公共样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
*{
    margin: 0;padding: 0;box-sizing: border;
}
body,html{
    width: 100%;height: 100vh;
    overflow: hidden;position: relative;
    font-size: 14px;
}
.content{
    width: 100%;    
    /* 当页面为竖直滚动时使用 width */
    /* height: 100%; */
    /* 当页面为横向滚动时使用 height */
    position: relative;top: 0;left: 0;
}
.page{
    width: 100%;height: 100vh;
    position: relative;
	background-position: center center; background-size: cover; background-repeat: no-repeat;
}
a{text-decoration: none}
button,input{outline: none; border: none}
button{cursor:pointer}
li{list-style: none}

这一部分两人都要写一份（中途不进行公共样式公共事件的传递），结尾进行代码合并。
有一些特殊的公共代码也写在里面：

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix::before, .clearfix::after{
    content:"";
    display: block;width: 0;height: 0;
    visibility: hidden;clear: both;
}
.clearfix{zoom: 1;}
.loading{ 
    /* ... */
}
.music{
    /* ... */
}

例如一些常用样式（如清除浮动）和一些特殊需求的样式（如 loading、music）等。

(2) 页面样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.page1{
    /* .... */
}
.p1_title{
    /* ... */
}
.p1_content{
    /* ... */
}
@keyframes p1_xxx{
    from{}
    to{}
}
/* ... */

上面为打页面样式时的一些案例，有以下几个注意点：

  • 每页类名都应该添加页面前缀，如 p1_xxx、p2_xxx等，包括动画名称
  • 类名的取名应当合理
  • 在没有实现页面拖动事件的时候，可以在根标签（page1）上添加 display: none来关闭本页面，从而继续编写下一个页面
  • 一些页面触发效果（如到当前页面就触发动画之类的）通过类名 active控制动画（尽量使用 CSS来进行动画制作）

3. js代码规范

(1) 公共事件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 加载页面代码
window.onload = function(){
    setInterval(function(){
        // ....
    }, 50)
}

// 页面拖动代码
let content = document.querySelector(".content");
content.onmousedown = content.ontouchstart = function(e){
    // ....
    content.onmousemove = content.ontouchmove = function(el){
        // ....
        content.onmouseup = content.ontouchend = function(elem){
            // ....
        }
    }
}

// 音乐播放代码
let musicBox = document.querySelector(".music");
let music = document.querySelector("#music");
let isPlay = true;
musicBox.onclick = function(){
    if(isPlay)
        music.pause();
    else
        music.play();
    isPlay = !isPlay;
}

(2) 页面代码

1
// 视需求而定代码

(3) 总结

  1. js中的变量命名需要添加前缀p1_xxx、p2_xxx等
  2. 公共代码仅需一个人编写
  3. 对页面有触发效果的在滑动时进行类名 active的添加

4. 任务分工

设两人分别为 a和 b。
拿到任务后，第一时间拷贝分享题目。
大致浏览完页面后，开始进行分工。

  1. 页面数量 / 2 = 每人平均页面数
  2. 将页面之间有关联的页面进行分配（如 a负责的页面3和 b负责的页面4之间有关联，则 b将自己其中某个页面与 a的页面3进行交换，以此类推）
  3. 将 a的页面数量减一分配给 b，然后 a负责公共事件的编写。
  4. 切图，站点文件等建立两人分别负责自己的模块。
  5. 三小时完工，剩余一小时进行页面合并与优化。

5. 最后

其实也没啥难度，基础打好，配合磨炼一下，一等奖没啥问题。