前端大法
文章平均质量分 94
宇宙一码平川
这个作者很懒,什么都没留下…
展开
-
三言两语说透柯里化和反柯里化
JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术,可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化的概念、实现原理和应用场景,然后介绍反柯里化的概念、实现原理和应用场景,通过大量的代码示例帮助读者深入理解这两种技术的用途。原创 2023-08-02 16:03:41 · 248 阅读 · 0 评论 -
三言两语说透process.stdout.write和console.log的区别
Node.js中的`process.stdout.write`和`console.log`都是用于向标准输出流(stdout)打印输出的方法,但二者在使用场景和实现方式上有些区别。本文将详细介绍`process.stdout.write`和`console.log`的区别。原创 2023-07-28 16:26:55 · 609 阅读 · 0 评论 -
【前端】一网打尽──Vue3 Composition-api新特性
写在前面在体验Vue3之前,我们先来了解一下Vu3到底有哪些亮点之处。总共有6大特点:Performance(性能比vue2的runtime快2倍左右)Tree shaking support(按需打包模块)Better TypeScript support(更好的TS代码支持)Composition API(组合API)Custom Renderer API(自定义渲染API)Fragment, Teleport, Suspense1. vue3的起源setup理解:vue3.0原创 2021-08-11 00:20:33 · 423 阅读 · 0 评论 -
【前端】重构,有品位的代码 02 ── 构建测试系统
写在前面代码重构是一个产品不断的功能迭代过程中,不可避免的一项工作。所谓重构,是在不改变程序的输入输出即保证现有功能的情况下,对内部实现进行优化和调整。这是《重构,有品位的代码》系列的第二篇文章,上一篇是《重构,有品位的代码──走上重构之道》构建测试体系工欲善其事,必先利其器重构是很有价值很重要的工具,能够让我们增强代码的可读性和鲁棒性。但是光有重构也不行,因为我们在重构过程中会存在难以避免的纰漏,所以构建一套完善稳固的测试体系是很有必要的。自测代码很重要在进行项目开发中,进行编写代码的时间花原创 2021-06-21 06:24:29 · 399 阅读 · 1 评论 -
【前端】你好,我叫Typescript 04──函数与类
函数与类前言本文章是Typescript系列学习文章,旨在利用碎片时间快速高效上手学习Typescript,也可以对Typescript进行复习知识点,温故知新。如果感兴趣的话~ 欢迎关注, 后续持续推出文章。前文回顾《你好,我叫Typescript 01 ── 数据类型》《你好,我叫Typescript 02 ── 变量与接口》《你好,我叫Typescript 03 ── 泛型》函数蹦蹦:跳跳,好几天不见,我最近在学习Typescript又遇到了新问题,亟需你的解答。跳跳:啥问题呀,原创 2021-05-24 16:05:17 · 238 阅读 · 0 评论 -
【前端】你好,我叫TypeScript 03──数据类型
泛型写在前面今天是520,祝大家有情人终成眷属吧,咱们也应应景,解锁两个新英雄:蹦蹦和跳跳,探索以全新的问答视角来介绍和解决亟需处理的问题。什么是泛型?蹦蹦:跳跳,你晓得啥子是泛型嘛?跳跳:在历史中,强者高手都是考虑现在和未来的,只有宏观把握才能让自己立于不败之地。就像你耍游戏撒,不管你要出啥子大件装备,你先买一双孩子或者多兰剑、蓝色戒指你就不会错撒,反正都是要在这个方面拓展。而在面向对象的编程语言中,组件不仅要考虑到现在的数据类型,还要考虑到未来要使用的数据类型,而泛型完美的提供了组件的可原创 2021-05-19 16:27:55 · 175 阅读 · 1 评论 -
【前端】你好,我叫TypeScript 02──变量与接口
TS变量与接口变量声明其实TS中的变量声明和JS中是一样的,所以你会JS就会TS,无外乎var、let和const,记住以下的表格内容就能解决绝大多数场景问题。varletconst存在变量提升不存在变量提升不存在变量提升不需要初始化不需要初始化需要初始化赋值函数作用域块级作用域块级作用域可以重复声明不可重复声明不可重复声明全局作用域下,变量会成为window的属性全局作用域下,变量不会成为window的属性全局作用域下,变量不会成为w原创 2021-05-18 15:14:50 · 144 阅读 · 1 评论 -
【前端】你好,我叫Typescript 01──数据类型
前言1.什么是Typescript?TypeScript并不是一门新的编程语言,它是Javscript的超集,即在JavaScript语言的基础上添加了语言约束:可选的静态类型和基于类的面向对象编程。其实就是添加了静态类型检查,有了约束可以让我们在开发过程中减少错误代码的书写。TypeScript和JavaScript的关系如下:TypeScript和JavaScript的区别:TypeScriptJavaScript强类型,支持静态和动态类型弱类型,没有静态类型Ja原创 2021-05-17 19:22:16 · 238 阅读 · 1 评论 -
【前端】小白上手Promise、Async/Await和手撕代码
写在前面对于前端新手而言,Promise是一件比较困扰学习的事情,需要理解的细节比较多。对于前端面试而言,Promise是面试官最常问的问题,特别是手撕源码。众所周知,JavaScript语言执行环境是“单线程”。单线程,就是指一次只能完成一件任务,如果有多个任务就必须排队等候,前面一个任务完成,再执行后面一个任务。这种“单线程”模式执行效率较低,任务耗时长。为了解决这个问题,就有了异步模式,也叫异步编程。一、异步编程所谓"异步",简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务原创 2021-05-17 20:54:09 · 321 阅读 · 3 评论 -
【前端】一网打尽──前端开发中的“节流”和“防抖”
1 前言在前端开发过程中,会遇到很多实时输入查询、滚动条触发等业务。而这些频发操作的事件,如果每次触发都进行执行的话,会造成性能下降、后台的压力变大,那么此时就需要使用防抖和节流进行处理。防抖和节流,见名思义:防抖是防止抖动,节流是节约流量。具体释义如后面介绍。2 防抖防抖(Debounce) 指的是触发事件后n秒后才能执行函数,如果在n秒内触发了事件,则会重新计算执行时间。常见场景:点击按钮、拍照、下拉触底加载下一页等。如上图所示,持续触发输入事件时,并不会立即执行func函数,而是在指定.原创 2021-05-13 13:26:46 · 756 阅读 · 4 评论 -
【前端】你真的理解JavaScript中的变量和数据类型吗
前言在我们学习各种编程语言时,最先接触的就是变量和数据类型,那么我们真的理记住和理解了这些最基础的知识点吗?我们是否在笔试和面试的时候,经常对一些不起眼的知识点想不起来?那么跟着这篇文章重新回顾下这些基础内容吧。1 变量(var、let、const)什么是变量变量是用于进行保存任意值的命名占位符。字母数字下划线美元符,严格区分大小写,首字符不能是数字。1.1 var关键字var关键字不初始化的情况下,会自动保存一个特殊值undefinedvar关键字在函数内部进行定义变量,会成为此函数原创 2021-05-13 13:23:55 · 277 阅读 · 3 评论 -
前端面试
1.重排和重绘1.1 浏览器的运行机制构建DOM树:渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包含js生成的标签)生成DOM树;构建渲染树:解析对应的CSS样式文件信息(包含js生成的样式和外部css文件),而这些文件信息以及html中可见的指令,构建渲染树;渲染树中每个Node节点都有自己的style,而且渲染树不包含隐藏的节点,因为这些节点不会用于呈现;布局渲染树:从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该在屏幕上呈现的精确坐标;绘制渲染树原创 2020-07-17 15:25:42 · 131 阅读 · 0 评论 -
江在川上曰:JS函数
函数函数的定义方式自定义函数(命名函数)函数表达式(匿名函数)利用 new Function("参数1","参数2","函数体")注意:所有函数都是Function的实例this的指向调用方法this指向普通函数调用window构造函数调用实例对象,原生对象中的方法也是指向实例对象对象方法调用该方法所属对象事件绑定方法绑定事件对象定时器函数window立即执行函数window// 普通函数 this指向window对象f原创 2020-06-03 20:23:04 · 205 阅读 · 1 评论 -
江在川上曰:webpack前端工程化
前端工程化1.模块化相关规范1.1浏览器端模块化规范名称文件AMDRequire.jsCMDSea.js1.2 服务器端模块规范common.js1.3 大一统的模块化规范(ES6)定义:每个js文件都是一个独立的模块导入模块成员使用import关键字暴露模块成员使用export关键字1.4 webpack工程化(1)创建文件、进行打包//创建空项目npm init -y//创建项目文件开发目录mkdir src//npm导入jqu原创 2020-06-01 14:18:19 · 466 阅读 · 0 评论 -
江在川上曰:vue-Router学习笔记
vue-Router学习笔记1.vue-Router1.1 基本使用步骤引入相关库文件<!-- 1.引入相关的库文件 --><!-- 引入vue库文件 --><script src='./lib/vue.js'></script><!-- 引入vue-router库文件,用于为window对象全局挂载vuerouter构造函数 --><script src="./lib/vue-router_3.0.2.js">&l原创 2020-05-31 20:15:38 · 340 阅读 · 0 评论 -
江在川上曰:less样式预编译
less样式预编译1.css原生变量定义使用“–”进行变量定义使用var()进行变量的引用--bgColor:red;background:var(--bgColor);2.css原生计算属性使用calc进行计算属性width:calc(50% - 200px)使用calc进行变量计算bgWidth:50%;width:calc(var(--bgWidth) - 200px)细节介绍:calc中的运算符左右两侧必须加 空格width:calc(59% - 20原创 2020-05-31 14:04:06 · 268 阅读 · 0 评论 -
江在川上曰:vue中使用swiper
vue中使用swiper1 安装//这是swiper组件npm install vue-awesome-swiper --save-dev//这是swiper组件的依赖包npm install --save swiper2 全局注册在main.js中进行全局注册,这样便能在全局使用组件。import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'require('swiper/css/swiper.css'原创 2020-05-27 09:45:23 · 193 阅读 · 0 评论 -
江在川上曰:js中的JSON解析和序列化
江在川上曰:js中的JSON解析和序列化JSON解析和序列化JSON是javascript的一个严格的子集,利用了javacript中的一些模式来表示结构化数据。他只是一种数据格式,并非一种编程语言。JSON语法JSON可以表示三种类型的值。类型说明简单值可以在JSON使用String、Number、Boolean和null,但是不能够使用undefined。对象是一组无序的键值对,值可以是简单值、也可以是对象、数组。数组是一组有序的值的序列,可以通过索引索引原创 2020-05-26 10:02:42 · 220 阅读 · 0 评论 -
Vue的四次元口袋:Vuex的学习笔记
1.Vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。VueX是适用于在Vue项目开发时使用的状态管理工...原创 2020-04-07 23:53:11 · 183 阅读 · 0 评论 -
前端面试的四次元口袋1:初始化样式、本地缓存、display:none;和visibility:hidden;、postcss、闭包、webpack
要点:为什么要进行初始化CSS样式 cookie、sessionStorgae、localStorage的区别 display:none;和visibility:hidden;的区别 什么是postcss,以及postcss的作用 什么是闭包,闭包解决了什么问题 webpack1、为什么要进行初始化css样式因为浏览器的兼容性问题,不同浏览器对某些元素的默认样式的是不同的,并且...原创 2020-04-02 12:26:08 · 259 阅读 · 0 评论 -
JS的四次元口袋:函数声明和函数表达式
函数声明和函数表达式函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数进行绑定。也就是说js中没有函数重载的概念。1、函数的定义函数声明function sum(num1.num2){ return num1 + num2;}函数表达式使用函数表达式可以在function关键字后不使用函数名,通过变量sum即可调用。当然要注意函数末尾有一个分号,...原创 2020-03-31 21:08:02 · 216 阅读 · 0 评论 -
手把手教学:vue前后端交互
1url地址格式格式:schema://host:port/path?query#fragment|--schema:协议。例如:httphttpsftp等|--host:域名或IP地址|--port:端口,http默认端口80,可以进行省略|--path:路径...原创 2020-03-20 00:14:43 · 713 阅读 · 0 评论 -
vue调试工具:yarn安装、vue调试案工具安装和使用
vue调试工具yarn安装 vue调试工具安装 vue调试工具使用1.yarn安装前提:在安装前要保证电脑安装了node环境:nodejs 使用npm进行yarn的全局安装npm install g yarn查看是否安装成功yarn -vyarn的常用命令# 初始化一个项目yarn init# 装包yarn add packagenameyarn add...原创 2020-03-15 17:57:41 · 933 阅读 · 0 评论 -
手把手教学前端工程化:vue脚手架
前端工程化 vue脚手架安装 Element-UI安装vue脚手架用于快速生成Vue项目基础架构,官网网址:https://cli.vuejs.org/zh/ 安装npm install -g @vue/cli 3.脚手架用法:必选项:BabelRouterLinter/Formatter使用配置文件 (1) 基于交互式命令行,创建新版v...原创 2020-03-14 23:18:57 · 544 阅读 · 0 评论 -
jQuery大法第一式--Ajax技术
1、什么是ajaxAjax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分...原创 2019-08-17 11:11:51 · 167 阅读 · 0 评论 -
jQuery大法第五式--动画效果
一、基本的动画效果1、隐藏元素hide():可以用于隐藏元素,将元素CSS样式属性display设置为none,它会记住原先的属性状态。(1)不带参数hide():用于实现不带任何效果的隐藏匹配元素。(2)带参数hide(speed,[callback]):用于实现以动画形式隐藏所有匹配的元素,并在隐藏完成后可选择地触发一个回调函数。speed:动画的时长callb...原创 2019-08-16 12:02:40 · 186 阅读 · 0 评论 -
jQuery大法第四式--jQuery的事件处理
一、页面加载响应事件$(document).eady()方法是获取整个文档对象,从这个方法名称来看,就是获取文档就绪的时候。二、jQuery中的事件鼠标单击事件、敲击键盘事件、失去焦点事件等示例:实现导航栏功能<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-08-16 11:24:58 · 179 阅读 · 0 评论 -
jQuery大法--jQuery控制页面
一、对元素内容和值进行操作元素的内容是指定义元素的起始标记和结束标记之间的内容,可分为文本内容和HTML内容。<div> <p>测试内容</p></div>div元素的文本内容是“测试内容”,文本内容是不包含元素的子元素,质保函元素的文本内容。而“<p>测试内容</p>”就是元素的HTML内容,HTML...原创 2019-08-15 17:12:58 · 408 阅读 · 0 评论 -
jQuery大法第三式--选择器实验
实验示例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实验</title> <style> table{ border: 0; ...原创 2019-08-14 19:19:45 · 191 阅读 · 0 评论 -
JQuery大法--jQuery选择器
一、jQuery介绍jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。1、下载jQuery在官网进行下载2、配置jQuery将jquery.js导入到HTML文件的script中:<script src="jquery.js"></script>二、j...原创 2019-08-14 18:53:27 · 192 阅读 · 0 评论 -
JavaScript大法第一式--换肤实践
犹如百度页面进行换肤1、jQuery简单页面于是,我们简单做了一个类似功能的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>换肤</title> <style> ...原创 2019-08-14 10:26:08 · 164 阅读 · 0 评论 -
CSS大法----css样式表里面引用background-image时,url路径错误原因及解决方法
CSS大法----css样式表里面引用background-image时,url路径错误原因及解决方法一直对css中background:url的路径问题存在误解,半知半解的,有时候路径写的对,有时候又是错的,完全碰运气,今天写resume时又遇到这个问题,在此整理下:css文件夹下的index.css样式表中background要引入images文件夹下的guanggao.jpg图片。...原创 2019-08-01 11:22:44 · 5899 阅读 · 2 评论