前端之旅——实践出真知

这又是一篇与技术不太相关的文章，别打我！！！别打脸！！！

      前面在写CSS、HTML等相关文章的时候，基础的东西基本是一笔带过。基础文章有太多网站去写，比如菜鸟教程、w3school等等。我不太懂许多人开博客的原因，就为了拷贝别人的文章？每次遇到困难去网上找解决办法的时候，常常翻出来的都是相同的内容，标点符号都不带变的。很多问题是别人在工作中遇到的，他的问题与环境还有一定的联系，别人的解决办法可能解决不了他的问题也复制过去。

      记得之前学服务器部署，按着教程都做完了，最后就是访问不到，换了很多关键词查到的文章差不了多少。于是只能一步一步去看哪儿最可能出问题，再根据问题去找对应教程，最后问题找到了，教程里少写了一步。有不少人就是一个CtrlC、CtrlV工具，我完全不信每个人遇到问题的环境是完全一致的，正好那个方法能解决他的问题。之前看到一个新闻说有的人为了github上的star花钱雇人去点，大概就是这样一帮人开博客完全就是为了去蒙蔽面试官。

      当然，面试官又不傻！

      再回到主题，emmmmmm，好像本来也没什么主题。关于基础的东西，写一写，练一练，就知道是怎么回事了。对于有些人来说，他们对CSS很熟悉，对HTML也很熟悉，可就是在项目上不知所措。我从学校毕业就是这样，学的东西全是散装的，学完PS不知道可以做网页，以为PS就只能P图。有时候，散装的也不太可怕，可怕的是散的太厉害。我在学校学习的时候，那时候啥也不懂，老师讲HTML和CSS也不会单独给你讲它们是怎么回事。就像我写的博文，就告诉我们一个大概，但这个大概有点水的厉害，最后具体操作怎么做，用Dreamweaver（DW）拖，拖表格布局。DIV这种布局方式完全一笔带过，因为这种布局方式不稳定性太多，她干脆不讲了。最重点的是CSS的写法有点尬，她是通过DW弹出的编辑框一个一个去生成。整套内容全靠软件，讲编程语言不提语言，虽说是玩具语言，但这也实在说不过去吧。

      会写CSS之后回头看DW，用DW去操作的过程，直接写都写完了。这就属于散的太厉害，你对CSS、HTML再熟悉，老师交给你这种垃圾玩法，工作中会是什么样子？反正我当年看到招聘需求手写CSS便浑身毛骨悚然，最后觉得自己设计学得还可以（ps：会用软件而已）就靠设计找工作，网页设计都不敢投。在实际工作中我也有遇到过学院派，当时去一家公司对接，那家公司前端做不过来，准备包出来。当我看到她用的DW，我差点笑出声，不是因为这工具，而是我明白了为啥慢。只是切片写静态完全是忙得过来的，用啥工具关系也没什么大影响，但DW可以看出处于什么段位。别问我怎么知道的，问下度娘写JS推荐用什么开发工具。因为是做移动端，先了解了下她们的适配方式，然后了解了下她们的流程，基本上证明了我的推论。

      她的适配方式和我当时用的差不多：以设计稿定宽，用rem单位，根据设计图宽与手机屏幕宽的比例设置根字体大小。根字体默认正常值给的100px，这利于计算，基本上加个小数点就OK了。当时，我还不知道，看到她用DW再加上0.3333rem这种值的时候，猜想根字体不是这么好计算的一个值。DW是没有px to rem的转换工具，会有一个计算过程，像HBuilder自带转换、VS Code有插件、Sublime Text也有插件等等。她并没有借助这些工具，后来当她给我她的Demo我才知道根值，算是有些管中窥豹的感觉。这种转换可以用工程化思维去解决，按着原本的像素去写，最后将转换工作交给工具。还有一个更方便的方式，那就是蓝湖，它让前端写静态更快速。她给的文件也很有问题，没有公共CSS和JS，至少有两个文件少不了：重置默认的公共CSS、用于适配的JS。不善借助工具，不了解前端技术，不会提取公共资源，这些都是导致她忙不过来的原因。

      讲这个例子，我得声明一点，我不是为了踩低别人来抬高自己，也不是要攻击学院派。切个片就能给我牛成这个样子，还不至于。我想表达的是我们要学会去了解当下的技术结构，用它来给自己带来更多的便利。学会了基础，还得去学会综合应用，学会了综合运用还要学会偷懒，学会了偷懒还要学会下一个招数……技术在于折腾，生命不息折腾不止！我个人更偏向于在实践中不断进步！有人会说，我不知道工作中会需要用到些什么？并不是说工作中需要些什么，应该是这个职业有些什么技能。最初模仿别人的网站学会了写静态，接着想做一个自己的博客知道了兼容性，接着觉得不够炫酷又加了点特技，接着想到技术有点落后再更新了技术：实践就是一层一层地涉及不曾接触的领域。这就是学习，当你盯着公式的时候，哇，好简单！关键你得做题啊，要不然你就会拿它去计算相声了！

      当我在《CSS扩展语言》的时候，原本想写一下sass、less、stylus之间的差异，后来一想没什么用。想到之前看到CSS3新语法涉及到了变量，说明它在改变但还不够好。于是以sass列举了一些语法，来说明扩展语言的好处。写完了之后，想以这种手法来聊一下构建工具，转念一想这样完全没有必要。构建工具太多了，它们各有特点，具体的得根据技术选型。当然，多了解一点并非什么坏事，这件事别人已经做了，我就不多费唇舌。

      最后我决定开始搭建一个项目，现在网上讲实战的教程真的太少，要么是培训机构收费教程，要么就讲个大概给源码。说到底，那些教程好多都是新手demo，包括好多完整项目都是练手的东西，算不得企业级项目。其实脑子转个弯就想得到，真正的大神已经懒得写代码了，还给你写整个项目，疯啦！我不是什么大神，尽管做过项目，也都是自己搭建的。我这样做是想把整个思路写下来，自己也能进步！自己全新弄一个项目，从需求到架构到最后成型全凭借自己的力量完成，一定能学到不少的东西！

      之前做移动端尝试过使用淘宝的lib-flexiable适配，不太好用，淘宝前端自己都抛弃了。我决定选用vw/vh，对于我来说是一个全新的尝试，框架用vue准备使用vue-cli3。大致技术选型就这样，接下来将进入实践时间！

转载于:https://my.oschina.net/u/3830333/blog/3101243