簡單小程序：登錄頁面（html）

<!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%; //清除浮動
            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>
在這里插入圖片描述

家好，很高興又見面了，我是姜茶的編程筆記，我們一起學(xué)習(xí)前端相關(guān)領(lǐng)域技術(shù)，共同進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動力

在 JavaScript 中，Array.prototype.shift 方法用于移除數(shù)組中的第一個元素，并返回該元素。為了更好地理解這個方法的內(nèi)部機(jī)制，我們將從零開始實(shí)現(xiàn)一個自定義的 shift 方法，并逐步解析其實(shí)現(xiàn)步驟。

手搓 shift 方法

shift 方法會移除數(shù)組中的第一個元素，并返回該元素。以下是我們自定義實(shí)現(xiàn)的 shift 方法的代碼：

Array.prototype.myShift = function() {
// 檢查數(shù)組是否為 null 或 undefined
if (this == null) {
  throw new TypeError('Array.prototype.myShift called on null or undefined');
}

const O = Object(this);
const len = O.length >>> 0;

// 如果數(shù)組為空，返回 undefined
if (len === 0) {
  O.length = 0;
  return undefined;
}

// 保存第一個元素
const firstElement = O[0];

// 將數(shù)組元素左移
for (let k = 1; k < len; k++) {
  O[k - 1] = O[k];
}

// 刪除數(shù)組最后一個元素
delete O[len - 1];
O.length = len - 1;

// 返回第一個元素
return firstElement;
};

解析實(shí)現(xiàn)步驟

1. 檢查數(shù)組是否為 null 或 undefined

確保 this 不為空：

if (this == null) {
  throw new TypeError('Array.prototype.myShift called on null or undefined');
}

2. 將 this 轉(zhuǎn)換為對象，并獲取數(shù)組長度

將 this 轉(zhuǎn)換為對象并獲取數(shù)組長度：

const O = Object(this);
const len = O.length >>> 0;

3. 處理空數(shù)組的情況

如果數(shù)組為空，返回 undefined 并將數(shù)組長度設(shè)為 0：

if (len === 0) {
  O.length = 0;
  return undefined;
}

4. 保存第一個元素

將第一個元素保存到 firstElement 變量中：

const firstElement = O[0];

5. 將數(shù)組元素左移

使用 for 循環(huán)將數(shù)組元素左移：

for (let k = 1; k < len; k++) {
  O[k - 1] = O[k];
}

6. 刪除數(shù)組最后一個元素

刪除數(shù)組的最后一個元素并更新數(shù)組長度：

delete O[len - 1];
O.length = len - 1;

7. 返回第一個元素

返回保存的第一個元素：

return firstElement;

實(shí)用小技巧：移除數(shù)組中的第一個對象

你可以使用 shift 方法輕松地移除數(shù)組中的第一個對象。例如，移除數(shù)組中的第一個對象元素：

const objects = [{ id: 1 }, { id: 2 }, { id: 3 }];
const firstObject = objects.myShift();
console.log(firstObject); // 輸出 { id: 1 }
console.log(objects); // 輸出 [{ id: 2 }, { id: 3 }]

通過這種方式，我們可以移除數(shù)組中的第一個對象元素，簡化對象處理過程。

最后

通過實(shí)現(xiàn)自定義的 shift 方法，我們深入理解了 JavaScript 中數(shù)組的操作方式。相信你也可以更好地掌握 shift 方法的內(nèi)部機(jī)制，并提升你的 JavaScript 編程技巧。如果你有任何問題或建議，歡迎在評論區(qū)留言交流！祝你編程愉快！

試左移是什么

傳統(tǒng)的測試左移

簡單說，左移軟件測試就是將開發(fā)周期看作從左到右的一條直線。在舊模式中，測試僅在這條直線的最右邊發(fā)揮作用。認(rèn)識到這一瓶頸，我們現(xiàn)在希望將測試的開始位置盡量左移。左移是在軟件交付過程中盡早發(fā)現(xiàn)和防止缺陷的一種實(shí)踐方法，目的是盡量在軟件開發(fā)生命周期中盡早將測試任務(wù)左移，以提高產(chǎn)品質(zhì)量。左移測試意味著在軟件開發(fā)過程的早期階段進(jìn)行測試。

測試左移的優(yōu)缺點(diǎn)

測試左移理論上的優(yōu)點(diǎn)：

