wjnba的博客

什么是TypeScriptTypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript，主要提供了类型系统和对 ES6 的支持。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。 TypeScript的特点1、编译型语言直接编写的内容无法执行，需要通过编译工具编译成JavaScript。 2、强类型的语言JavaScript是动态类型的编程语言，所谓的动态类型，就是在编译时候时候才知道其数据类型是Number 还是String，它是弱类型语言；而TypeScript是静态类型的编程语言，所谓的静态类型就是编写的时候就知道其数据类型是什么，它是强类型语言。例如： 1let str:string = 'hello word' str这个变量从头到尾只能是string类型，如果将其他类型的值赋值给他就会抛出异常。 3、真正面向对象的语言面向对象：想进行执行某个事件，就去找事件对应的对象，把事情落实到对象身上 在程序中一切皆是对象， ...

介绍wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。 官网：www.wangeditor.com 文档：www.wangeditor.com/v4 源码：github.com/wangeditor-team/wangEditor 浏览器兼容性兼容常见的 PC 浏览器：Chrome，Firefox，Safari，Edge，QQ 浏览器，IE11。 不支持移动端。 封装wangEditor组件一、引入wangeditor1npm i wangeditor@4.7.15 --save 二、使用简单使用在components文件夹下新建文件夹WangEditor，再在WangEditor文件夹下新建config.js文件，用来存放默认配置，写入以下代码： 123456789101112131415161718192021222324252627282930313233343536373839404142const defaultConfig = { menus: [ 'head', // 标题 'bo ...

前言很多情况下，为了适应工作、学习我们需要在一个电脑里使用不同版本的node，在切换使用频繁的情况下，就会陷入卸载 ↔ 安装的怪圈，这时候你需要一个趁手的版本管理工具。 安装nvm 首先需要卸载已安装的node.js，卸载完成后，请检查环境变量，如果还有node.js，请去掉，保证系统已经无任何node.js残留。 下载地址： https://github.com/coreybutler/nvm-windows/releases nvm-setup.zip：安装版（推荐），傻瓜式安装 安装时有两个路径选择（尽量不要出现中文）： nvm-noinstall.zip：绿色免安装，但需要环境变量配置 nvm 基本命令使用 命令行工具输入命令即可 版本查看，安装完成后，执行该命令，查看安装版本123nvm v//或nvm version 查看所有可安装 Node 版本号1nvm list available node 安装12345678// 安装最新版本nvm install node//安装指定版本（推荐）nvm install 14.8.0//安装指定版本，指定操作系统 ...

图片懒加载懒加载是一种网页性能优化的方式，它能极大的提升用户体验。图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以进入页面的时候，只请求可视区域的图片资源。 总结出来就是： 减少资源的加载，页面启动只加载首屏的图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。 防止并发加载的资源过多而阻塞 js 的加载，影响整个网站的启动，影响用户体验 浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量。 原理 图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 src 里面，等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载。 通过监听 scroll 事件实现懒加载1234567891011121314151617function lazyload() { let viewHeight = document.body.clientHeight //获取可视区高度 ...

双层循环使用双层嵌套循环是最原始的方法： 1234567891011121314151617181920var array = ['a','b','a'];function unique(array) { // res用来存储结果 var res = []; for (var i = 0, arrayLen = array.length; i < arrayLen; i++) { for (var j = 0, resLen = res.length; j < resLen; j++ ) { if (array[i] === res[j]) { break; } } // 如果array[i]是唯一的，那么执行完循环，j等于resLen if (j === resLen) { ...

概念： 防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为 设置一个定时器，约定XX毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器。函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果；函数节流的情况下，函数将每个 n 秒执行一次。 一、防抖在src目录下创建一个名为utils的文件夹，在文件夹下新建一个名为util.js的文件 12345678910111213141516171819202122232425/** * 防抖：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数 * @param func 要执行的回调函数 * @param wait 延时的时间 * @param immediate 是否立即执行 */let timeout = null;export function debounce(func, wait = 500, immediate = false) { // 清除定时器 if (timeout !== nul ...

一、使用地图前需要到高德地图官网申请key，申请时注意根据自己需求选择服务高德地图有自己的选址组件，https://m.amap.com/picker/?key=（您的Key）, 但它有几个缺点，一是无法改变样式，二是选择地址后没有反馈状态，用户不知道自己有没有选择成功。于是决定使用高德地图的AMap.Geolocation（定位），AMap.PlaceSearch（地点搜索）插件，自己封装一个满足项目需求的选址组件出来。 二、实现效果如下:地址选择 地址搜索 三、封装选址组件1、先在index.html引入高德js在index.html页面加入<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key='你的key值'"></script> 2.创建文件名为CustomChooseAddress.vue的组件，写入以下代码12345678910111213141516171819202122232425 ...

在说到postcss-px-to-viewport插件之前，先来了解几个概念 什么是视口？在桌面端，视口指的是在pc端浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，pc端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 1.布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。 当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这样的网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。 js获取布局视口： 1document.documentElement.clientW ...

JavaScript 数据类型基本类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol、以及ES10新增的BigInt(任意精度整数)七类。 引用数据类型：对象(Object)、数组(Array)、函数(Function)。 注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。 数据存放JavaScript的所有变量（包括函数）在整个处理过程中都是存放在内存中，所以要对一个变量进行处理。首先得为变量分配内存。 JavaScript内存分配和其他语言一样，是根据变量的数据类型来分配内存的，而JavaScript变量的数据类型由所赋的值的类型所决定的。在JavaScript中，基本数据类型变量分配在栈内存中，其中存放了变量的值，对其是按值访问的；而引用数据类型的变量则同时会分配栈内存和堆内存，其中栈内存存放的是地址。堆内存存放的是引用的值，栈内存存放的地址指向堆内存存放的值。对该变量的访问是按引用来访问的，即首先读取到栈内存存放的地址，然后按地址找到堆内存读取其中的值。如下图 ...

Airbnb JavaScript 代码规范，一种写JavaScript更合理的代码风格。原文地址：https://github.com/BingKui/javascript-zh 目录 类型 引用 对象 数组 解构 字符 方法 箭头函数 类和构造器 模块 迭代器和发生器 属性 变量 提升 比较运算符和等号 块 控制语句 注释 空白 逗号 分号 类型转换和强制类型转换 命名规范 存取器 事件 jQuery ECMAScript 5 兼容性 ECMAScript 6+ (ES 2015+) 风格 标准库 测试 性能 资源 JavaScript风格指南的指南 许可证 修正案 类型 </a> 1.1 原始值: 当你访问一个原始类型的时候，你可以直接使用它的值。 string number boolean null undefined symbol 123456const foo = 1;let bar = foo;bar = 9;console.log(foo, bar); // => 1, 9 标识符不能完全被支持，因此在针对不支持的浏览器或者环境时不应该使 ...