前端架构(学习“笔”记)

原创 zxsclq 随笔 前端基础 146阅读 28 天前 举报

前端这个行业,现在鱼龙混杂,小公司压缩成本,导致苦逼的前端,原型,UI,架构,代码,数据,优化,服务器,上线等等,不管你会不会,都得硬着皮头上,弄不好还得被怼,哎,点根烟,说多了都是泪
最近空余时间,看了看前端架构相关的书籍,虽然是个学渣前端,但是,还是有一颗好学的心。
书名《前端架构设计》我有PDF版的,有需要的call我。
说看完了,做了一下简单笔记:
原则:前端架构是一系列工具和流程的集合,旨在提升前端代码的质量,并实现高效、可持续的工作流。

职责
体系设计:建立起了系统设计的规范,用来衡量代码质量
工作规划:有一个相对完整的工作流,例如版本控制(git等),任务调度,文档工具,测试工具,服务器部署等等
监督跟进:前端的一个重要的能力,能够根据不同阶段,来持续优化工作流程。

四个核心
代码:框架选择,代码资源,开发规范
流程:高效而不出错的工作流,合理的使用工具
测试:可持续发展和优化的系统,必须有很好的兼容性,然后~~兼容是一个大坑!
文档:善于在项目开发的同时编写良好的文档,没人辞职,这个好像没啥用。所以,我在几个公司,基本上没见过开发文档

然后学到了几个名词~~

HTML

文字、图片、链接、表单和提交按钮都是所有 Web 真正需要的元素,也是在 Web 上创建所有东西的基础。初始的标记做得不好,你将要写很多不必要的 CSS 和 JavaScript 来弥补。

过去处理标记的方式:

程序式标记:自动化程度100%,可控程度0%。简单来说,就是一堆div 乱炖,很多小伙伴写代码,整个页面,除了表格,图片,全是div,哈哈div太强大了,没什么处理不了!
静态标记:自动化程度0%,可控程度100%。

现在处理方式:

模块化标记:自动化程度100%,可控程度100%。区块拆分,现在的主流的三大框架就是这么玩的

CSS

OOCSS方法(Object-Oriented CSS,面向对象的 CSS)

面向对象的css两个原则:分离结构和外观,以及分离容器和内容
分离结构和外观:意味着特殊定义的可复用单元,比如,你随便找一个框架,里边,各种类型的按钮等。
分离容器和内容:可复用的class类名,比如协定一个类名,不管在什么情况下,只要出现这个类名,样式同一

SMACSS(Scalable and Modular Architecture for CSS,模块化架构的可扩展 CSS)

SMACSS和上边的OOCSS方法有很多类似之处,不同点是把样式系统划分为五个具体类别。
基础:如果比添加css样式,页面上会有什么样式呈现,比如说H123456
布局:把页面拆分城区块,这个不用多说,前端拿到设计图的时候,就该分析区块拆分,基本上,看到了图,就知道用多少div。乱炖除外
模块:设计中的模块化、可复用的单元。现在基本上组件化了,跟这个差不多
状态:描述在特定的状态或情况下,模块或布局的显示方式。
主题:一个可选的视觉外观层,可以让你更换不同主题。(游戏玩得多,换个皮肤)

BEM 方法(Block Element Modifier,块元素修饰符)

BEM是一个css类名规则,不涉及css书写,在框架代码中,我们很常见的,例如class="toggle__details--active"这种写法
块名:当前块所属组件名称(toggle)
元素:元素在块里面的名称(details)
修饰符:任何与块或元素相关联的修饰符(active)
要想成长,少有拼音!

特性之争和继承之痛

常见问题
选择器优先级:无论是用id或者重新写的时候,都要注意优先级,所以会出现这样的代码

上边这种情况,如果是上一层或者下一层,得重新写一遍,然后再慢慢数,慢慢数。跟jquery添加html代码,数引号一样

处理方式呢,less,sass自己选吧,这种写法,看着舒服

其他有助益的原则

单一样式来源:将单一责任理论应用到更深层次,不仅每个 CSS 类名被创建为单一用途,而且每个标签的样式也只有单一的来源。避免样式污染,覆盖等等,除非,万不得已。

JavaScript

保持代码整洁:符号问题,单双引号,分号,逗号,括号等等html和css,符号问题,浏览器会忽略,js问题,页面就崩溃了。不过现在很多强大的工具,会帮我们处理。
创建复用函数:这个理解起来,跟组件快差不多简单常用函数,可以封装成可复用元素,比如ajax,axios封装等等。可以看看我之前的文章,有简单的样式。

好了,先写这么多,待续!(想看书的,可以call我,看了书,你会发现~我这些,全是抄的,哈哈!笔记,真是用笔记录的哦!)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复