notes
notes copied to clipboard
baiyuze
走在中途还是走在终途，目的所在，方向所在
--- theme: smartblue --- ## 背景 自从换了新部门，该部门是以组态产品为基座，以各种不同组件为物料，物料又分为页面组件与原子组件，而我们部门主要针对项目上的定制页面组件，来满足客户需求。 ## 问题 > 有什么方案来解决各个项目之间组件共用问题？ > > 如何利用技术来解决业务问题 ## 一、 项目组件标准化的界定 对于项目来说，不同场景下，所对应的组件千差万别，很多组件(一个功能页面代表一个组件)也千差万别，为了更好的维护标准化组件和后续迭代，采用新的方案去维护标准化组件，以便在未来迭代支持中，更好的发展。 ### 组件标准化分为两个阶段： #### 1、定制 #### 2、 标准化 新项目需求进来后，针对所需要的功能进行开发，此为定制化，当该功能组件二次开发时，转为标准化组件进行迭代。 ## 二、 标准化组件的方案 标准化组件有两个疑问：...
--- theme: fancy --- ## 打破思维桎梏 ### 一、写在之前 > 本篇文章是自工作到现在的一个思考总结，主要目的是为了阐述个人的观点以及如何保持竞争力，也会从多方面，多维度去展开。本文叙述的重点将从业务、技术（架构）和管理三方面来阐述，当然也有可能说的并不准确，仅代表个人观点。 > > 欢迎大家进行讨论和指出文章中不足之处，大家共同学习进步。 ### 二、调整思维模式  自2022年年初至今，整个行业形势严峻，各企业业务收缩，裁员优化，市场人才饱和，求职困难，竞争激烈。在此背景下，公司对员工能力要求更高，“前端已死”论调加剧了前端等技术人员的焦虑，今年的求职旺季并不热闹，许多人选择稳守岗位，幸存者庆幸自己未成为被裁员者。 **站在公司角度，哪些能力的员工面临的裁员风险最小？** 我认为主要分为**技术**、**业务**和**管理**三方面。 如果团队从事有价值或具有广阔市场前景的业务，拥有上述三个条件中的任何一个就足够。 从个人角度看，技术、业务和管理三者相辅相成，至少在初期阶段，技术和业务是密切相关的。 有人可能认为，作为技术人员，只需编写优秀的代码，不必关心业务。 尽管如此，在开发过程中仅满足需求而不关注业务可能并非最佳策略。 在许多情况下，后端开发人员比前端开发人员更深入地理解业务。 他们需要充分了解业务才能进行数据库和架构设计，满足现有和未来功能扩展需求。而前端开发人员似乎只需完成产品需求文档，无需了解整个业务逻辑。 然而，这样做真的好吗？ 事实上，后端开发人员更有可能担任部门或项目主管。 这可能与前端技术的兴起时间较晚有关，但也可能是因为后端开发人员对业务理解更深刻。 对公司来说，始终关心的不是开发团队的技术实力，而是如何满足市场需求，技术的深度都是附加的。 技术部门是公司的固定成本，投入多少取决于产品带来的利润以及保证产品稳定性和用户体验的需求。...
--- theme: fancy --- ## 个人总结与思考 ### 一、写在之前 >本篇文章是自工作到现在的一个思考总结，主要目的是为了阐述个人的观点以及如何保持竞争力，也会从多方面，多维度去展开。本文叙述的重点将从业务、技术（架构）和管理三方面来阐述，当然也有可能说的并不准确，仅代表个人观点。 欢迎大家进行讨论和指出文章中不足之处，大家共同学习进步。 ### 二、调整思维模式  自2022年年初至今，整个行业形势严峻，各企业业务收缩，裁员优化，市场人才饱和，求职困难，竞争激烈。在此背景下，公司对员工能力要求更高，“前端已死”论调加剧了前端等技术人员的焦虑，今年的求职旺季并不热闹，许多人选择稳守岗位，幸存者庆幸自己未成为被裁员者。 **站在公司角度，哪些能力的员工面临的裁员风险最小？** 我认为主要分为**技术**、**业务**和**管理**三方面。 如果团队从事有价值或具有广阔市场前景的业务，拥有上述三个条件中的任何一个就足够。 从个人角度看，技术、业务和管理三者相辅相成，至少在初期阶段，技术和业务是密切相关的。 有人可能认为，作为技术人员，只需编写优秀的代码，不必关心业务。 尽管如此，在开发过程中仅满足需求而不关注业务可能并非最佳策略。 在许多情况下，后端开发人员比前端开发人员更深入地理解业务。 他们需要充分了解业务才能进行数据库和架构设计，满足现有和未来功能扩展需求。而前端开发人员似乎只需完成产品需求文档，无需了解整个业务逻辑。 然而，这样做真的好吗？ 事实上，后端开发人员更有可能担任部门或项目主管。 这可能与前端技术的兴起时间较晚有关，但也可能是因为后端开发人员对业务理解更深刻。 对公司来说，始终关心的不是开发团队的技术实力，而是如何满足市场需求，技术的深度都是附加的。 技术部门是公司的固定成本，投入多少取决于产品带来的利润以及保证产品稳定性和用户体验的需求。 我们也很容易沉迷于技术，探究深层原理，提高编程能力，这会提升我们在团队中的地位，让我们成为技术大牛，承担更复杂的功能开发。 但换个角度思考，作为技术大牛，承担更复杂任务的同时，我们是否也成为了一种资源？既然如此，为何不成为分配资源的角色呢？ ###...
## 前言 `Event Loop`即事件循环，是指浏览器或`Node`的一种解决`javaScript`单线程运行时不会阻塞的一种机制，也就是我们经常使用**异步**的原理。 ## 为啥要弄懂Event Loop * 是要增加自己技术的深度，也就是懂得`JavaScript`的运行机制。 * 现在在前端领域各种技术层出不穷，掌握底层原理，可以让自己以不变，应万变。 * 应对各大互联网公司的面试，懂其原理，题目任其发挥。 ## 堆，栈、队列  ### 堆（Heap） **堆**是一种数据结构，是利用完全二叉树维护的一组数据，**堆**分为两种，一种为最大**堆**，一种为**最小堆**，将根节点**最大**的**堆**叫做**最大堆**或**大根堆**，根节点**最小**的**堆**叫做**最小堆**或**小根堆**。 **堆**是**线性数据结构**，相当于**一维数组**，有唯一后继。 如最大堆  ### 栈（Stack） **栈**在计算机科学中是限定仅在**表尾**进行**插入**或**删除**操作的线性表。 **栈**是一种数据结构，它按照**后进先出**的原则存储数据，**先进入**的数据被压入**栈底**，**最后的数据**在**栈顶**，需要读数据的时候从**栈顶**开始**弹出数据**。 **栈**是只能在**某一端插入**和**删除**的**特殊线性表**。  ### 队列（Queue）...
## 前言 自前端框架（`React`,`Vue`,`Angelar`）出现以来，每个框架携带不同理念，分为三大阵营，以前使用`JQuery`的时代已经成为过去，以前每个页面就是一个`HTML`，引入相对应的`JS`、`CSS`，同时在`HTML`中书写`DOM`。正因为是这样，每次用户访问进来，由于`HTML`中有`DOM`的存在，给用户的感觉响应其实并不是很慢。 但是自从使用了框架之后，无论是多少个页面，就是单独一个单页面，即`SPA`。`HTML`中所有的`DOM`元素，必须在客户端下载完`js`之后，通过调用执行`React.render()`才能够进行渲染，所以就有了很多网站上，一进来很长时间的`loading`动画。 为了解决这一并不是很友好的问题，社区上提出了很多方案，例如`预渲染`、`SSR`、`同构`。 当然这篇文章主要讲述的是从零开始搭建一个**React服务器渲染同构**。  ## 选择方案 ### 方案一 使用社区精选框架Next.js `Next.js` 是一个轻量级的 `React` 服务端渲染应用框架。有兴趣的可以去[`Next.js`](http://nextjs.frontendx.cn/)官网学习下。 ### 方案二 同构 关于同构有两种方案： ### 通过babel转义node端代码和React代码后执行 ``` let app = express(); app.get('/todo', (req, res)...
## 前言 记得上一次系统的学习正则表达式，还是刚学前端的事，现在过去那么久了，现在有必要将正则给补一补，也许这一次会有不同的感悟。 ## 正则的速查表 | 字符 | 详细 | | :-----: | :--------------------------------------- | | \ | 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“`n`"匹配字符"`n`"。"`\n`"匹配一个换行符。串行"`\\`"匹配"`\`"而"`\(`"则匹配"`(`"。 | | ^ | 匹配输入字符串的开始位置。如果设置了`RegExp`对象的`Multiline`属性，`^`也匹配“`\n`”或“`\r`”之后的位置。 | | $ | 匹配输入字符串的结束位置。如果设置了`RegExp`对象的`Multiline`属性，`$`也匹配“`\n`”或“`\r`”之前的位置。 |...
## 前言 相信大家经常使用`Promise`，或者使用`Generator`、`asnyc/await`等异步解决方案，网上的`Promise`原理也遍地开花。 一直以来想抽出时间也写一写`Promise`实现，但是平常工作也是忙的不可开交，正好元旦放了3天假期，休息了2天半，抽出半天时间来看一看`Promise`。 ## 如何使用Promise ``` new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000) }).then((data) => { console.log(data); return new Promise((res) => { setTimeout(() => {...
 > 继续上篇《[浏览器地址栏里输入URL后的全过程](https://juejin.im/post/5c354b656fb9a049e553ce68)》 ## 前言 为什么要了解浏览器的渲染原理？了解浏览器的渲染原理有什么好处？我们做前端开发为什么非要了解浏览器的原理？直接把网页做出来，什么需求，直接一把梭，撸完收工不好吗。 但是经常会有人会问，什么是**重排**和**重绘**？ **重排**也叫**回流**（`Reflow`），**重绘**（`Repaint`），会影响到浏览器的性能，给用户的感觉就是网页访问慢，或者网页会卡顿，不流畅，从而使网页访问量下降。 所以，想要尽可能的避免**重排**和**重绘**，就需要了解浏览器的**渲染原理**。 ## 浏览器工作流程  上图我们可以看出，浏览器会解析三个模块： * `HTML`,`SVG`,`XHTML`，解析生成`DOM`树。 * `CSS`解析生成`CSS`规则树。 * `JavaScript`用来操作`DOM API`和`CSSOM API`，生成`DOM Tree`和`CSSOM API`。 解析完成后，浏览器会通过已经解析好的`DOM Tree` 和 `CSS`规则树来构造 `Rendering` `Tree`。 *...
## 什么是URL `URL`是**统一资源定位符**（Uniform Resource Locator），是资源标识最常见的形式。`URL`描述了一台特定服务器上某资源的特定位置。它们可以明确说明如何从一个精确、固定的位置获取资源。 `URL`说明了协议、服务器和本地资源。 而浏览器都是基于`HTTP`协议，而`HTTP`是个应用层的协议。`HTTP`无需操心网络通信的具体细节都交给了`TCP/IP`。 **`TCP`**: * 无差错的数据传输。 * 按序传输（数据总是按照发送的顺序到达）。 * 未分段的数据流（可以在任意时刻将数据发送出去）。 HTTP协议位于TCP的上层。HTTP使用TCP来传输其报文数据。  ## 解析URL 当用户输入一个完整的`URL`之后，浏览器就开始解析`URL`的构成，以便于查找资源地址，大多数URL的语法通用格式如下： ```http ://:@:/;?# ``` 基本上没有哪个`URL`包含了所有这些组件。`URL`最重要的3个部分是方案`scheme`，主机`host`和路径`path`。 如果`URL`中不包含`port`，浏览器会默认使用`80`端口进行访问。 ## DNS域名解析 ### 什么是DNS？ `DNS`( Domain...
这几天我一直在思索，关于`Koa`我可以分享什么？ 分享`Koa`中间件实现原理? 上一篇的《[从源码上理解express中间件](https://juejin.im/post/5c10b5176fb9a049af6d1e1e)》已经解释的比较完善了，`Koa`中间件实现也比较相似，只不过，是把中间件函数抽离出来为[`koa-compose`](https://github.com/koajs/compose/blob/master/index.js)，循环遍历的时候将函数外边套了`tryCatch`，里面加了`Promise.resolve(fn)`而已。 因此，这篇文章主要分享下Koa的数据劫持。 如： 以下访问器和 Request 别名等效。 ```javascript ctx.header ctx.headers ctx.method ctx.method= ctx.url ctx.url= ctx.originalUrl ctx.origin ctx.href ctx.path ctx.path= ctx.query ctx.query= ctx.querystring ctx.querystring= ctx.host ctx.hostname ctx.fresh ctx.stale ctx.socket ctx.protocol...