
javascript
文章平均质量分 83
解析JavaScript的各种基础功能
木子聊前端
一起探究前端的那些坑坑,用故事讲写代码
展开
-
ESLint 的一些理解
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。原创 2023-02-02 16:19:38 · 601 阅读 · 0 评论 -
JavaScript 之this的使用场景和理解
JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在 运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。而在 es6 中 箭头函数 中得到来改善,在定义的时候确定,多数情况是一个比较灵活,还是需要依据执行的环境推理判断从四个大的方向去推理this指向的具体对象作为对象的方法调用作为普通函数调用作为构造函数调用函数的 call 或 apply 方法调用1. 作为对象的方法调用当函数作为对象的方法被调用时,this 指向该对象let obj={ a:原创 2021-04-15 11:37:18 · 149 阅读 · 0 评论 -
有趣的setTimeout--节流和防抖的实现
1. setTimeoutsetTimeout() 是一个默认是全局方法,用来设置一个定时器,该方法在定时器到期后执行一个函数或指定的一段代码语法:let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)参数说明:func|code想要执行的函数或代码字符串。 一般传入的都是函数。由于某些历史原因,支持传入代码字符串,但是不建议这样做。delay执行前的延时,以毫秒为单位(1000 毫秒 = 1 秒),默认值是 0;原创 2021-04-13 17:22:41 · 1196 阅读 · 1 评论 -
proxy 基础-实现响应性和双向数据绑定
proxy 基础用法Proxy 是一个包含另一个对象或函数并允许你对其进行拦截的对象。可以理解为‘代理’;使用proxy,就可以不再操作源数据而实现效果;语法:new Proxy(target,handle)target:监听的目标对象或者方法handle: 参数也是一个对象,用来定制拦截行为,即需要对源对象操作对操作一个完整基础写法:const target={name:'王麻子'}; const handle={ get:function(target,key,receiver){原创 2021-03-30 10:26:18 · 193 阅读 · 0 评论 -
ES6 扩展运算符 三点 ... rest 知识点记录和运用
1. 扩展运算符含义:(狭义)将一个数组转化为用逗号隔开的参数序列,用三个点(...)表示翻译成代码:// 直接输出数组console.log([1,2]); // [1,2]// 输出参数序列console.log(...[1,2]); // 1,2再看来一个例子 … 后面用字符串和对象看看效果// 字符串console.log(...'sfsaf'); // s f s a f// 对象console.log(...{a:'s'}); // Uncaught TypeE原创 2021-03-24 15:35:02 · 497 阅读 · 0 评论 -
npm 包发布与升级--拥有自己的npm包
npm 对于大多数前端开发来说早已经不在陌生,是否也想过拥有一个自己的npm 包,提供给自己或者别人使用;npm 本质和理解NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准npm 包的发布和管理,可以简单理解为上传代码和下载并使用它们。这样可以快速的发布代码哈哈前期准备1、需要有一个账户,毕竟是要传到别人的服务器上,注册地址:https://www.npmjs.com/记住注册账户的名字和密码,npm原创 2021-02-10 15:09:41 · 672 阅读 · 0 评论 -
写了多年的javascript在看 变量类型和类型检查突然明白了什么?
一个变量引发的提交数据bugA同学定义了一个提交对象 submitData ={name:‘xx’,sex:‘x’}, 同时这个对象要展示一个页面 给用户确认姓名:xx ,性别:x ,然后用户点击确认就提交服务端,同时限制了只能是两个属性,一切很美好,测试通过,这天A同学有事休息了。工作交接给B同学,恰好来了一个需求,需要在确认页面,添加一个展示字段,年龄,但是这个年龄不用提交,B同学一想,好简单,按照惯例,增加代码尽量不修改原来的逻辑,这个时候B同学定义了一个变量 showData = submi原创 2021-02-05 18:17:02 · 176 阅读 · 0 评论 -
JavaScript 前端代码优化技巧 一
前言代码优化永远是开发的伴随者,不但影响者性能还影响着代码的可读性,毕竟事件长了。自己也不认识了。优化之后或许还可以一读。看书和网络中查找了一些感觉很有用,逐一记录合并重复的条件片段场景和后端开发人员调试某个业务的时候,通常一个字段包含了几个不同的值,比如 checkCode 为0 为1而 前端需要作出相关判断并调用相关方法:let getData = function (checkCode){ let msg= '正在开业。。'; if (checkCode === '0') {原创 2020-08-06 20:41:33 · 195 阅读 · 0 评论 -
如何在一个万年没有动过的函数添加新的逻辑--js函数扩展
背景对于开发而言,不管是前端还是后端,不可能永远是在新开项目上前行,与之相反更多的是在维护和迭代中 匍匐前进。那么在迭代和维护的路上,多少人来了又去,今天突然接到一个需求需要在一个庞大的项目页面加载完成事件window.onload 里面添加一个新的逻辑的代码,这个时候,通过搜索script标签一看几个百标签,几千行代码在页面运行,每个引入的js代码都有可能包含了onload的绑定事件,每段代码的逻辑错综复杂,已经找不到文档,找不到当年的人,这个时候如何加入一个新的逻辑而不影响其他的。并且保证可以正常运原创 2020-08-04 16:19:23 · 499 阅读 · 2 评论 -
浅谈JavaScript 跨域的几种实现方式
关于跨域用的最多的场景应该就是面试了?同意不何时需要跨域通常情况在项目开发中都是在同一个网站进行,大家都是自己人,相互信任,相互帮助,想要什么自己拿,但是社会是一个小群体和大群体组成,自己人和其他的群体的自己人组成的,用时候我们需要为其他人(其他网站其他源)提供帮助,同样有有时候也需要他人帮助(获取其他网站数据),于是就产生了外交(跨域),当然这种情况不像自己人了。想拿什么就拿什么;需要一些方法或者谈判技巧才能获取别人家的数据,协商一致跨域的四种方法JSONPJsonp(JSON with Pa原创 2020-07-13 17:46:23 · 236 阅读 · 0 评论 -
ajax核心技术 XMLHttpRequest 对象 性能安全 探讨和理解
内容提要XMLHttpRequest (XHR)对象是一个基于浏览器层面的API,可以通过JavaScript 实 现 数 据 传 输。 为后来的AJAX提供了革命性的技术支持;主要 用于与服务器交互XMLHttpRequest 文章中统一用简称(XHR)代替主要讨论XHR 怎么使用?通过js 怎么实现数据传输?既然是基于浏览器的API,浏览器为我们做了那些事情?传输过程的安全机制是怎么产生的?跨域(CORS)是怎么产生的?如何访问跨域?XHR 用法XHR 对象的使用和普通的对象一毛原创 2020-07-13 11:28:53 · 569 阅读 · 0 评论 -
一个被遗忘对象(object)的方法defineProperty
语法 Object.defineProperty(obj, prop, descriptor)obj要操作的对象名称 (必传)prop要定义或者要修改的属性(必传)descriptor要定义或修改的属性描述符 包含如下:原创 2020-07-01 15:10:23 · 304 阅读 · 0 评论 -
JavaScript 我理解的闭包:闭包之模块
了解模块对基本开发概念,加载器对原理,深刻理解闭包对作用模块模式的两个必要条件一、必须有一个外部封装的函数,该函数必须被调用一次(每次都可以创建一个新的模块)二、封闭函数至少返回一个函数。这样才能形成闭包,实现封装私有属性原创 2020-06-24 15:39:22 · 311 阅读 · 0 评论 -
JavaScript 我理解的闭包:概念和基础使用
能够有权限访问另一个函数作用域的变量的函数,就可以称之为闭包函数在当前词法环境之外执行创建闭包就是在一个函数中创建另一个函数原创 2020-06-23 00:02:25 · 189 阅读 · 0 评论 -
javascript 中null 和 undefined 故事
开到代码:log(null == undefined) // true这样故事就绑定了null 和undefined 为什么这种情况 返回的是true,null 和undefined 是同一回事吗?在控制台经常看到的 not is undefined 和 is null以及 undefined 都是同一回事吗?null 和undefined 不一样但是却有着相似的行为表现注意:log 相当与 console.log() 用了结构,文章中出现的地方都一样,方便书写和使用let {lo原创 2020-06-19 11:06:33 · 404 阅读 · 2 评论 -
async 函数JavaScript 最优异步
Async/Await 可以让你轻松写出同步风格的代码同时又拥有异步机制,更加简洁,逻辑更加清晰async function name([param[, param[, ... param]]]) { statements }原创 2020-06-12 17:25:29 · 253 阅读 · 0 评论 -
javascript 之 apply()、call() 探索
apply()方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。apply的主要用途是改变函数的作用域,在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。原创 2020-06-06 10:18:36 · 327 阅读 · 0 评论