传统前端也能够实现组件化开发

时间 2019-11-11

标签传统前端能够实现组件开发繁體版

原文原文链接

自从vue，react等热门框架横空出世以来，组件化开发变得异常火热。javascript

什么是组件化？简言之就是，把一个页面分红n份，每一份就是一个组件。
这些组件拥有单独的html结构，css，js等，组件之间不耦合，不侵犯。
组件其实相似后端语言(php)模板碎片的概念，须要时用require(include)引入。
好比：php

 1 //header.php
 2 <h1>hello world!</h1>
 3 //index.php
 4 <!DOCTYPE html>
 5 <html>
 6 <head>
 7 <meta charset="utf-8">
 8 </head>
 9 <body>
10    require('header.php');
11 </body>
12 </html>

这样作的好处就是能够屡次复用，提升开发效率。css

在nodejs出现以前，传统的前端开发，要想作到代码复用，须要人力搬运。html

好比上图的搜索框，想要复用，就的手动去复制html结构，相应的css、js等。
反正很繁琐，很不智能。前端

随着nodejs的出现，这种人工搬运，逐渐被自动化、组件化替换。vue

这时，咱们要有一种新的思想，面向组件开发。
好比咱们有一个项目叫mod_pro, 目录以下:java

components放页面的组件，包括html代码，css代码，js代码(若是有)等.目录以下：node

js/main.js负责导入各个组件的js。react

@import '../components/主导航/tab.js'; //把tab.js导入进来
... //把其它须要用到的组件js导入进来

css/main.css负责导入各个组件的css。es6

@import url('../components/主导航/nav.css'); //把nav.css导入进来
@import url('../components/医生_tab/tab.css'); //把tab.css导入进来
... //把其它须要用到的组件css导入进来

components/主导航/nav.html里代码以下：

<h1>hello world!</h1>

components/医生_tab/tab.html里代码以下：

<ul class="doc-tab">
<li>科室</li>
<li>疾病</li>
<li>地区</li>
</ul>

index.html里代码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
@@include('components/主导航/nav.html') <!--把nav.html组件包含进来-->
@@include('components/医生_tab/tab.html')<!--把tab.html组件包含进来-->
... <!--以此类推，把须要的组件包含进来-->
</body>
</html>

若是其它页面也用到此组件，同理操做。
而后经过gulp把最终的文件输出到dist目录里，完成开发。

gulp用到的插件：

gulp-file-include 包含html文件
gulp-import-css 导入css文件
gulp-js-import 导入js文件

注：这里的目录结构你们能够随意变动，这里为了更好说明用了中文目录。gulp的安装及须要的插件安装请自行google。

dist里最终造成这样：

dist/index.html里代码以下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>hello world!</h1> <!--@@include('components/主导航/nav.html')-->
<ul class="doc-tab"> <!--@@include('components/医生_tab/tab.html')-->
<li>科室</li>
<li>疾病</li>
<li>地区</li>
</ul>
</body>
</html>

是否是很简单，是否是和php有点像。这样就实现了传统的前端组件化开发。
假如之后有新项目须要复用某些组件，你不再用去辛苦查找复制代码了，直接去components里找便可。

若是你想作的更好，能够引入es6, less(sass)，代码压缩，js模块化等等均可以的。