- 博客(40)
- 收藏
- 关注
RSS订阅
原创 vue做seo优化
前言先了解什么是seo？再了解搜索引擎蜘蛛的工作原理？seo为啥对vue单页面不友好?vue项目怎么做seo优化？prerender-spa-plugin怎么使用，以及它的工作原理什么是seo？SEO是由英文Search EngineOptimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码...
2019-09-03 11:02:37
61783
37
原创 Stylus使用简介
Stylus 是一种 CSS 预处理器，类似于 Sass、Less 等，它允许开发者使用类似于 CSS 的语法来编写样式，并且提供了一些额外的功能和语法糖来增强 CSS 的编写和管理。
2024-04-22 15:41:57
1229
原创 微信小程序相关介绍
简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。open-type="redirect"等价于API的 wx.redirectTo 而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径。pages文件夹里是小程序的各个页面，每个界面一般都由.wxml、.wxss、.js、.json四个文件组成，四个文件必须是相同的名字和路径。
2024-04-22 15:30:04
589
原创 ES6对象及数组扩展
* 示例 translate 方法内传入 helper.add 作为转换用的映射函数，由于该方法使用来this.diff属性，因此需要为Array.from()方法提供第三个参数来指定this的值，从而无须通过调用bind()方法或其他方式来指定this的值了。否则返回 false。c、如果有一个操作数为 对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较。1、fill(val) 当传人一个值时，fill() 方法会用这个值重写数组中的所有值。
2024-03-17 18:23:20
787
原创 TypeScript 泛型及应用
在以上代码中，首先通过 keyof T 拿到 T 的所有属性名，然后使用 in 进行遍历，将值赋给 P，最后通过 T[P] 取得相应的属性值。中间的?号，用于将所有属性变为可选。如果 T 能赋值给 U 类型的话，那么就会返回 never 类型，否则返回 T 类型。最终实现的效果就是将 T 中某些属于 U 的类型移除掉。
2024-03-17 17:57:38
1071
原创 sass 使用指南
Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。sass有2种语法：1.一种是以sass后缀，对代码的排版有着非常严格的要求，而且没有大括号，没有分号2.一种是以scss后缀，更接近我们程序写法，比如大括号，分号SASS允许用户编写自己的函数。
2024-03-17 16:52:30
872
原创 2024 最新js面试题记录&其他
如果一个时间被频繁触发多次，节流函数可以按照固定的频率区执行对应的事件处理方法。函数节流保证一个时间一定时间内只执行一次。指触发事件后在n秒内函数只执行一次，如果在n秒内又重新触发了该事件，那么将会重新计算函数执行的时间。
2024-03-11 18:50:13
392
原创 vue3浏览器全屏以及某元素全屏设置
当页面中某块内容需要全屏展示时，提取公共代码到@/hooks/useScreenFull.ts,同时配合vuex存储控制页面元素的展示和隐藏；同时设置需要全屏的元素的height: 100%；以及需要隐藏的内容的样式height: 0px;vuex里store/base.js。
2023-06-26 15:44:11
1199
原创 怎么使用 Node.js 编写 CLI 脚手架
「前端脚手架」就是指通过选择几个选项快速搭建项目基础代码的工具,可以有效避免我们 ctrl + C 和 ctrl + V 相同的代码框架和基础配置。
2023-06-26 14:57:34
285
原创 如何开发一个基本的PostCSS插件
PostCSS 是一个翻译样式的js插件。它能帮你对css做静态分析。支持变量和混入.编译尚未被浏览器支持的css预发，内联图片等。业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴， JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。
2023-06-26 14:42:09
563
原创 爬虫相关介绍
这是一个核心api按照jquery来设计，专门在服务器上使用，一个微小、快速和优雅的实现简而言之，就是可以在服务器上用这个库来解析HTML代码，并且可以直接使用和jQuery一样的api同样也可以通过jQuery的api来获取DOM元素中的属性和内容爬虫用途非常广泛，主要的目标是为了实现自动化程序，解放程序员的双手帮助程序员自动获取一些数据，测试一些软件，甚至自动操作浏览器做很多事情在爬取目标网站之前，建议大家浏览该网站的robots.txt，来确保自己爬取的数据在对方允许范围之内。
2023-06-26 14:40:56
569
原创 D3.js 介绍与入门
D3.js（全称：Data-Driven Documents）数据驱动文档是一个基于数据驱动 DOM 的 JS 库。相比EChart、G2...之类的封装好的图标库，D3就像一个Jquery。封装了很多函数供开发者使用。
2023-06-26 14:26:42
9622
原创 axios源码结构与参数分析
axios内部核心代码主要由**适配器**，**取消请求类**，**request 方法**实现，**拦截器**处理。
2023-06-26 11:22:56
275
原创 Webpack的打包原理
Webpack的运行是个串行的过程，从启动到结束会依次执行：初始化参数、开始编译、确定入口、编译模块、完成模板编译、输出资源、输出完成；
2022-09-15 16:17:09
673
2
原创 nextTick 原理
Vue nextTick 原理使用场景：在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到 DOM。这里就涉及到 Vue 一个很重要的概念：异步更新队列（JS运行机制 、 事件循环）。异步更新队列可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化并不是直接更新 DOM，而是开启一个队列，并缓冲 在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM
2020-12-11 16:34:32
1140
原创 Web Components
Web ComponentsWeb Components是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。Mdn Web ComponentsHTML templateShadow DOMCustom ElementsHTML imports(已废弃)Html templatehtml标签中的模板元素template标签中的任何元素都不会被加载运行，比如img、script、style都不会生效当元素中的内容被添加到dom
2020-10-19 11:34:51
468
原创 数据结构和算法
开题两点1.数据结构和算法是前端代码编写很重要也很容易被忽视的地方，所以很想分享一下数据结构和算法相关的东西2.深度优先搜索和广度优先搜索是两种应用在图上的基础搜索。项目中用到图这种数据结构比较少，用到最多的数据结构是数组和对象，有一种没有根节点的类多叉树的数据结构，在项目中会经常遇到，这里就称为数组对象，我们一般都是通过递归来查找一些相关数据，很少使用其他方式。所以下面我们就来聊一下经典算法之深度优先搜索和广度优先搜索在数组对象中的应用。深度优先搜索（Depth-First-Search）简称：D
2020-10-19 10:21:50
212
原创 面向对象的javascript
概念：JS没有提供传统面向对象语言中的类式继承，而是通过原型委托的方式来实现对象与对象之间的继承，同时也没有在语言层面提供对抽象类和接口的支持.设计模式原则：单一职责原则（SRP）：这里的职责是指“引起变化的原因”；单一职责原则体现为：一个对象（方法）只做一件事，但并不是一成不变的，许多时候还是要在方便性和稳定性之间做一些取舍，比如jquery的attr方法既负责取值又负责赋值.最少...
2020-04-30 14:07:13
286
原创 函数式编程
#函数式编程基础一.函数式编程相关概念函数式编程概念: 函数式编程是与面向对象编程和过程式编程并列的编程范式。通俗的来说函数式编程就是对于给定的输入，不管你调用该函数多少次，永远返回同样的结果。在函数式编程中，函数就是一个管道（pipe）。这头进去一个值，那头就会出来一个新的值，没有其他作用。特点:函数是第一等公民.和其它的基本数据类型一样, 可以当参数传递,可以赋值给变量等等....
2020-04-30 14:05:03
129
原创 vue3 effect
从测试用例来学习vue3 effect此次分享主要是 effect 这个 API 的一些功能、option 以及实现原理。核心内容是 effect 如何做到跟踪 reactive 内的变化的测试用例因为 effect.spec.ts 文件中的测试用例 700 多行，所以后面省略了一些，此次不细说，大家自行查看研究。以下内容来自vue-next/packages/reactivit...
2020-04-30 14:01:54
1857
原创 Event Loop 是什么
浅谈Event Loop从单线程说起众所周知，js是一种单线程语言。为什么是单线程呢？我引用一句烂大街的话：假设js同时有两个线程，一个线程想要在某个dom节点上增加内容，另一个线程想要删除这个节点，这时要以哪个为准呢？当然，多线程有多线程的解决办法，加锁啊，但是这样的话，又会引入锁、状态同步等问题。js是浏览器脚本语言，主要用途是与用户互动，操作dom，多线程会带来很复杂的同步问题。好吧...
2020-04-30 13:59:51
307
原创 vue slot-scope和v-slot
vue中插槽的使用一、什么是插槽官方解释：元素作为组件模板之中的内容分发插槽，传入内容后slot 元素自身将被替换。插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。相当于组件的一块HTML...
2020-04-30 13:58:07
3105
原创 Rxjs相关介绍
Rxjs简单介绍RxJS 是 Reactive Extensions for JavaScript 的缩写。是一个基于可观测数据流的响应式编程的库。它是基于订阅-发布模式、观察者模式与迭代器实现的。响应式编程响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。 — 百度百科…订阅-...
2020-01-17 16:27:20
365
原创 ES6之Symbol和Map
Symboles6中新增的一种数据类型，表示独一无二的值基本数据类型： String Number Boolean null undefined Symbol引用数据数据类型： Object创建：let s1 = Symbol()typeof s1 // 'symbol'注意：1.Symbol不能使用new调用，原因在于symbol是一个原始类型的值，不是对象2.Sy...
2020-01-17 16:22:09
656
原创 vue-router详细介绍
写在前面用户进行了交互操作，现在要对页面内容进行变更，此时可以通过javascript进行动态替换DOM，但是其不便于分享、收藏，对于搜索引擎和用户来说都是不友好的！什么是前端路由？ 根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作优点用户体验好，不需要每次都从服务器全部获取，快速展现给用户缺点使用浏览器的前进，后退键的时候会重新发送...
2020-01-17 16:15:34
1610
原创 ES6之Promise
javascript 基础概念理解javascript 引擎是基于单线程事件循环的概念构建的，同一时间只允许一个代码块执行。事件循环： 负责监控代码执行并管理任务队列，每当 javascript 引擎中的一段代码结束执行，事件循环会执行任务队列中的下一段代码任务队列： 每当一段代码准备执行时，都会被添加到任务队列，队列的任务会从第一一直执行到最后一个。事件模型： 通过用户的点击按钮等操作触...
2020-01-17 16:09:04
131
原创 定时器 setTimeout & setInterval
setTimeout和setInteval是window对象上两个主要的定时方法，他们的语法基本相同，但完成功能的却是不同的。settimeout方法是定时程序，也就是在到达某个指定时间后，执行什么事。（执行一次就拉倒）setinterval方法则是表示间隔一定时间反复执行某些事。定时器的返回值当我们设置定时器时(不管是setTimeout还是setInterval)，都会有一个返回...
2020-01-17 16:06:49
707
原创 js 的一些简写
数组去重 Set()Set类似于数组，区别在于它所有的成员都是唯一的，不能有重复的值function dedupe(array) { return Array.from(new Set(array));}dedupe([1,1,2,3]) // [1, 2, 3]set对象的方法set方法详情点这里方法描述add添加某个值，返回Set对象本身。cl...
2020-01-17 16:04:17
2258
原创 flutter 入坑分享
简介Flutter 是 Google 推出并开源的移动端开发框架（基于「Dart」语言）。使用 Flutter 开发的APP可以同时运行在 IOS 与 Android 平台上。并且 Flutter 默认带有 Material 风格 与 Cupertino 风格的主题包(前者Android，后者IOS)，可以快速开发一个IOS 风格或者 Android 风格的…Demo…跨平台Flutte...
2020-01-17 16:01:31
487
原创 微信小程序应用介绍
微信小程序介绍从以下几方面什么是小程序？怎么建立一个小程序？小程序的页面结构？视图层结构等？组件之间如何通信？页面跳转方式有哪些生命周期？小程序如何引入其他ui组件？小程序是什么？微信小程序，简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理...
2019-09-03 11:05:19
1450
1
原创 浏览器对象模型
浏览器对象模型图片onmouseover时悬浮图片加popimg<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><input type="button" value="打开窗口" /><input type="button" value="
2017-08-01 19:39:11
244
原创 原型链继承
原型链继承简单的原型继承<script> function People(){ this.name="kk"; this.age="22"; } People.prototype.eat=function(){ //给对象的原型添加一个eat方法,只要是people的实例就可以通过__proto__找到这个eat方法
2017-08-01 14:41:59
225
原创 常用的正则
常用的正则先写这些以后再补充1)手机号正则 /^1\d{10}$/2)有效数字正则 /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/3)验证年龄 18-65 /^((18|19)|([2-5]\d)|(6[0-5]))$/;4)验证邮箱的正则 /^([\w.-]+)@([0-9a-zA-Z]+)(\.[a-zA-Z]{2,4}){1,2}$/5)中文名
2017-08-01 13:42:35
392
原创 ToolTip.js 的使用介绍
ToolTip.js 的使用介绍首先在页面引入jquery.js和ToolTip.js<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script language="javascript" src="js/ToolTip.js"></script>其次是页面结构 给图片添加 class pop
2017-08-01 13:35:43
5362
原创 url 字符串截取
url 字符串截取方法1 split字符串截取 function serilizeURL(url){ var rs=url.split("?")[1]; var arr=rs.split("&"); var json={}; for(var i=0;i<arr.length;i++){ if(arr[i
2017-08-01 13:24:53
1248
原创 div水平垂直居中的方法
div水平垂直居中的方法*方法1：使用JS实现:兼容全部的浏览器 //->获取当前屏幕的宽度和高度 var winW = document.documentElement.clientWidth || document.body.clientWidth, winH =
2017-08-01 13:21:03
630
原创 数组去重的几种方法
数组去重的几种方法数组去重1 var ary1=[1,2,3,1,3,4,5,6,7]; //ary.splice(0,3);//4,5,6,7 删除 ary1.splice(0,2,0); // 0,3,4,5,6,7 替换 返回删除的值 // ary.splice(0,0,0)// 0,1,2,3,4,5,6,7增加 for(var i=0;i<ary
2017-08-01 13:14:01
349
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人