以一名初级前端的视角来理解架构
先说一下我自己的观点,架构其实并没有那么的高大上,前端初学者都可以尝试去理解这个概念,并不是只有架构师才需要涉及。从代码设计,到应用设计再到系统设计,其实处处都是架构。从代码实现和具体业务中抽象出一幅有着各种各样关联性的架构图。
架构思维架构思维的建立实际开发经验到一两年之后,应对大部分的业务开发应该问题不大了,这个时候可能就会自然而然的思考,各种组件封装,函数封装等,让自己的代码尽量不那么的’shit’,这个时候其实就开始建立起了代码设计层级的思考了
代码级设计从各种各样的名词:高内聚、低耦合、健壮性、可读性、复用性、松散性、可维护、可扩展等
从各种各样的设计模式:单例、策略、中介、工厂、发布订阅、观察者等
从各种各样的设计原则:单一原则、最小知识原则、开放封闭原则等
代码层面上的设计除了一系列技术上的各式各样的原则之外,还应包括各种各样的规范,比如变量命名、目录结构、代码提交等。
在cv久了之后,也会思考模块化设计和组件化开发,结合业务去思考模块化开发的临界条件,即什么场景下需要做封装,什么场景下需要解耦,哪些代码可以做封装,这里到底是全局统一封装还是组件内封装。会去考虑代码 ...
AOP装饰函数在前端中的应用
在传统的面向对象编程中,给对象添加功能常常采用继承的方式,但是继承的方式并不灵活。在实现一些功能时,有可能会创建出大量子类
装饰器在JavaScript中可以很方便的给某个对象添加属性或者方法,但是很难在不改动源代码的基础上给函数添加新的功能。
12345678910// 假如当前我们的代码是这样的 const a = () => { console.log(1); }; // 我想添加一个打印2的功能, 这个时候可以直接修改源代码 const a = () => { console.log(1); console.log(2); };
但是在实际开发中,我们往往接手的是上一个同事留下的代码,鬼知道他在这一段代码里面做了什么。。。。。这个时候可能就要求我们在不改变源代码的基础上给函数增加新的功能。那么我们就可以用到装饰器了
装饰器模式在 JavaScript 中,自身并没有原生支持装饰器模式。装饰器模式是一种结构性设计模式,它允许你通过将对象包装在一个或多个装饰器中,以动态地添加或修改对象的行为。装饰器(D ...
AOP在前端编程中的应用
最近在学代码优化的时候,看到了AOP(面向切面编程),听着好像挺厉害的,就把他记录了下来
什么是AOP面向对象的特点是继承、多态和封装。而封装就要求将功能分散到不同的对象中去,这在软件设计中往往称为职责分配。实际上也就是说,让不同的类设计不同的方法。这样代码就分散到一个个的类中去了。这样做的好处是降低了代码的复杂程度,使类可重用。
但是人们也发现,在分散代码的同时,也增加了代码的重复性。什么意思呢?比如说,我们在两个类中,可能都需要在每个方法中做日志。按面向对象的设计方法,我们就必须在两个类的方法中都加入日志的内容。也许他们是完全相同的,但就是因为面向对象的设计让类与类之间无法联系,而不能将这些重复的代码统一起来。
也许有人会说,那好办啊,我们可以将这段代码写在一个独立的类独立的方法里,然后再在这两个类中调用。但是,这样一来,这两个类跟我们上面提到的独立的类就有耦合了,它的改变会影响这两个类。那么,有没有什么办法,能让我们在需要的时候,随意地加入代码呢?这种在运行时,动态地将代码切入到类的指定方法、指定位置上的编程思想就是AOP(面向切面的编程)。
一般而言,我们管切入到指 ...
文章分类模板
初始化项目分类及标签tags:
前端面试
前端架构管理
前端监控
前端性能优化
前端源码解析
前端项目管理
categories:
前端
后端
计算机基础