- 博客(40)
- 收藏
- 关注
RSS订阅原创 vue3.2 setup
vue3.2 到底更新了什么？1.SSR：服务端渲染优化。2.New SFC Features：新的单文件组件特性。3.Web Components：自定义 web 组件。4.Effect Scope API：effect 作用域，用来直接控制响应式副作用的释放时间(computed 和 watchers)。5.Performance Improvements：性能提升。一、变量、方法不需要 return 出来<template> <div class="home"&g
2022-03-22 13:11:18
1048
原创 vue 常用库 提高效率
1.element ui组件库2.vant 移动端ui组件库3.animate.css 纯css动画库4.swiper 轮播图组件5.mescroll.js 滚动插件6.lodash.js 函数工具库7.day.js 时间库8.timeage.js 显示几秒前几个小时前时间库9.echarts 数据可视化10.Meditor.md 编写文件11.validator.js 表单验证12.vue-draggable 拖拽组件13.vue-qr 二维码14.vue-cropper 图片裁
2021-10-14 21:38:19
122
原创 vue 部署带 linux服务器 docker
前言 前提：写好项目 买好服务器 vue项目上传到github 服务器安装git并拉取项目 一、具体流程购买服务器远程连接服务器安装docker服务基于docker安装nginx服务本地后创建vue项目 并上传git服务器安装git 并拉取代码服务器安装nodejs 并编译代码将编译后的静态文件放到nginx中二、实践1.安装docker服务百度安装 docker 大概需要十几分钟启动docker2.基于docker安装nginx// 看星最多的docker se
2021-09-18 14:31:51
215
原创 web程序防止恶意调试
1.如何简单的防止你的程序被他人恶意调试2.逆向思维学会如何更好的调试一、具体实现防止调试的方法,这里我们主要是通过不断debugger的方法来疯狂输出断点,让控制台打开后程序就无法正常执行 我们都知道debugger只有在控制台被打开的时候才会执行,所以后面的所有方法都是围绕着这一特性来进行,废话不多说,我将通过以下几个案例向你们展示道高一尺魔高一丈的道理,先上代码:(() => { function block() { setInterval(() =&g.
2021-08-31 13:34:30
238
原创 eslint 基本使用
什么是 eslint 可组装的javascript和jsx检查根据1.读入数据代码如下（示例）：data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')print(data.head())该处使用的url网络请求的数据。
2021-08-14 10:48:34
107
原创 webpack基本上使用 保姆级
项目开始 在空目录下 npm init -y 新建一个src文件夹 新建一个index.html index.js一、webpack安装npm install [email protected] [email protected] -D1. 新建webpack配置文件 webpack.config.js module.exports = { mode: 'development' }2.在packjson中添加命令 "scripts": { "dev": "webpack
2021-08-12 11:38:13
130
原创 vue+eslint+prettier+stylelint 代码规范以及自动修复
项目场景：在Vue项目中使用Eslint+Prettier+Stylelint第一步搭建项目：首先搭建vue项目，lint选择ESLint + Prettier，配置方式选择In dedicated config files。项目搭建完成后，根目录下会自动生成一个.eslintrc.js文件，我们直接来看默认的配置这里extends是一个数组，数组第一个成员"plugin:vue/essential"表示的是：引入eslint-plugin-vue插件，并开启essential类别中的一系列规则
2021-08-06 09:46:45
1661
原创 console的基础使用
console一定是各位前端最熟悉的小伙伴了 有些网站还会在控制台输出一些有意思的东西，比如招聘信息，像百度的：也有一些网站可能不喜欢被人调试，只要打开控制台就自动进入调试模式，还是无限debugger的那种，最简单的实现方式如下：setInterval(() =>{ debugger}, 1000)console对象是由宿主环境提供的，如浏览器和nodejs，作为全局对象的一个属性，不需要通过构造函数创建，直接使用即可，console对象的__proto__指向的是一个空对象，
2021-08-03 14:19:13
4854
原创 javascript 四种for循环
本文将按照出现的先后顺序总结 JavaScript for 循环的4种编写方式。阅读后，你可以像专家一样正确使用它们。1.C 风格的“三表达式” For 循环这是自 ECMAScript 3 (ES3) 以来可用的老式方法。我们可以用三表达式样式来编写 for 循环：var a = [1,2,3,4]for (var i =o; i<a.length; i++){ console.log(a[i])}不用说，这是一种经典的 C 风格方式。 如果我们愿意，我们可以一直使用这种时尚。 但
2021-07-31 15:00:27
886
原创 less 入门到精通
前言什么是less css预编译器 可以扩展css语言 允许变量 混合 函数 使css 更具维护性主体性 拓展性提示：以下是本篇文章正文内容，下面案例可供参考1.初见 less嵌套写法.ul { list-style:none; .li{ height:20px; a{ color:#fff; } }}2.正确使用less编译工具KoalawinLessCodeKit客户端调试首先引用.less文件 link引入 stylesheet/less
2021-07-20 21:40:46
151
原创 webstorm快速上手
设置1.软件字体file - > settings -> Appearance2.编辑器字体file - > settings -> Editor鼠标滚轮字体3. file - > settings -> Editor -> general快捷键设置快捷键设置 可以自己设计file - > settings -> Keymap文件定位当不知道你当前的文件在哪里的时候 点击这个按钮快速定位控制台快捷键 ctrl+alt+
2021-07-17 17:39:07
179
1
原创 javascript 高级程序设计 （第四版） 第二章 下
文章目录书接上文1.行内代码与外部文件2.文档模式3.元素4.小结书接上文1.行内代码与外部文件虽然可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。推荐使用外部文件的理由如下。可维护性 javascript代码如果分散到很多的页面 会导致维护困难缓存 浏览器会根据特定的设置缓存所有外部链接的javascript文件，意味着如果俩个页面都用到同一个文件，则改文件只需要
2021-07-02 09:24:12
260
原创 JavaScript高级程序设计（第4版） 第二章 上
文章目录HTML 中的 JavaScript一、< script>元素1.标签位置2.推迟执行脚本3.异步执行脚本4. 动态加载脚本5. XHTML 中的变化6. 废弃的语法HTML 中的 JavaScript本章内容：使用 < script>元素行内脚本与外部脚本的比较文档模式对javascript有什么影响确保javascript不可用时的用户体验一、< script>元素 JavaScript 插入 HTML 的主要方法是使用< scrip
2021-07-01 09:56:28
163
原创 JavaScript高级程序设计（第4版） 第一章
提示：本系列文章为个人看红宝书的个人记录备忘前言提示：什么是javascript 1995 年，JavaScript 问世 主要用途是代替 Perl 等服务器端语言处理输入验证 在此之前，要验证某个必填字段是否已填写，或者某个输入的值是否有效，需要与服务器的一次往返通信如今，JavaScript 的应用也不再局限于数据验证，而是渗透到浏览器窗口及其内容的方方面面。1997 年，JavaScript 1.1 作为提案被提交给欧洲计算机制造商协会（Ecma）。第 39 技术委员会（TC39
2021-06-30 13:05:52
117
原创 css 开发注意点与技巧-1
前言提示：个人觉得CSS是每个前端开发人员都必须掌握的基础，以完成相应的交互和终端设备的响应。在项目开发中，有些容易被忽略的小问题带来项目后期的胶水代码。1.使用相对单位常我们在项目开发中，使用px作为尺寸的单位，而不是使用相对单位，如：rem、em等。在万物互联的时代，最好的方式是相对单位rem、vh、vw等现代 CSS 布局（如 flexbox 和 grid）方式，最大限度的支持各种终端设备绝对单位 px 是一个绝对单位，主要是因为它是固定的，不会根据任何其他元素的测量而改变相对单位 v
2021-06-23 09:41:17
88
原创 多种js数组去重的方法
一般的方法此处也不列举了 本文中介绍了多种数组去重的方法，使用了较多的高阶方法及API，并给出相应解释及语法，还有其他多种组合调用方式，原理逻辑其实都差不多// 给定一个数组 let arr = [1,2,2,4,null,null,'3','abc',3,5,4,1,2,2,4,null,null,'3','abc',3,5,4]一、利用对象的 key 唯一众所周知，对象的key不可重复，否则后者将覆盖前者。利用该特性，实现数组去重，遍历数组，将数组的每一项做为对象的key值。// 给定
2021-05-26 16:37:26
186
原创 团队代码规范工程化 eslint
前言每个团队都需要一个统一的 JavaScript 代码规范，团队成员都遵守这份代码规范来编写代码Prettier 也可以保证代码风格一致。是的，Prettier 确实可以按照设置的规则对代码进行统一格式化，后面的文章也会有对应的介绍。但是需要明确的一点是，Prettier 只会在格式上对代码进行格式化，一些隐藏的代码质量问题 Prettier 是无法发现的，而 ESLint 可以一、基本使用流程1.基本流程基于业界现有的 ESLint 规范和团队代码习惯定制一套统一的 ESLint 代码规则
2021-05-08 17:08:11
193
原创 css 炫酷特效
一、霓虹灯光的实现示例代码如下：** 多重阴影 给按钮加三层阴影，从内到外每层阴影的模糊半径递增，这样的多个阴影叠加在一起，就可以形成一个类似霓虹灯光的效果**<div class="light">css light</div>.light { width: fit-content; padding: 25px 30px; color: #03e9f4; font-size: 24px; text-trans
2021-05-04 16:04:04
541
原创 javascript技巧-2
1、邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2、手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3、电话号码export const isPhone = (s) => { re
2021-04-19 10:38:14
53
原创 vue 代码风格 推荐
1.组件名为多个单词// 不推荐 app.component('todo', { // ...})//推荐app.component('todo-item', { // ...})2.Prop 定义// 不推荐 // 这样做只有开发原型系统时可以接受props: ['status']//推荐props: { status: String}//更好props: { status: { type: String, required: true,
2021-04-17 17:13:51
169
原创 javascript小众技巧
1.字符串填充let str='1'str=str.padStart(5,0) //将字符串1 填充长度为5console.log(str) //output: 00001let str2='2'str2.padEnd(5,0)console.log(str2) // output: 100002.Spread运算符早在2015年作为ES2015规范的一部分问世，但是它的一些用例经常被忽略//Spread运算符的第一个用例是将项目从一个数组添加到另一个数组const arr1=['on
2021-04-16 09:34:58
57
原创 JavaScript优化技术
前言JavaScript优化技术1.多个条件优化//oldif(x==='a'||x==='b'||x==='c'){ }//shorthandif(['a','b','c'].includes(x)){}2. if else//oldif(x>5){ }else{}//shorthand(x>5)?true:false3. 空 未定义 空检查//oldif(x!==null||x!==undefined||x!==''){ }//short
2021-04-12 13:48:21
81
原创 h5 移动端开发总结
一、html1.常用meta属性设置meta对于移动端的一些特殊属性，可根据需要自行设置：<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转<meta name="full-screen" content="yes"> //全屏显示<meta name="browsermode" content="application"> //UC应用模式，使
2021-03-08 09:18:27
236
原创 javascript技巧-1
javascript技巧1.简化条件表达式代码如下（示例）：//太长的逻辑表达式if(x==='abc'||x==='def'||x==='ghi'||x==='jkl'){ //其他逻辑}//简写if(['abc','def','jkl'].includes(x)){ //其他逻辑}2.简化if…else代码如下（示例）：//新手写法let test=booleanif(x>100){ test=true}else{ test=false}//简写let
2021-02-20 09:32:39
74
原创 2021-02-04
javascript ES12 每年，JavaScript都会更新添加新的特性新标准，在今年ES2020发布了，而ES2020（ES12）也预计将在明年即2021年年中发布。每年的新特性都会经历四个阶段，而第四阶段也就是最后一个阶段，本文即将介绍的即提案4中的相关新特性，也是意味着这些新特性将很大程度的出现在下一个版本中一、replaceAllreplace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换 然而 repla
2021-02-04 10:56:56
48
原创 原子化css
提示：facekbook twitter最近的产品部署 主页减少了80%的css体积一、什么是原子css//比如<button class="button button--state-danger">Danger button</button>/* 原子css*/.bw-2x{ broder-width:2px;}.bss{ border-style:solid;}.sans{ font-style:sans-serif:}.p-1x{ padding
2021-01-25 13:21:27
1193
原创 flutter 性能优化
flutter是一个高性能的框架 不需要特殊处理 避免常见问题即可一、组件前加上const 加上const 相当于 对组件进行缓存二、避免更改组件树的结构和组件类型 组件树发生变化 应该避免使用//避免children:[ if(_visible){ Text("可见")}else{ Container()}]//优化如下children:[ Visibility( vivible:_visible, child:Text('可见‘’))，Container（）]
2021-01-21 09:42:38
522
原创 js统计页面停留时长
前言 页面停留时间简称为Tp 是网站分析中的一个指标 用于反映用户在某些页面的停留时间的长短 我们可以把页面的生命周期分为三个动作 进入 活跃状态切换 离开 一、如何监听页面的进入和离开 对于常规页面的 首次加载 页面关闭 刷新 等都可以通过 window.onload 和 window.onbeforeunload 来监听 页面的进入和离开 浏览器的前进和后退通过 pageshow和 pagehide处理对于单页面应用 的内部跳转 可以转化为俩个问题 监听路由变化 判断URL是否
2021-01-20 09:19:06
3932
原创 javascript 在适当的条件下加载
1.用户设备的RAMif (navigator.deviceMemory > 1) { await import('./costly-module.js');}//浏览器支持仅限于基于Chromium的浏览器，根据caniuse的说法，这是全球使用情况统计的70％。如果navigator.deviceMemory为undefined，则可以考虑是否加载JavaScript。2.用户设备有足够的cpuif (navigator.hardwareConcurrency > 4)
2020-12-31 15:12:49
326
原创 javascript 技巧
1.replace allvar example="fruitchan chanchan chan shjchan"console.log(example.replace(/chan/,'godd'))console.log(example.replace(/chan/g),'good')2.提取唯一值var nums=[1,2,1,1,2,1,2,1,21,21,2,2,3,11,1,1]var only=[...new Set(nums)]console.log(only)3.数字转
2020-12-29 08:59:39
108
原创 vue 优化体验
一、全局样式不通过import 在项目中任何使用变量和mixins// vue.config.jsmodule.exports={ css:{ loaderOptions:{ sass:{ perpendDate:` @import '*******'; ` } } }}二、页面载入进度条使用 nprogress 对路由跳转进行做一个伪进度条 在网络不好的情况下然用户体验优化import NProgress from 'nprogress'
2020-12-24 13:26:36
225
原创 js 工作常用函数
前言提示：总结了项目开发过程中常用的js函数和正则1.正则表达式//匹配邮箱 let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$//匹配手机号码 let reg = /^1(3|4|5|7|8)[0-9]{9}$/;// 匹配国内电话号码 0510-4305211let reg = /\d{3}-\d{8}|\d{4}-\d{7}/;// 匹配身份证号码let reg=/(^\d{15}$)|(^\d{1
2020-12-16 10:17:57
159
原创 数据分析 要点
文章目录前言一、导入数据二、清洗数据三、绘图总结前言提示：这只是一个步骤 具体问题具体处理 一、导入数据提示：数据的导入有多种方式 现在说的是导入csv当然读取的数据种类可以有很多比如 ：json 数据库 文本等等...# 需要先导入依赖import numpy as npimport pandas as pdimport warningswarnings.filterwarnings('ignore')df=pd.read_csv('***.csv',header=None,
2020-12-15 10:12:24
115
原创 js 使用技巧 异于常人
问题描述：1 变量没有声明而直接使用的话 会默认作为一个新的全局变量 应该避免2 ==和！= 操作符会在需要的情况下自动转化数据类型 但是 === 和！==不会 他们会同时比较值和数据类型 这也使得 他们比 == 和 ！=快3 undefined null 0 false NaN 空字符串逻辑值均为false4 行尾使用分号5 使用对象构造器function Person(firstName,lastName){ this.firstName=firstNmae; this.lastNa
2020-12-14 10:03:25
89
原创 react笔记
函数式组件状态constructor() 一个组件的生命周期中只执行一次render() 最开始得时候执行一次 每次组件更新都会执行函数式无状态组件是没有生命周期方法的
2020-12-10 16:40:42
66
原创 css变量的使用 非 sass less
前言前端俩大css框架 sass less$被sass用掉了@被lass用掉了官方选择了 –一、基础使用/* 声明俩个变量*/title{ --varcolor:blue; --vartitle:red;}/* css变量可以在多个选择器内使用 取决于优先级*/ header{ --varcolor:red}/* 使用 用 var() 读取变量*/content{ color:var(--varcolor)}/* 一般来说 全局变量通常放在 根元素 ：root 里 确
2020-12-08 09:57:29
79
原创 数据结构 什么是数据结构
数据结构数据结构是一门学习数据存储方式的一门学科存储结构线性表：还可细分为 顺序表 链表 栈 队列树结构：包括普通树 二叉树 线索二叉树图存储结构线性表：往往是依次排序的 具备一对一关系的数据就可以用线性表来存储线性表并不是一种具体的存储结构，它包含顺序存储结构和链式存储结构，是顺序表和链表的统称顺序表：如常用的数组 由于顺序表结构的底层实现借助的就是数组，因此对于初学者来说，可以把顺序表完全等价为数组，但实则不是这样链表 ：数据的存储位置是随机的 链表给各数据块增设一个指针，每个数据块
2020-12-08 09:11:24
108
原创 pandas基本使用
pandas基本使用萌新必备（基于大佬的整理）新的改变df代表DateFrame ser代表 Series对象导入文件导出文件查看DateFrame选择数据的特定子集数据清理分组排序过滤补充萌新必备（基于大佬的整理）新的改变一切的开始import pandas as pddf代表DateFrame ser代表 Series对象日常基本使用的操作：从不同的文件中导入数据导出为不同的文件格式查看DateFrame信息选取数据特定子集数据清理分组 排序 过滤补充导入文件1.从c
2020-12-07 09:32:30
157
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人