![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 72
javascript艺术
不积跬步无以至千里,不积小流无以成江河!功不唐捐,玉汝于成!
展开
-
深入理解javascript对象
深入理解javascript对象原创 2022-08-04 17:19:56 · 220 阅读 · 0 评论 -
微前端落地,乾坤小有乾坤
什么是微前端通俗易懂的来说,微前端是可以将一个大应用的不同部分进行独立的部署,各个部分之间相互独立,独立部署的能力允许他们构建孤立或松散耦合的服务。 即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。微前端的核心设计理念技术栈无关主框架不限制接入应用的技术栈,微应用具备完全自主权 独立开发、独立部署微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 增量升级在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微...原创 2022-04-20 19:39:15 · 169 阅读 · 0 评论 -
vue如何获取proxy对象里的属性值
proxy打印出来是一个这样的对象直接打印proxy里面的值可能会报undefined最简单的解决办法就是: // 导入toRaw函数 import { toRaw } from '@vue/reactivity'; // 该函数返回转换后的对象 const crystal = toRaw(menu); // 输出可以看到已经不是proxy对象了 console.log(crystal);这样就能打印出proxy里原始的对象...原创 2022-01-26 11:08:24 · 8438 阅读 · 3 评论 -
彻底搞懂 JavaScript 执行机制
不管你是前端新手还是老鸟,在日常的工作或者面试的过程中总会遇到这样的情况:给定的几行代码,写出其输出内容和顺序。所以我们就需要搞懂javascript的运行原理和执行机制前言首先,我们先看一道经典的面试题setTimeout(function(){ console.log('定时器开始啦')});new Promise(function(resolve){ console.log('马上执行for循环啦'); for(var i = 0; i < 10000; i+...原创 2021-06-10 10:51:22 · 392 阅读 · 2 评论 -
前端实用操作符,一些写代码的骚操作
一些常用的操作符可以让你的前端代码更加简洁明了。本文整理一些 JS 中常用的运算符/操作符,其目的在于简化代码。1、?? 操作符 空值合并/空判断空值合并运算符 , 如果第一个参数不是null或者undefined,这个运算符将返回第一个参数,否则,它将返回第二个参数null ?? 3 //3undefined ?? 3 //37 ?? 3 //72、?. 操作符 null传导符(或链判断操作符)在js,如果读取对象里的某个属性时,往往需要先判断对象是否存原创 2021-05-14 11:35:03 · 515 阅读 · 4 评论 -
ES6数组对象去重复
数组对象去重复的原理很简单,就是利用对象,对象的key值只有一个。代码如下 const template = [ { group_id: 1, name: 1 }, { group_id: 2, name: 2原创 2021-04-30 18:46:15 · 1503 阅读 · 4 评论 -
qiankun微前端初体验
什么是微前端通俗易懂的来说,微前端是可以将一个大应用的不同部分进行独立的部署,各个部分之间相互独立,独立部署的能力允许他们构建孤立或松散耦合的服务。即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。微前端的核心设计理念技术栈无关主框架不限制接入应用的技术栈,微应用具备完全自主权独立开发、独立部署微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端原创 2021-04-11 14:15:41 · 277 阅读 · 2 评论 -
浏览器输入url访问网站的全过程
浏览器输入url访问网站的全过程当输入url时,浏览器作为客户端首先会请求DNS服务器,通过DNS获取相应的域名和IP(应用层)通过IP地址找到对应的服务器,然后建立TCP连接浏览器向服务端发送http请求包(应用层 -> 传输层 -> 网络层 -> 数据链路层))服务端接受到http请求包后开始处理请求包(数据链路层 -> 网络层 -> 传输层 -> 应用层)在服务器收到请求之后,服务器调用自身服务,返回响应包浏览器接收到响应包后开始进行页面的渲染网络原创 2021-04-03 11:32:39 · 3181 阅读 · 0 评论 -
js 字节转换为B,KB,GB等
function bytesToSize(bytes) { if (bytes === 0) return '0 B'; let k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)). toFixed(2) + ' ' + siz.转载 2020-05-22 09:14:53 · 430 阅读 · 0 评论 -
vue递归获取父元素的元素
getParentTag(startTag) { var self = this; // 传入标签是否是DOM对象 if (!(startTag instanceof HTMLElement)) return; // 父级标签是否是body,是着停止返回集合,反之继续 let nodeName = ""; if (s...原创 2020-04-17 10:05:32 · 2258 阅读 · 0 评论 -
正则0.5的倍数
0.5倍数的正则^[1-9]\d*\.[5]$|0\.[5]$|^[1-9]\d*$0.5倍数校验函数validtorkNull(key, value, callback) { // let self = this; if (!/^[1-9]\d*\.[5]$|0\.[5]$|^[1-9]\d*$/.test(value)) { ca...原创 2020-04-17 09:53:56 · 3006 阅读 · 1 评论 -
js如何判断用户使用的设备类型及平台
前端开发经常遇到需要判断用户的浏览设备,是什么手机系统?android,ios,ipad,windows phone等等,有时候还需要知道用户浏览页面是在微信中打开还是在移动端浏览器中打开,等等一系列判断做一些相应的处理。 1、首先判断PC端还是移动端。 1 function IsPC() { 2 var userAgentInfo = navigator.u...转载 2020-03-22 11:07:37 · 953 阅读 · 0 评论 -
大厂前端面试总结
参考原文地址掘金1掘金21. 基本类型有哪几种?null 是对象吗?基本数据类型和复杂数据类型存储有什么区别?undefined、null、boolean、string、number、symbol虽然 typeof null 返回的值是 object,但是null不是对象,而是基本数据类型的一种。基本数据类型存储在栈内存,存储的是值。复杂数据类型的值存储在堆内存,地址(指向堆中的值)...原创 2019-12-02 17:24:08 · 264 阅读 · 0 评论 -
js防抖和节流
js防抖和节流防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调用一次,而节流的 情况会每隔一定时间(参数wait)调用函数。js防抖当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了...原创 2019-11-28 14:43:16 · 237 阅读 · 0 评论 -
js中的数据类型,基本数据类型和引⽤数据类型的区别
js中的数据类型,基本数据类型和引⽤数据类型的区别js分为基本数据类型和引用数据类型基本数据类型: Number、String、undefined、null、boolean、Symbol引用数据类型: Array、Object、 类数组基本数据类型的变量存放的是基本类型数据的实际值,是存放在栈中引用数据类型的变量保存对它的引用,即指针,是存放在堆中...原创 2019-11-27 18:43:25 · 275 阅读 · 0 评论 -
js闭包
闭包什么是闭包: 函数funOne返回了函数funTwo;并且函数funTwo能够访问函数funOne中的变量,函数funTwo称为闭包,简单的说,闭包就是函数能够访问另一个函数里的变量function funOne() { let a = 1 function funTwo() { console.log(a) } return funTwo}闭包解决...原创 2019-11-27 18:34:01 · 99 阅读 · 0 评论 -
js垃圾回收机制
js垃圾回收机制参考基本的垃圾回收算法称为“标记-清除垃圾回收器获取根并“标记”(记住)它们。然后它访问并“标记”所有来自它们的引用。然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住直到有未访问的引用(可以从根访问)为止除标记的对象外,所有对象都被删除。垃圾回收机制的一些优化分代回收——对象分为两组:“新对象”和“旧对象”。许多对象出现,完成它们的工作并迅...转载 2019-11-27 18:00:24 · 113 阅读 · 0 评论 -
js判断是否为对象
js判断是否为对象参考 https://juejin.im/post/5cab0c45f265da2513734390使用 Array.isArray 判断,如果返回 true, 说明是数组使用 instanceof Array 判断,如果返回true, 说明是数组使用 Object.prototype.toString.call 判断,如果值是 [object Array], 说明是数...转载 2019-11-26 17:21:38 · 227 阅读 · 0 评论 -
什么是原型、原型链
什么是原型、原型链详细介绍 https://github.com/KieSun/Dream/issues/2原型所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象所有函数都有一个prototype(原型)属性,属性值是一个普通的对象所有引用类型的__proto__属性指向它构造函数的prototypevar a = [1,2,3];a.__proto_...原创 2019-11-26 13:48:03 · 2523 阅读 · 0 评论 -
bind、call、apply 区别和实现原理
bind、call、apply 区别和实现原理call 和 apply 都是为了解决改变 this 的指向。作用都是相同的,只是传参的方式不同。除了第一个参数外,call 可以接收一个参数列表,apply 只接受一个参数数组。func.call(thisArg, arg1, arg2, …):第一个参数是 this 指向的对象,其它参数依次传入。func.apply(thisArg, [ar...原创 2019-11-26 11:13:50 · 351 阅读 · 0 评论 -
js取数组中的最大值
js取数组中的最大值js取数组中的最大值,有四种方法原文地址:https://www.cnblogs.com/lguow/p/9725258.html一、借助apply(),获得最大值var arr = [1, 2, 3, 4, 5, 6]var max = Math.max.apply(null,arr);console.log(max) //6由于max()里面参数不能为数组...原创 2019-11-08 18:21:25 · 27865 阅读 · 1 评论 -
vue有纵向和横向表头表格
github源码地址:https://github.com/zhjing1019/moreTreeTable使用方法一、下载该组件npm install more-tree-table二、多表头表格 <more-tree-table :colData="colHead" :rowData="rowHead" :tableValue="t...原创 2021-04-01 20:22:11 · 14806 阅读 · 34 评论 -
发布npm包时遇到的一些坑
原文链接链接:https://www.jianshu.com/p/40f732d91a8c我感觉发布过程中的坑让我踩的差不多了...在这里记录一下基本流程先简单记录一下发布流程初始化包npm init登录npmnpm login发布包npm publish问题接下来就是遇到的问题了,每个问题都包含报错信息,请善用ctrl + f搜索,下文报...转载 2019-11-04 14:52:41 · 12415 阅读 · 0 评论 -
手把手教你用npm发布包
原文链接:https://blog.csdn.net/taoerchun/article/details/82531549一、发布一个新包第一步:进入要发布的项目根目录,初始化为npm包:npm init依次按提示填入包名、版本、描述、github地址、关键字、license等这步完成之后会生成一个package.json文件,上面输入的这些信息可以在该文件中修改注意:如果你...转载 2019-11-04 14:46:13 · 138 阅读 · 0 评论 -
js递归调用注意return返回值
headWidthField(data, arr = []) { if (this.isChildren(data) > 0) { let two = []; data.forEach(x => { if (x.children && x.children.length > 0) { ...原创 2019-05-16 10:32:51 · 2497 阅读 · 0 评论 -
vue数据不实时更新(数据更改了,但数据不实时更新)
一、在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法二、Vue.set() 响应式新增与修改数据此时我们需要知道Vue.set()需要哪些...原创 2019-05-16 10:23:58 · 26029 阅读 · 2 评论 -
js判断对象不为空对象
一、我用的ES6判断对象不为空对象let data = {};//判断空对象let count = Object.keys(data).length;//用Object.keys(data).length来判断是否味空对象, 如果为空对象,length == 0二、JSON.stringify(evtValue)=='{}'欢迎关注我的个人技术公众号!javas...原创 2019-05-16 10:01:04 · 14875 阅读 · 0 评论 -
js监听滚动到相应的div
<nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Skill">Skill</a></li&原创 2018-11-02 11:36:52 · 3961 阅读 · 0 评论 -
使用webstorm操作git
使用webstorm操作git0. 前言在上一篇文章中,讲述了使用webstorm去调试node程序,最近研究了一下如何使用webstorm去操作git。对于git的使用,大家的使用方式均有不同,最王道的方式非命令行莫属,基于git的GUI软件还是很多的,大家可自行研究使用。之前使用eclipse svn插件去操作版本管理,还是很便捷的一件事情。而今用惯了webstorm,转载 2017-11-10 14:31:58 · 695 阅读 · 0 评论 -
vue自定义指令
转自:https://www.cnblogs.com/ylHeyden/p/7544373.htmlVue的官方自定义directive,基本调用简洁如下:Vue.directive('my-directive', { bind: function () {},// 指令与被绑定元素第一次绑定时触发,通常做一些事件监听的初始化 inserted: function () {...转载 2019-05-17 14:31:46 · 257 阅读 · 0 评论 -
vue对象改变,页面并不更新
一、如下代码,给 student对象新增 age 属性data () { return { test: { name: '', age: '' } }}二、众所周知,直接给test赋值操作,虽然可以新增属性,但是不会触发视图更新mounted () { this.tes...原创 2019-07-10 09:53:11 · 2251 阅读 · 0 评论 -
vue-cli3配置favicon.ico和title
一、如果是单页面程序public目录下有个index.html和favicon.icoico的路径二、如果是多页面程序publc目录下放ico图标public下的index页面然后在vue.config.js里的page配置ico的路径...原创 2019-08-30 10:54:36 · 4507 阅读 · 0 评论 -
html5中ondrop事件无效
在拖拽事件中遇到目标元素ondrop事件没有效果,需要在目标元素上写ondragover事件,阻止ondragover的默认行为,然后ondrop事件才起作用el.ondragover = function(e){ e.preventDefault();}el.ondrop = function(e){e.preventDefault();}...原创 2019-09-04 11:30:37 · 4708 阅读 · 0 评论 -
vue-router传递参数
一、vue-router传递参数分为三大类(1)声明式的导航 <router-link> //传递参数<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>//接受参数,参数会自动拼接到页面路径中/news?us...原创 2019-09-09 10:48:01 · 115 阅读 · 0 评论 -
H5拖拽的七个事件
一、拖拽元素事件(拖拽源)ondragstart 拖拽开始事件,只能在这个事件的过程中支持dataTransfer通过setData来设置数据。ondrag 拖动过程中持续发生的事件。鼠标移动的过程中会反复的调用此事件。ondragend 拖拽结束事件,鼠标放开时触发,在拖动源中触发,适合清空拖动过程的状态。二、拖拽的目标元素事件ondragenter 元素被拖拽入目标元素时触发...原创 2019-09-09 11:18:29 · 853 阅读 · 0 评论 -
express搭建个人博客(一)
1.首先需要安装node环境,版本最新比较好,最低4.0+吧 我本地的node环境是6.4: 2.express中文官网:http://www.expressjs.com.cn/,在这里大家可以学习完整的express框架 3.到官网可以学一些express的基础用法,初始化一个项目seed可以使用express生成器npm install express-genera...原创 2018-10-09 11:10:14 · 3036 阅读 · 0 评论 -
artTemplate基本语法
这边是以标准语法来操作的。javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。一.artTemplate基本语法结构(1).表达式{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。(2).输出表达式2.1对内容编码输出:{{content}}2.2不编码输出:{{#content}}编码可以防止数据中含有 HTML 字符串,避免引起 XSS...转载 2018-07-14 16:25:10 · 792 阅读 · 0 评论 -
js截取字符串
一、截取字符串有三种方法1、str.slice(starti,endi+1);2、str.substring(starti,endi+1);前俩种方法是代表从starti的下表开始,截取到底end处3、str.substr(starti,n);第三种方法是代表从starti开始,截取n个字符串 var str = "hello world"; var sub原创 2018-01-27 13:17:35 · 255 阅读 · 0 评论 -
js获取浏览器的高度
if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测,获取浏览器窗口高度原创 2017-09-22 16:33:56 · 542 阅读 · 0 评论 -
如何设置输入框 input 中 placeholder的字体颜色、字号
一、须知placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。 二、设置placeholder文字颜色、字号方式1因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。 ::-webkit-input-placeholder { /* WebK转载 2017-10-10 11:30:59 · 1430 阅读 · 0 评论