成本本身就是將測試左移的主要動機(jī)之一，據(jù)估算，超過一半的軟件缺陷可以在需求挖掘階段被發(fā)現(xiàn)，只有不到10%的缺陷出現(xiàn)在生命周期的開發(fā)階段，在產(chǎn)品投入生產(chǎn)后消除缺陷的成本將是需求挖掘階段的100倍以上
更高的自動化效率，左移可以提高自動測試的能力。測試自動化的主要好處包括：顯著減少人為錯誤、擴(kuò)展測試范圍（可以同時進(jìn)行多個測試）、測試人員能夠?qū)Ｗ⒂诟腥ぁ⒏幸饬x的任務(wù)、減少生產(chǎn)問題
更快的軟件交付效率越早發(fā)現(xiàn)缺陷、越能快速修復(fù)它們。如果您能在生產(chǎn)周期的早期發(fā)現(xiàn)缺陷，便可以更快地修復(fù)它們。從而：大大縮短兩次產(chǎn)品發(fā)布之間的時間間隔，提高軟件質(zhì)量

測試左移理論上的缺點(diǎn)：

極高的測試基建要求，測試左移對代碼掃描、質(zhì)量度量、接口用例自動化、完善的測試用例、數(shù)據(jù)工廠、測試環(huán)境等都有較高要求，需要在具有一定基建能力下才能完善測試左移
很多團(tuán)隊(duì)所處的生命周期不適用，對于初創(chuàng)團(tuán)隊(duì)、創(chuàng)新團(tuán)隊(duì)、快速迭代團(tuán)隊(duì)等團(tuán)隊(duì)不一定適用于測試左移，上述團(tuán)隊(duì)在絕大部分
容忍度較高的互聯(lián)網(wǎng)行業(yè)，對于部分用戶體感不通的互聯(lián)網(wǎng)業(yè)務(wù)，用戶能夠容忍小的問題上線，只要快速修復(fù)即可，該業(yè)務(wù)有時候大家更加看重的是快速發(fā)現(xiàn)問題，而不是在線下做到盡善盡美

云音樂測試左移的痛點(diǎn)

開發(fā)以為：
* 測試左移完全是工作的轉(zhuǎn)移，變成了純是開發(fā)做測試
測試以為：
* 測試左移，工作全是開發(fā)的，但是出問題測試也都要擔(dān)責(zé)

當(dāng)我們討論這個痛點(diǎn)之前，我們一定繞不過去的一個問題就是：開發(fā)測試比，目前的測試左移是我們主動選擇的結(jié)果還是被動選擇的結(jié)果

結(jié)論：以目前云音樂的開發(fā)測試比，我們很難完全支持所有業(yè)務(wù)，此處涉及組織敏感數(shù)據(jù)，細(xì)節(jié)不在此處展開

行業(yè)內(nèi)會是什么樣

局部的測試左移：

極致服務(wù)端錄制回放 https://help.aliyun.com/document_detail/62635.html
導(dǎo)購、交易特色錄制回放方案
封版模式，服務(wù)端開發(fā)自測，同時通過客戶端測試兜底

我期望的測試左移是什么

理想的測試左移：
事前

技術(shù)方案評審
核心p0、p1的接口自動化
場景自動化錄制回放
特定場景的UI自動化

事中

中心化的客戶端卡口（crash、輿情中心化卡口、高危組件識別兜底、包產(chǎn)物檢查等）
P0場景回歸兜底（約1000個測試用例）
P1場景回歸兜底（約3000個測試用例）
核心財(cái)報(bào)埋點(diǎn)卡口兜底

事后

強(qiáng)大的染色能力，重點(diǎn)項(xiàng)目的上線，相關(guān)功能逐步灰度上線，灰度的功能能夠全量隔離并單獨(dú)監(jiān)控，比如針對改動功能用戶的輿情、crash等能單獨(dú)識別
強(qiáng)大的中心化crash、輿情、slo監(jiān)控處理群
資損監(jiān)控

通過事前、事中、事后的方式，顯著的提升確定性、提高質(zhì)量，同時也能減少測試左移，研發(fā)的體感，避免工作量的轉(zhuǎn)移

測試用例自動化的完善

進(jìn)一步的覆蓋率提升

