前端如何高效写页面 | 实战小结阶段一

写在前面：

• 本文作为本人学习总结之用，同时分享给大家~
• 个人前端博客网站：zhangqiang.hk.cn
• 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

---

最近公司在做一个新的项目，与之前大部分都是用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我自认为现在就算看了里面的方法我运用不到我的代码里，那代码的质量自然也不会增长了。