写在开始之前
断断续续,学习前端也有了不短的时间,越学越觉得前端能做的事情越多,也越觉得自己的水平不足,在此进行一个短短的回顾,也希望能帮到想要入坑的新人们,模块也可只做了解,
前言
单就现在的技术而言,学习开发已经没有什么门槛,教程遍地,课程繁多,但在长期的前端开发学习中,我感到的是范围的局限性和缺失的时效性,除开基础的HTML/CSS/JS的学习,很多前端的进阶知识并不困难,比如性能优化、打包器、自动化测试等内容,但很难能去对这些内容进行一个较为全面的阐述,因此只能在基础的代码语言中不断重复学习,接触范围有限,而时效性是由于框架和第三方包的不断更新,过往的案例教程逐渐不可复用,而新的教程因为费时费力,缺乏收益而少有人为。
所以我只能把我自己接触到的一些内容小作分享,希望能逐步构建起完整的前端开发学习体系,后续会逐步更新,
Udemy是一个很好的学习平台,不断有人推陈出新,但价格不菲。前端开发还是需要自己多接触,多磨练,并不是看了教程和仿写了案例就能应用。
系列
从零开始的前端开发 前端的开发基础
开发基础
相较于其他注重内在逻辑的开发语言,前端开发的特点在于使用HTML和CSS来进行页面的渲染,使用JavaScript来形成具体而复杂的功能和交互,而浏览器是其载体,其本质在于展示与交互,这一点在日常使用浏览器中就可以感受到。举个例子,当点开一个网页,就会跳转到了一个新的URL,此时就开始了一个网页的获取与渲染,经历查找缓存,域名解析,TCP连接,HTTP请求,服务器响应,关闭连接,浏览器渲染(HTML/CSS),JS解析的整个过程。
虽然前端开发者的学习与使用内容在于HTML/CSS/JS语言代码,但是诸如浏览器的相关知识、TCP/IP、HTTP/HTTPS、网页的状态码等诸多内容也是必须要了解和掌握的,有助于理解前端开发的整体流程和问题寻找。
本系列文章会在之后对前端开发的相关内容进行必要的阐述,主要在于常见问题,常用术语,常用开发内容。如果想更全面了解前端开发的相关内容和术语,可以通过MDN Web Docs进行进一步学习。
前端开发框架
传统的前端开发(使用HTML文件/CSS文件/JS文件)已经很难满足现在的网页需求,包括性能优化,功能实现,以及可拓展性等等,因此掌握前端开发框架成为了开发者的必需技能,主流的前端开发框架包括React、Vue3、Angular等,每个框架都有独特的使用方法和特点,比如React的JSX语言,Vue3的轻量化,Angular的Subscribe等,本系列文章在后面会对React框架的使用进行阐述和解读。
优化问题
在选择开发框架后,是如何考虑前端的优化问题,前端优化主要作用是加快加载时间、优化用户交互体验。包括度量标准、资源优化、编码优化、构建优化等多方面内容,同时,也有防抖,节流,懒加载等多种常见的优化方法。此处只是简单提出,之后再进行具体阐述。
自动化测试
为了前端开发内容的稳定运行,测试必不可少,大多数时候浏览器能够正确渲染页面,正常实现功能,不出现报错和警告就是一种成功,大多浏览器自带的开发者工具能够为开发者提供包括设置断点、修改元素、输出内容等测试工具,但由于一些代码文件的复杂,手动排查故障效率低下,而自动化测试能够帮助开发者在完成开发后对自己的项目进行快速的排查,如Jest和Babel等三方包,浏览器开发者工具和自动化测试的内容也会在后续文章阐述。
Natvie开发
前端开发如果止步于浏览器,未免过于可惜,毕竟APP的开发和前端开发也有很大的相似性,比如页面的渲染和交互,比如数据的request和response,前端和APP的开发可谓一步之遥,因此,在后续的文章中,也会对前端和APP开发的关联进行简单阐述,比如Android/IOS等系统,Native/Web App/Hybird等相关概念的讲解。
案例
暂空,等到上述内容完成后放置一些。
小结
由想及笔,以上或许仍然有许多缺乏的内容,也可能在大佬眼里充满谬误,但确实是我一步一步学习过来,希望能够记录自己的一些学习成果,也希望能够得到前辈或者大佬的斧正,一切都是学习,一切也都是玩乐,希望自己能早日写出自己能够满意的个人项目。