![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 81
凌览1
这个作者很懒,什么都没留下…
展开
-
定义一个常量,它真的不变吗?
中一旦被定义就无法再被修改的变量,称之为常量。ES6中通过定义常量,常量通常用大写字母定义,多个单词之间用_分隔。定义常量后,如果修改常量会报错:这是定义常量的特点之一。但当我们使用 定义常量,而赋值的是一个引用类型值,再修改常量可不一定报错了!!!上述示例代码,即使进行了修改,它也不会出现任何报错。回到真实企业项目,团队开发团队中每一位成员技术水平肯定是有区别的。当定义一个全局常量 ,如果团队成员分别对进行增删改查,由于不会报错极可能不小心造成 值被修改,影响到其他依赖常量的功能模块。成员a:成原创 2022-06-28 15:23:08 · 528 阅读 · 0 评论 -
仿Mac程序坞放大动画
笔者近期换了台MacBook笔记本💪🏽,使用中发现当鼠标hover到它的程序坞时,有一个非常丝滑的放大动画。感觉非常有意思🤩,趁周末实现下,最后分享给屏幕前爱学习的您!😉真实MacBook笔记本放大动画:仿写的放大动画:实现的关键就是运用了勾股定理计算,所以咱们要复习下初中时期的数学。勾股定理:平面上的直角三角形的两条直角连长的长度的平方和等于斜边长的平方简化成一个公式:a2+b2=c2简单复习下勾股定理,然后将公式对应到咱们的放大动画中。 上图中,假设三角形▲是鼠标,圆○为电脑桌面程序坞中某个应...原创 2022-06-27 15:54:32 · 1403 阅读 · 0 评论 -
实现懒加载的四种方式
个人封装常用方法工具包: https://github.com/lihai-boop/tool文章已收录: https://github.com/lihai-boop/Blog1. 滚动距离计算offsetTop,scrollTop,clientHeight原生API获取距离像素计算offsetTop:获取当前元素与其父级元素顶部内边距的距离scrollTop:当前元素滚动超出的高度clientHeight:当前元素的可视高度"灵魂画手"绘图img元素offsetTop - 父级元素s..原创 2021-09-05 22:52:05 · 5793 阅读 · 0 评论 -
ES2019-2022实用新特性
个人封装常用方法工具包:https://www.npmjs.com/settings/lihai-js/packages文章已收录:https://github.com/lihai-boop/Blog每日一题,刷出强大:https://github.com/lihai-boop/Blog/issues前言ES2019-2022新特性均再nodeJs,浏览器版本支持环境下演示;如实际操作中报错,请考虑兼容性,推荐使用bebal文章列举的特性并不是ES2019-2022全部特性,只摘录其..原创 2021-08-18 21:10:37 · 962 阅读 · 1 评论 -
什么,新增npm包生产环境打包竟然报错!
前言本人在npm发布了一个常用方法工具包@lihai-js/tool,有具体的api说明。@lihai-js/tool github地址github,欢迎大家提issues。项目中新引入@lihai-js/tool包,生产环境下打包竟然报错了!debug报错详情debug思路项目开发环境下完全可以运行开发环境成功打包基于上述两点,判断打包失败,原因在于vue.config.js中插件的使用vue.config.js配置let UglifyJsPlugin = require("ug原创 2021-08-03 11:20:06 · 585 阅读 · 0 评论 -
counter实现图片九宫格超出展示Demo
效果展示绘制大致容器gird简易布局,11个dd元素模拟图片<dl class="view"> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dd>&.原创 2021-07-15 14:57:36 · 348 阅读 · 0 评论 -
CSS::marker让文字序号不再呆板
本文介绍CSS新增的伪元素:marker,它可以改变文字序号样式。什么是::marker::marker是在CSS Lists Module Level 3提出,于CSS Pseudo-Elements Level 4完善。**Chrome86+**对::marker开始支持。元素标签<li>,<summary>,它们display默认为list-item,即会带有呆板的文字序号<ol> <li>::marker</li> .原创 2021-07-01 11:17:02 · 744 阅读 · 0 评论 -
深入剖析This机制
JavaScript中有许多令人困惑的地方,但是,因为这些东西让JavaScript更加强大。例如原型链,闭包等,其中包括this机制,处处坑。This绑定规则this机制有四种绑定的规则:默认绑定,隐式绑定 ,显式绑定 ,new绑定,分别对应函数四种调用方式:函数直接调用 , 对象方法调用,间接调用 ,构造函数调用。**非严格模式下: ** this都会指向一个对象默认绑定全局环境,this指向windowconsole.log(this == window);//true独立调用.原创 2021-06-04 16:08:27 · 412 阅读 · 4 评论 -
看完这篇,让您的js优雅一个档次
上图是我阅读书籍——代码整洁之道,绘制的思维导图。写本篇博客的目的是为了加强记忆,其中关于类模块没有总结,是因为最近在研究设计模式,有一定基础后,写一篇设计模式的学习笔记,其中会包括关于写类需要注意的整洁。一,命名采用描述性名称bad//获取当前时间let yyddss = new Date();goodlet curDate = new Date();说明副作用badfunction getOss(){ if(!oss){ return new Oss..原创 2021-05-20 09:28:44 · 338 阅读 · 0 评论 -
多个Vue项目如何配置nginx
环境基于window,文件中的配置路径为绝对路径。window中配置nginx,路径要使用//代替\业务需求:一个服务器运行两个vue项目,并且要求端口号必须是一致的。实现效果:http://localhost:8080/,http://localhost:8080/screen。一,Vue路由Hash模式配置nginx路径为/访问项目配置:将Vue-router插件中基础路径选项base设置为/。router/index.jsconst router = new VueRouter({.原创 2021-03-14 15:37:10 · 975 阅读 · 0 评论 -
重学Vue Components
完成一个企业级项目后,发现自己对Vue Component使用的不够通透,想重学一遍才有了这篇博客;需要的前置知识:ES6,Vue组件基础知识一,组件注册组件名注册组件时,需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component',{...});Vue.component中第一个参数就是该组件名组件大小写定义组件名方式有两种:短横线分隔命名Vue.component('my-component',{...});使用短线分隔命名.原创 2021-02-12 10:53:41 · 483 阅读 · 2 评论 -
Vue首屏渲染优化
Vue首屏渲染速度优化webpack构建工具会将vue及vue全家桶打包成一个vendors.js文件,体积至少会有一个1mb以上,导致首屏加载会出现长时间的白屏。目录import异步加载CND静态资源压缩分包开启Gizpimport异步加载webpack构建代码时会将js代码打包在一个app.js文件中,页面渲染速度与js代码大小,执行快慢相关。浏览器渲染引擎与js引擎是相斥的,当js执行越慢时,浏览器渲染也会放慢。为了防止app.js过大,需要将首页不需要加载的模块分离出来,只将原创 2021-01-31 10:53:17 · 1391 阅读 · 0 评论 -
Axiosf二次封装,拒绝重复搬砖
Axios封装,拒绝重复搬砖axios是基于promise的HTTP库,可以用于浏览器和Node.js中。但在真实项目中需要对axios进行轻度的封装,告别一些重复操作代码安装导包使用npmnpm i axios使用cdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>我这是使用npm下载,在vue-cil环境下使用创建http.js文件import axios from 'a原创 2021-01-24 21:29:07 · 353 阅读 · 0 评论 -
ESLint入门使用
ESLint入门使用ESLint介绍ESLint是在检查 ECMAScript/JavaScript 语法的一个工具插件,它的目标就是统一代码风格。像SLint,JSHint都是一样的功能,当然它们有不一样的地方,我们只要会使用就够了。而ESLint比较流行会ESLint就够了安装全局安装(推荐)npm i eslint -g本地安装npm i eslint --svae-dev安装后执行下面命令,系统会询问你eslint --init不管你是全局还是本地安装,它都要在本原创 2021-01-01 15:13:45 · 501 阅读 · 0 评论 -
前端Vue+axios实现阿里云oss文件上传(服务端签名直传)
前端Vue+axios实现阿里云oss文件上传(服务端签名直传)问题描述项目需要上传图片至服务器,但因为上传带宽慢,所以需要使用阿里云对象存储OSS用于上传文件,然后将上传后的文件链接处理上传到自己项目的服务器问题一上传文件到服务器端规定请求头中的Content-type使用multipart/form-data形式,由于缺少经验自己并不清楚使用multipart/form-data要如何发送请求问题二服务器端签名直传,首先是后端会提供一个接口,前端请求该接口后会返回一些字段数据,在依据原创 2020-12-28 16:01:18 · 6195 阅读 · 0 评论 -
必知必会MYSQL
什么是MYSQL数据库 MySQL基本命令SQL语句 SQL语句分类 SELECT查询 WHERE条件判断 排序(升序,降序)order by 分组函数 SETECT 语句执行顺序 去重 原创 2020-11-17 10:08:05 · 240 阅读 · 0 评论 -
CSS-Grid网格
CSS grid网格grid网格布局功能强大,属性蛮多。我参考阮一峰老师网络日记,记录下我认为常用属性兼容性设置父元素display为grid,父级区域会被分划成网格,具有块级元素特性 ,若要有行内元素特性可以设置display:inline-grid; <div class="main"> grid </div> <div class="other"> 其他 </div>.ma原创 2020-11-01 20:06:13 · 304 阅读 · 0 评论 -
令面试官点赞项目之Header
网易云项目暂未全部做完,我会陆续对该项目分成五篇博客介绍,总结出来。如果大家有兴趣请关注我哦项目介绍该项目是编写网易云音乐前端功能,后台接口为github开源项目网易去音乐NodeJs。具体实现的功能有音乐,mv,视频播放,登陆注册等功能。技术栈:vue,vue-router,vuex,element-ui,TypeScript,sass预处理,axios后台接口文档:https://neteasecloudmusicapi.vercel.app/#/?id=%e5%ae%89%e8%..原创 2020-10-25 18:21:46 · 241 阅读 · 0 评论 -
ES6面试必问知识点复习
ES6面试必问知识点复习课程视频保存在百度网盘中,想看的自取https://pan.baidu.com/s/1gUP_Sh8mTRCwZ56vNV7yzQ提取符:svl7SymbolES6中新加入的唯一值,原始数据类型(基本数据类型)唯一属性:防止同名属性,及被改写或覆盖消除魔术字符串:在代码中多次出现,let m = Symbol();let n = Symbol();m === n //fales做私有属性let n = Symbol("N");let obj =原创 2020-09-04 11:27:05 · 228 阅读 · 0 评论 -
踩坑localStorage总结
大家好,我是码爸爸????,每天努力一点点????,就能升职加薪????当上总经理出任CEO迎娶白富美走上人生巅峰????,想想还有点小激动呢????。奥力给!!前言:每天看视频学习是不行的,要适当的写几个dome,把该有的坑踩一遍。前天自己写一个以localStorage储存数据的商品购物车,不多bb,直接上展示链接https://lihai-boop.github.io/mySOL/%E5%95%86%E5%93%81%E8%B4%AD%E7%89%A9%E8%BD%A6/html/index原创 2020-06-09 08:00:54 · 1908 阅读 · 0 评论 -
瞧,这代码咋这么风骚呢
大家好,我是码爸爸????,每天努力一点点????,就能升职加薪????当上总经理出任CEO迎娶白富美走上人生巅峰????,想想还有点小激动呢????。奥力给!!前言:天天写代码,可代码可读性强吗?我写代码反正是乱七八糟,只要功能正常就是行,但我害怕那天有人维护我写的代码想偷偷砍死我????,所以必须要下狠手保命了❗️目录:简化立即执行函数条件判断如何优雅小数取整强类型风格写代码减少作用域查找ES6简化代码简化立即执行函数(function(){ ...})()立即执行原创 2020-05-21 10:25:06 · 286 阅读 · 0 评论 -
前端奇技淫巧之js调试
console详情个人博客:lihai-boop.github.io上班写bug,下班修bug。调试在日常开发中占大半,相信小伙伴们和我一样,调试只会用console.log。今天我们一起学习其他js调试工具,帮忙我们提高效率。首先看下console对象中有什么我们不知道的方法哎呀,不看不知道,一看吓一跳。简单的console居然有这么多方法!console.log()相信小伙伴们会拍着胸口说:不就是简单的输出吗?console.log("Hello World")js入门级别的代码。但原创 2020-05-17 09:44:19 · 4089 阅读 · 5 评论 -
总结字符串方法
字符串方法查找指定字符串indexOf()方法返回字符串指定位置的索引,未找到时返回-1lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引,未找到时返回-1;该方法与indexOf()如出一辙,唯一不同的是lastIndexOf()从字符串的后面开始 let str = "abab"; console.log(str.indexOf("a"))...原创 2020-04-18 15:33:37 · 186 阅读 · 0 评论 -
javaSrcript继承
1.什么是继承使用继承的好处:代码复用,代码抽象举个例子:classA,classB,classA中有一个方法,classB中也有一个方法,我们想使用classA,classB中的方法,如果不使用继承,只能在classA中定义classB中的方法,或在classB中定义classA的方法,这样代码比较囊肿继承可以解决,classA继承classB,classA就拥有了classB中的方法,...原创 2020-03-09 11:17:49 · 180 阅读 · 0 评论 -
jq页面切换插件
学习前端已经大半年了,也算有点小东西。今天写下博客记录下。经常在页面中看一些数据超出页面不会显示,要点击切换页面按钮才会出现。思路:1.利用jquery的实例扩展的方法,增加实例方法,2.所有的步骤全部放在一个函数对象中,在实例方法中只要new一下,然后在调用函数对象中的init方法3.元素包裹,全部的按钮用li完成,li全部放入ul中。省略号用span4.不管页面有无数据当前页不可...原创 2020-03-05 14:06:52 · 281 阅读 · 0 评论