前端模块化开发思维

学习过程中自己练习的测试代码，都是小白式先写好HTML中架构，然后对这些“骨架”进行增添样式，感觉没毛病呀。

譬如，假设创建6个盒子，一个盒子宽高100px、背影颜色红色；一个宽高300px、蓝色；一个宽高450px、黄色；一个宽高100px、蓝色；一个宽高450px、红色；一个宽高300px、黄色。

作为传统的我一直采用传统的正向顺序编写，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传统正向开发</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="传统正向开发.css" />
    <!-- <script src="main.js"></script> -->
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</body>
</html>

需要6个盒子，好的，就先写了6个盒子，排排站好。然后就是给每个盒子改造改造，

.box1{
    width:100px;
    height:100px;
    background-color: red;
}

.box2{
    width:300px;
    height:300px;
    background-color: blue;
}

.box3{
    width:450px;
    height:450px;
    background-color: yellow;
}

.box4{
    width:100px;
    height:100px;
    background-color: blue;
}

.box5{
    width:450px;
    height:450px;
    background-color: red;
}

.box6{
    width:300px;
    height:300px;
    background-color: yellow;
}

如期完成，真的没毛病呀。

但是，however，but，正所谓学海无涯，自学眼光短浅，今日看了某教学视频，领教了大企业，大开发，大神般的处理流程，果真不一样的，想的角度也不一样的，可能对于大佬们会觉得稀疏平常，但是我真心觉得很受启发呀。

正因为问题中要求的功能就是很固定的这几种，按照传统正向开发顺序，先写HTMl中的box再根据每个box写对于的样式，这样太过于局限。所以可以采用逆向开发思维，已知的就那么几种功能，就可以先定义CSS文件中所需要的功能，这样就可以根据功能去配选不同功能，搭建出不同的box，这样更加灵活。不仅如此，逆向开发可以将写好的CSS文件封装，留有后人开发引用，一个HTML文件中不止可引用一个CSS文件，一般开发中只需要写一个main CSS文件，写入自己开发的样式，其它可以引用他人写好的CSS文件。嗯...以上都是看视频记录的话，我没经验说出来，就是这么诚实。

先根据功能，写好CSS中的样式，

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

.yellow{
    background-color: yellow;
}

.size100{
    width:100px;
    height:100px;
}

.size300{
    width:300px;
    height:300px;
}

.size450{
    width:450px;
    height:450px;
}

再依据这些功能，选配各种功能搭建盒子，这样的前提是因为标签的class可以有多个呀，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>逆向开发</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="逆向开发.css" />
    <!-- <script src="main.js"></script> -->
</head>
<body>
    <div class="red size100"></div>
    <div class="blue size300"></div>
    <div class="yellow size450"></div>
    <div class="blue size100"></div>
    <div class="red size450"></div>
    <div class="yellow size300"></div>
</body>
</html>

前端模块化开发思维

猜你喜欢