![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Javascript
文章平均质量分 59
前端原生js、ts操作
star-1331
码而不思则惘,思而不码则怠
展开
-
ajax同步执行会导致dom操作被挂起
最近在做项目时,触发按钮弹出遮罩层,然后加载对应的接口。在chrome浏览器下,遮罩层总是在接口走完之后才生效。debug代码,发现遮罩层代码先走了就是不生效,后来发现是因为ajax同步导致dom操作被挂起,改为异步即可。cpic.ui.loading.open(); //应该先走它Config.transportPolicytoBackSystem("06", "05",'',policy)...原创 2020-04-30 14:57:03 · 598 阅读 · 0 评论 -
JS模块详解
模块是什么?模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。模块的优点?1.可维护性。因为模块是独立的,一个设计良好的模块会让外面的代码对自己的依赖越少越好,这样自己就可以独立去更新和改进。2.命名空间。在js里面,如果一个变量在最顶级的函数...转载 2019-01-04 13:26:38 · 1224 阅读 · 0 评论 -
Object.defineProperty将普通对象转化为响应式对象
let per = { name:"小明", age:"20", sex:"男"}/**Object.defineProperty(obj, prop, descriptor)三个参数:obj:要定义属性的对象prop:要定义或修改的属性的名称或 Symboldescriptor:要定义或修改的属性描述符configurable:true 该属性的对象能够改变,也能够被删除enumerable:true 是否可以出现在对象的枚举属性中,即能否for...in.value 该属性对应原创 2020-05-20 16:26:31 · 513 阅读 · 0 评论 -
函数式编程之合成与柯里化
什么是柯里化函数分步传递参数,每次传递参数后,部分应用参数,并返回一个更具体的函数接受剩下的参数,中间可嵌套多层这样的接受部分参数的函数,逐步缩小函数的适用范围,逐步求解,直至返回最后结果。听起来有些晦涩,直接上代码,如下add(x,y,z,...) => add(x)(y)(z)...https://blog.csdn.net/qq_39207948/article/detail...原创 2020-04-27 11:40:16 · 460 阅读 · 0 评论 -
异步操作之async
上篇文章讲述了Promise,这次来看一下async。 async函数(包含函数语句、函数表达式、Lambda表达式)会返回一个Promise对象,如果在函数中return一个直接量,async会把这个直接量通过Promise.resolve()封装成Promise对象。由此可以知道,async之所以能够进行异步操作,其实还是Promise在起作用。async function testAs...原创 2018-08-24 14:41:27 · 1523 阅读 · 0 评论 -
拿JS异步函数返回值的几种方式
在我们的编码过程中,为了满足业务需求,经常需要获取JS异步函数的返回值。今天就来汇总一下拿值的几种方式。 1,通过回调函数的方式来拿返回值,这个想必大家不会陌生function getSomething(cb) { var r = 0; setTimeout(function() { r = 2; cb(r)//回调函数 },10)}...原创 2018-08-31 13:54:13 · 22197 阅读 · 4 评论 -
构建ts开发环境
初始化环境与配置安装tsnpm i typescript -g创建配置文件tsc --init创建项目管理文件npm init -y手动编译tsc xxx.ts工程化配置实现自动实时编译安装相关工具webpackwebpack-cliwebpack-dev-server(开发服务器)ts-loader(加载编译ts文件)typescript(本地安装,方便依赖库使用,注意与全局区分)html-webpack-plugin(用于将生成的js与宿主页面合并)npm i原创 2020-09-16 14:05:14 · 1318 阅读 · 0 评论 -
对象深浅拷贝
什么是深/浅拷贝,他们跟赋值有何区别?深/浅拷贝的实现方式有几种?转载 2018-10-30 17:35:37 · 267 阅读 · 0 评论 -
ES5/ES6中的类与继承对比
ES5中的类和静态方法function Persion(name,age) { //构造函数里面的方法和属性 this.name = name; this.age = age; this.getInfo = function(){ console.log(`姓名:${this.name}---年龄:${this.age}`) }}//原型链上的属性和方法可以被多个实例共享Pe...原创 2018-11-15 11:51:08 · 170 阅读 · 0 评论 -
JS中this的几种使用情况
this关键字是JavaScript中最复杂的机制之一,它是一个很特别的关键字,被自动定义在所有函数的作用域中。在函数中this到底取何值, 是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。情况一:构造函数// 如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象func...原创 2018-11-20 11:20:54 · 668 阅读 · 0 评论 -
JS常用方法汇总
数组方法汇总https://www.cnblogs.com/shangyueyue/p/9988188.html原创 2020-08-21 15:15:34 · 78 阅读 · 0 评论 -
JS中的防抖和节流
文章目录为什么要用到防抖和节流防抖节流的定义及区别常见的应用场景各自的函数实现为什么要用到防抖和节流前端代码的执行是基于浏览器的,频繁的进行某些计算或处理会占用更多的内存和CPU时间,可能会导致浏览器挂起,甚至是崩溃。防抖和节流即是为了限制JS频繁的执行一段代码防抖节流的定义及区别防抖连续的多次触发,固定的时间间隔内,存在新的触发,就清除之前的重新记时,满足时间执行一次——最新一次触发节流连续的多次触发,每一段固定的时间间隔内,我们只去执行一次——固定频率触发图说常见的应用场景频繁操原创 2020-08-16 13:46:50 · 1207 阅读 · 0 评论 -
部分手机localStorage失效,兼容localStorage处理
封装方法 /** * setLocalStorage */ common.setLocalStorage = function(key, value, isJson) { common.debugPrint("设置localStorage数据key=" + key + ",是否为json数据:" + (isJson ? "true" : "false")); if (!comm...原创 2020-04-02 16:36:52 · 3540 阅读 · 0 评论 -
webWorker使用
Web Worker 使用教程主线程创建子线程const worker = new Worker(‘worker.js’)给子线程传值worker.postMessage({data})接收子线程传值worker.onmessage = e => {}关闭主线程worker.terminate()子线程worker.js放置于静态文件目录下self为子线程自身全局对象加载脚本self.importScripts(’***.min.js’)接收主线程传值self.onme原创 2021-01-11 13:49:40 · 181 阅读 · 0 评论 -
非webpack、cli环境下,babel解析es6代码转为es5,以及grunt中配置babel
在非webpack、cli环境下,引入es6代码,如果不注意直接发布生产,在部分低版本浏览器(IE)或手机(如iphone6P系统版本ios10以下的)会报错。这时,需要通过babel解析,将es6代码转为es5才可以正常运行。第一步新建目录,命令行输入npm init 对项目进行初始化,生成package.json配置文件第二步在根目录下新建一个用于babel编译.babelrc文件{...原创 2020-04-02 14:24:11 · 405 阅读 · 0 评论 -
TypeScript基础语法
TypeScript为JavaScript的超集,是一门强类型语言基础类型及声明方式布尔值let isDone: boolean = false;数字let decLiteral: number = 6;字符串let name: string = "bob";数组let list: number[] = [1, 2, 3];let list: Array<number> = [1, 2, 3];const ro: ReadonlyArray<number>原创 2020-11-17 16:29:37 · 596 阅读 · 0 评论 -
es6之assign用法(对象添加属性、方法、浅拷贝)
assign使用注意点//浅拷贝:Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。const obj1={a:{b:1}};const obj2=Object.assign({},obj1);obj1.a.b=2;console.log(obj2.a.b)//2//遇到同名属性进行替换,而不是...原创 2019-11-04 11:32:05 · 5587 阅读 · 0 评论