前言 在日常开发中，影响我们开发效率的因素很多，有时候不仅仅会影响开发效率，还会搞崩我们的心态。 为了提高工作效率，保持愉悦心情，腾出更多的时间来进行摸鱼大业，前辈们折腾出了很多有用的小技巧，我在这里记录一下自己常用的几个小技巧。 快速拉取 Github 项目 Github 可以说是我辈程序员打交道最广的平台之一了，甚至被称为“全球最大的tongxing交流平台”，但是限于国内的特殊性，想要从 Github 上拉取项目真是一件痛苦的事。 哪里有压迫，哪里就有反抗，前辈们也总结出了一套可以快速拉取 Github 项目的套路，这里需要借助国内的 Gitee。具体步骤是： 第一步：获取目标项目的 ...

前言 Electron 之所以能够日益风靡，是因为其简单易用且对各个操作平台具有良好的支持。 今天我就来分享一下怎么使用一套代码，快速打包生成各主流平台安装包的经验。 项目安装 首先，使用我前面介绍的提效小技巧，设置： NPM 源为淘宝镜像源； Electron 源为中国镜像网站中的 Electron 源地址。 然后依次执行以下指令： mkdir my-electron cd my-electron npm init -y npm install electron@14.2.6 -D npm install @electron/remote --save npm install elect...

前言 在日常开发中，影响我们开发效率的因素很多，有时候不仅仅会影响开发效率，还会搞崩我们的心态。 为了提高工作效率，保持愉悦心情，腾出更多的时间来进行摸鱼大业，前辈们折腾出了很多有用的小技巧，我在这里记录一下自己常用的几个小技巧。 NPM 设置淘宝镜像源 如果要进行 Node 包管理，那 NPM 就是绕不过的坎，必须把它摆弄明白了，才能用的舒心。 在设置前我们可以查询一下当前 NPM 源： npm get registry 一般返回的应该都是： https://registry.npmjs.org/，这是默认的。由于国内一言难尽的原因，有时候安装模块的时候，那速度真实堪比龟速，最后还不一定能...

前言 在初步学习了 TypeScript 的变量声明后，对它的静态类型检查功能简直是爱不释手，但同时也发现一个问题：在正常的开发中，一个变量的类型有时可能不仅仅只限于 number 或者 string 中的一种，有可能是两种类型或者更多，比如： // index.js let res; if(userInfo.age && userInfo.age > 12){ res = userInfo.age; }else{ res = userInfo.name; } 上面例子中的 res 类型可能是 number，也可能是 string。 到底该怎样限制 re...

前言 数据遍历是我们日常开发中经常用到的逻辑，除了最常见的 for、while、forEach 外，迭代器也提供了数据遍历的接口，了解迭代器有助于我们更好地进行数据处理。 Iterator Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念： 迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。 迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。 迭代过程 迭代的过程如下： 通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置 随后通过 next 方法进行向...

