- 博客(30)
- 收藏
- 关注
RSS订阅原创 proxy学习
ProxyProxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）语法/** 参数* target 要使用Proxy包装的目标对象（可以是任何类型的对象、包括原生数组，函数，甚至另一个代理）* handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了再执行各种操作时代理p的行为*/const p = new Proxy(target,handler)方法Proxy.revocable/** 创建一个可撤销的Proxy对
2021-05-21 11:29:13
1387
原创 new 操作符的模拟实现
function objectFactory(){ let obj = {}; let constructor = Array.prototype.shift.call(arguments); obj.__proto__=constructor.prototype; let result = constructor.apply(obj,arguments); return typeof result === 'object'?result:obj;}
2021-05-10 15:37:10
199
原创 V8垃圾回收策略
V8的垃圾回收策略主要是基于分带式垃圾回收机制，根据对象的存活时间将内存的垃圾回收进行不同的分代，然后对不同的分代采用不同的垃圾回收算法新生代回收机制新生代的垃圾回收过程主要是用Scavenge算法，在Scavenge算法的具体实现中，主要采用了Cheney算法，将新生代内存一分为二，每个部分的空间称为Semispace，其中处于激活状态的区域称为From空间，未激活的区域称为To空间。这两个空间中，始终只有一个处于使用状态，另一个处于闲置状态。程序中声明的对象首先会被分配到From空间，当进行垃圾回
2021-05-08 17:31:32
145
原创 call、apply和bind
callcall()方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法Function.prototype.call=function(context) { context=context || Window; context.fn=this; let args=[]; for(let i=1;i<arguments.length;i++) { args.push("arguments["+i+"]"); } let result = eval('cont
2021-05-08 15:45:30
98
原创 判断数据类型的方法
typeoftypeof 可以判断的数据类型有Number、String、Boolean、Symbol、undefined、Object、Function注意点：typeof会将null判断为object，原因是因为表达类型信息的数据码中null和object的是一样的Object.prototype.toString.callObject.prototype.toString.call(1) // [Object Number]Object.prototype.toString.call('h
2021-05-08 11:04:39
128
原创 运算符优先级
关联性关联性决定了拥有相同优先级的运算符的执行顺序a OP b OP c左关联（左到右）相当于把左边的子表达式加上小括号(a OP b) OP c,右关联（右到左）相当于a OP (b OP c)优先级从高（20）到低（1）排列优先级运算类型关联性运算符21圆括号n/a(不相关)(…)20成员访问从左到右… . …20需要计算的成员访问从左到右…[…]20new(带参数列表)n/anew … (…)...
2021-05-07 17:09:04
93
原创 实现instanceof方法
function instanceof_myself(leftValue,rightValue) { let rightPrototype = rightValue.prototype; //获取右侧构造函数对应的原型 let leftProto=leftValue.__proto__;//获取左侧实例对应的原型 while(true) { if (leftProto === null) { return false; } el
2021-04-28 18:00:12
312
原创 俩栏自适应布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script></head><style type
2021-04-28 16:10:53
95
原创 JavaScript中微任务和宏任务
宏任务script(整体代码)setTimeoutsetIntervalI/OUI交互事件postMessageMessageChannelsetImmediate(Node.js)微任务Promise.thenObject.observeMutaionObserverprocess.nextTick(Node.js)执行顺序宏任务-->微任务-->渲染-->宏任务...
2021-01-26 15:32:18
150
原创 npm run build执行的操作
..."scripts":{ //执行build/build.js文件 "build":"node build/build.js" }build.js'use strict'//执行check-version.js文件require('./check-versions')()process.env.NODE_ENV = 'production'//进度转轮，用于node的控制台进度美化，https://www.npmjs.com/package/oraconst ora = req
2020-12-18 11:20:00
2044
原创 flex布局学习
Flex(Flexible Box) 是一种弹性布局，用于盒状模型；任何一种容器都可以指定为Flex布局.box {display:flex;}注意：行内元素使用display:flex;会变成块级元素行内元素可以使用inline-flex进行flex布局.box{display:inline-flex;}注意：设置为Flex布局之后，子元素的float、clear和vertical-align属性都会失效容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross ax
2020-12-02 09:38:59
198
原创 vue-cli 中npm run dev 执行的操作
//...scripts:{ "dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" ...}...
2020-11-30 15:08:46
554
原创 vue-cli webpack.base.conf.js学习
'use strict'//引入nodejs路径模块const path = require('path')//引入utils工具模块，utile主要用来处理css-loader和vue-style-loaderconst utils = require('./utils')//引入config/index.js配置文件，定义开发和生产环境的属性const config = require('../config')//vue-loader.conf配置文件，主要是配置vue-loader的op
2020-11-30 14:59:24
584
原创 vue-cli vue-loader.conf.js学习
'use strict'//导入utils.jsconst utils = require('./utils')//导入config/index.jsconst config = require('../config')//判断是否是生产环境const isProduction = process.env.NODE_ENV === 'production'//根据环境来判断是否执行sourceMapconst sourceMapEnabled = isProduction ? confi
2020-11-30 14:58:32
340
原创 vue-cli utils.js文件学习
'use strict'// node中的path模块const path = require('path')//引入config/index.js文件const config = require('../config')//从bundle中提取文本(CSS)到单独的文件const ExtractTextPlugin = require('extract-text-webpack-plugin')//引入package.json文件const packageConfig = require(
2020-11-30 14:57:36
205
原创 less学习手册记录
变量（Variables）@width:10px;@height:@width+10px;#header { width:@width, height:@height}混入（Mixins）.bordered { border-top:dotted 1px black; border-bottom:solid 2px black;}#id{ width:100px}#menu a { color:#111; .bordered(); #id();}嵌套（Nest
2020-10-28 18:10:09
437
1
原创 requireJS中引入Vue和ElementUI
首先下载vue.js并且通过npm 下载ElementUI的包，其中ElementUI包中的lib文件是umd版本支持requireJS引入；具体操作：//require依赖文件中var require={ baseUrl:'./src/', map:{ '*':{'style':'assets/lib/requirejs/css.min'} }, paths:{ 'vue':'assets/lib/vue/dist/vue', 'ELEMENT':'assets/lib/elem
2020-10-13 18:01:49
2894
1
原创 @antv/g2踩坑记录
自定义tooltip//需要先在绘图时配置自定义tooltip的需要的字段chart.point().position('value*1').shape("pointer").tooltip('name*value*date',(name,value,date)=>{ retrun { name, value,date }})//配置自定义tooltipchart.tooltip({ showContent:true, showTitle:false, title:"
2020-09-28 10:41:21
2479
3
原创 antv-g2学习手册-下
创建视图ViewG2的图表Chart，可以创建多个视图View，每个View各自又可以创建其子View，所以在G2中，View是支持嵌套的。每个View同Chart一样，拥有自己独立的数据源，坐标系，几何标记，Tooltip以及图例。...
2020-08-03 10:46:16
2777
1
原创 关于滚动条的那些事
项目中用到的滚动条主要集中在两个方面，一是需要进行滚动条的样式设置，适配网站的整体UI；二是获取滚动条的属性，进行页面滑动方面的交互:比如说滑动定位已经滑动加载等滚动条样式的设置基于webkit的浏览器1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽高2. ::-webkit-scrollbar-thumb 滚动条3. ::-webkit-scrollbar-track 滚动条的轨道4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮5.
2020-07-08 16:05:57
162
原创 antv-g2学习手册-中
antv-g2学习手册-上图形标注配置图例标注(Annotation)作为G2图表的辅助元素，主要用于在图表上标识额外的标记注解。图表标注类型类型描述配置语法arc辅助弧线，只在极坐标系下生效。常用于绘制仪表盘chart.annotaion().arc({})image辅助图片，在图表上添加辅助图片chart.annotation().image({})line辅助线（可带文本），例如表示平均值或者预期分布的直线chart.annotation().li
2020-07-03 15:04:30
7037
4
原创 antv-g2学习手册-上
G2所构建出的图表是由一系列独立的图形元素组合而成的:数据Data：可视化最基础的部分图形属性Attribute：负责将数据中的变量映射到图形空间几何标记Geometry：即在图表中实际看到的图形元素，如点，线，多边形等，每个几何标记对象含有多个图形属性，G2的核心就是建立数据中的一系列变量到图形属性的映射度量Scale：数据空间到图形属性空间的转换桥梁，每一个图形属性都对应着一个或者多个度量坐标系Coordinate：描述了数据是如何映射到图形所在的平面的，同一个几何标记在不同坐标系下会有不同
2020-07-01 16:11:08
8089
原创 css设置文字超出省略号
单行文本设置溢出省略号{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}多行文本设置溢出省略号方法一：{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}因为多行文本设置使用了webkit的css扩展属性，该方法只适用于webkit浏览器和移动端-webkit-line
2020-06-23 19:52:41
706
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人