上港的博客

仓库地址 mini-vite文章链接

先说一下我自己的观点，架构其实并没有那么的高大上，前端初学者都可以尝试去理解这个概念，并不是只有架构师才需要涉及。从代码设计，到应用设计再到系统设计，其实处处都是架构。从代码实现和具体业务中抽象出一幅有着各种各样关联性的架构图。 架构思维架构思维的建立实际开发经验到一两年之后，应对大部分的业务开发应该问题不大了，这个时候可能就会自然而然的思考，各种组件封装，函数封装等，让自己的代码尽量不那么的’shit’，这个时候其实就开始建立起了代码设计层级的思考了 代码级设计从各种各样的名词：高内聚、低耦合、健壮性、可读性、复用性、松散性、可维护、可扩展等 从各种各样的设计模式：单例、策略、中介、工厂、发布订阅、观察者等 从各种各样的设计原则：单一原则、最小知识原则、开放封闭原则等 代码层面上的设计除了一系列技术上的各式各样的原则之外，还应包括各种各样的规范，比如变量命名、目录结构、代码提交等。 在cv久了之后，也会思考模块化设计和组件化开发，结合业务去思考模块化开发的临界条件，即什么场景下需要做封装，什么场景下需要解耦，哪些代码可以做封装，这里到底是全局统一封装还是组件内封装。会去考虑代码 ...

