WEB开发之路——基础部分

WEB开发之路

受BBC的《BBC: Brain Story》和《BBC: The Brain - A Secret History》的影响，我一直有志于探究人类大脑，2015年的暑假，到华南理工大学的国家重点实验室-生物医学工程实验室，实习了一个月的时间，学习大脑图像处理—Matlab语言来处理大脑的灰质和白质的图像，核心知识在计算机方面，只有掌握计算机这门工具，才能更好的分析大脑。因此，在我的坚决要求之下，2016年的暑假，家人给我联系了一家软件公司实习，从最有活力的WEB开发入手。

我基本上是一个软件开发“小白”，还要留出半天时间学习英语，每天分配到开发的时间为半天，2个月的假期，实际学习时间为1个月。如何将我带入软件开发的圣殿，公司安排了经验丰富的工程来给我安排合理的计划，并给予指导。正好公司也在培训新员工，我便混迹其中。WEB开发从前端开发入手，包括页面设计、制作和开发，采用案例式教学:每次学习完一个知识点，都要提交代码，并写出总结。

参照公司的整个Web开发学习计划，是五个阶段，每个阶段一个月时间，我只完成了第一个阶段:WEB开发基础知识的学习，分为五个步骤，也就是五个知识点。

第一步：学习使用Axure软件，仿真实现vogue首页案例。使用Axure软件提供的组件，来实现感应式菜单、旋转木马特效、anchor和form四个部分。掌握了这些功能，就能够完成高保真原型开发。同时还要理解组件、页面构成、消息和事件概念，为后续的开发预备知识。

这一步完成比较顺利，大概十天时间掌握大部分内容，技术难点需要指导完成。20160708完成并上传到个人博客。

第二步：学习HTML和CSS知识，仿真实现163首页案例。采用Webstorm工具开发，掌握常用标签、CSS属性和选择器。HTML参照菜鸟教程学习基础部分，计划两天完成，结果限于本人记忆力不佳，化了四天时间。CSS也是参照菜鸟教程学习基础部分，实际花了三天时间，初步理解了两部分知识。在仿真163网站的时候，刚开始难以理解如何使用，不知道如何下手，进展缓慢。经过导师的帮助，经过三天时间，将CSS文件从HTML文件中分离出来，并实现2个DIV块。但旋转木马等没有实现。

这一步没有第一步顺利，还算是完成了，时间定格在20160731。后面开发还会用到这些知识，逐步提高吧。这次没有达到导师的要求，但我自己还比较兴奋，实现了人生第一个主页。

第三步：学习JavaScript基础知识，实现成绩计算和打分案例。掌握JavaScript语言的语法、数据类型、语句、函数和内置函数的使用。参照《JavaScript入门经典》学习，网上查找协助理解，基本掌握JS语法，由于家庭聚会，耽误了几天的学习。没有实现开发案例。后面继续学习。

第四步：学习DOM/BOM开发，实现竞赛题案例。掌握DOM和BOM的基础结构和增删改查四个API的操作。参照《DOM编程艺术》学习，不足部分网上查找补漏。界面设计、数据搜集和开发100道竞赛题。

这阶段的学习，个人最满意，开发很顺手，实现效果不错，认真的态度获得导师的认可。完成于20160816，总结再次上传个人博客。

第五步：学习Ajax开发，完成获取数据部分功能案例。掌握XHR异步/同步、HTTP命令和数据格式。参照《Ajax权威指南》学习，较快掌握。开发案例的时候，普通网站取数，如“163.com”汉字能正常显示，“电影天堂”网站获得的汉字都是3F3F之类的数据，遇到字符集不兼容的问题，一直没有找到合适的解决方案。期间在导师用phantom或者node都能获取。得到都是3F3F之类的数据。之后采用二进制读写，不让浏览器解析汉字才解决问题，我一直认为是“电影天堂”网站反爬虫技术在作祟。

这个阶段学习掌握和HTTP的命令，比HTML更进一步理解了WEB。遇到字符集问题，学会了攻关的一般方法。20160827开学，代码还没有完成，总结也没有提交。还要抽出时间来完成，实现阶段成果。

至此，完成【web1.0】的基础学习。整个内容都是在围绕浏览器展开，HTML、CSS、JavaScript函数、DOM和AJAX都是浏览器来解析。后续将转到JavaScript为中心的学习。据了解，之后的四个阶段包括的内容如下，第二个阶段:JS前端开发框架学习，包括Bootstrap/JQuery/Handlebars/Angular等内容。第三个阶段:JS后端学习，包括Node/Express/Sockit.io/MongoDB。第四个阶段：单页面应用，将后端功能迁移到前端。以及开发全流程学习，包括：开发、构建、测试、发布和维护。第五个阶段:HTML5和CSS3开发。