JavaScript
文章平均质量分 78
WhiteLierTo
写文章去记录知识
展开
-
手牵手系列之TypeScript基础类型
布尔类型let bool:boolean = false// 或者let bool:booleanbool = true数值类型let num:number = 123// 二进制num = 0b1111011// 八进制num = 0o173// 十六进制num = 0x7b字符串类型let str:stringstr = 'abc'str = `数值是${num}`数组类型// 只能是number类型的数组// 写法一let arr:n..原创 2022-01-22 23:51:07 · 571 阅读 · 0 评论 -
手牵手系列之TypeScript开发环境搭建
新建项目初始化npm init安装全局依赖npm install typescript tslint -g执行命令初始化,项目根目录生成tsconfig.json文件tsc --init引入webpack(版本4.0)npm install webpack webpack-cli webpack-dev-server -D根目录新建build文件夹,以及文件下webpack.config.js文件,用于webpack相关配置。module.exports =...原创 2022-01-20 15:46:54 · 913 阅读 · 0 评论 -
每日三问之详解函数柯里化
什么是柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。示例// 普通的add函数function add(x, y) { return x + y}// Currying后function curryingAdd(x) { return function (y) { return x + y }}add(1, 2) // 3cur..转载 2022-01-10 23:46:53 · 67 阅读 · 0 评论 -
每日三问之前端面试题集锦
Javascript数据类型有哪些?字符串 string、数字 number、布尔 boolean、空 null、undefined、对象 object数组与字符串互转数组变字符串var a = [];var b = '';a=new Array{0,1,2,3,4,5};b=a.join(“-”); //b="0-1-2-3-4-5" 字符串变数组var b="0-1-2-3-4-5";var a=b.split("-"); //在-分解 什么是原型..原创 2022-01-05 10:25:55 · 663 阅读 · 0 评论 -
每日三问之如何在vue项目中使用svg图片
下载依赖npm install svg-sprite-loader svgo-loader -Svue.config.js 中配置chainWebpack chainWebpack: config => { config.module.rule('svg').exclude.add(path.join(__dirname, 'src/assets/icons')).end() config.module .rule('icons') .te..原创 2021-12-30 13:35:45 · 610 阅读 · 0 评论 -
每日三问之HTTP协议知识点
什么是HTTP协议HTTP超文本传输协议就是指在浏览器发送和服务器接收请求以及返回响应的时候接受要遵守的一套规则,就像汽车在路上行驶也要根据交通规则来进行啊,不然就乱套了。http超文本传输协议是基于TCP/IP通信协议来传递数据的,在OSI七层中的应用层。HTTP协议的特点①通信速度比较快,因为HTTP协议简单,客户端每次向服务器发出请求的时候只需要传递请求方法和路径就可以了。②比较灵活,因为HTTP协议允许传输任意类型的数据对象。正在传输的类型由Content-Type标记。..原创 2021-12-26 22:27:53 · 1273 阅读 · 0 评论 -
每日三问之HTTP状态码
基本介绍状态码(Status Code)和原因短语(Reason Phrase)用于简单描述请求的结果。常见的比如:200 OK,表示请求成功; 404 Not Found表示请求的资源未找到。原因短语(上面的ok 和Not Found)是对状态码的解释说明。形如200这样的状态码,这里的3位数字中第1位数字,通常表示响应的类别(会有一两个例外),大致可以分成以下几类(完整的状态码表,参见http1.1-RFC6):状态码 含义 1xx 请求正被处理 2xx ..转载 2021-12-25 22:47:59 · 582 阅读 · 0 评论 -
每日三问之javascript之Ajax与跨域
XMLHttpRequest 对象原创 2021-12-19 22:25:25 · 575 阅读 · 0 评论 -
url 转 base64、base64 转 blob、blob 转 base64
url 转 base64原理: 利用canvas.toDataURL的API转化成base64function urlToBase64(url) { return new Promise ((resolve,reject) => { let image = new Image(); image.onload = function() { let canvas = document.createElement('canvas...原创 2021-12-16 15:48:59 · 432 阅读 · 0 评论 -
每日三问之javascript之表单的基础知识、文本框&&选择框脚本
表单的基础知识在HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLForm-Element 类型。HTMLFormElement 也有它自己下列独有的属性和方法。acceptCharset:服务器能够处理的字符集;等价于 HTML 中的 accept-charset 特性。 action:接受请求的 URL;等价于 HTML 中的 action 特性。 elements:表单中所有控件的集合(HTMLColle...原创 2021-12-13 23:30:25 · 425 阅读 · 0 评论 -
每日三问之javascript之事件流、事件处理程序、事件对象、事件类型
JavaScript与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流事件流描述的是从页面中接收事件的顺序。IE 的事件流是事件冒泡流,而 Netscape Communicator 的事件流是事件捕获流。事件冒泡IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。<!DOCTYPE htm...原创 2021-12-05 23:09:55 · 239 阅读 · 1 评论 -
每日三问之javascript之DOM 扩展
DOM 扩展选择符 APIquerySelectorquerySelector()方法接收一个 CSS 选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回 null。//取得 body 元素var body = document.querySelector("body"); //取得 ID 为"myDiv"的元素var myDiv = document.querySelector("#myDiv"); //取得类为"selected"的第一个元素v...原创 2021-12-05 14:10:15 · 463 阅读 · 0 评论 -
每日三问之javascript—DOM文档对象模型
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。节点层次以下面的 HTML 为例:<html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </bo..原创 2021-12-03 14:45:04 · 255 阅读 · 0 评论 -
每日三问之javascript—BOM浏览器对象模型
window 对象BOM 的核心对象是 window,它表示浏览器的一个实例。全局作用域所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。var age = 29; function sayAge(){ alert(this.age); } alert(window.age); //29 sayAge(); //29 window.sayAge(); //29由于 sayAge()存在于全局作用域中,因此 this.age 被映射到 w..原创 2021-12-02 21:49:58 · 362 阅读 · 0 评论 -
每日三问之javascript引用类型之Object类型、Array类型、Date类型
Object类型原创 2021-11-29 15:54:30 · 432 阅读 · 0 评论 -
每日三问之javascript函数表达式之递归、闭包、私有变量
递归原创 2021-11-28 16:46:10 · 232 阅读 · 0 评论 -
每日三问之javascript面向对象之继承
原型链构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。实现原型链有一种基本模式,其代码大致如下。function SuperType(){ this.property = true; }SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ ..原创 2021-11-23 22:49:28 · 815 阅读 · 0 评论 -
每日三问之javascript面向对象之函数
所有原型对象都会自动获得一个 constructor (构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来说, Person.prototype.constructor 指向 Person。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。展示了 Person 构造函数、Person 的原型属性以及 Person 现有的两个实例之间的关系。在此,Person.prototype 指向了原型对象,而 Person.prototype...原创 2021-11-21 18:14:40 · 350 阅读 · 0 评论 -
每日三问之javascript面向对象之创建对象
javascript面向对象面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可 以创建任意多个具有相同属性和方法的对象。理解对象创建自定义对象的最简单方式就是创建一个 Object 的实例,然后再为它添加属性和方法。var person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"..原创 2021-11-18 17:09:59 · 359 阅读 · 0 评论 -
每日三问之JavaScript基本类型和引用类型的值、JavaScript执行环境及作用域、JavaScript垃圾收集机制
JavaScript基本类型和引用类型的值原创 2021-11-17 14:56:24 · 743 阅读 · 0 评论 -
每日三问之JavaScript语句、JavaScript函数、vue生命周期
JavaScript语句原创 2021-11-10 22:41:03 · 817 阅读 · 0 评论 -
每日三问之JavaScript数据类型、JavaScript操作符、关于vue路由守卫知识点
JavaScript数据类型ECMAScript 中有 5 种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number 和 String。还有 1种复杂数据类型——Object,Object 本质上是由一组无序的名值对组成的。...原创 2021-11-08 22:50:04 · 349 阅读 · 0 评论 -
每日三问之html5&&css3新特性、如何写一个npm包、围绕vue-router展开分析知识点
html5&&css3新特性原创 2021-11-03 19:44:10 · 251 阅读 · 0 评论 -
每日三问之rem与em区别、Vue Set基本用法与使用场景、手写call、apply、bind方法
rem与em区别原创 2021-10-28 22:31:44 · 648 阅读 · 0 评论 -
每日三问之$nextTick基本用法、详解css盒子模型、prototype与proto详解
$nextTick基本用法定义在下次DOM更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。即当数据更新了在DOM中渲染后自动执行该函数。methods: { // ... example: function () { // modify data this.message = 'changed' // DOM is not updated yet this.$nextTick(fu...原创 2021-10-27 20:01:45 · 159 阅读 · 0 评论 -
每日三问之$attrs && $listeners用法、$refs 基本用法、关于事件冒泡 &&事件捕获 &&DOM事件流
$attrs && $listeners原创 2021-10-26 11:15:52 · 402 阅读 · 0 评论 -
每日三问之Vue.directive自定义指令、vue中install方法、闭包应用场景
Vue.directive自定义指令原创 2021-10-25 09:15:11 · 1127 阅读 · 0 评论 -
每日三问之watch&&methods&&computed区别、this指向解析、如何更改this指向
watch&&methods&&computed区别原创 2021-10-23 16:03:22 · 482 阅读 · 0 评论 -
每日三问之节流与防抖、filter过滤器、v-slot插槽
节流、防抖函数节流(throttle):高频率触发的事件,在指定的单位时间内,只响应第一次(前面触发的执行前,忽略后面的事件)函数防抖(debounce):在一段时间内,只响应最后一次,如果在指定时间触发,则重新计算时间(后面触发的事件执行,替代了前面的事件)函数节流(throttle)与函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。节流// 我们可以知道这里 fun.apply...原创 2021-10-22 14:59:49 · 167 阅读 · 0 评论 -
手牵手之前端知识积累大全
css盒子模型css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素css 外边距合并(叠加)两个上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值,如图:box-sizing属性介绍box-sizing : content-box|border-box|inherit;content-box...原创 2021-08-25 22:59:07 · 141 阅读 · 0 评论 -
手牵手学习笔试题
最大值x = findMax(1, 123, 500, 115, 44, 88);function findMax() { var i, max = arguments[0]; if(arguments.length < 2) return max; for (i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments原创 2021-08-23 16:01:57 · 79 阅读 · 0 评论 -
手牵手系列之工作知识点总结
el-tree关于多选框变成单选问题// template <el-tree class="showtree" :data="data" node-key="orgId" :accordion="false" show-checkbox check-strictly :props="defaultProps" default-expand-all @check-change="handleCheckChange"...原创 2021-07-13 15:13:39 · 116 阅读 · 0 评论 -
手牵手系列之js语法及es6专题记录
Object.assign()基本用法// Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。let targetObj1 = { a: 1 };let sourceObj1 = { b: 1 };let sourceObj11 = { c: 3 };Object.assign(targetObj1, sourceObj1, sourceObj11);/...原创 2021-07-08 10:47:08 · 89 阅读 · 0 评论 -
手牵手系列之vue项目常用方法封装
常用工具类 utils.js/* * 验证手机号是否合格 * true--说明合格 */export function isPhone(phoneStr) { let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.test(phoneStr)) { return false; } else { return true; }}/* * 验证身份证号是否合格 * true--说明合格 */expor.原创 2021-02-19 09:23:23 · 172 阅读 · 0 评论 -
手牵手系列之记录JavaScript高级程序设计(第3版)
背景《JavaScript高级程序设计》可谓是前端工程师的圣典,全书比较基础讲述js的知识点。最初想要读这本书并做笔记的目的是巩固基础知识点,弥补不足,希望自己能坚持下来,争取每天都能有新的笔记痕迹。开始...原创 2020-09-24 09:31:37 · 125 阅读 · 0 评论