百度前端技術學院2017學習總結

1、前言

百度的前端技術學院IFE，2016年就據說了，當時本身也報名，還組成隊伍了，不過本身一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，因而一直在等着報名，而後開始作裏面發佈的任務（o(╯□╰)o，此次能這麼積極是由於本身哪段時間工做閒，爲了按捺本身躁動的心，告訴本身抓住此次機會，去完成裏面發佈的任務，沉澱一下。）

如今這一期到4月24號就結束了，雖然完成的任務不算多，可是在這過程當中仍是學到了東西，中途差點由於懶，沒有堅持下來，想了下本身當時定的要求，想到應該有始有終，就打敗了一下‘懶’，最後成績是積分74，勉強入了下學霸的分享榜單（雖然並無什麼卵用，不過還知足了下本身的虛榮心┑(￣Д ￣)┍）），廢話了這麼多，總結下本身學到的東西吧。

2、完成任務總結

2.1 用背景圖和僞元素方式實現自定義checkbox，radio樣式

2.1.1 任務描述：http://ife.baidu.com/course/detail/id/23

2.1.2 實現過程：

原生的checkbox,radio樣式不能改變，因此<input type="checkbox" id="checkBox"> 再也不適用。這裏要用到HTML5的label標籤

HTML5中的label標籤爲 input 元素定義標籤（label）， 標籤的 for 屬性應該等於相關元素的 id 元素，以便將它們捆綁起來。

如：

<input type="checkbox" id="checkBox">
<label for="checkBox"></label>

注意：
"for" 屬性可把 label 綁定到另一個元素。請把 "for" 屬性的值設置爲相關元素的 id 屬性的值。

接着要把input元素設置爲display:none;而後經過css將label設置爲自定義的樣式

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    position: relative;
}

這是設置爲外面的圓圈，裏面的圓經過::after僞類設置

label::after {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 4px;
    left: 4px;
    z-index: 1;
    content: '';
}

若是是checkbox，外面是正方形，對應裏面是對鉤

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    position: relative;
}

"√"對鉤製做：

label::after {
    border: 2px solid #d73d32;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg); 
}

這裏提一下僞類和僞元素的區分：

1）僞類：存在的意義是爲了經過選擇器找到那些不存在於DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。 僞類由一個冒號:開頭，冒號後面是僞類的名稱和包含在圓括號中的可選參數。

經常使用的僞類：

:active    向被激活的元素添加樣式。    
:focus    向擁有鍵盤輸入焦點的元素添加樣式。    
:hover    當鼠標懸浮在元素上方時，向元素添加樣式。    
:link    向未被訪問的連接添加樣式。    
:visited    向已被訪問的連接添加樣式。    
:first-child    向元素的第一個子元素添加樣式。    
:checked 向選中的控件元素添加樣式

2）僞元素:僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（能夠理解爲html源碼）；

注意: css3爲了區分僞類和僞元素，規定僞類前面有一個冒號，僞元素前面有兩個冒號

經常使用僞元素:

::before 爲做用元素的第一個子節點插入dom中
::after 爲做用元素的最後一個子節點插入dom中

• 同：都是經過選擇器爲元素添加樣式
• 異：僞元素會建立一個元素，但不是真正的Html元素，僞類至關於爲一個元素建立一個class樣式

2.2 有趣的鼠標懸浮模糊效果

2.2.1 任務描述：http://ife.baidu.com/course/detail/id/14

2.2.2 實現過程：

先看下作出的效果：點我看看

1）關於圖片模糊（參考資料：來源）

主要用到CSS3 filter（濾鏡）屬性

語法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

blur(px) 給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一塊兒， 因此值越大越模糊；若是沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。

因此圖片上hover時能夠加一個這樣的效果：

.wrap:hover .blur {
      transition: all .5s ease;
      filter: url(blur.svg#blur);  /* FireFox, Chrome, Opera */
      -webkit-filter: blur(10px); /* Chrome, Opera */
      -moz-filter: blur(10px);
      -ms-filter: blur(10px);    
      filter: blur(10px); 
      /*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  IE6~IE9 */
    }

2) 關於邊框擴展（參考資料：來源）

