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基础功能，注册插件，所以还要多使用，多学习别人的代码。打好基础，要找实习啦，好捉鸡！