刚上线的阿里达摩院官网，从前端角度看圈点之处

写在前面：

从去年十月份，马云成立阿里巴巴达摩院，到今年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的地方和优化的地方修复一哈，也但愿对其余前端同窗有所帮助~