有段时间没写东西了，最近在忙着做一个H5改版的项目，忙了将近一个月，终于在本周顺利上线了。刚好利用项目结束的空闲时间将自己这段时间的工作进行整理复盘，给大家分享下我的学习心得。
01 内容知识
我之前是做Android的，从去年开始断断续续学习H5，但一直不深，最近接手这个项目，也算是边学边做了。我们这边的开发框架是vue，但是直接上手还是有点蒙的，建议使用vue之前先了解下H5的基础知识。首推网站是：https://www.w3school.com.cn，上面介绍了官方的H5标准，看起来不会太累 ，看完会对H5页面结构和基本的css语法有个大体了结。实际工作中的布局可能会更复杂，建议看《css权威指南》，分上下两册，对css讲得比较透彻了。还有一本《CSS+XHTML+JavaScript网页设计与布局从入门到精通》也不错，不过在京东上没找到新书，后来买了本二手的。它里面对一些css的布局技巧讲的比较多，在实际工作中也比较实用，我个人比较偏爱于flex布局，感觉对手机的兼容性更好。除了css，目前比较流行的是scss和less，基本语法差不多，写起来会更加简洁。
至于H5，感觉学习的内容不算太多，有可能我没有经历过它的变革，暂时还没体会到太多的好处。H5和之前的HTML语言比起来，更加规范统一，兼容适配性更好。H5里面定义了一些新的语义标签，实现相同的功能写法更加简洁。我买了《HTML5和CSS3权威指南》，也是分上下两册，网上有第三版的电子书籍，担心有些知识不适用，狠心掏高价买了第四版的纸质书籍，哈哈。小伙伴们可以再搜搜，说不定能找到对应的电子书籍。
js算是一门比较久的语言了，比较经典的书籍有《Javascript高级程序设计》、《JavaScript语言精粹》等，我们现在用es6比较多，推荐阮一峰老师的《ES6标准入门》，还有廖雪峰老师的官方网站也不错，javascript讲得深入浅出，通俗易懂，特别是里面有一些javascript代码运行片段，可以检测对知识的理解程度。在实际工作中，由于对javascript不熟，我经常用它来验证自己的一些想法和逻辑，也是方便得不要不要的。
学习完HTML，css和JavaScript，对H5就算是入门了。但是要实际上手开发，还需要看一些前人写的代码，我看了一些我们组同事用jquery写的后管页面，然后将native的一些原理往上面靠靠，基本也就理解得差不多了。最后再到前端经典框架之一vue，说到vue必然绕不开webpack和node.js。我在接手项目前专门学习过一段时间的webpack，比较推荐《深入浅出Webpack》，还在极客时间买了个课程，两者结合起来算是对webpack有了个浅显的了解，离webpack配置高手还有很长的路要走。webpack配置的好坏在一定程度上决定了你的代码性能，这中间需要对webpack打包机制有很深的理解才行。
前端繁荣node.js起到了功不可没的作用，它将javascript从浏览器端搬到了服务器端，让前端工程师有了全栈的可能。针对node.js推荐三本书籍《了不起的Node.js》《Node.js开发指南》《深入浅出Node》，node方面的书籍读起来会相对比较枯燥，里面有好多c和c++的内容。vue框架是运行在node里面的，如果读懂node的运行原理，相信对webpack的配置也会有更加深入的理解。
前端开发的本质就是渲染页面，监听事件以及操作DOM，只不过vue已经将这些底层逻辑封装起来了。为了写出更高效的代码，我觉得还是有必要了解下。对于DOM推荐《JavaScript DOM编程艺术》，读完会对DOM有一个更加全面的认识。浏览器渲染也需要重点学习下，我在网上找了本电子书《webkit内核解密》，里面根据Chromium内核源码深入讲解了网页的加载和渲染过程，读完你就会理解为什么不建议频繁操作DOM，以及为什么把JavaScript的加载放在最后等。和浏览器相对的就是手机端的webview了，之前做RN项目的时候简单操作过webview加载H5页面，后面打算结合native重点学习下这部分内容。
为了快速上手H5，最近在极客时间买了一些课程，整体感觉还可以，听老师们讲还是比自己学习效率高些。还买了一个w3cplus的年卡会员，价格有点小贵。github上有比较热门的javascript开源项目，建议大家可以抽空学学，提高自己的代码风格和质量。给大家推荐极客新闻整理的5月份比较优秀的javascript开源项目：http://gk.link/a/103VK
02 技巧经验
我们开发的时候一般都是基于Chrome浏览器，但是第一次想进入项目的某个页面还是很懵逼的，一是不确定是哪个页面，还有就是不知道要传哪些参数，如果参数传得不对，页面打开有可能一片空白，做H5开发的同学对此应该深有体会。建议先通过抓包工具连接手机代理找到具体的页面和参数，还有一些登陆信息，因为H5页面的一些请求是基于登陆成功发出的，并且请求参数中会带上登陆信息，这时候就可以先注释掉登陆过程，将请求中的登陆信息写死，等页面开发完成上线的时候再改回去。
在浏览器中开发完毕部署到测试环境，自以为万事大吉的时候，测试同学提了一大堆的手机兼容性bug。然后又一脸懵逼，我在浏览器中看到的是正常的啊，这到底是为什么呢？总结有以下两方面的原因：1，在Chrome浏览器中开发H5页面主要基于Chrome浏览器内核进行渲染，然后到手机端，虽然同是基于webkit内核，但是不同的手机厂商做了不同的移植，具体可以看我上面推荐的《webkit内核解密》，特别是ios手机基于Safari浏览器，会加上一些浏览器的默认样式，调试起来更是坑爹；2，webpack打包机制，在dev环境下css样式直接插入到head头部，但是打包以后会生成一个总的css文件。某些样式可能会产生全局污染，特别是引入第三方插件的时候，建议单独定义一个class来重写某些样式，而且注意不能和项目中其他筛选器同名。还有就是要慎用scoped，可能会导致第三方样式引不进来，具体原因后面分享给大家。
既然在手机端有这么多兼容性问题，那我们要怎么解决呢？解决问题前首先要定位问题了，给大家分享下android和ios手机的调试技巧。对于android机，手机用USB线连接电脑，打开调试选项，并且手机也需要安装谷歌浏览器。在Chrome浏览器中输入chrome://inspect/#devices，就能看到手机端显示页面的路径信息了，注意只有H5页面才可以。然后点击inspect，进去之后就可以看到浏览器显示的手机端页面了，第一次进入可能需要翻墙。然后我们就可以很方便地定位问题，并且实时更改样式，验证自己的想法是否有效。对于ios手机，在Safari浏览器中打开开发选项，虽然不能像Chrome浏览器那样看到UI界面，但是也能同步更改样式了。最后再教大家一个小技巧，修改测试环境的bug，如果改完反反复复发到测试环境就太麻烦了，我一般都是将手机的接口请求地址代理到本机node服务，这样改完代码就可以实时在手机中看到效果了，跟在浏览器中开发一样爽。如果遇到生产环境的问题，大家也可以尝试将访问地址放到浏览器中进行定位。
以上就是我今天的分享内容，对于H5，我才刚刚入门，虽然项目做完了，但是好多知识点还没有吃透，等后面系统整理后再分享给大家。如果你有什么好的学习经验和方法欢迎回帖交流。
