側邊工具條實現 scss+requirejs（1）

慕課上的一個案例，剛剛學完scss然後找到了這個課程複習一下。順便老師教了一下requirejs的使用。這可是我的第一個組件啊，拖了好久好久哦。

三種html的佈局以及優缺點：

+ 第一種是用雪碧圖，通過改變hover的定位來改變圖片背景。缺點是如果要更改圖標需要同時更改一整張圖。
+ 第二種是通過使用圖標字體的方式，優點是可以隨時更改圖片以及顏色。佈局稍微複雜一點點。
+ 第三種是通過before和after的方法，佈局更簡單，但是css代碼更加複雜。

*下面是第一種和第二種的佈局方式*

<aside class="toolbar">
        <!-- a[href="javascript:;"].toolbar-item.toolbar-item-weixin*4 -->
        <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
        <a href="javascript:;" class="toolbar-item toolbar-item-app">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-top" id="backTop"></a>
    </aside>

<aside class="toolbar">
    <!-- a[href="javascript:;"].toolbar-item.toolbar-item-weixin*4 -->
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">公衆<br/>賬號</span>
        </span>
        <span class="toolbar-layer toolbar-layer-weixin"></span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">意見<br/>反饋</span>
        </span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">app<br/>下載</span>
        </span>
        <span class="toolbar-layer toolbar-layer-weixin"></span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">返回<br/>頂部</span>
        </span>
    </a>
</aside>

scss 實現css樣式

+ 注意一：首先是取名方式按照BEM思想，然後先寫統一樣式，對固定的樣式採取定義變量的形式
+ 注意二：在實現所有樣式以後，再次提取出公共樣式，並且對樣式設計通過@mixin @extend等進行簡化，在這裏就通過@mixin爲瀏覽器兼容定義了方法

@charset "UTF-8";
$toolbar-size: 52px;
//背景圖片定位方法
@mixin toolbar-item($pos,$hoverPos){
  background-position:$pos;

  &:hover {
    background-position:$hoverPos;
  }
}
/**
常用函數工具條
 */
@mixin transition($transition){
  -webkit-transition:$transition;
  -moz-transition:$transition;
  -ms-transition:$transition;
  -o-transition:$transition;
  transition:$transition;
}

@mixin transform-origin($origin){
  -webkit-origin:$origin;
  -moz-origin:$origin;
  -ms-origin:$origin;
  -o-origin:$origin;
  origin:$origin;
}

@mixin scale($scale){
  -webkit-transform:$scale;
  -moz-transform:$scale;
  -ms-transform:$scale;
  -o-transform:$scale;
  transform:$scale;
}

@mixin opacity($opacity){
  opacity: $opacity;
  filter: alpha(opacity = $opacity * 100);
}
/** end */

.toolbar{
  display: block;
  width: 52px;
  position:fixed;
  right:20px;
  bottom:100px;
}
.toolbar-item,.toolbar-layer{
  //優化代碼，提取公共樣式
  background: url("toolbar.png") no-repeat;
}
.toolbar-item{
  width:100%;
  height: $toolbar-size;
  display: block;
  position: relative;
  margin-top: 1px;
  @include transition(all ease-in-out 0.5s);

  &:hover{
    .toolbar-layer{
      @include opacity(1);

      @include scale(scale(1));

      @include transform-origin(95% bottom);

      @include transition(all ease-in-out 1s);
    }
    @include transition(all ease-in-out 0.5s);
  }
}

.toolbar-item-weixin {
  @include toolbar-item(0 -798px,0 -860px);

  .toolbar-layer{
    height:212px;
    background-position:0 0;
  }
}
.toolbar-item-feedback{
  @include toolbar-item(0 -426px,0 -488px);
}
.toolbar-item-app{
  @include toolbar-item(0 -550px,0 -612px);

  .toolbar-layer{
    height:194px;
    background-position:0 -222px;
  }
}
.toolbar-item-top{
  @include toolbar-item(0 -674px,0 -736px);
  // display: none;
}
.toolbar-layer{
  width: 172px;
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  @include opacity(0);

  @include scale(scale(0.01));

  @include transform-origin(95% bottom);

  @include transition(all ease-in-out 1s);
}

通過requirejs，jq實現功能 （這裏主要是回到頂部的功能）

+ 通過script標籤引入requirejs，然後並引入入口文件main.js
+ 通過config給一些引用設置別名，比如對於jquery-2.1.1.min設置爲jquery
+ 引入模塊，這裏指jquery

// 通過config給一些引用設置別名
requirejs.config({
    //注意paths寫法，我已經栽了兩次跟頭了
    paths:{
        jquery:'jquery-2.1.1.min'
    }
});

// 引入模塊，並通過一個變量表示引入模塊，慣例用$
requirejs(['jquery'],function($){
    //移動函數，可以通過設置移動時間來改變交互效果
    $('#backTop').on('click',move);
    //判斷返回頂部按鈕是否出現,傳入當前窗口高度，當滾動高度大於當前窗口高度時，顯示按鈕
    //特別注意，每次滾動的時候需要判斷，以及初始化頁面的時候需要判斷
    $(window).on('scroll',function(){
        checkPosition($(window).height());
    });
    //這個缺點是反應很慢TOT，所以需要在css上設置一個初始化display爲none
    checkPosition($(window).height() / 2);

    function move(){
        $('body,html').animate({
            scrollTop:0
        },500,'linear');
    }

    function checkPosition(Pos){
        if($(window).scrollTop() > Pos){
            $('#backTop').show();
        }else{
            $('#backTop').hide();
        }
    }
});