測試左移一定需要具有強(qiáng)大的自動化用例，通過穩(wěn)定、準(zhǔn)確、覆蓋率高的自動化測試用例提高整體線下質(zhì)量。這里涉及到服務(wù)端測試用例與客戶端測試用例，目前根據(jù)業(yè)界自動化成熟度在服務(wù)端自動化要求會更加高，需要涉及絕大部分場景，客戶端這塊主要用于穩(wěn)定性自動化與核心用例回歸兜底

服務(wù)端自動化提升

目前從行業(yè)內(nèi)技術(shù)發(fā)展看，服務(wù)端的自動化技術(shù)已經(jīng)較成熟，不管是接口測試還是引流自動化，服務(wù)端自動化具有幾個優(yōu)點(diǎn)

穩(wěn)定性高，在接口不大規(guī)模改動的前提下，服務(wù)端自動化在執(zhí)行過程中有較高的成功率
成本相對較低，接口自動化主要是rpc接口的請求以及返回值的教研，通過gotest等接口測試平臺，編寫服務(wù)端自動化的成本相對較低，通過引流回放的成本更低
較好管理，服務(wù)端接口的用例基本以研發(fā)接口為主，整體用例場景較好管理

首先是服務(wù)端測試用例的提升，平臺這塊主要希望服用gotest接口測試平臺，核心2個關(guān)鍵次：穩(wěn)定、覆蓋率高

針對穩(wěn)定，周維度跟進(jìn)，連續(xù)兩周穩(wěn)定性不達(dá)標(biāo)，@對應(yīng)質(zhì)量組長跟進(jìn)，并提醒改進(jìn)
針對覆蓋率，中心化度量覆蓋率，通過分析ox平臺和goapi平臺的接口數(shù)，并將各業(yè)務(wù)存量接口未導(dǎo)入goAPI的集中導(dǎo)入

最終期望 3分：服務(wù)端線下接口覆蓋率達(dá)到95%，CI用例通過率95%；代碼覆蓋率：50% 5分：服務(wù)端線下接口覆蓋率達(dá)到99%，CI用例通過率99%；代碼覆蓋率：60%；

服務(wù)端自動化長遠(yuǎn)方案：加強(qiáng)引流平臺的建設(shè)，通過線上流量錄制回放，并做好線上流量的用例、場景管理，進(jìn)一步減少自動化用例成本

客戶端自動化提升

目前從行業(yè)內(nèi)技術(shù)發(fā)展看，客戶端的自動化技術(shù)相對還需要突破，行業(yè)內(nèi)經(jīng)常聽說某團(tuán)隊(duì)維護(hù)幾萬的服務(wù)端自動化腳本，但是很少聽說某團(tuán)隊(duì)維護(hù)超過1000以上的客戶端腳本，客戶端自動化具有以下特點(diǎn)：

具有明顯的中心化特征，不管是什么團(tuán)隊(duì)，最終客戶端代碼的實(shí)現(xiàn)都是通過中心化發(fā)版來上線，因此非常適合集中做monkey、內(nèi)存泄漏等中心化穩(wěn)定性操作
自動化穩(wěn)定性相對不高，維護(hù)成本相對較高，因?yàn)榍岸薝I界面變化較塊，客戶端腳本成功率普遍顯著低于服務(wù)端

客戶端中短期方案：

中心化的monkey、內(nèi)存泄漏測試，通過中心化運(yùn)作，通過monkey、內(nèi)存泄漏等方案，集中發(fā)現(xiàn)問題
中心化的P0測試用例回歸，測試用例不追求大而全，保障核心場景自動化沒問題長期方案：目前行業(yè)內(nèi)針對瀑布流、自定義動態(tài)生成有較好的客戶端成功率

瀑布流場景：

瀑布流場景用戶操作簡單，核心功能主要為上滑與下滑，自動化運(yùn)行簡單，可以通過UI自動化執(zhí)行上滑下滑，然后通過截圖，圖像對比進(jìn)行校驗(yàn)，成功率較高，即使是千人千面也可以通過mock規(guī)避相關(guān)個性化問題，因此后續(xù)涉及瀑布流場景建議UI自動化突破

自定義動態(tài)生成場景：

自定義動態(tài)下發(fā)場景，客戶端最終的界面是通過服務(wù)端約定協(xié)議自動生成的，因此只要和客戶端引擎、協(xié)議打通，最終的界面是確定的，UI自動化可以針對協(xié)議編寫自動化腳本，穩(wěn)定性方面可以極大的規(guī)避之前UI界面變動導(dǎo)致的成功率較低的問題

