wjnba的博客

页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。 常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。 一、空间居中布局空间居中布局指的是，不管容器的大小，项目总是占据中心点。 CSS 代码如下。 1234.container { display: grid; place-items: center;} 上面代码需要写在容器上，指定为 Grid 布局。核心代码是place-items属性那一行，它是一个简写形式。 1place-items: <align-items> <justify-items>; align-items属性控制垂直位置，justify-items属性控制水平位置。这两个属性的值一致时，就可以合并写成一个值。所以，place-items: center;等同于place-items: center center;。 同理，左上角布局可以写成下面这样。 1place-items: start; 右下角布局。 1place-items ...

在我们更换电脑、或者重新安装谷歌浏览器的情况下，如果书签没有备份，原来收藏的网页就找不到了，我们需要一种手段来保存、同步书签，这时我们可以通过浏览器扩展程序配合码云来实现这个功能。 准备一、在码云上创建一个仓库，用来保存书签。 二、在仓库里新建一个名为bookmarks.html的空文件。 必须要创建bookmarks.html文件，不然推送到仓库的时候会失败。 三、创建私人令牌，用来推送书签文件到仓库。 四、下载使用扩展程序。 下载扩展程序 下载扩展程序后解压，导入到谷歌浏览器扩展程序里。 点击程序，向下依次填入私人令牌、用户名、仓库名、文件路径（bookmarks.html）、分支（master）,如下图所示： 填完后，我们就可以通过点击Upload按钮把书签同步到码云上，当更换电脑、重新安装浏览器后可通过点击Download按钮同步书签到本地了。

patch-package的使用在vue实际项目中,有时候会涉及到修改node_modules里面的代码，但是如果直接在本地修改node_modules里面的代码，会带来很大的麻烦，比如更换电脑拉取项目后，执行npm install安装项目依赖，会恢复到没改之前的代码，这时我们可以使用patch-package这个库来解决这类问题。 1、安装patch-package1npm i patch-package --save-dev 2、修改完依赖后，运行patch-package创建patch文件12npx patch-package 依赖名称例子： npx patch-package wangeditor 3、修改package.json的内容，在scripts中加入"postinstall": "patch-package"，这个是为了npm install的时候自动为依赖包打上我们改过的依赖1234"scripts": {　　...　　"postinstall": "patch- ...

Front-matterFront-matter 是 markdown 文件最上方以 —- 分隔的区域，用于指定个别档案的变数。 Page Front-matter 用于页面配置Post Front-matter 用于文章页配置 如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里 Page Front-matter123456789101112131415---title:date:updated:type:comments:description:keywords:top_img:mathjax:katex:aside:aplayer:highlight_shrink:--- 写法 解释 title 【必需】页面标题 date 【必需】页面创建日期 type 【必需】标籤、分类和友情链接三个页面需要配置 updated 【可选】页面更新日期 description 【可选】页面描述 keywords 【可选】页面关键字 comments 【可选】显示页面评论模块(默认 true) top_img 【可选】页面顶部 ...

键盘事件包含onkeypress onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于 键盘上的单键操作。onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于快捷键的操作。onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于快捷键的操作。 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D 68 M 77 V 86 4 52 E 69 N 78 W 87 5 53 F 70 O 79 X 88 6 54 G 71 P 80 Y 89 7 55 H 72 Q 81 Z 90 8 56 I 73 R 82 0 48 9 57 数字键盘上的键的键码值(keyCode) 按键 键码 按键 键码 0 96 8 104 1 97 9 ...

TypeSprict — 泛型TS — 泛型什么是泛型 1.泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。 2.我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。 在像c#和java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。 ts函数定义1234// 首先看一下ts函数的定义function getData(value: string): string { // 传入值和返回值都限制了string类型 return 'str'} 当需要同时支持多个数类型的时候 这时怎么解决呢？ 用any类型 12345function getData (value: any):any { return value}// 用了any就代表着放弃了类型的检查，一般我 ...

TypeSprict — 函数JS — 函数的两种表现形式 我们熟知js有两种函数表现形式’函数声明’和’函数表达式’ 函数声明 1234// 函数声明（Function Declaration）function sum(x, y) { return x + y;} 函数的表达式1234// 函数表达式（Function Expression）let mySum = function (x, y) { return x + y;}; es6 箭头函数123const esExample = (name)=>{ console.log(name)} TS — 定义一个函数 将上面的三种写法依次推导成’ts‘的写法 TS — 函数声明 1.TS以函数的声明的形式，需要定义函数参数中的类型，以及返回类型。 ‘function 函数名(参数:类型):函数返回的类型{}’2.如果函数没有返回类型就是 void 123456789// 返回number类型的值function add(arg1:number, ...

TypeSprict — 类 JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。 TS — 类的概念 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法 对象（Object）：类的实例，通过 new 生成 面向对象（OOP）的三大特性：封装、继承、多态 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性。 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。 存取器（getter & setter）：用以改变属性的读取和赋值行为 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象 ...

介绍接口：是一种类型，是一种规范，是一种规则，是一个能力，是一种约束。 TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（interface）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述) 可选属性接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 123456interface Idata { name: string; age: number; email?: string; [key:sring]: any; // 索引签名 定义其他任意属性} 带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。 可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。 12345const data: Idata = { name: 'zhangsan', age: 23, // email: '111@qq.com' // 可以没有} 只读属性一些 ...

类型声明 类型声明是TS非常重要的一个特点。 通过类型声明可以指定TS中变量（参数、形参）的类型。 指定类型后，当为变量赋值时，TS编译器会自动检查是否复核类型声明，复核则赋值，否则报错。 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值。 语法： 1234567let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...} 基本类型1、字符串: string1let str:string = 'hello word' 2、布尔值: boolean1let isShow:boolean = true 3、数字: number1let age: number = 23; 4、数组: array1let list: number[] = [1, 2, 3]; 5、元组: tuple元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同, 对应位置的类型需要相同。 12345let arr: [string, number];arr = [&q ...