random-quote requirejs+scss實戰

• 題目來自FCC的https://www.freecodecamp.cn/challenges/build-a-random-quote-machine
• 代碼地址：https://github.com/OMGAGIRL/stop-trying-to-reinvent-the-wheel/tree/master/random-quote%202017.2-22-2.24
• 總結：其實實現功能很簡單，除了分享功能需要廠商提供api，以及我覺得api並不好找以外，大多的問題都處在requirejs封裝jq插件上，this的運用以及作用於還有ajax異步造成的數據獲取延遲，還有一個大的問題就是對於是否需要模塊化一個版塊沒有特別清晰的概念。

總結的幾個要點

css部分

• 在使用scss時達到響應式時，最開始的時候構想了兩種方式
  
  • 第一是把屏幕分辨率作爲參數@mixin，然後在類中給每一個需要的css樣式@include，但是觀察了生成的css代碼以後，發現代碼量可能會比第二種要多，所以還是放棄了，沒有找到當時的網址，就貼代碼吧。
  • 第二就是根據自己的需求把重複的多種屬性合在一起@mixin，傳入參數，但是我感覺這種方法其實比較雞肋，沒有複用的太大意義，以及如果屬性多了其實大量傳參也不是很合適。只是相比較第一種，好像似乎要好一點。
  • 剛剛搜索的時候又看到了w3c上貌似有別的文章，學習之後再來歸納。比較好的地址 講的是分欄佈局

$breakpoints: (
        'xs': 'only screen and ( min-width: 480px)',
        'sm': 'only screen and ( min-width: 768px)',
        'lg': 'only screen and ( min-width: 1200px)',
) !default;

@mixin respondTo($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);
  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }
  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}

.class{
  @include respondTo('xs') {
    background: red;
  }
  @include respondTo('sm') {
    background: lawngreen;
  }
  @include respondTo('lg') {
    background: lightseagreen;
  }
}

這個源碼我分析了一下，給自己畫了個重點，!default以及map方法的使用

js部分

• jquery的 animate 被應用在切換的時候名人名言時的漸變效果，但是隻能完成如opacity這樣的簡單變化，如果是顏色變化，animate無法實現，jquery有插件 jquery.color.js，但是我是用了css3的transition效果

$(value).animate({
    opacity: 0
}, 800, function () {
    $(this).animate({
        opacity: 1
    });
});

• jquery的ajax的問題就是，我把ajax取值以及直接返回我要的隨機生成的值的方法定義了一個新的模塊。遇到的問題是，由於

   myfun.prototype.getAjax = function(){}
  

  ajax()方法是異步的，所以會遇到想要取值的時候，ajax並沒有執行完，兩種解決方法，給ajax加上settimeout，但是我覺得不定性比較大，還有一種就是根據自己的要求，可以async:false，變成同步。

• 然後還有一個就是學習到了把自己的內容分享到空間，微博等的方法 參考 我覺得雖然各大廠都有api可是，我實在是沒有找到到底哪個可以實現啊，所以參考的是這位作者的寫法，完美解決啦。
• $.proxy這個jquery中的方法 jQuery.proxy，強制設置函數的作用域，讓this指向obj而不是#test對象。
• $.extend 設置默認參數時很有用
• $.fn.extend 在註冊插件時使用。

心靈總結

總的來說，每次嘗試一個新東西，就會收穫很多。特別是這次也是第一次使用github管理自己的代碼，而且也把自己寒假的時候學習的幾個東西融合在一起，雖然是個小東西，但是在做的時候都是先用最簡單的代碼堆疊實現功能，在慢慢拆分，沒有一個具體概念化的模塊化代碼。還有問題就是，這些東西的使用都是停留在很初級的使用，scss目前也只是簡單的使用@mixin並沒有工程化很多東西，requirejs也是單純的使用config以及define基礎功能，註冊插件，所以還要多使用，多學習別人的代碼。打好基礎，要找實習啦，好捉雞！