最近公司在做一个新的项目,与之前大部分都是用ant design组件化开发相比,需要手动画页面的地方较多(这里的手动指的是用div css布局自己画前端页面,或者自定义antd的样式),花费了老多的时间。所以特地在本阶段做一个小结,来记录如何可以更高效的写前端页面。
在目前阶段看来,写一个完整的前端页面包括:页面布局样式(就是通常说的静态页面)、页面交互、联调(与后端接口进行数据之间的增删改查);
1 页面布局样式
这个绝对考验 html 、css的基础功,如果不熟悉的话,建议把html css再系统刷一遍,不然实战开发的时候真的真的太消耗时间了!! 回顾个人,综合来说我在高中三年和大学四年都有接触过网页开发( Dreamweaver、web开发、微信小程序),但是那个也只是面向考试编程,能过就行。现如今发现必须系统专精学习才行,所以我把b站pink老师的Html css的课刷了一遍,只能说Pink老师的课因人而异重在能有所得;然后再买了css的经典书。经常刷w3school文档。
小结:
- 多练多看再练再看-总结分享-再练再看;
- 拿到页面别急先动手,心里或者在纸上列一个草稿,如何写这个页面,先撘一个框架;(绝对定位、相对定位、flex布局、grid布局…)
- 功能复用,函数式、组件式开发 ,截至目前为止,我认为这是提高页面开发的利器。但是如何能使用好,亟待研究。-
2 页面交互
javascript,基础知识打牢,数组、对象的用法要熟悉;
相同功能超过两个请用函数,遵循语法规范,方便维护。
3 联调
写交互的时候需要考虑好联调,数据统一,联调。
~好了,目前就记到这里吧,后面会再找一些实例代码记录。多看大佬的代码,所谓大佬就是比自己厉害的人,如果说vue react我自认为现在就算看了里面的方法我运用不到我的代码里,那代码的质量自然也不会增长了。