![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript知识点
文章平均质量分 75
IT 哈
这个作者很懒,什么都没留下…
展开
-
区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置。clientX clientYevent.clientXevent.clientYclient直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。client范围兼容性:IE和主流游览器都支持。offse转载 2022-07-06 19:17:53 · 926 阅读 · 0 评论 -
使用Actor模型管理Web Worker多线程
前端固有的编程思维是单线程,比如JavaScript语言的单线程、浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力。这篇文章简单记录一下搜狗地图WebGL引擎(下文简称WebGL引擎)使用Web Worker的一些实践方案,虽然这个项目最终夭折并且我也从搜狗离职了,但在开发WebGL引擎过程中的一些心得和实践还是值得写一写的。搜狗地图WebGL引擎使用Actor模型管理worker线程,所以这篇文章就围绕这一点展开,包括以下内容: WebGL引擎为何转载 2022-05-21 17:42:48 · 288 阅读 · 0 评论 -
async 与 await 的用法详解
async概念用于声明异步函数,返回值为一个Promise对象,它以类似同步的方式来写异步方法,语法与声明函数类似,例如:async function fn() { console.log('Hello world!');}console.log(fn().constructor); // Promise()// 这里证明其返回值为一个 Promise 对象;返回值也许这里会有疑问,返回值是 Promise 对象,那么函数本身定义的返回值跑到哪里去了呢?其实,...转载 2022-05-21 09:59:45 · 14315 阅读 · 7 评论 -
常用的前端JavaScript方法封装
1、输入一个值,返回其数据类型function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele])..转载 2018-09-06 15:06:39 · 161070 阅读 · 23 评论 -
【JS基础】JavaScript中的void 0
众所周知,Undefined是JS语言中的7大基本类型之一,表示未定义,它的值只有一个,就是undefined。任何变量在赋值前都是undefined。而在一些框架源码中,会出现一些这样的表达式: if (context === void 0) return func; function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } if (array == n转载 2022-01-25 09:10:48 · 3923 阅读 · 0 评论 -
腾讯企鹅辅导 H5 性能极致优化总结
项目背景H5 项目是企鹅辅导的核心项目,已迭代四年多,包括了课程详情页/老师详情页/报名页/支付页面等页面,构建产物用于企鹅辅导 APP/H5(微信/QQ/浏览器),迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢,为了提升用户体验,近期启动了 “H5 性能优化” 项目,针对页面加载速度,渲染速度做了专项优化,下面是对本次优化的总结,包括以下几部分内容: 性能优化效果展示 性能指标及数据采集 性能分析方法及环境准备 性能优化具体实践 一、性能指标及数据采转载 2021-09-17 18:39:47 · 366 阅读 · 0 评论 -
发现一个小网站!分别是学习 Git、SQL、正则表达式的在线练习平台。
大家好,我是小贺。大家有没有这种感觉,理论知识虽然比较干货,但学起来确实会比较枯燥。如果搭配一些图解或者动画的形式,可能会比纯文字更好理解,学起来也更加有趣。所以在学习新技术时,我会有意无意的去搜索是否有在线动画或者练习的平台,你还别说,有的大神真就做了很不错的在线练习平台。下面就根据小贺实际使用情况,介绍几个平台,分别是学习 Git、SQL、正则表达式的在线练习平台。动画练习 Git这是个叫做 Learning Git Branching 的项目,强烈推荐。正如对话框中的自转载 2021-09-14 18:07:22 · 413 阅读 · 0 评论 -
是时候开始用 CSS 自定义属性了
自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如: --main-color: black;),由var() 函数来获取值(比如: color: var(--main-color);) 复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。另转载 2021-09-13 10:45:47 · 630 阅读 · 0 评论 -
原生JS封装拖动验证滑块你会吗?
前言就想写个库玩玩最终效果分析看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup其次要支持用户传入放置这个组件的dom元素和完成的回调事件。最终如何使用?我们先来看下使用方式,再来决定我们怎么编写这个库具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esModule的导入方式。编写库的整体初始框架(function () { // ==========转载 2021-09-13 10:41:20 · 297 阅读 · 0 评论 -
用zrender实现工作流图形化设计(附范例代码)
公司研发的管理系统有工作流图形化设计和查看功能,这个功能的开发历史比较久远。在那个暗无天日的年月里,IE几乎一统江湖,所以顺理成章地采用了当时红极一时的VML技术。后来的事情大家都知道了,IE开始走下坡路,VML这个技术现在早已灭绝,导致原来的工作流图形化功能完全不能使用,所以需要采用新技术来重写工作流图形化功能。多方对比之后,决定采用zrender库来实现(关于zrender库的介绍,请看http://ecomfe.github.io/zrender/),花了一天的时间,终于做出了一个大致的效果模转载 2021-09-13 10:36:14 · 611 阅读 · 0 评论 -
一次性讲明白vue插槽slot
我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。以下文章来自掘金 作者:JH30K 链接:https://juejin.im/post/5ed61cd86fb9a047a43444d6一、前言vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢? 我们在构建页面过程中一般会...转载 2021-09-13 10:30:38 · 140 阅读 · 0 评论 -
【Web技术】1075- Emoji 表情还能这样玩?
「绘文字(日语:絵文字/えもじ emoji)」是日本在无线通信中所使用的视觉情感符号,绘指图画,文字指的则是字符,可用来代表多种表情,如笑脸表示笑、蛋糕表示食物等。在平时的工作和生活中,我们也经常使用到 Emoji 表情。相信大家对以下这些 Emoji 表情都不会陌生:利用 Emoji 表情不仅可以增加聊天的乐趣性,而且还可以玩出一些 “花样”。比如在地址栏上实现 url 动画:在以上动图中,最下方 Tab 页显示的是「音/视频播放器的播放进度条」。不仅如此,我们还可以利用 Emoji ..转载 2021-09-09 09:42:39 · 177 阅读 · 0 评论 -
10款2021年国外顶尖的lowcode开发平台
低代码开发平台是一种为用户提供图形界面进行编程的应用程序,通过这种方式我们可以非常快速地开发代码并减少传统的编程工作。这些工具通过减少手工编码的工作量来帮助快速开发代码。它们不仅有助于编码,还有助于快速设置和部署。笔者近期调研了几家国外的lowcode平台, 也参考了很多资料, 确实收获很多, 接下来就来给大家介绍一下国外比较有名的lowcode开发平台.关注并将「趣谈前端」设为星标每早08:30按时推送技术干货/优秀开源/技术思维趣谈前端徐小夕【知乎专栏作家】掘金优秀作者,.转载 2021-09-07 13:13:46 · 393 阅读 · 0 评论 -
JavaScript插件编写
在jQuery大量使用的环境下,目前网上的众多jQuery插件也能基本满足要求,但是在项目具体需求下,有时候依旧需要自己造轮子,本文介绍了如何不依赖jQuery等库进行原生JavsScript插件的编写。插件需要满足的条件一个可复用的插件需要满足以下条件:插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量; 插件需具备默认设置参数; 插件除了具备已实现的基本功能外,需提供部分API,使用者可以通过该API修改插件功能的默认参数,从而实现用户自定义插件转载 2021-09-07 13:03:38 · 976 阅读 · 0 评论 -
从零开始编写一个js插件
什么是js插件首先我们必须要明白什么是js插件,说的简单点,类似于function add(a, b){ return a+b; }这就是一种插件的雏形,因为它还没有封装起来, 它会影响到工作区的其他参与者(函数),也就是说它有可能会影响到其他成员,这样并不好。封装想要插件不影响本身的命名空间的话,使用匿名函数是最好的方式之一,由于JavaScript本身是基于函数作用域的,也就是说只要是在自身的函数范围内,那么便不会与其他同名变量或者函数造成冲突。匿名函数本身连函数名都可以转载 2021-09-07 11:36:41 · 4313 阅读 · 0 评论 -
如何定义一个高逼格的原生JS插件
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库,否则装得不够高端。那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦。以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了。不过,也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的js插件吧。插件的需求我们写代码,并不是所有的业务或者逻辑代码都要抽出来复用。首先,我们得看一下是否需要转载 2021-09-07 11:29:36 · 221 阅读 · 0 评论 -
8个非常实用的Vue自定义指令
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令,新建directives/index.js文件 1 2 3...转载 2021-08-25 20:11:04 · 719 阅读 · 0 评论 -
理解JavaScript Call()函数原理。
最近在做面试题的过程中偶然碰到关于call函数的问题。然后再百度上查了查。偶然看到一篇文章:JavaScript中的call、apply、bind深入理解抛开其对call函数基本概念的介绍还有其他原理的介绍。其中一段函数吸引了我。function fn1(){ console.log(1);}function fn2(){ console.log(2);}fn1.call(fn2); //输出 1 fn1.call.call(fn2); //输出 2.转载 2021-08-25 19:58:20 · 432 阅读 · 0 评论 -
__defineGetter__ 引发的思考
问题那天朋友分享了一个面试题,自己当时不会,代码如下:(function(){ var u = { a: 1, b: 2 }; var r = { m: function(k){ return u[k]; } } window.r = r;})()var R = window.r;alert(r.m('a'))很简单,alert的结果是1。但是题目却是另外一个说法,能不能通过r.m获取到u?转载 2021-08-24 13:46:28 · 366 阅读 · 0 评论 -
JS对象中常见的操作方法
本文内容: 介绍对象的两种类型 创建对象并添加属性 访问对象属性 删除对象属性 作为函数参数 枚举对象的属性 数据类型检测 Object常用的API 一、JavaScript对象有两种类型 Native:在ECMAScript标准中定义和描述,包括JavaScript内置对象(数组,日期对象等)和用户自定义对象; Host:在主机环境(如浏览器)中实现并提供给开发者使用,比如Windows对象和所有的DOM对象转载 2021-08-24 08:37:23 · 2427 阅读 · 0 评论 -
JS中关于clientWidth offsetWidth scrollWidth 等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth(包括边线的宽);网页可见区域高: document.body.offsetHeight(包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen...转载 2021-07-25 18:56:53 · 426 阅读 · 0 评论 -
正确开启Mockjs的三种姿势:入门参考(一)
一、文章初衷阅读本文章需要注意以下几点:文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结想主要介绍如何使用Mockjs,是因为发现网上针对这方面的资料好像并不多,并且比较分散。想要做一次总结,希望能帮助解决入门Mockjs的新人使用的一些疑惑1.1 简单介绍一下Mock.js众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片转载 2021-07-04 20:43:35 · 386 阅读 · 0 评论 -
qs.parse()、qs.stringify()使用方法
qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.qs.parse()将URL解析成对象的形式const Qs = require('qs');let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';Qs.parse(url);console.log(Qs.parse(url)); 如上面..转载 2021-07-04 19:13:09 · 228 阅读 · 0 评论 -
Vue 路由权限控制
当我们在做后台管理系统的时候,都会涉及到系统左侧的菜单树如何动态显示的问题。目前基本上都是RBAC的解决方案,即Role-Based Access Control,权限与角色相关联,用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。vue有很多优秀的后台管理系统模板,这些开源项目都提供了RBAC权限控制的思路,但是在实际项目中,写死角色的方式可能并不适合。看了网上蛮多的解决方案,个人感觉都有弊端,好多都是前端先把完整的路由表注册到项目中,然后通过后台返回树过滤显示的转载 2021-07-02 09:03:28 · 2217 阅读 · 0 评论 -
面试官:Vue要做权限管理该怎么做?控制到按钮级别的权限怎么做?
一、是什么权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说,所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入手,对触发权限的源头进行控制,最终要实现的目标是: 路由方面,用户登录后只能看到自己有权访问的导航菜单,也只能访问自己有权访问的路由地址,否则将跳转4xx提示页 视图方面,用户只能看到自己有权浏...转载 2021-07-02 08:58:31 · 462 阅读 · 0 评论 -
深入理解定位父级offsetParent及偏移大小
前面的话 偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然,还有一个偏移参照——定位父级offsetParent。本文将详细介绍该部分内容定位父级 在理解偏移大小之前,首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关转载 2021-07-01 17:53:38 · 409 阅读 · 0 评论 -
Cookie、session和localStorage、以及sessionStorage之间的区别
cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie,不同的浏...转载 2021-06-30 11:34:55 · 97 阅读 · 0 评论 -
轻松理解HTTP缓存策略
上一篇文章我写了koa-static的源码解析,其中用到了HTTP的缓存策略,给返回的静态文件设置了一些缓存的头,比如Cache-Control之类的。于是我就跟朋友讨论了一下HTTP的缓存策略:朋友说:“HTTP里面控制缓存的头(header)太多了,啥Cache-Control,ETag,Last-Modified,一大堆,乱七八糟的,而且之间逻辑关系不强,要掌握基本靠背!”我有点惊讶:“为什么要去背这个呢?所有的技术都是为了解决问题而存在的,不了解问题而去单纯的学习技术,去,背,去,死记,确实转载 2021-06-25 23:26:43 · 216 阅读 · 0 评论 -
学Vue,就要学会vue JSX(二)
学习JSX,先了解一下createElement提到JSX,不可避免的就要提到createElement,当你看完本节,你会发现,奇怪的知识又增多了。ok,我们接着上一部分继续讲。这一次的准备工作是了解createElement。从Vue编译后的代码看createElement你是否看过写的Vue代码经过编译之后的样子,比如下面这段代码 <template> <div>我喜欢<span class="emphasize">前端</span&g转载 2021-06-23 10:33:13 · 415 阅读 · 0 评论 -
学Vue,就要学会vue JSX(一)
最近在做一个项目,然后里面也用到了jsx。因为其实有一些功能也需要更加灵活的去处理。介绍一下JSXJSX 简介JSX是一种Javascript的语法扩展,JSX=Javascript+XML,即在Javascript里面写XML,因为JSX的这个特性,所以他即具备了Javascript的灵活性,同时又兼具html的语义化和直观性。应用场景为了让大家更方便的去理解JSX的作用及用法,我先为大家罗列了几个可能会用到JSX的应用场景。在消息框内添加html在开发过程中,经常会用...转载 2021-06-23 10:32:15 · 258 阅读 · 0 评论 -
学Vue,就要学会vue JSX(三)
是时候使用JSX代替createElement了接着上面的讲,当我们看到上面用createElement去实现组件,太麻烦了,别说工作效率提高了,就是那些嵌套可以嵌套正确就很赞了,所以我们需要用JSX去简化整个逻辑。当年我做项目的时候就遇到过这样的情况,嵌套太多,自己都快搞不明白了,在崩溃的边缘。 methods: { $_handleInputUser(value) { this.formInline.user = value }, $_handleChangeReg转载 2021-06-23 10:29:51 · 368 阅读 · 0 评论 -
vue项目为路径设置别名和关闭提示
在项目根路径下创建vue.config.jsconst path = require('path'); //引入path模块function resolve(dir) { return path.join(__dirname, dir) //path.join(__dirname)设置绝对路径}module.exports = { lintOnSave: false, chainWebpack: (config) => { config.resolv原创 2021-06-23 10:26:13 · 545 阅读 · 0 评论 -
一个原生JavaScript实现的简易数据视图单向绑定实例
<div id="app"> <h2 class="title" data-on="title"></h2> <div class="content" data-on="content"></div> <div class="count" data-on="count"></div> <div class="control"> <label for="content-input...转载 2021-06-23 09:23:21 · 161 阅读 · 0 评论 -
从JavaScript属性描述器剖析Vue.js响应式视图
学习每一门语言,一般都是从其数据结构开始,JavaScript也是一样,而JavaScript的数据结构中对象(Object)是最基础也是使用最频繁的概念和语法,坊间有言,JavaScript中,一切皆对象,基本可以描述对象在JavaScript中的地位,而且JavaScript中对象的强大也使其地位名副其实,本篇介绍JavaScript对象属性描述器接口及其在数据视图绑定方向的实践,然后对Vue.js的响应式原理进行剖析。前言JavaScript的对象,是一组键值对的集合,可以拥有任意数量的.转载 2021-06-23 09:12:23 · 109 阅读 · 0 评论 -
从JavaScript属性描述器剖析Vue.js响应式视图
前言JavaScript的对象,是一组键值对的集合,可以拥有任意数量的唯一键,键可以是字符串(String)类型或标记(Symbol,ES6新增的基本数据类型)类型,每个键对应一个值,值可以是任意类型的任意值。对于对象内的属性,JavaScript提供了一个属性描述器接口PropertyDescriptor,大部分开发者并不需要直接使用它,但是很多框架和类库内部实现使用了它,如avalon.js,Vue.js,本篇介绍属性描述器及相关应用。定义对象属性在介绍对象属性描述之前,先介绍一下如何定义对转载 2021-06-23 09:10:51 · 102 阅读 · 0 评论 -
Vue里require(‘../config‘) 如何加载index.js
1. 前言最近在学习Vue,直接用vue-cli构建项目后,在 webpack-base-conf.js 里有 var config = require('../config') 这段代码,执行中实际是 var config = require('../config/index.js') , 参考了阮大大的文章:传送门终于明白如何加载的。(只想明白require用法直接看下面即可)2.require的用法 2.1当 Node 遇到 require(X) 时,按下面的顺序处理。2.1.1...转载 2021-06-23 09:09:56 · 347 阅读 · 0 评论 -
Vue render函数
前几天想学学Vue中怎么编写可复用的组件,提到要对Vue的render函数有所了解。可仔细一想,对于Vue的render函数自己只是看了官方的一些介绍,并未深入一点去了解这方面的知识。为了更好的学习后续的知识,又折回来了解Vue中的render函数,这一切主要都是为了后续能更好的学习Vue的知识。回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识,我们有必要重温一下Vue中的一些基本概念。那么先上一张图,这张图从宏观上转载 2021-06-23 09:06:28 · 308 阅读 · 0 评论 -
Vue里require(‘../config‘) 如何加载index.js
1. 前言最近在学习Vue,直接用vue-cli构建项目后,在 webpack-base-conf.js 里有 var config = require('../config') 这段代码,执行中实际是 var config = require('../config/index.js') , 参考了阮大大的文章:传送门终于明白如何加载的。(只想明白require用法直接看下面即可)2.require的用法2.1当 Node 遇到 require(X) 时,按下面的顺序处理。2.1.1 ...转载 2021-06-16 15:40:16 · 549 阅读 · 0 评论 -
js属性对象的hasOwnProperty方法
Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性。判断自身属性是否存在var o = new Object();o.prop = 'exists';function changeO() { o.newprop = o.prop; delete o.prop;}o.hasOwnProperty('prop'); // truechangeO();o.hasOwnProperty('prop'); // false转载 2021-06-16 09:08:26 · 129 阅读 · 0 评论 -
深入理解vue 一些底层原理
一 理解vue的核心理念使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念.那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框...转载 2021-06-08 12:05:45 · 414 阅读 · 0 评论