张坤的博客

介绍 Shell 脚本是一种用Shell脚本语言编写的程序，它可以在 UNIX 或类 UNIX 操作系统上运行。Shell 脚本通常用于自动化任务、管理系统和编写小型应用程序。Shell 脚本可以完成许多任务，例如文件操作、进程管理、网络管理、系统配置等。 Shell 脚本语言基于命令行界面，它使用 Shell 解释器（例如 Bash）解释 Shell 脚本语言。 Shell 脚本语言的语法非常简单，可以包含各种命令和操作，例如条件语句、循环语句、函数、变量和输入/输出操作等，易于学习和使用。 学习 shell 的价值 Linux 服务器的基本操作和管理。 前端 node.is 服务的进程管理、问题排查、资源监控等运维操作。 使用 shell 编写 TCE、SCM、Docker 脚本，完成服务编译和部署。 概念物理终端 => 软件终端 tty => 终端模拟器 => Shell 终端：获取用户输入，展示运算结果的硬件设备。 tty：teletypeWriter 的简称，和终端等价，早期指电报打印机，在 linux 中 ...

介绍Linux 是由内核(kernel)、 shell(命令解释器)、文件系统和应用程序等组成的操作系统。它提供了丰富的工具和命令行界面，使用户能够轻松地管理和控制计算机系统。 Linux 具有稳定性高、安全性强、灵活性好、可靠性高等优点，同时还支持多任务处理和多用户操作，可以满足各种不同需求的用户。 Linux 操作系统被广泛应用于服务器、超级计算机、移动设备和嵌入式设备等领域，并且也逐渐普及到个人电脑的市场。 学习价值 Linux 是现代化应用程序交付的首选平台，无论是部署在裸机、虚拟化还是容器化环境。 公司内部服务（TCE、FaaS、SCM）统一使用 Debian Linux 系统。 熟悉 Linux 基础指令，熟练运维前端常用服务（Nginx、Node.js）。 加深对操作系统概念和实现的理解，夯实基础知识。 Logo 企鹅是南极洲的标志性动物，根据国际公约，南极洲为全人类共同所有，不属于当今世界上的任何国家。 Linux 选择企鹅图案作标志，其含意也是表明：开源的 Linux 为全人类共同所有，任何公司无权将其私有。 计算机组成 控制器 运算器 存储器单元 输入单元 输 ...

介绍TypeScript VS JavaScript： TypeScript 带来了什么： 基础类型 boolean、number、string undefined、null any、unknown、void never 数组类型 [] 元组类型 tuple 函数类型 定义：TS 定义函数类型时要定义输入参数类型和输出类型 输入参数：参数支持可选参数和默认参数 输出参数：输出可以自动推断，没有返回值时，默认为 void 类型 函数重载：名称相同但参数不同，可以通过重载支持多种类型 interface 定义：接口是为了定义对象类型 特点： 可选属性：？ 只读属性：readonly 可以描述函数类型 可以描述自定义属性 总结：接口非常灵活 duck typing class 定义：写法和 JS 差不多，增加了一些定义 特点： 增加了 public、private、protected 修饰符 抽象类 只能被继承，不能被实例化 作为基类，抽象方法必须被子类实现 interface 约束类，使用 implements 关键字 高级类型 联合类型 | 交叉类型 & ...

介绍marked 是一个基于 JavaScript 的 Markdown 解析器和编译器。它可以将 Markdown 语法解析为 HTML，并且可以扩展 Markdown 的功能。Marked 可以在浏览器端和 Node.js 环境下运行。 使用 Marked 可以轻松地将 Markdown 文本转换为 HTML 文档，而无需手动编写 HTML 代码。它支持 Markdown 的所有基本语法，如标题、段落、列表、链接、图片等。此外，Marked 还支持一些扩展语法，如表格、代码块、代码高亮、删除线、粗体、斜体等。 npm 方式下面是 Vue3 的官网示例 - 一个简单的 markdown 编辑器。通过 ES Module 方式导入 marked 对象，然后通过 computed 计算属性根据左侧文本框内容将生成的 HTML 代码插入到右侧页面元素中，动态更新其内容，这里配合指令 v-html 将内容直接作为普通 HTML 插入。还使用了 lodash-es 模块的防抖函数 debounce，防止输入频率导致的性能问题。 123456789101112131415161718192021 ...

