JavaScript
文章平均质量分 66
chenxiaoyi0207
这个作者很懒,什么都没留下…
展开
-
js如何判断一个元素在可视区域内
下方通用示例html的dom和公共js代码:<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g原创 2021-11-08 23:11:41 · 9865 阅读 · 1 评论 -
webpack原理
看书《深入浅出Webpack》Webpack就是读取配置config,从配置的入口开始递归找模块,通过loader将模块进行转换(比如ES6转ES5、解析json文件、postCss预处理),在整个构建过程中抛出各个阶段的事件,plugins监听事件去做事情,处理完后输出结果。Webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程。初始化参数开始编译确定入口编译模块完成模块编译输出资源输出完成Webpack的事件流机制基于Tapable,核心Compiler对象原创 2021-10-24 18:27:40 · 54 阅读 · 0 评论 -
js中undefined是对象吗
六种原始类型:number、string、null、undefined、boolean、symbol。一种引用类型:obejct。但new Number()返回的是object:Number 对象,该对象是原始数值的包装对象。undefined的原型也是obejct,在不同浏览器、版本环境下,类型不同。如下:浏览器版本类型ie8[object Object]ie9[object Window]ie10及以上、谷歌[object Undefined]原创 2021-10-08 15:06:34 · 995 阅读 · 0 评论 -
echarts饼图百分比不为100%
由于需要兼容低版本ie,使用的echarts版本较低,为2.2.x。当前版本有饼图百分比不为100%的问题,如数据为如下:[{ name: ‘测试1’, value: 1 },{ name: ‘测试2’, value: 1 },{ name: ‘测试3’, value: 1 }]当前版本饼图计算的百分比均为33.33%,最新版本计算的百分比是33.34%、33.33%、33.33%。百度了一些文章是说用了最大余数法,但是在外部使用插件无法使用这个算法,又不能改数据。只能修改源码。遇到的问题:原创 2021-05-11 09:49:36 · 6122 阅读 · 0 评论 -
webpack学习笔记
一、webpack是什么本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图,此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle(包)。二、单词bundle:包chunk:组块。在模块化编程中,开发者将程序分解为功能离散的 chunk(discrete chunks of funct...原创 2019-08-03 15:28:48 · 146 阅读 · 0 评论 -
ES6-新内容(三)Promise对象
一、Promise对象1.特点Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。一旦状态改变,就不会再变,任何时候都可以得到这个结果。有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。2.基本用法var promise=new Promise...原创 2020-06-23 09:39:15 · 158 阅读 · 0 评论 -
ES6-新内容(四)class、Decorator、Module
一、Class1.与传统构造方法对比传统构造方法:function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);ES6引入了Class(类)这个概念,作为对象的模板:class Point { constructor(x,原创 2020-07-22 11:16:35 · 503 阅读 · 0 评论 -
ES6-新内容(二)Proxy和Iterator
1.Proxy和Reflect拦截2.Iterator遍历器一、Proxy和Reflect1.概念:Proxy代理,拦截作用。2.语法:var proxy = new Proxy(target, handler);target是目标对象,handler是拦截不同方法的声明。handler事件:get、set、has、deleteProperty、ownKeys、getOwnProp...原创 2019-10-25 12:16:34 · 231 阅读 · 2 评论 -
CSS三角形及其点击切换
先看一下效果图:点击后--><style>.triangle { width: 0; height: 0; border: 5px solid transparent; display: inline-block;}.tri-b { border-bottom: 0; border-top: 8px soli...原创 2019-08-16 18:08:19 · 756 阅读 · 0 评论 -
ES6基础语法培训笔记 - 查漏补缺
1. 数据类型:两真两假三不定objectsymbolnullundefinedbooleanstringnumber2. 函数没有返回值时,实际默认是return undefined3. let date=+new Date();//时间对象转时间戳的一种方式4. typeof undefined // "undefined" typeof null // "ob...原创 2019-08-20 20:54:01 · 115 阅读 · 0 评论 -
后台接口contentType为image时 前端img标签如何接收
如标题,在浏览器中network的preview里预览接口返回的数据,直接显示一张图片。前端img标签的src里,应该直接写上这个接口的url和拼接的参数,当然请求只能是get的,如下:<img src="http://ip:port/example/do?param=text" />...原创 2019-08-23 19:24:38 · 4247 阅读 · 0 评论 -
js经典问题:在遍历数组时对DOM监听事件,索引值始终等于遍历结束后的值
js经典问题:在遍历数组时对DOM监听事件,索引值始终等于遍历结束后的值。场景:3个tab页,点击tab切换。原方法:给3个按钮都写一遍点击事件。<ul> <li id="tab-menu1">menu1</li> <li id="tab-menu2">menu2</li> <li id="tab-menu3">...原创 2019-08-14 19:53:14 · 228 阅读 · 0 评论 -
ES6-新内容(一)Symbol和Set、Map
Symbol 原始数据类型Set和Map 数据结构一、SymbolES6引入了一种新的原始数据类型Symbol,表示独一无二的值。通过Symbol函数生成。基本上,它是一种类似于字符串的数据类型。可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同...原创 2019-07-17 13:10:48 · 157 阅读 · 0 评论 -
Promise
一、背景Javascript是单线程执行的。这导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现。例如,setTimeout(function(){ //todo},1000); //其中的匿名函数就是一个回调函数回调函数:(执行完)回(来)调(用)函数。二、Promise对象promise:承诺将来会执行。1.一个promise...原创 2018-09-22 20:04:04 · 1030 阅读 · 1 评论 -
Javascript模块化
一、JS规范缺陷1.没有模块系统;2.标准库较少;3.没有标准接口;4.缺乏包管理系统。二、CommonJS的模块规范1.模块引用:require()方法2.模块定义3.模块标识...原创 2018-09-22 18:23:19 · 157 阅读 · 1 评论 -
JSONP
一、概念 1.JSONP:使用&lt;script&gt; 元素作为Ajax传输的技术。若HTTP请求所得到的响应数据是经过JSON编码的,则适合使用该技术。2.&lt;script&gt; 元素作为Ajax传输机制:只须设置&lt;script&gt; 元素的src属性,然后浏览器就会发送一个HTTP请求以下载src属性所指向的URL。3.使用&lt;script&gt原创 2018-09-11 10:18:14 · 695 阅读 · 0 评论 -
XMLHttpRequest
1原创 2018-09-10 20:55:25 · 1462 阅读 · 0 评论 -
Javascript-客户端相关
一、JS程序的执行 1.当HTML解析器遇到原创 2018-09-09 12:09:09 · 276 阅读 · 0 评论 -
Javascript-函数(下)
重点:函数属性和方法、立即执行函数、this 一、函数属性和方法 1.length属性:代表函数定义时给出的实参个数。2.prototype属性:指向一个对象的引用,这个对象称作“原型对象”。3.call()方法和apply()方法 (1)含义:通过调用方法的形式来间接调用函数。例如,对象o调用函数f()f.call(o);f.apply(o);(2)区别:f.call...原创 2018-09-05 11:26:40 · 156 阅读 · 0 评论 -
Javascript-数组
一、特点 1.数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型。2.数组最大能容纳4 294 967 295(2的32次方-1)个元素(索引是基于0的32位数值)。3.js数组是动态的,无须声明一个固定大小的数组,或者在数组大小变化时无须重新分配空间。4.数组元素的索引可以不连续,称为稀疏数组,稀疏数组的length为最大索引值+1。5.稀疏数组var ...原创 2018-09-06 12:50:32 · 248 阅读 · 0 评论 -
Javascript-函数(上)
重点:this、闭包、作用域和作用域链、构造函数、立即函数、函数和方法、 一、原创 2018-09-05 01:15:57 · 105 阅读 · 0 评论 -
Javascript-类型/值、对象、类
一、弄不清的概念 1.数据类型 数据类型分为原始类型和对象类型。 (1)原始类型:number数字、string字符串、boolean布尔值、null空、undefined未定义; (2)object对象类型:object普通对象、array数组、function函数,以及三种具有实用API的特殊对象——date日期、regexp正则、error错误。 通常称对象为引用类型。两个单独的对...原创 2018-09-02 23:57:38 · 213 阅读 · 0 评论 -
ES6-Babel
转载自【ES6入门文档】BabelBabel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。一、配置文件.babelrcBabel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。该文件用来设置转码规则和插件,基本格式如下。{...转载 2019-07-15 10:11:59 · 172 阅读 · 0 评论 -
【转载】js原生的节点操作
【转载自JS获取子节点、父节点和兄弟节点的若干种方式 – 作者:-老K-】一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document.getElementById("test").getElementsBy...转载 2018-11-29 11:00:09 · 302 阅读 · 0 评论 -
ES6-扩展内容
let和const变量的解构赋值字符串的扩展正则的扩展数值的扩展数组的扩展一、let和const解决了var变量提升的问题。是一种简洁地解决闭包问题的方法。块级作用域内有效。二、变量的解构赋值数组的解构对象的解构注意:let {dataSource}=data;//等价于let {dataSourcce:dataSource}=data;//实质是将data对...原创 2019-07-16 17:17:10 · 1282 阅读 · 0 评论 -
js 日期转中文日期
str为日期的字符串形式,可以是2019-04-03,2019年04月03日,必须每位都有,0位写0。要完整的yyyyMMdd。number2Chinese(str){ let chinese=['〇','一','二','三','四','五','六','七','八','九','十']; let numStr=str.replace(/[^0-9]+/g, '');...原创 2019-04-03 10:36:46 · 3875 阅读 · 0 评论