整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內(nèi)邊框
}
/*給'注冊'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器，賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框?qū)挾?
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框?qū)挾? }
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動(dòng)
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機(jī)號</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請輸入手機(jī)號" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗(yàn)證碼</label>
<input type="password" placeholder="請輸入驗(yàn)證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
</div>
<input type="submit" value="注冊" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述家好，很高興又見面了，我是"高級前端進(jìn)階"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)!
高級前端進(jìn)階
今天給大家?guī)淼闹黝}是 SolidJS，話不多說，直接開始！
Solid 是一個(gè)用于創(chuàng)建用戶界面的聲明式 JavaScript 庫。 它不使用虛擬 DOM，而是將其模板編譯為真實(shí)的 DOM 節(jié)點(diǎn)，并使用細(xì)粒度的反應(yīng)更新它們。 Solid 聲明狀態(tài)并在整個(gè)應(yīng)用程序中使用，當(dāng)一個(gè)狀態(tài)發(fā)生變化時(shí)，只有依賴它的代碼會(huì)重新運(yùn)行。
目前 Solid 在 Github 上有超過 27.2k 的 start、720+的 fork、14.8k 的項(xiàng)目依賴量，140+的代碼貢獻(xiàn)者，NPM 周下載量達(dá)到了 90k，是妥妥的前端明星項(xiàng)目。Solid 框架本身具有以下明顯特性。
Solid 站在 React, Knockout 等巨人的肩膀上。如果之前用 React Hooks 開發(fā)，Solid 應(yīng)該看起來很自然。事實(shí)上，Solid 模型更簡單，沒有 Hook 規(guī)則。每個(gè)組件執(zhí)行一次，隨著依賴項(xiàng)的更新，鉤子和綁定會(huì)多次執(zhí)行。
Solid 遵循與 React 相同的理念，具有單向數(shù)據(jù)流、讀/寫隔離和不可變接口。但是放棄了使用虛擬 DOM，使用了完全不同的實(shí)現(xiàn)。
import { render } from 'solid-js/web';
import { onCleanup, createSignal } from 'solid-js';
const CountingComponent = () => {
const [count, setCount] = createSignal(0);
const interval = setInterval(() => setCount((count) => count + 1), 1000);
onCleanup(() => clearInterval(interval));
return <div>Count value is {count()}</div>;
};
render(() => <CountingComponent />, document.getElementById('app'));Solid 的細(xì)粒度反應(yīng)系統(tǒng)使開發(fā)人員能夠精確地管理狀態(tài)更新，確保在數(shù)據(jù)更改時(shí)只更新必要的組件。 這會(huì)帶來更快的更新、更少的重新渲染和更流暢的整體用戶體驗(yàn)。
import { render } from "solid-js/web";
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(1);
// 信號的細(xì)粒度更新機(jī)制（我在其他文章中重點(diǎn)講解過）
const increment = () => setCount(count() + 1);
return (
<button type="button" onClick={increment}>
{count()}
</button>
);
}
render(() => <Counter />, document.getElementById("app")!);總之，Solid 解鎖了對更新內(nèi)容和時(shí)間的完全控制，即使在 DOM 綁定級別也是如此。沒有虛擬 DOM 或廣泛的差異對比，框架永遠(yuǎn)不會(huì)做額外工作。
無論是客戶端還是服務(wù)端渲染，Solid 都專注于性能。下面是服務(wù)端渲染的客戶端代碼:
import { hydrate } from 'solid-js/web';
hydrate(() => <App />, document);對應(yīng)的服務(wù)端渲染代碼如下:
import {
renderToString,
renderToStringAsync,
renderToStream,
} from 'solid-js/web';
// 同步渲染字符串
const html = renderToString(() => <App />);
// 異步渲染字符串
const html = await renderToStringAsync(() => <App />);
// 渲染到 Stream
const stream = renderToStream(() => <App />);
// Node
stream.pipe(res);
// Web streams (for like Cloudflare Workers)
const { readable, writable } = new TransformStream();
stream.pipeTo(writable);細(xì)粒度響應(yīng)式這一策略，使得 Solid 在所有顯眼的基準(zhǔn)測試中大放異彩。雖然性能可能不完全是開發(fā)者的關(guān)注點(diǎn)，但最終會(huì)影響到用戶體驗(yàn)。
Solid 本身無需額外的開發(fā)復(fù)雜度就可以獲得很好的性能，即無需特意調(diào)優(yōu)就可以運(yùn)行很快，在渲染速度和內(nèi)存使用方面始終優(yōu)于其他流行的框架。在某些測試中比 React 高出 40% 以上，以下是不同框架的性能數(shù)據(jù)對比：
除了 Vanilla JavaScript 外，Solid 是運(yùn)行最快的前端框架。Solid 充分利用其編譯器執(zhí)行優(yōu)化，例如：刪除未使用的代碼和最小化組件重新渲染，從而顯著提高性能，使 Solid 應(yīng)用程序的性能優(yōu)于許多使用傳統(tǒng)框架構(gòu)建的應(yīng)用程序。
從表面上看，Solid 和 React 似乎密切相似，都可用于創(chuàng)建單頁應(yīng)用程序 (SPA)。 雖然兩者的開發(fā)人員體驗(yàn)幾乎相同，但每個(gè)框架的底層機(jī)制卻截然不同。
兩個(gè) SPA 框架都負(fù)責(zé)劃分應(yīng)用程序的網(wǎng)頁結(jié)構(gòu)和功能，但在瀏覽器中，框架以不同方式處理頁面的 HTML 元素以提供所需的用戶體驗(yàn)。 Solid 和 React 在文檔對象模型 (DOM) 的使用上有著顯著不同。
下表總結(jié)并展示了 React 和 Solid 的主要區(qū)別：
需要重點(diǎn)關(guān)注的幾個(gè)點(diǎn)分別是：直接操作DOM、避免組件重復(fù)渲染、高性能、豐富的社區(qū)和生態(tài)系統(tǒng)，這也構(gòu)成了兩個(gè)框架的主要區(qū)別。
React 和 Solid 具有完全相同的編程結(jié)構(gòu)和對組件的支持（獨(dú)立的、可重用的代碼片段）。
在現(xiàn)代 React 和 Solid 中，一個(gè)組件由一個(gè)以屬性作為參數(shù)的渲染函數(shù)組成， 加上每個(gè)組件的 JSX，代碼緊湊簡潔。 JSX 易于理解，并允許有經(jīng)驗(yàn)的開發(fā)人員在其定義中直觀地描述組件模型。
React 和 Solid 提供相同的組件，但每個(gè)框架都有獨(dú)特的渲染方法。 React 組件每次都渲染（除非使用記憶），而 Solid 組件只渲染一次。
import { useMemo } from 'react';
function TodoList({ todos, tab }) {
// useMemo 是一個(gè) React Hook，可讓您在重新渲染之間緩存計(jì)算結(jié)果。
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
}兩個(gè)框架之間的另一個(gè)區(qū)別是它們啟用組件功能的不同特性。
沒有功能的組件只是標(biāo)記，那么 React 和 Solid 是如何讓組件可操作的呢？其實(shí)，兩者的做法是相似的。
Hooks 和反應(yīng)式原語都是連接到相應(yīng)的 React 和 Solid 變更系統(tǒng)的一種方式。 總的來說，這兩個(gè)框架以相似的方式處理組件功能，但使用不同的方法或術(shù)語來實(shí)現(xiàn)。
React 依賴于 Memoization 來使應(yīng)用程序快速渲染。 相比之下，由于其優(yōu)化的更改跟蹤和 DOM 使用，Solid 很少需要顯式記憶。 對于組件屬性更改不需要渲染更新的極端情況，Solid 通過稱為 createMemo 的單一方法管理記憶。
const fib = createMemo(() => {
console.log('Calculating Fibonacci');
return fibonacci(count());
});SolidsJS 和 React 性能差異的焦點(diǎn)在于兩者如何更新 DOM。
React 給了一個(gè)輕量級的虛擬 DOM 來與瀏覽器的實(shí)際 DOM 交互，數(shù)據(jù)變化后將更新后的虛擬 DOM 與瀏覽器的 DOM 進(jìn)行比較，并將識別出的更改同步到實(shí)際頁面結(jié)構(gòu)（即 DOM）中。
因?yàn)?React 默認(rèn)依賴于更新的 DOM 差異計(jì)算來重新渲染組件，即 React 做了兩次工作。 由于它每次都會(huì)渲染組件，因此 React 需要 Memoization 以避免不必要的重復(fù)計(jì)算。
相比之下，Solid 通過使用一種稱為細(xì)粒度反應(yīng)性的機(jī)制來直接操縱瀏覽器的 DOM，從而提供了更輕的內(nèi)存占用以及頁面編輯和注入代碼的極快應(yīng)用程序。
細(xì)粒度的反應(yīng)性跟蹤可變的相互依賴性。 基于變量依賴和編輯鏈，Solid 限制頁面結(jié)構(gòu)更新以僅反映發(fā)生變化的內(nèi)容，避免不必要的組件渲染。 與 React 相比，這導(dǎo)致了巨大的性能改進(jìn)。
從某些角度來看，Solid 明顯是兩者中贏家，Solid 與 React 的強(qiáng)大功能相匹配。 此外，Solid 還為最終用戶提供了 React 無法比擬的快速響應(yīng)能力。
同時(shí)，Solid 利用了 React 生命周期中學(xué)到的知識、結(jié)構(gòu)和抽象方法，幾乎沒有學(xué)習(xí)曲線。 因此，個(gè)人非常建議從今天開始使用 Solid，它可能是前端的未來！
因?yàn)槠邢蓿恼虏]有過多展開，如果有興趣，文末的參考資料提供了優(yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點(diǎn)贊、評論、轉(zhuǎn)發(fā)、收藏！
https://github.com/krausest/js-framework-benchmark
https://www.solidjs.com/
https://www.solidjs.com/guides/getting-started#服務(wù)端渲染
https://www.solidjs.com/docs/latest/api
https://kruschecompany.com/introducing-solidjs-javascript-framework/
https://www.toptal.com/react/solidjs-vs-react
https://github.com/solidjs/solid
https://www.solidjs.com/guides/server
https://react.dev/reference/react/useMemo
https://www.solidjs.com/tutorial/introduction_memos
PC端進(jìn)行網(wǎng)頁制作時(shí)，經(jīng)常使用固定像素并且內(nèi)容居中的網(wǎng)頁布局，為了適應(yīng)小屏幕的設(shè)備，在移動(dòng)設(shè)備和跨平臺(響應(yīng)式)網(wǎng)頁開發(fā)過程中，多數(shù)使用流式布局，下面我們就對流式布局進(jìn)行詳細(xì)介紹。
流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設(shè)置寬度，也稱百分比自適應(yīng)的布局。 流式布局實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度 下面通過一個(gè)案例來演示固定布局如何轉(zhuǎn)換為百分比布局，如demo4-1.html 所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定布局轉(zhuǎn)換為百分比布局</title>
<style type="text/css">
body>*{ width: 980px; height:auto; margin:0 auto;
margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height: 300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:250px;}
article{ width:700px; margin-left:10px;}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
<aside>aside</aside>
<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>
打開Chrome瀏覽器訪問demo4-1.html，頁面效果如下圖所示。
可以嘗試改變?yōu)g覽器窗口的大小，頁面元素的大小不會(huì)隨瀏覽器窗口改變，如下圖所示。
下面修改demo4-1樣式代碼，將所有寬度修改為百分比的形式，具體如下:
<style type="text/css">
body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding :5px; }
header{ height:50px; }
section{ height: 300px; }
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left; }
aside{ width:25.510204%; /*250÷980*/}
article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
</style>
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
