前端框架開發之Niu框架——從零學框架的小白

老牛大讲堂發表於2024-05-05
前端框架

起因：

從2018年6月一直到我重新提筆，6年時間。這六年時間，我見證了IT的興衰，見證了小眾框架LayUI框架的重新更新，見證了vue、angular、react等框架的主流。----部落格園老牛大講堂

初衷：

今年我突發靈感，想要設計一個網站，作為程式設計師卻"提筆忘字"，就連最基本的css也變得陌生，我網上翻找大量的網站，想要找到一款，像我這種半吊子也能用的網站（即懂一些程式碼原理，卻早已經忘了底層程式碼怎麼寫），事實卻讓我失望，沒有一款適合我。layui框架符合拿來即用，可有些元件根本就沒有。請原諒我，學習vue等框架對我來說太難了，我就想要一個好看的頁面，便攜通用的元件。我求索無果，所以在想，為什麼不自己開發一個開源的網站，讓大眾成為貢獻者，一起參與到開發中來。

Niu框架由然而生：----部落格園老牛大講堂

從頭編寫一個框架，說真的特別難，萬里長征，光是選擇哪一種佈局模式，讓我研究了一個星期，特別是對於我這樣一個不碰程式碼六年的小白。最終讓我決定用flex佈局，去開發一個框架。隨後我將不斷完善框架，最終形成一個小眾的開源框架。

廢話不多說，上程式碼：----部落格園老牛大講堂

開發一個框架，第一步，一定要初始化瀏覽器的各種預設引數，別問我一個小白怎麼知道的，當後期開發發現總是柵格對不齊的時候，一點點摳出來的。

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* 可以新增這個屬性以確保盒模型包含border和padding */
}　

第二步：定義公共屬性，例如柵格水槽、圓角引數、niu-container，開始確定flex佈局+百分比的方式，開始開發。----部落格園老牛大講堂

/*第二部分： 定義flex */

/* 公共元素 */
:root {
	--gap: 8px;/* 設定柵格槽之間間距 */
	--border-radius: 5px;/* 設定柵格圓角數值 */
}

.niu-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	flex-flow: row wrap;
	padding-left: calc(var(--gap));/* 設定左邊有一個邊距 這裡，下面一張圖會解釋為什麼要設定一個左邊距 */
}

注意如果沒有左邊距，瀏覽器自帶的樣式，會直接覆蓋掉。右側暫時還沒發現這個問題（歡迎大家留言，告訴我右邊需要留邊距嗎？）

第三步：設定百分比。請注意：這裡我讓每一個元素都減少了一個水槽的寬度（水槽就是兩個元素之間的距離），這個是我開發框架的亮點，有興趣的研究一下原理，歡迎提出改機意見，前提得簡單點，複雜我看不懂。----部落格園老牛大講堂

niu-col-1 {
	width: calc((100% / 24) * 1 - var(--gap));
}

.niu-col-2 {
	width: calc((100% / 24) * 2 - var(--gap));
}

.niu-col-3 {
	width: calc((100% / 24) * 3 - var(--gap));
}

.niu-col-4 {
	width: calc((100% / 24) * 4 - var(--gap));
}

.niu-col-5 {
	width: calc((100% / 24) * 5 - var(--gap));
}

.niu-col-6 {
	width: calc((100% / 24) * 6 - var(--gap));
}

.niu-col-7 {
	width: calc((100% / 24) * 7 - var(--gap));
}

.niu-col-8 {
	width: calc((100% / 24) * 8 - var(--gap));
}

.niu-col-9 {
	width: calc((100% / 24) * 9 - var(--gap));
}

.niu-col-10 {
	width: calc((100% / 24) * 10 - var(--gap));
}

.niu-col-11 {
	width: calc((100% / 24) * 11 - var(--gap));
}

.niu-col-12 {
	width: calc((100% / 24) * 12 - var(--gap));
}

.niu-col-13 {
	width: calc((100% / 24) * 13 - var(--gap));
}

.niu-col-14 {
	width: calc((100% / 24) * 14 - var(--gap));
}

.niu-col-15 {
	width: calc((100% / 24) * 15 - var(--gap));
}

.niu-col-16 {
	width: calc((100% / 24) * 16 - var(--gap));
}

.niu-col-17 {
	width: calc((100% / 24) * 17 - var(--gap));
}

.niu-col-18 {
	width: calc((100% / 24) * 18 - var(--gap));
}

.niu-col-19 {
	width: calc((100% / 24) * 19 - var(--gap));
}

.niu-col-20 {
	width: calc((100% / 24) * 20 - var(--gap));
}

.niu-col-21 {
	width: calc((100% / 24) * 21 - var(--gap)) ;
}

.niu-col-22 {
	width: calc((100% / 24) * 22 - var(--gap));
}

.niu-col-23 {
	width: calc((100% / 24) * 23 - var(--gap));
}

.niu-col-24 {
	width: calc((100% / 24) * 24 - var(--gap));
}
　　

　　下面是html應用結果：經過測試沒有問題。----部落格園老牛大講堂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/niu.css">  
	</head>
	<body>
		<div class="niu-container">
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1"niu-bg-green>1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green ">1/24</div>
			<div class="niu-col-1 niu-bg-green ">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
			<div class="niu-col-1 niu-bg-green">1/24</div>
		</div>
	</body>
</html>

　　

執行結果：不管螢幕多窄，元素總能保持在一行。歡迎各位大神，前來指正，我將不斷改進我的程式碼----部落格園老牛大講堂

相關文章