学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
image.png
架构相关
image.png
这一部分主要是为了能够给予业务,满足业务的情况下设计书写出技术架构图。前面三个是为了能够做好技术架构的基础信息了解。
如何书写架构方案
这个其实我个人也没有很好的方法论。贴两张以前画过的图:
image.png
image.png
但是到底技术架构图的标准是什么?
下面这些条件是公司大佬【阿里p8】和我过技术架构图【上面第二张图】反馈给我的。
• 技术架构:上面图主要表现的是技术架构• 业务边界:针对不同的业务场景,边界清晰,走不通的业务架构• 业务架构:针对具体的业务场景进行技术支持。例如我们遇到pos离线的场景,这属于业务架构• 动态流程:业务流程 pos 下单,查商品 商品流程如何在架构图体现【缺失】• 集成架构:其他系统集成• 部署架构:部署
技术相关
image.png
脚手架
技术选型 & 脚手架选型
这里主要是做技术选型和脚手架选型。因为我们相对统一,所以基本没这个问题。
系统模块处理
这里是列举了三个例子
• 权限• 多页签• 登陆校验
公共模块处理
• 公共方法:公共方法的放置• 公共枚举值:可参照用dumi发布一个用于处理枚举值的npm包[2]• 公共service:数据接口处理• 公共组件:位置放置和规范【也可通过dumi发布公有包或者私有包 参照:用react手写一个简单的日历[3]】
技术调研 & 技术落地
疑难问题的技术调研和技术落地方案。
• 以前做过:react - 多页签页面缓存[4]• 现在在做:electron 做pos【js控制打印机,js加载动态库dll适配ic卡等等】
业务开发demo
这是为了最大化的解决项目当中初级开发的开发问题。
• 代码demo:业务开发的demo代码• 开发讲解:同步讲解demo的开发模式• 文档说明:沉淀文档说明
任务划分相关
image.png
这里的内容就不多说了,以前的文章提到过一些:前端项目负责人需要具有的能力[5]。
根据阶段目标check任务排期是否合适
这里着重提出来,是和团队相关部分提到的阶段目标有关系。需要和阶段目标契合,这样在一个时间段,我们项目整体协作出来的东西才是完整的东西。
规范相关
image.png
开发规范
• 代码规范• 协作流程• 提交规范
内部协同规范
• 早会• 周会• 下发任务沟通:下发任务明确,讲清楚技术重点难点,开发人员了解并确认。• 完成任务汇报:任务完成及时汇报,更多是通过项目管理工具完成。• 疑难问题协同
文档规范
• 相关文档汇总地址• 技术文档• 规范文档• 周会文档汇总
前端部门相关
image.png
协作相关
====
image.png
与产品
image.png
统一原型规范
这里着重说明:统一原型规范,就是原型的输出同样的交互页面风格要保持统一,不允许有很大差距。
image.png
• 原型输出不像一个系统• 代码开发内耗
与后端
image.png
统一前端后共识
image.png
这里着重说明:前后端对于一些事情处理需要达成共识,这样会节省很多沟通问题。
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-xOBJbVkr-1715458137081)]
[外链图片转存中…(img-d7AmCY1i-1715458137082)]