前言 认识了 TypeScript 中的基础类型，接下来当然是变量声明的相关学习了。 声明多维数组 假如有这么一个声明： let arr3: number[][][]; 想要知道 arr3 的具体类型，其分析步骤如下： 可以看到，类型拆解是从右向左的，对应到具体变量值上就是从外向内一层层拆解的。 这里只是举个例子，稍微有点经验的人一眼就能判断出 arr3 是一个三维数组。但是，授人以鱼不如授人以渔，这个分析方法却适用于绝大多数复杂数据类型分析。 属性重命名 在有了 ES6 的解构赋值之后，我们可以这么声明变量： let personInfo1 = { name: "编程三昧", ...

前言 TypeScript 包含的基础类型总结起来有： 布尔值 数字 字符串 数组 元组 枚举 任意值 空值 Null 和 undefined Never Object 今天，我们就来详细了解一下各个类型所代表的含义及表示方法。 布尔值 → boolean 它只有两个值——true 和 false。 let isNew: boolean = true; 数字 → number TypeScript 中的整形和浮点数类型都是 number，这点和 JavaScript 是一样的，比如：十进制、二进制、八进制和十六进制的类型都是 number。 let decAge: number = 2...

前言 最近接手了一份使用 uni-app 进行开发的工作，今天才有时间正式开始，在这里记录一下使用 HBuilderX 进行 uni-app 开发的调试环境搭建过程。 下载安装 HBuilderX 进入 HbuilderX 官网 选择你需要的版本进行下载安装，我这里选的是 App 开发版。 下载安装安卓模拟器 我使用的是模拟机调试，所以需要安装 Android 模拟器。这里我选择的是”网易 MuMu 模拟器”，其下载地址在这里，安装好之后启动模拟器，界面如下图： 使用模拟器运行项目代码 使用上面安装好的 HbuilderX 打开我们的项目代码，然后按照下图所示步骤选择 Android 模拟...

前言 我们已经知道了 TypeScript 是什么，以及为什么要用 TypeScript，今天，我们就来学习怎么初步使用它。 TypeScript 的使用流程 原始的 TypeScript 文件以 .ts 结尾，它不能被直接使用到页面中，需要经过编译，转换成 JavaScript （.js）文件才行。 TypeScript 的使用流程基本上如下图所示： 编译 TypeScript 文件的这一步，我们使用的是前面安装的全局 TypeScript 模块，编译指令为： tsc index.ts 通过这一步的编译之后，会在 index.ts 同级目录下生成一份 index.js 文件，我们最终在...

前言 相信我们很多同学都经常会使用到 Node（节点）和 Element（节点）的概念，那么这两者到底有何区别，不知道有多少人能够答得上来这个问题？ 今天，我在这里尝试着解释一下 Node 和 Element 的区别。 准备工作 在正式开始介绍 Node 和 Element 区别之前，我们先准备以下代码： <div id="parent"> This is parent content. <div id="child1">This is child1.</div> <div id="child2">This is chil...

前言 在使用 JS 操作 DOM 节点的时候，我们常常会用到克隆（或导入）节点的操作，那到底有哪些方法可以实现节点克隆（或导入）的效果呢？ 今天，我们就来总结一下能实现节点克隆（或导入）效果的方法。 node.cloneNode() 提到克隆节点，我们最先能想到的肯定是 node.cloneNode() 方法。 语法 其语法如下： let cloneNode = targetNode.cloneNode(deep); cloneNode 最终克隆生成的节点副本。 targetNode 将要被克隆的目标节点。 deep 可选参数，表示是否需要进行深度克隆，即是否需要克隆 targe...

前言 在上一节中，使用 Templates 实现了 MyCard 的基本布局，并且在文章结尾我也说过，因为不可复用，其实用性基本为零。 今天我们通过使用具名 Slots 在 Templates 中占位，然后再在自定义元素中给 Slots 传值，提高自定义元素的灵活性。 传值分析 因为每一个人的各项信息都不尽相同，而对应到 Templates 中，就是所有 className 为 .info-content 的 div 中的内容都是可变的，所有可变值总结一下就是： userName gender nation birthYear birthMonth birthDay address card...

前言 前面针对 Web Components 学习了一些基本的理论知识，我们了解到的概念有： Custom Elements Shadow DOM Templates Slots 以及和这些概念相关的子知识点。 理论知识基本上够用了，从现在开始我们需要将理论运用到实践中，让理论为实践服务。今天，我们就使用 Web Components 的相关知识来实现 MyCard 的制作，原型呢就以我们人人都有的身份证做参照吧。 最终实现的基本布局效果如下： 使用 Templates 布局 这里我们使用 HTML 模板将布局先构建出来，代码如下： <template id="card_layou...

前言 在上一节我们了解了如何给自定义组件设置样式，当时是将自定义标签的样式设置在主 DOM 中的： <style> my-card { display: block; margin: 20px; width: 200px; height: 200px; border: 3px solid #000; } </style> <my-card></my-card> 虽然实现了样式设置的目的，但是却存在一个弊端：自定义标签的样式被写死了，不够灵活。 如果能...