剛上線的阿里達摩院官網，從前端角度看圈點之處

寫在前面：

從去年十月份，馬雲成立阿里巴巴達摩院，到今年9月28號一年整，阿里達摩院官網正式上線。做爲從事互聯網行業的人，大抵都是會去達摩院官網看看的，本文即我我的從前端角度對達摩院官網，進行的一次簡單粗暴的測評，細數圈點之處，並提取一些做爲前端能夠值得借鑑和思考的代碼技巧。第一次寫體驗報告類文章，想到什麼寫什麼，我的角度或片面，不足之處，或者您有更好的看法，在留言處歡迎交流。固然但願有阿里達摩院的同窗看到我這篇簡單的測評文章，能夠把文中描述的達摩院官網中我我的以爲是bug的地方和優化的地方修復一哈。

1、初體驗

1.1域名

pc端：https://damo.alibaba.com/

移動端：https://m.damo.alibaba.com/

1.2 頁面佈局（直接上圖了）

pc端

移動端

整體設計風格中國風和簡約科技感，中國風主要經過水墨（山）背景圖清澈，科技感是用了大量純色（帶有輕微漸變的深藍色）

2、小測牛刀

2.1頁面加載時間

清除瀏覽器緩存，打開控制檯，刷新頁面，獲得以下信息（環境：我的家庭網絡Google Chrome瀏覽器），能夠看出該網站是服務端渲染的

一、請求數(requests)：0/42
二、轉移資源大小（transferred）：15.8M
三、全部請求（finish）:3.09S
四、DOM樹構建完成(DOMContentLoaded)：558ms
五、頁面加載完畢（Load）：3.09s複製代碼

再往下一看，居然控制檯有個console.log（）沒有去掉，尷尬了哈，具體打印的數據，就不作研究咯，有興趣的老鐵能夠本身去看~

2.2 頁面代碼結構

看了console，確定也就看看Elements,總得來講比較中規中矩，沒有太依賴第三方的庫，總體固然看了一下大概在新聞動態那邊用了swiper組件,固然最後面還加了一個【友盟+】cnzz的站長統計

2.2頁面緩存

一、CNZZDATA、UM_distinctid、sca：cnzz這個統計返回的

二、cna:每一個阿里系的網站中都會有 cna 這個 cookie,並且是跨頂級域名的,我的猜想這玩意是用來識別設備的

三、client_lang，固然只有你點了語言切換的時候，會出現

......

3、前端圈點之處

這裏就到了本文的高潮了，先抑後揚的套路來一波，先說說我的做爲前端的角度說說達摩院官網的「Bug」和我的以爲設計能夠優化一點的地方吧，下面先睹爲快

注：測試時間爲2018/09/29

3.1 發現Bug和設計優化

3.1.1（bug）導航鼠標通過事件，鼠標通過「實驗室」欄目下出現一像素白邊框（須要自行在官網體驗就知道了）

找到代碼，實際上是下圖這個兄弟致使的，鼠標通過的時候，這邊的display狀態改變

3.1.2（優化）導航中間的Logo,我的以爲應該加一個點擊事件，移動端亦如此，能夠跳轉到首頁，目前不管是pc端仍是移動端都是沒有點擊事件的，目前代碼是這樣的

<div class="middle"><img class="top-logo" src="/_pc/css/img/top-logo-en.png"></div>
複製代碼

3.1.3（優化）導航最後的CN,首頁但願是能夠點擊切換各國語言的，固然子頁都是ok的，能夠切換語言（已修復）

3.1.4（優化）輪播圖，這塊鼠標放上去是能夠點擊的，強迫症但自己又是很小的範圍能夠放

3.1.5（優化）關於兼容性的問題，打開IE（默認11）,咳咳，好像字體丟了，哦哦，還有輪播圖，咋回事咯

固然繼續往下測試，IE9就涼了（以下圖），大概就兼容到IE10及以上吧

3.1.6（優化）首頁和子頁輪播圖，2M大圖，加載時間（3s+）等到你有點窒息

3.2 挖掘前端值得探究的地方

3.2.1導航

亮點：logo居中，導航欄目兩邊，鼠標滾動收縮導航，適配移動端

在官網導航是把導航切了兩半，左中右三個div，中間div放logo,我的以爲若是導航數量能夠肯定的話，能夠用 nth-child 空開位置留給logo，下面是我大概寫的佈局和樣式相關的部分（沒有調具體的樣式，完整代碼）

<template>
  <div class="header_bg">
      <div class="header">
        <div class="logo">
          <a href="/"><img src="../assets/top-logo-en.png" alt=" " /></a>
        </div>
        <nav class="navbar-default">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle">
            </button>
          </div>
          <div class="navbar-collapse">
            <ul class="navbar-nav">
              <li class="act" v-for="item in navdata"><a><p class="c-title">{{item.cTitle}}</p><p class="e-title">{{item.eTitle}}</p></a></li>
              <li><a>CN</a></li>
            </ul>
          </div>
        </nav>
      </div>
  </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        navdata:[
          {"cTitle":"首頁","eTitle":"HOME"},
          {"cTitle":"實驗室","eTitle":"Laboratories"},
          {"cTitle":"合做生態","eTitle":"Collaboration"},
          {"cTitle":"新聞動態","eTitle":"Events"},
          {"cTitle":"加入咱們","eTitle":"Careers"},
          {"cTitle":"關於咱們","eTitle":"About Us"}
        ]
      }
    },
    methods: {}
  }
</script>複製代碼

&:nth-child(1) {
   margin-left: 1/18 * 100%;
 }

&:nth-child(4) {
   margin-left: 3/18 * 100%;
 }複製代碼

大概效果（「拼多多版」）

3.2.2 輪播圖背景濾鏡效果

用的是filter(濾鏡) 屬性

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: 100% 100%;
    -webkit-filter: blur(70px);
    -moz-filter: blur(70px);
    -o-filter: blur(70px);
    -ms-filter: blur(70px);
    filter: blur(70px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='70');
}
複製代碼

3.2.3 新聞列表

swiper插件能夠了解一下

3.2.4 手風琴面板展開收縮特效

主要用到了transition屬性

.item-active {
    background-image: none!important;
    width: 278px;
    padding: 0 22px;
    transition: width .8s,padding-left .2s,padding-right .2s;
    -ms-transition: width .8s,padding-left .2s,padding-right .2s;
    -moz-transition: width .8s,padding-left .2s,padding-right .2s;
    -webkit-transition: width .8s,padding-left .2s,padding-right .2s;
    -o-transition: width .8s,padding-left .2s,padding-right .2s;
}
複製代碼

題外話：阿里正由於是不少程序猿們嚮往的大廠，因此咱們對大家技術上出現的小問題會更加的關注和在意，固然我寫着文章是以一種交流和分享的姿態，不是砸場子而是文章前面寫的，固然但願有阿里達摩院的同窗看到我這篇簡單的測評文章，能夠把文中描述的達摩院官網中我我的以爲是bug的地方和優化的地方修復一哈，也但願對其餘前端同窗有所幫助~