/*形狀擴展*/
    .border::before, .border::after {
      content:" ";
      display: block;
      position: absolute;
      width: 0;
      height: 0;  
      box-sizing: border-box;
      transition-property: height,width,left,top;
      transition-duration: 0.5s;
      transition-timing-function: ease-in;
    }
    .border::before {
      height: 100%;
      left: 50%;
    }
    .wrap:hover > .border::before {
      left: 0;
      width: 100%;
      border: 6px solid #000;
      border-left-color: transparent;
      border-right-color: transparent;
    }
    .border::after {
      width: 100%;
      top: 50%;
    }
    .wrap:hover > .border::after {
      height: 100%;
      top: 0;
      border: 4px solid #000;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }

主要經過border:6px solid #000這個屬性，當width和height都設置爲100%時，把左右或上下的border設置爲transparent就能夠實現::after和::before拼裝成長方形，兩邊都是從中間擴展，因此最初left和top設置爲50%；最後須要注意 transition-property: height,width,left,top;的設置。

3）文字漸變光影流動動畫（參考資料：來源）

.text-gradient {  
        display: inline-block;
        color: black;
        font-size: 10em;
        background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s infinite linear;
    }
    @-webkit-keyframes masked-animation {
        0%  { background-position: 0 0;}
        100% { background-position: -100% 0;}
    }

要注意的是：
①、-webkit-background-clip: text;
background-clip 屬性規定背景的繪製區域。
語法：

background-clip: border-box|padding-box|content-box;

值對應於：背景被裁剪到邊框盒，內邊距框，內容框。
這裏用到的text只適用於chrome瀏覽器。
②、background-size: 200% 100%;
讓背景圖片大小水平方向擴大一倍，這樣background-position纔有移動與變化的空間。

2.3 動態數據綁定

2.3.1 任務描述：http://ife.baidu.com/course/detail/id/15 （對應後面有2、3、4、五）
2.3.2 實現過程：
Vue如何實現動態數據綁定，這個在以前有寫過一篇這樣的文章：http://www.cnblogs.com/wj204/p/6423478.html
雖然之前有研究過，不過此次跟着任務作的時候能夠看出本身仍是理解得不透徹，這裏再也不詳細分解了，本身在任務上也作了點筆記：http://ife.baidu.com/note/detail/id/1233

2.4 正則表達式入門

2.4.1 任務描述：http://ife.baidu.com/course/detail/id/29
2.4.2 實現過程:
感受本身挑了本身有點熟悉的任務，由於以前有寫過一篇正則表達式的文章：https://segmentfault.com/a/1190000008766125 (/ □ ) 看成複習把，由於這些基礎知識掌握得並不牢固。

2.4.2.1 手機號碼匹配

/*
  電話號碼前三位規則:
  聯通:186 185 170 156 155 130 131 132
  移動:139 138 137 136 135 134 178 188 187 183 182 159 158 157 152 150 147
  電信:189 180 170 153 133
  第一位全是1
  第二位：3 4 5 7 8
  第三位:0 1 2 3 4 5 6 7 8 9
*/

因此正則表達式能夠寫爲：(/^1[34578][0-9]{9}$/g)

2.4.2.2 判斷輸入的字符串是否有相鄰重複單詞的正則表達式可寫爲：/(b[a-zA-Z]+b)s+1b/g
解釋這個正則表達式：
①、 (b[a-zA-Z]+b) 是一個捕獲分組，它捕獲全部的單詞：

" asd sf  hello hello asd".match(/(b[a-zA-Z]+b)/g) // ["asd", "sf", "hello", "hello", "asd"]

②、s加了一個空格限制條件，因此最後一個單詞被排除：

" asd sf  hello hello asd".match(/(b[a-zA-Z]+b)s/g)  ["asd ", "sf ", "hello ", "hello "]

③、"1"後向引用：

" asd sf hello hello asd".match(/(b[a-zA-Z]+b)s+1b/g) ["hello hello"]

2.5 CSS3實現3D 輪播圖

2.5.1 任務描述：http://ife.baidu.com/course/detail/id/51
2.5.2 實現過程：由於本身以前有寫過一些純css3實現的動畫 http://www.cnblogs.com/wj204/p/css3_demo.html
因此選了這個任務，說實話，又「水分」了（捂臉哭）

2.6 position:sticky 實現粘性佈局

額外技能點總結，緣起別人的提問 https://segmentfault.com/q/1010000008800350/a-1020000008801739
想到以前看過的一篇文章 http://www.cnblogs.com/coco1s/p/6402723.html （平時看些技術文章仍是有用的，雖然當時可能沒起什麼做用，不過有個知識點印象。）

<div style="position: fixed;background:red;height:500px;width:500px;overflow:auto;top: 50%;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;">
  <div style="position: absolute;background:black;height:10px;width:10px;top:0;right:0"></div>
  <div style="height:5000px">
    213123123213123123213123123213123123213123123
  </div>
</div>

將黑色的div框樣式改成粘性佈局

<div style="position: sticky;background:black;height:10px;width:10px;top:0;left:100%"></div>

效果：

3、總結

收穫：

①、鞏固基礎知識
②、css屬性應用更加熟練，說實話，以前after和before僞元素本身用得很少，通常都會從新加標籤來設置樣式，不過這裏用過以後，本身簡直喜歡上了這兩個東西，感受方便好多。
③、對Vue的動態綁定數據原理理解加深。
④、正則表達式，說實話，本身以前寫過那篇文章大可能是理論，當真正遇到正則表達式實踐時，有點傻了，需多練習。
⑤、安定了下本身哪顆躁動的心，若是工做上沒有什麼事作，沒什麼期盼，又正值金三銀四跳槽季，我就在想跳槽了，但是沒學到什麼東西怎麼走？茫然，焦慮，可是這些負情緒沒用，只會讓本身的狀態惡性循環，不如作點實事，哪怕是比較簡單的任務。還好本身堅持了下，還好這段時間工做上有幾個任務，獲得了些許鍛鍊。

不足及改進：

總結來看，本身作得不夠，雖然也花了時間，不過能看出有敷衍的成分在。也很久沒產出，雖然寫得並不怎麼樣，不過仍是想督促本身多總結，這對本身必定是有利的:)