JavaScript
文章平均质量分 51
javascript
richest_qi
这个作者很懒,什么都没留下…
展开
-
富文本前端插件wangeditor
wangEditor是基于Typescript开发的Web富文本编辑器,轻量、简洁、易用、开源免费,先来看下它的基本使用吧。第一步,新建项目vue create demo第二步,改造项目首先,下载安装wangeditor,npm install --save wangeditor;然后,修改App.vue,引入并使用wangeditor<template> <div id="content"></div></template>原创 2021-07-19 11:05:14 · 357 阅读 · 0 评论 -
【ECharts】ECharts实现饼图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pie Chart</title> <script src="https://cdn.jsdelivr.ne原创 2020-10-27 16:37:01 · 1223 阅读 · 0 评论 -
【ECharts】ECharts实现地图散点图
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title> <script src="https://cdn.jsdelivr.net/npm/echarts@4原创 2020-10-22 15:27:33 · 9304 阅读 · 7 评论 -
【ECharts】ECharts实现世界地图
文章目录代码结构搭建小型服务器前端代码效果参考文档代码结构搭建小型服务器npm init -ynpm install --save-dev express// server.jsconst express = require("express");const server = express();server.use(express.static("src"));server.listen(3000,function(){ console.log("listening on *原创 2020-10-22 10:28:25 · 2440 阅读 · 0 评论 -
初探高德地图
代码结构搭建小型web服务器npm init -ynpm install --save-dev express// server.jsconst express = require("express");const server = express();server.use(express.static("src"));server.listen(3000,function(){ console.log("listening on *:3000");})node serve原创 2020-10-21 22:10:27 · 413 阅读 · 0 评论 -
canvas绘图
<body> <canvas></canvas></body>在chrome浏览器里,<canvas>的默认尺寸是300*150,display值是inline。要想在canvas这块画布上绘图,首先需要取得绘图上下文,即调用API getContext。getContext('2d')可获得2D上下文对象。2D上下文坐标系以canvas画布左上角为原点。属性fillStyle填充样式strokeStyle描边样式原创 2020-09-25 20:46:00 · 2521 阅读 · 0 评论 -
异步之Promise
基本原理class Promise{ callbacks = []; constructor(fn){ fn(this._resolve.bind(this)); } then(onFulfilled){ this.callbacks.push(onFulfilled); } _resolve(val){ this.callbacks.forEach(onFulfilled => onFulfille.原创 2020-09-08 15:52:51 · 202 阅读 · 0 评论 -
Promise对象与async函数
文章目录环境搭建回调函数作参数Promisenew Promise().then()Promise.resolve().then()async...await环境搭建npm init -ynpm install --save express//server.jsconst express = require("express");const server = express();server.use(express.static(__dirname));server.get("/data"原创 2020-09-07 18:04:57 · 147 阅读 · 0 评论 -
跨域
跨文档消息jsonpwebsocket原创 2020-09-03 17:55:49 · 200 阅读 · 0 评论 -
浏览器本地缓存:localStorage与sessionStorage
localStorage实际开发中,localStorage用的还是挺多的。比如,网页中有个手风琴列表,列表中有“资源管理”、“域管理”、“设备管理”等多个入口,默认进入“资源管理”功能页面。不同的用户关注点不同,有的可能需要进入“域管理”页面,有的则只关注“设备管理”。这时,使用localStorage保存用户上一次最后停留的功能页面对应的id,如此一来,用户下一次进入该网页时,直接显示的就是他们关注的功能页面,而不需要到手风琴列表上去切换入口。用localStorage来记录用户习惯,可以改善用原创 2020-09-02 22:01:29 · 691 阅读 · 0 评论 -
js作用域与垃圾自动回收机制
js作用域有两种,函数限定的作用域函数内定义的变量,只能在函数内访问,函数外不能访问子域访问父域函数中定义函数,就是子域,也就是闭包。搜索变量时,只能沿着作用域链往上搜索,不能沿着作用域链往下搜索。函数执行完毕后,函数内的变量就会自动销毁,内存中仅保存全局变量。对局部变量,即函数内的变量,函数执行完毕后,会自动解除引用对全局变量,一旦不再使用,最好置为null以解除引用,否则,容易造成内存泄漏内存泄露,就是不再使用的变量仍然占用着内存。...原创 2020-09-02 10:36:39 · 293 阅读 · 0 评论 -
类的继承
文章目录类function的继承原型链继承借用构造函数组合继承原型式继承寄生式继承寄生式组合继承类class的继承类function的继承原型链继承原型链继承,即子类的原型是其父类的一个实例。子类继承父类的所有属性和方法。function Person(name,age){ this.name = name; this.age = age;}Person.prototype.sayName = function(){ console.log(this.name);}原创 2020-09-01 16:22:01 · 111 阅读 · 0 评论 -
类(function/class)
文章目录工厂函数构造函数构造函数可能存在的问题寄生构造函数作用域安全的构造函数构造函数+原型模式工厂函数function createPerson(name,age){ var o = {}; o.name = name; o.age = age; o.sayName = function(){ console.log(this.name); } return o;}const person = createPerson("Nicho原创 2020-09-01 11:36:57 · 402 阅读 · 0 评论 -
虚拟化长列表
在高度固定且可滚动的容器内渲染有限数量的节点。height:500px;overflow:auto的容器内,假如每行节点height:50px,那么10行这样的节点便可填满容器。每行节点height:50px,假如有1000行这样的节点,那么,全部节点的高度和便是50*1000=50000px,这足以撑开容器得到滚动条。监听容器的scroll事件,可获取滚动的垂直距离srollTop,从而计算出此时应该渲染第几行节点。如果滚动过快,可能会出现闪烁,可预先渲染几行,比如,10行高50px的节点可填满原创 2020-08-24 08:36:40 · 1007 阅读 · 0 评论 -
window.history
history.lengthhistory.go()history.go(1)前进一页history.go(2)前进两页history.go(-1)后退一页history.go(-2)后退两页history.forward()前进一页history.back()后退一页共经历了三个页面,所以history.length的值是3。...原创 2020-08-04 16:17:11 · 223 阅读 · 0 评论 -
location
域名.com (顶级域名)baidu.com (一级域名)www.baidu.com (二级域名)www,主机名。又如news.baidu.com、bbs.baidu.com、email.baidu.com。locationlocation是一个特殊的对象,它既是window对象的属性,也是document的属性。window.location === document.location // 返回true属性hrefprotocolhosthostnameportpa原创 2020-08-04 15:39:51 · 232 阅读 · 0 评论 -
图片懒加载
body{ width:500px; }直接加载<body> <img src="./imgs/0.jpg"> <img src="./imgs/1.jpg"> <img src="./imgs/2.jpg"> <img src="./imgs/3.jpg"> <img src="./imgs/4.jpg"></body>懒加载<body> <img s..原创 2020-07-20 18:00:15 · 117 阅读 · 0 评论 -
DOMContentLoaded与load
DOMContentLoaded、onreadystatechangewindow.performance原创 2020-07-05 15:24:25 · 345 阅读 · 0 评论 -
\r\n 和 \n
\r,回车符,回到行首;\n,换行符,换到下一行。\r\n的由来计算机还没出现之前,有一种叫做电传打字机的玩意,每秒可以打10个字符,即0.1秒打一个字符。但它有个问题:打完一行换行的时候,就要用去0.2秒,正好是打两个字符的时间。如果这0.2秒里,刚好有新的字符传过来,这个字符就会被丢掉。于是,研制人员就想了办法解决这个问题:在每行后面加个两个表示结束的字符。一个就是\r,回车符...转载 2020-03-12 10:40:21 · 359 阅读 · 0 评论 -
table
样例<body> <table> <thead> <tr> <th>城市</th> <th>职业</th> </tr> </thead> <tbody> <tr>原创 2020-07-10 12:11:56 · 153 阅读 · 0 评论 -
异步之事件
添加事件处理程序有三种方式。html指定事件处理程序<body onclick="sayHi()"> hello world <script> function sayHi(){ console.log('hi~'); } </script></body>DOM0级事件处理程序<body> hello world <scrip原创 2020-06-22 09:48:09 · 257 阅读 · 0 评论 -
Math.random()生成随机数
0 ≤ Math.random() < 10 ≤ Math.random()*(max-min+1) < max-min+1min ≤ Math.random()*(max-min+1)+min < max+1因此,Math.random()*(max-min+1)+min可以生成范围在闭区间[min,max]内的随机数。比如,Math.random()*10+1生成[1,10]范围的随机数、Math.random()*100+1生成[1,100]范围的随机数。...原创 2020-06-15 20:54:39 · 765 阅读 · 0 评论 -
常用的DOM操作
React、Vue等框架流行后,现在开发人员亲自操作DOM的“机会”不多了,因为“神仙”框架们已经帮我们做的很好了。而今,大多数时候我们更加专注于业务数据,不再过多关心该怎么操作DOM来更新视图。倘若你要读源码,掌握DOM操作是必须的 ,这是基础的基础,本次记录作巩固用。...原创 2020-06-15 16:10:50 · 153 阅读 · 0 评论 -
表单字段们
文本输入框<input type="text" name='name'>提交表单生成提交按钮生成提交按钮,有以下三种方式。第一种:input[type='submit']<input type="submit" value='提交'>第二种:button[type='submit']<button type='submit'>提交</button>第三种:input[type='image']<input type=原创 2020-06-12 17:43:10 · 318 阅读 · 0 评论 -
表单Demo
表单Demo,验证用。目录结构mkdir democd demonpm init -ynpm install --save express body-parsertype nul>server.jsmkdir srccd src type nul>index.htmlcd ..mkdir datacd datatype nul>user.jsonusers.json{ "tom": { "id": 1, "原创 2020-06-11 18:39:19 · 198 阅读 · 1 评论 -
JSON对象及其方法
JSON字符串JSON字符串 当然也是字符串,不过它有一点点特殊。'{"a":"hello","b":"world"}',喏,这就是一个 JSON字符串。在写一个json 文件时,如果 字符串 不带引号或带单引号,你的智慧编辑器就会提示你:“一定要用双引号”。是的,这就是 JSON字符串 的特殊之处。JSON对象JSON是javascript的内置对象,就像Date、Math一样。JSON这个对象对外提供了两个静态方法,分别是parse和stringify。日常开发中,JSON.stri原创 2020-06-11 16:57:47 · 827 阅读 · 0 评论 -
【无障碍访问】label的使用
将label标签与表单字段关联,这样,点击label标签,表单字段会自动获得焦点。要关联,有两种方式。将表单字段嵌套在label标签里input[type='text']标签嵌套在label标签里<form> <label>名字: <input type="text" name='name'></label> <input type="submit" value='提交'></form>label标原创 2020-06-11 09:27:01 · 649 阅读 · 0 评论 -
将元素定位到可视区域
将元素定位到可视区域,方法挺多的,罗列一下。原创 2020-06-10 16:56:52 · 1634 阅读 · 0 评论 -
改变 数据属性的特性
数据属性的特性我们了解过 数据属性的特性:configurable、writable、enumerable和value。可以使用Object.defineProperty()或者Object.defineProperties()来修改这些特性。修改 数据属性的特性实际上,要修改configurable、writable,更常用的是Object.seal()或者Object.freee()。对一个普通对象时,我们可以对其属性进行 增、删、改操作。可 增(可扩展),前提是 该对象 isExt原创 2020-06-04 15:10:08 · 254 阅读 · 0 评论 -
字符串
基本类型与包装类型理论上讲,str是 基本类型数据,不是对象,它哪来的slice 方法?事实上,在访问 基本类型数据 时,后台会创建一个对应的包装类型的对象,这样,就可以调用一些方法来操作 基本类型数据。所以,var copyStr = str.slice(0)相当于,相等 or 不相等immutable性期望改成 'dad',but still 'bad',无法直接修改其中的字符,为什么??immutable!!之前,我们了解过 数据属性的特性:value、writable原创 2020-06-04 12:32:37 · 144 阅读 · 0 评论 -
异步之定时器
惰性加载 scroll原创 2020-06-02 22:54:49 · 1694 阅读 · 0 评论 -
事件处理程序的参数与传参
先给个例子。访问事件对象<body> <button onclick="sayHi()">sayHi</button> <button class="btn">bless</button> <script> function sayHi(){ console.log(window.event === event); console.log(event);原创 2020-06-01 12:08:40 · 893 阅读 · 0 评论 -
Regexper,图形化正则表达式
文章目录Regexper正则表达式元字符字符组 []举例:/[do]/排除字符组[^]举例:/[^do]/重复 [^]{n}举例:/[^do]{2}/捕获组 ()举例非捕获组其他Regexper/Win(?:dows)?\s?([^do]{2})\s?(\d+\.\d+)?/正则表达式元字符元字符说明\转义.匹配除换行符以外的任意字符^匹配开头$匹配结尾?重复一次或零次+重复一次或多次*重复零次或多次|多选分支原创 2020-05-25 20:36:30 · 1213 阅读 · 0 评论 -
ECharts实现动态曲线(下)
ECharts实现动态曲线(中)的遗留问题是,切换标签页,浏览器里的定时器工作受到影响,甚至导致定时器停止工作而丢数据。而切回到原页签时,定时器又恢复正常。这次使用Web Worker解决这个问题,将浏览器端的定时器放到一个Worker对象里。之前了解过,javascript是单线程,Web Worker的存在也不能改变这一本质,因为Web Worker受控于javascript引擎线程,不能操作DOM。不过,Web Worker可以使用XMLHttpRequest,所以会用XMLHttpRequest原创 2020-05-19 21:35:22 · 999 阅读 · 0 评论 -
ECharts实现动态曲线(中)
文章目录效果图实现遗留问题目录结构浏览器端服务器端ECharts实现动态曲线(上)里,模拟数据是在浏览器端生成的。现在,我们这样做:把模拟数据的生产放到服务器端,浏览器通过Ajax发送请求获取服务端数据。效果图实现服务器使用了一个定时器。只要服务器一启动,定时器就会开始工作,每隔1000ms生成一次新数据。浏览器端也使用了一个定时器,点击“开始”按钮,该定时器才会开启,每间隔250ms就会向服务端发送一次请求,以获取新数据来更新图表。遗留问题服务端定时器的时间间隔是1000ms,浏览器这边原创 2020-05-19 21:32:25 · 1326 阅读 · 0 评论 -
ECharts实现动态曲线(上)
动态曲线原创 2020-05-19 21:26:33 · 6175 阅读 · 0 评论 -
异步之Ajax
我们了解过浏览器内核的多线程,其中包含 异步http请求线程,该线程就是Ajax所在线程。XMLHttpRequestAjax是用来和服务器通信的,其核心是XMLHttpRequest对象。创建XHR对象现在所有的浏览器都支持XMLHttpRequest,所以直接new XMLHttpRequest()就好。不过,如果你还能用上古董IE版本IE7之前的,那么很厉害的你会使用new ActiveXObject()。下面是红宝书教我们的,如何 跨浏览器创建XHR对象。//跨浏览器创建XHR对象f原创 2020-05-18 15:49:33 · 215 阅读 · 0 评论 -
frame和 iframe,曾经也是不一样的烟火
如今,框架都很香!在这个追求性能的时代,frameset/frame和iframe这种落伍的东西几乎没人用了吧。没关系,当回看客吧。frameset/frameframe不能独立存在,必须搭配frameset使用<frameset> <frame src="./helloworld.html"></frameset>frame的宽高分别由frameset上的cols属性和rows属性决定frame就是个“妈宝男”,它无法独立生存,必须依赖原创 2020-05-17 23:23:35 · 313 阅读 · 0 评论 -
构造函数一定要通过new调用吗?
什么叫"作用域安全的构造函数"?如果你有看源码的习惯的话,应该经常会遇到。比如,new Vue(options),函数Vue就是"作用域安全的构造函数"。 function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } //... }比如,http.c原创 2020-05-17 17:23:02 · 4128 阅读 · 0 评论 -
js的单线程与异步编程
javascript是单线程的javascript可以操作DOM,所以javascript是单线程的。为啥?试想下,如果javascript是多线程的,就比如现在有两个线程,其中一个是给DOM节点添加内容,另一个是删除这个DOM节点,这时浏览器应该听谁的。为了避免这类复杂的同步问题,javascript就被设计成单线程的了。那Web Worker怎么说?虽然允许使用Web Worker创建子线程,但子线程完全受控于主线程,且子线程不能操作DOM,所以Web Worker并没有改变javascrip原创 2020-05-15 14:56:29 · 254 阅读 · 0 评论