傳統前端也能夠實現組件化開發

時間 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>