強(qiáng)大的客戶端卡口能力

客戶端是絕大部分功能上線交付消費(fèi)者的中心節(jié)點(diǎn)，集中做好客戶端的功能保障，在很大程度上能形成中心化的兜底，規(guī)避較多的重大問題。因此云音樂主要在測試用例三層兜底、版本流程發(fā)布管控上做了較大投入

版本發(fā)布三層兜底

云音樂客戶端版本版本發(fā)布設(shè)定三層兜底，首先是P00用例，只出為最核心的關(guān)鍵用例集，只要在涉及到發(fā)布，包產(chǎn)物有變動，都需要執(zhí)行一次關(guān)鍵核心用例集

然后是P0用例，大概1000條左右，按照正常凍結(jié)集成時間，一天內(nèi)執(zhí)行完，主要包含日常回歸的主要用例，每個模塊的主流程

最后是P1用例，大概3000條左右，主要包含每個模塊其他額外的分支場景，該用例需要執(zhí)行3天，且不需要考慮用戶有修改代碼，每次只執(zhí)行一次

通過三層兜底，我們客戶端實(shí)現(xiàn)了核心功能只要改動都做好了回歸，分之場景一定周期也能做到全量回歸，通過分級做到了成本與回歸面的統(tǒng)一

版本流程優(yōu)化

通過版本發(fā)布的checklist流程化，保障每次包的發(fā)出，不會出現(xiàn)較大的問題，讓每次包產(chǎn)物的變化得到性能、功能、埋點(diǎn)、穩(wěn)定性等方面的驗(yàn)證

強(qiáng)大的監(jiān)控能力

當(dāng)前面所有的測試、兜底都完成后，還是會有問題泄漏，因此我們也需要有良好的問題發(fā)現(xiàn)能力，避免質(zhì)量顯著下降

事前-監(jiān)控設(shè)計(jì)

我們希望重點(diǎn)項(xiàng)目上線前默認(rèn)都是有監(jiān)控的，帶著監(jiān)控上線的功能才更加具有確定性

服務(wù)端系統(tǒng)需要關(guān)注：

GoAPI巡檢監(jiān)控
SLO監(jiān)控
pylon 埋點(diǎn)監(jiān)控
哨兵監(jiān)控
Nydus監(jiān)控 / Kafka監(jiān)控
NDC監(jiān)控
輿情監(jiān)控

前端監(jiān)控需要關(guān)注：

Corona監(jiān)控
輿情監(jiān)控
H5巡檢監(jiān)控
RN巡檢監(jiān)控

同時發(fā)布要分批次，并做好分批次監(jiān)控觀察

事中-重點(diǎn)項(xiàng)目染色

1、重點(diǎn)項(xiàng)目-關(guān)聯(lián)標(biāo)記（項(xiàng)目自定義標(biāo)記，自定義流量標(biāo)記x-proj-tag）

2、服務(wù)端鏈路監(jiān)控告警區(qū)分：大前端請求API透傳標(biāo)記+網(wǎng)關(guān)請求流量打標(biāo)+腳手架中間件透傳標(biāo)記+應(yīng)用日志監(jiān)控SDK上報(bào)流量標(biāo)記+監(jiān)控平臺通過流量標(biāo)記區(qū)分監(jiān)控告警內(nèi)容

3、客戶端監(jiān)控告警區(qū)分：大前端日志異常和崩潰上報(bào)帶上業(yè)務(wù)自定義標(biāo)記

事后-中心化監(jiān)控處理

監(jiān)控的效果需要可被觀測，因此分級的重要的報(bào)警都會被集中到中心化群里被所有人觀測，提高處理者處理的壓力和動力

結(jié)語

以上就是我對測試左移的一些理解，也包含了挺多測試右移的思想。主要適用于風(fēng)險(xiǎn)適中的業(yè)務(wù)，對涉及資金類、電商核心流程等需要謹(jǐn)慎看待

作者:陽際榮(韓鍔)

來源:微信公眾號:網(wǎng)易云音樂技術(shù)團(tuán)隊(duì)

出處:https://mp.weixin.qq.com/s/RApeHXYpmm1nPVLW1Y0ahw

在線咨詢

上一篇：最詳細(xì)的html+css筆記（一）
下一篇：Spring MVC 框架學(xué)習(xí)-返回頁面+加載靜態(tài)資源

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商