浅谈前端程序员学习方法

乱炖

前端的学习比较杂，但我们可以将前端的学习比作纵向和横向的，纵向的使我们学习到的新的知识，横向的是我们对我们学习到的新知识的拓展。

关于纵向上的学习，我推荐类比的学习方式，例如sass与less，vue、react与angular,grunt、gulp与webpack等。

这里我重点分享一下我横向上拓展的学习方法。

横向上，我觉的就在我们平时的开发项目中发现并学习拓展的。

在我们平时最常做的事情，码代码，我们会遇到各式各样的难题，或是新颖的思路和写法，对于这些的攻克和掌握，就是我们的经验，也就是我们横向的发展，但是拓展也会有深有浅，这里就是我要说的，我们要学会在横向的发展。这里有主动和被动,被动就是我们遇到了难题，并解决了难题，主动就是在我们遇到的难题，在解决基础上总结和思考延伸，或者本身就没有遇到难题，我们自己去发现可以延伸学习的东西。

  • 被动

    我们在开发的过程中会遇到很多很多的难题，解决了这些难题后，就是我们的经验的成长，能力的成长。这里就要说到如何解决这些难题。我们有两种方式：自主解决和请教解决。

    自主解决我们常用的手段就是我们的搜索引擎，这里就需要我们如何组织我们搜索的关键字，并快速定位到我们要找寻的答案。那我们如何检索呢？

    1、一针见血式。这是我们遇到的问题比较常见，网上的处理方法也比较多，全面且单一。这样的问题和答案使得我们可以通过精准的关键字锁定我们需要的答案，这也是我们最喜欢也是最舒服的解决问题；

    2、心平气和式。因为开发环境等影响，网上答案的多样性，并不一定别人可行的方法就一定会试用于我们遇到的问题。这里就考验我们的对答案的筛选了，但是往往这里有很大一部分人容易对着繁琐的答案感到头疼和不耐烦，更有很多帖子写的比较详细，内容很多，或者帖子是英文的，导致很多人看到这样的帖子就直接略过了，很可能我们要的解决方法也就这样被我忽略掉了。这个方法就是很简单，就是要我们能认真的需要筛选我们需要的答案，认真的去读帖子，当然每个人的阅读能力和判断能力也决定的找到解决问题方法的快慢。

    3、组合式。当我们遇到的问题比较冷门，网上没有很切合的解决方案，这时就要我们通过问题的拆分处理，找寻相应的答案进行进行组合，来处理我们遇到的难题。这里也用的我们处理问题最常用的方法，由整体到局部（面到点），再由局部到整体（点到面）。
    这我就举个我在做一个需求的例子：
    当时接到一个UI设计，针对于木桶效应的设计，就是要做一个木桶，木板有长有短，里面有水，立体的可左右滑动触发木桶旋转。当要用web做这个效果的时候，一开始也是感觉很有难度。

    • 首先分析问题，有一个大的方向，定大概的有可行性的处理方案。我定了两个方案方向：1、选用tree.js做3D效果，来实现的会很完美，但是对技术的要求比较高，必须很熟练tree.js(这个方法当时被作为备选方案)；2、使用标签结合css翻转来实现3D效果，技术要求比较低，但是实现的效果上不是很完美(由于产品只需要做出样子，暂定这个方案为主方案)。
    • 其次我们针对方案对问题进行细化拆解并组合。做成木桶，我们只要先做成木板就可以了，这时搜索关于css 3D立体效果的实现方面的帖子讲解，当时是搜到一个css实现立体桌面的帖子，当看到这个的时候我就联想到了桌腿的实现方案就是我要的木板的实现方案。然后研究3d桌面是怎么实现的，拆解了看就是一个长方体，也就是由6个面组成，对面进行css操作，让它翻转然后组成一个整体，这样我们只要一个标签(木板)里面包含6个标签(6个面)，这样我就简单的实现了3D木板。那我们该如何组成木桶呢，木桶和圆柱很像，我检索到了圆柱体的实现方式，就是将一个面均分成若干个小面，然后旋转计算好的角度进行偏移组合，就组合成了圆柱，联想到木桶的木板，一样的原理，旋转偏移，组合成一个圆柱，也就是大概木桶的雏形。

    • 大的轮廓有了，最后就是需要去完善和优化方案。比如这时由于是立体的木板，木桶中木板与木板间不能无缝衔接，存在夹角。这时就想计算，是的木板的上下面是梯形的，成一定计算好的角度，使得左右面可能很好的贴合。这时我们就需要找寻css如何实现梯形，将这个再组合到我们大概雏形的木桶上。这时候再看，希望木桶能使上大下小口径的，那时就是木板的前后面也要做成梯形的，并进行前后翻转是的木板能够倾斜(需要提前计算好角度和长宽距离)。这时大概的木桶样子完善的差不多了。当然如果更完美，希望木桶能够接近圆弧的木桶，我没有继续往后面进行，但是猜想我们缩小每块木板的宽度，切割的越小，面也就越接近曲面。

      这里又可以看出我们的对一些比较难的问题可以通过由大化小，拆分后一步一步解决。

    请教解决。顾名思义，和简单，请教他人，但是我建议是在自己对问题有一定的思考后，再去请教，而不是遇到问题，自己也不尝试着去解决，就去请教他人，可能最后问题也是解决了，但是也可能下次遇到同样的问题，自己还是不能处理，因为印象不深刻。这里有个东西叫好记性不如烂笔头，所以我们可以养成写些技术博客的习惯，帮助记忆。

  • 主动

    当我们解决某些问题或者看到某种写法实现的进一步的思考探究。这里就有个很常见的科学方法：问题→猜想→数学推理→实验验证→合理外推→得出结论。我们可以将此应用到我们的学习上。

    这里就举个我在看一个开源项目ScratchJr的例子。ScratchJr是Scratch官方提供的面向5-7岁儿童，学习Scratch的入门工具。我看到运行后的效果，看到元素上css的宽高像素都是随着屏幕的大小写进行计算的，而且是class样式里的宽高度在进行计算变化，而不是style，这引起了我的注意和兴趣。ScratchJr通过这种方式在一定程度上实现了自适应的布局（至于与其他rem等方式的优劣，我也不好评论，至少是一种开阔思维的方向，让我想到这种方式挺适合满屏展示的页面的，也就是挺适合做大屏的）。
    细细的去读代码，我将其中总要的部分进行了copy，并进行的整理，写了一个简单的示例。

    重要的处理脚本：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
      	export const WINDOW_INNER_HEIGHT = window.innerHeight;
          export const WINDOW_INNER_WIDTH = window.innerWidth;

    // 对样式文本进行处理 计算像素大小
          export const preprocess = (s) => {
              let result = '';
              let len = s.length;
              let i = 0;
              let j;
              while ((i < len) && ((j = s.indexOf('$', i)) != -1)) {
                  result += s.substring(i, j);
                  i = j + 1;
                  if ((i < (len - 1)) && (s[i] === '{')) {
                      let start = i + 1;
                      let end = s.indexOf('}', start);
                      if (end != -1) {
                          let expression = s.substring(start, end);
                          result += eval(expression);
                          i = end + 1;
                      } else {
                          result += '$';
                      }
                  } else {
                      result += '$';
                  }
              }
              if (i < len) {
                  result += s.substring(i);
              }
              return result;
          }

    // 加载获取css文件的文本内容
          export const preprocessAndLoad = (url) => {
              const xmlHttp = new XMLHttpRequest();
              xmlHttp.open('GET', url, false);
              xmlHttp.send();
              return preprocess(xmlHttp.responseText);
          }

    // 将处理好的css 加载到style
          export const preprocessAndLoadCSS = (url) => {
              const cssData = preprocessAndLoad(url);
              const head = document.head;
              let style = document.createElement('style');
              style.type = 'text/css';
              if (style.styleSheet) {
                  style.styleSheet.cssText = cssData;
              } else {
                  style.appendChild(document.createTextNode(cssData));
              }
              head.appendChild(style);
          }

          export function css_vh (y) {
              return (y * WINDOW_INNER_HEIGHT / 100.0) + 'px';
          }

          export function css_vw (x) {
              return (x * WINDOW_INNER_WIDTH / 100.0) + 'px';
          }

    css文件：

    1
    2
    3
    4
    5
    .test {
           background-color: red;
           width: ${css_vh(10)};
           height: ${css_vh(10)};
       }

写到这里让我想到了sass和less,做一个大胆的假想，是不是这两种的计算也是上面方法上延伸而成的呢？