介绍 闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是在支持头等函数的编程语言中实现词法绑定的一种技术。 闭包在实现上是一个结构体，它存储了一个函数（通常是其入口地址）和一个关联的环境（相当于一个符号查找表）。环境里是若干对符号和值的对应关系，它既要包括约束变量（该函数内部绑定的符号），也要包括自由变量（在函数外部定义但在函数内被引用），有些函数也可能没有自由变量。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。 闭包跟函数最大的不同在于，当捕捉闭包的时候，它的自由变量会在捕捉时被确定，这样即便脱离了捕捉时的上下文，它也能照常运行。捕捉时对于值的处理可以是值拷贝，也可以是名称引用，这通常由语言设计者决定，也可能由用户自行指定（如C++）。 使用下面在全局上下文中，定义了一个 showName 函数。 123456789101112function showName() { const company = "Bytedance"; const dep = &quo ...

介绍在 CSS 中使用 border 属性创建三角形的原理：每个 border 都有一个宽度、一个样式和一个颜色，可以设置不同的 border 宽度和样式来创建各种形状。 生成三角形HTML 代码如下： 1<div class="test"></div> CSS 代码如下： 12345678.test { width: 50px; height: 50px; border-left: 50px solid lime; border-right: 50px solid blue; border-top: 50px solid red; border-bottom: 50px solid magenta;} div 应用了上面这个样式后，结果如下： 现在，如果我们现在只保留一个一个上边框，其余边框均为 transparent 透明（或与背景色同色），那么是不是就只显示一个上面红色的边框了，我们测试下，与上面的代码类似，只是修改下其余三个边框的颜色。 123456.test { width: 50px; ...

介绍实现如下图所示的排版效果，一段关于图片的信息浮在图片上。 HTML 结构如下： 1234<figure> <img src="../img/1.jpg" width="100%"> <figcaption>自然风景</figcaption></figure> 除了通过 translateY、相对定位、margin 负值定位、绝对定位和 Grid 布局实现上面效果以外，CSS container 属性也可以实现元素重叠这种效果。 container 属性与元素重叠 container-type CSS 属性将元素定义为查询容器。后代可以查询其大小、布局、样式和状态等方面。可以具有以下值： size：为块和内联轴上的维度查询建立查询容器。将布局、样式和大小包含应用于元素。 inline-size：为容器的内联轴上的维度查询建立查询容器。将布局、样式和内联大小包含应用于元素。 block-size：在容器的块轴上建立维度查询的查询容器。将布局、样式和块大小包含应用于元素。 styl ...

介绍跨端容器（Cross-platform container）是一种软件技术，它可以将应用程序在不同的操作系统和/或硬件平台上运行，而无需修改应用程序代码。跨端容器通常提供了一层抽象，使得应用程序可以在不同的平台上运行，而无需了解底层平台的细节。 跨端容器通常使用虚拟化技术来实现平台无关性。例如，Java 虚拟机（JVM）是一种跨平台容器，它可以在不同的操作系统上运行 Java 应用程序。类似地，Docker 是一种跨平台容器，它可以将应用程序和其依赖项打包到容器中，以保证在不同的环境中具有一致的行为。 在移动应用开发中，跨平台容器也被称为跨平台开发框架或混合开发框架。常见的跨端容器包括 React Native、Flutter、Ionic 等。这些框架可以让开发者使用常见的 Web 技术（如 HTML、CSS 和 JavaScript）来构建原生应用程序，并在多个平台上运行，包括 iOS、Android 和 Web 等。 为什么需要跨端 开发成本、效率。 一致性体验。 前端开发生态。 Webview Webview，即网页视图，用于加载网页 Url,并展示其内容的控件 ...

浏览器架构浏览器架构演进： 单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等。 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程。 面向服务架构：将原来的U儿、数据库、文件、设备、网络等，作为一个独立的基础服务。 浏览器进程浏览器是一个复杂的软件，它通常会将不同的任务分配给多个进程来提高性能和安全性。以下是常见的浏览器进程： 渲染进程内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等。在浏览器中，渲染进程通常使用 HTML、CSS 和 JavaScript 来解析和渲染网页。渲染进程会将 HTML、CSS 和 JavaScript 文件解析成 DOM(文档对象模型)、CSSOM(CSS 对象模型) 和 JavaScript 对象，然后使用这些对象来渲染网页。 JS 引擎和渲染引擎通信 解析执行 JS。 XML 解析生成渲染树，显示在屏幕。 桥接方式通信。 渲染进程的多线程工作流程 网络线程负责加载网页资源。 JS 引擎解析 JS 脚本并且执行。 JS 解析引擎空闲时，渲染线程立即工作。 用户交互、定时器操 ...

介绍JavaScript 是一种支持多种编程范式的语言，可以使用以下几种编程范式： 面向对象编程（OOP）：JavaScript 中的对象是一等公民，可以使用构造函数和原型继承来创建对象和类。也可以使用 ES6 中的 class 关键字来定义类。JavaScript 中的面向对象编程还可以使用对象字面量和闭包等特性来实现。 函数式编程（FP）：JavaScript 中的函数是一等公民，可以作为参数传递给其他函数或作为返回值返回。可以使用函数式编程的特性来编写简洁、可复用、可测试的代码，例如高阶函数、纯函数、不可变性等。 响应式编程（RP）：JavaScript 中的事件和回调机制可以用于实现响应式编程。可以使用 RxJS 等库来实现响应式编程的特性，例如流、观察者模式、数据流转换等。 命令式编程（Imperative）：命令式编程是一种将程序看作一系列命令的编程范式。JavaScript 中的语句和控制结构可以用于实现命令式编程。 声明式编程（Declarative）：声明式编程是一种将程序看作一组声明的编程范式。JavaScript 中的模板语言和函数式编程特性可以用于实现声明式编 ...