第一层回答 按照源码实现来回答 proxy、reflect 创建proxy代理对象，监听用户的get、set操作，再通过reflect反射给代理对象 当get时会track（收集依赖），当set时会trigger（触发依赖） 12345678910111213141516export function reactive(raw) { return new Proxy(raw, { get(target, key) { const res = Reflect.get(get, key) // 执行收集依赖操作 track(target, key); return res }, set(target, key, value) { const res = Reflect.set(target, key, value) // 执行触发依赖操作 ...

是的,我觉得代码就应该写得跟诗一样优雅,代码不是给自己看的,是给别人看的.虽然我的日常是搬砖,但是我也希望能把砖码得整整齐齐的. 打造自己的代码风格什么叫自己的代码风格? 在我刚刚开始学习前端的时候,我写出的代码可能是这样的 12345678910111213141516171819202122232425// 不注意等号前后缩进,单双引号随意使用const dog= { name: 'black', age: "9", gender: 0,};// 随意的函数命名const fn= ()=>{ // if else 语句的大括号前后不加空格 if (dog.age > 8){ console.log("old");} //这里的大括号也不会换行 dog.name="white"; // 等号前后不加空格 function say() { // 使用很多的if else语句 if (dog.name ...

说一下背景，公司为创业型公司，项目组才创建，目前只有我一个前端，我个人的招聘需求是不要求技术非常厉害，只要喜欢钻研学、喜欢思考、平时能多沟通，最重要的是写代码的时候能吹牛逼就行。如果能比我强，带带我，那肯定更好。 想看面经的我还有一篇文章深圳前端一年半，投了两个月简历，第一场面试 这次的简历是我老大筛出来的，原本是他去面的，但是他开会去了，所以我就临时去面了，此次面试者是一位三年工作经验的前端，主要技术栈是vue3、vite 平常有没有自己造轮子或者看一些开源的项目面试者：有看github，看vue相关的开源 我的想法：面试者的简历没有写关于这些的内容，我问这个问题的原因，主要想看面试者是否有关注一些开源项目，会不会去造轮子，我平常也会看github或者一些文章之类的，希望能从这个问题延伸开，开始面试。 接着问，能说一下具体的是哪方面的开源吗，组件库还是一个工具库还是一个框架，或者文章、博客都行，简单介绍下 面试者：不记得了。。。 我的想法：有些开发者没有逛开源的习惯，这个不一定能考察到面试者是否喜欢钻研思考，直接开始下一个问题吧 从0到1搭建一个项目你会考虑哪些问题面试者：从 ...

在传统的面向对象编程中，给对象添加功能常常采用继承的方式，但是继承的方式并不灵活。在实现一些功能时，有可能会创建出大量子类 装饰器在JavaScript中可以很方便的给某个对象添加属性或者方法，但是很难在不改动源代码的基础上给函数添加新的功能。 12345678910// 假如当前我们的代码是这样的 const a = () => { console.log(1); }; // 我想添加一个打印2的功能, 这个时候可以直接修改源代码 const a = () => { console.log(1); console.log(2); }; 但是在实际开发中，我们往往接手的是上一个同事留下的代码，鬼知道他在这一段代码里面做了什么。。。。。这个时候可能就要求我们在不改变源代码的基础上给函数增加新的功能。那么我们就可以用到装饰器了 装饰器模式在 JavaScript 中，自身并没有原生支持装饰器模式。装饰器模式是一种结构性设计模式，它允许你通过将对象包装在一个或多个装饰器中，以动态地添加或修改对象的行为。装饰器（D ...

1. 函数的call() / apply() / bind()12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667/* 自定义函数对象的call方法*/function call (fn, obj, ...args) { // 如果传入的是null/undefined, this指定为window if (obj===null || obj===undefined) { // obj = window return fn(...args) } // 给obj添加一个方法: 属性名任意, 属性值必须当前调用call的函数对象 obj.tempFn = fn // 通过obj调用这个方法 const result = obj.tempFn(...args) // 删除新添加的方法 delete obj.tempFn ...

最近在学代码优化的时候，看到了AOP(面向切面编程)，听着好像挺厉害的，就把他记录了下来 什么是AOP面向对象的特点是继承、多态和封装。而封装就要求将功能分散到不同的对象中去，这在软件设计中往往称为职责分配。实际上也就是说，让不同的类设计不同的方法。这样代码就分散到一个个的类中去了。这样做的好处是降低了代码的复杂程度，使类可重用。 但是人们也发现，在分散代码的同时，也增加了代码的重复性。什么意思呢？比如说，我们在两个类中，可能都需要在每个方法中做日志。按面向对象的设计方法，我们就必须在两个类的方法中都加入日志的内容。也许他们是完全相同的，但就是因为面向对象的设计让类与类之间无法联系，而不能将这些重复的代码统一起来。 也许有人会说，那好办啊，我们可以将这段代码写在一个独立的类独立的方法里，然后再在这两个类中调用。但是，这样一来，这两个类跟我们上面提到的独立的类就有耦合了，它的改变会影响这两个类。那么，有没有什么办法，能让我们在需要的时候，随意地加入代码呢？这种在运行时，动态地将代码切入到类的指定方法、指定位置上的编程思想就是AOP(面向切面的编程)。 一般而言，我们管切入到指 ...

用户输入当用户开始在导航栏上面输入内容的时候。UI线程要进行一系列的解析来判定是将用户输入发送给搜索引擎还是直接请求你输入的站点资源。 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。 如果判断输入内容符合 URL 规则，比如输入的是 time.geekbang.org，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。 当用户按下回车键的时候，UI线程会通知网络进程初始化一个网络请求来获取站点的内容。 这时候tab上的icon会展示一个提示资源正在加载中的旋转圈圈，而且网络进程会进行一系列诸如DNS寻址以及为请求建立TLS连接的操作。 tips: 这时如果网络进程收到服务器的HTTP 301重定向响应，它就会告知UI线程进行重定向然后它会再次发起一个新的网络请求。 当用户输入关键字并键入回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面 ...

背景 base深圳，一年半经验，找的初级前端岗位，1-3年，投简历两个月只有两个面试，这是第一个面试 一面你对html元素是怎么分类的？一开始我愣了一下？搞这么简单的问题？？？后面又问面试官你是指的id选择器这些吗，，还是display：block,inline-block这些？不管了，反正我全都讲了一遍，说了下这些八股文基础，感觉有点简单，说得有点少。另外又展开说了HTML DOM节点那些内容 image是行内元素为什么有宽高？ 这个问题我倒是没有了解过啊，想了下说，会不会和input或者什么video之类的差不多，对于这类元素，浏览器有其他的解析方式（万能答法：问什么都能答浏览器解析） 面试官让我了解下可替换元素，，img属于可替换元素 你用过哪些http状态码？因为没有刻意的去背这些玩意，所以只是大概做了下分类。就回答了常见的状态码，比如101我就在websocket上见过，200或者201就是请求成功，3开头大概就是重定向的，又展开说了下永久重定向和临时重定向的区别，4开头的大概就是前端问题，比如401就是没有权限没有token，404请求url错误，5开头的大概就是后端问题 ...