前端
betty_grant
这个作者很懒,什么都没留下…
展开
-
MQTT.js前端使用手册
的客户端库,使用 JavaScript 编写,主要用于 Node.js 和 浏览器环境中。是目前 JavaScript 生态中使用最为广泛的。MQTT.js广泛用于在线协同、长轮询等,需要WebSocket 网络协议的 实时的,频繁的,长时间响应的业务场景。1. 定义主题,其中分为:推送的具体主题名、订阅的主题名(可以使用+或#实现通配配置)2. 消息使用方式分为:(1)通过事件监听,调用方法。(2)直接获取并使用数据。MQTT.js主要是使用以下服务。原创 2023-05-26 00:56:46 · 893 阅读 · 0 评论 -
前端:Monorepo手册
onoRepoMonoRepo 是一种将多个项目代码存储在一个仓库里的软件开发策略(mono 意为单一,repo 意为 仓库)。与之相对的是另一种流行的代码管理方式 MultiRepo,即每个项目对应一个单独的仓库来分散管理。原创 2023-02-20 09:11:20 · 803 阅读 · 0 评论 -
浅谈 TypeScript 类型系统
讲到TypeScript一定离不开它的类型系统,强类型约束是对原本弱类型的JavaScript的补充。而相对Java、C#等后端语言的标明类型系统(Nominal Type System),TypeScript采用的是结构类型系统(Structural Type System)。标明类型系统比较的是类型本身,具备非常强的一致性要求。结构类型系统比较的并不是类型定义本身,而是类型定义的形状。高级类型type Point = { x: number; y: number;};type N原创 2022-03-03 19:06:25 · 478 阅读 · 0 评论 -
一次讲清JavaScript的原型知识
1.概念实例对象、构造对象、原型对象Javascript里将对象分为实例对象和构造对象,而构造对象都包含一个原型对象,可以通过属性prototype访问。对象可以通过属性constructor访问其构造对象,通过属性__proto__访问其构造对象的原型对象。实例对象、构造对象、原型对象三者的关系,如图所示:原型链一个实例对象通过(__proto__ )指向它的构造对象的原型对象。该原型对象也有一个自己的原型对象,层层向后直到null,构成了最终的原型链。创建对象在ES6之后的.原创 2021-12-11 00:29:42 · 715 阅读 · 0 评论 -
Web多端适应原理与方案详解
1.概念1.1.屏幕指标物理上,一个屏幕是有尺寸、像素分辨率和密度指标的。如上图所示。其中显示的1920*1080是水平像素数*垂直像素数,ppi即是每英寸像素数。1.2.CSS像素px是CSS像素的基本单位,不同于硬件上的物理像素,CSS像素是逻辑像素。在谈论CSS像素时一定要清楚它的上下文:标准的屏幕像素密度下,1个css像素对应一个物理像素。 对于高屏幕像素密度,就会存在1个css像素对应多个物理像素的情况。因此,将物理像素/css像素的比值称为设备像素比(dpr)。...原创 2021-10-14 15:15:04 · 1541 阅读 · 2 评论 -
前端开发工具集
在线编程1. StackBlitzStackBlitz将大家最常用的IDE Visual Studio Code 搬进了浏览器。除此以外,StackBlitz快速配置 Angular、React、Ionic、TypeScript、RxJS、Svelte等各类的JavaScript框架。有了它,只需几秒就可以开始写代码了。2. CodePenCodePen 的界面很简洁,三个编辑器和一个预览容器,并且预览效果会实时更新3.CodeSandbox4.Jsfiddle5.Jsbi...原创 2021-10-12 13:44:29 · 6979 阅读 · 0 评论 -
JavaScript 获取dom位于文档的坐标
//获取element的x坐标function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } re.原创 2021-10-09 00:02:23 · 788 阅读 · 0 评论 -
JavaScript转码和解码知识
转码encodeURI不会对下列字符转码ASCII字母 数字 ~!*()'@#$&*=:/,;?+应用场景:对整个url进行转码encodeURIComponent不会对下列字符转码ASCII字母 数字 ~!*()'应用场景:对url的某个部分禁止转码escape不会对下列字符转码ASCII字母 数字 @*/+应用场景:对单纯的字符串进行转码解码decodeURI:为encodeURI对应得解码方法encodeURIComponent原创 2021-08-17 17:16:17 · 752 阅读 · 0 评论 -
Element Ui DatePicker显示周数
elementui日历上竟然没有显示周次的功能。于是自己在源码上改进了下,具体代码参考https://github.com/betty-chan/element显示效果如下:因为elementui已不再维护,如果需要引入自己修改后的element可以通过上传npm或者使用我打包后的github项目。使用github项目需要配置package.json如下 "dependencies": {"element-ui":"git+https://github.com/be...原创 2021-07-26 09:32:08 · 518 阅读 · 0 评论 -
egg-sequelize关联查询三种方法
1. 在Service里定义关联查询import { Service } from 'egg';export default class sroceService extends Service { /* * 分页查询 */ public async findSorce(query, page) { let { ctx } = this ctx.model.TSorce.belongsTo(ctx.model.TUser, {原创 2021-07-21 15:20:48 · 1935 阅读 · 1 评论 -
Vue自定义指令——实现一键复制
实现clipboard.jsconst clipboard = { install(Vue, options) { Vue.directive('clipboard', { inserted(el, binding, vnode) { el.addEventListener('click', () => { let text; if.原创 2021-06-21 16:50:35 · 676 阅读 · 0 评论 -
跟element学vue技巧——Datepicker
1. 混入Mixins2.组件挂载new Vue(this.panel).$mount()原创 2021-08-31 00:01:16 · 278 阅读 · 0 评论 -
lerna使用小册
简介lerna是什么?命令原创 2021-06-12 00:05:20 · 224 阅读 · 0 评论 -
Echarts系列——多折线图
Echarts5 支持使用dataset,使用dataset来设置数据。<template> <div id="chartLine" class="chart"></div></template><script>/*基础折线图,需要dataset:source、dimensions*/export default { props: { config: { type: Object, def原创 2021-04-07 14:13:04 · 1011 阅读 · 0 评论 -
前端学习资源集合(持续更新中)
JavaScript现代JavaScript教程:最好的JavaScript学习教程,没有之一 JavaScript|MDN :比较权威的JavaScript教程网站github排名统计github trending:https://github-trending.com/ github 中国区:http://githubrank.com/ github 全球:https://gitstar-ranking.com/静态站点搭建工具vuepress:https://www.vuepre原创 2021-03-24 09:34:41 · 128 阅读 · 0 评论 -
VUE CLI环境变量的使用
模式默认情况下,一个 Vue CLI 项目有三个模式:development模式用于vue-cli-service servetest模式用于vue-cli-service test:unitproduction模式用于vue-cli-service build和vue-cli-service test:e2e我们可以通过 --mode选项修改命令行默认的模式,如:vue-cli-service build --mode development环境文件所...原创 2021-01-30 10:01:53 · 225 阅读 · 0 评论 -
JavaScript实现图片压缩
图片压缩图片压缩的原理是使用canvas对象的drawImage()方法将Image对象压缩绘制到画板上。代码实现如下 //图片压缩 compress( base64, // 源图片 rate = 1.5, // 缩放比例 callback // 回调方法 ) { //处理缩放,转格式 var _img = new Image(); _img.src = base64; _img.onlo.原创 2020-12-08 09:21:43 · 417 阅读 · 0 评论 -
使用node调试代码
node <file>说明:执行文件,可结合console.log()输出结果node --inspect<file>说明:在浏览器中进行调试,可大断点原创 2020-11-25 18:18:18 · 103 阅读 · 0 评论 -
js实现json转excel的npm包
GitHub地址:https://github.com/betty-chan/jsonToExcelnpm地址:https://www.npmjs.com/package/covert-json-to-excel安装npm i covert-json-to-excel使用import Json2excel from "covert-json-to-excel"let data = [ {name:"张三",age:"34"}, {name:"李四",age:"21原创 2020-11-11 16:39:54 · 419 阅读 · 0 评论 -
JavaScript原理——模拟bind
Function.prototype.bind2 = function (context) { // 1.保存当前this var self = this; // 2.获取传入的参数,将其变为数组存入args中 var args = Array.prototype.slice.call(arguments, 1); return function () { // 3.获取return函数中传入的参数 var funArgs = Ar..原创 2020-09-24 11:58:08 · 69 阅读 · 0 评论 -
简单讲解函数柯里化
首先,了解下什么是柯里化。柯里化:是把接受多个参数的函数转变成接受单一参数,返回结果并且返回接受余下的参数的函数的技术。原创 2020-09-23 09:29:17 · 206 阅读 · 0 评论 -
JavaScript原理——模拟继承
1.原型继承function Parent(){}function Child(){}Child.prototype = new Parent();2.构造函数继承function Parent(){};function Child(){ Parent.call(this, argument);}3.原型+构造函数继承function Parent(){};function Child(){ Parent.call(this, argument);}C原创 2020-09-16 22:57:07 · 97 阅读 · 0 评论 -
JavaScript原理——模拟instanceof
new _instanceof(obj, type){ const baseType = ['string', 'number','boolean','undefined','symbol']; //基础类型返回false if(baseType.includes(typeof(obj)) || obj === null) { return false }; let Lp = L.__proto__; let Rp = R.prototype//函数才有protot.原创 2020-09-13 20:31:43 · 67 阅读 · 0 评论 -
JavaScript原理——模拟new
function _new() { //1.取出第一个传入参数并删除,仅在这个案例中需要 var constructor = Array.prototype.shift.call(arguments); //2.创建新对象,并将其原型链指向构造函数的原型 var obj = Object.create(constructor.prototype); //传入参数、执行构造函数,并将this指向创建的新对象 var res = constructor.a...原创 2020-09-10 16:12:35 · 75 阅读 · 0 评论 -
浏览器知识篇
从URL到页面1.DNS 解析:将域名解析成 IP 地址2.TCP 连接:TCP 三次握手3.发送 HTTP 请求4.服务器处理请求并返回 HTTP 报文5.浏览器解析渲染页面,构建dom树,样式树,渲染树,layout布局,painting绘制6.断开连接:TCP四次挥手重绘和重排重绘:当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新;损耗较少重排:当元素样式的改变影响布局时,如尺寸、位置、内容等属性,浏览器将使用重绘对元素进行更新;损耗较重..原创 2020-09-08 19:22:02 · 114 阅读 · 0 评论 -
Typescript构建
工程tsconfig.json属性 说明 files 指定需要编译文件的相对或绝对路径的列表 include 指定需要编译文件的路径列表、文件或者文件夹 exclude 指定排除文件,默认会排除node_modules compilerOptions 编译选项,具体可参考https://www.tslang.cn/docs/handbook/compiler-options.html extends 从另一个配置文件里继承配置 compil原创 2020-08-12 00:49:02 · 102 阅读 · 0 评论 -
webpack入门到精通
webpack原创 2020-07-28 11:37:15 · 181 阅读 · 0 评论 -
原生JavaScript实现拖拽功能
实现 (function(window, document){ var x=0,y=0,element; window.startDarg = function(targeId){ element= document.getElementById(targeId).bind(document); element.attachEvent("onmousedown", mousedownFun) } function mousedownFun原创 2020-07-22 23:10:24 · 609 阅读 · 0 评论 -
项目安全知识
跨站脚本攻击(Cross Site Scripting)说明:是最常见的攻击 WEB 网站方法,攻击者通过注入非法的 html 标签或者 javascript等代码,从而控制用户浏览器。防御:在 cookie 中设置 HttpOnly 属性后,js脚本将无法读取到 cookie 信息 对用户输入的数据进行检查过滤 显示时,将脚本类特殊字符转换成文本显示跨站点请求伪造(Cross-Site Request Forgeries)说明:冒充用户发起请求(在用户不知情的情况下), 完成一些违.原创 2020-07-20 21:00:52 · 133 阅读 · 0 评论 -
收下这些JavaScript使用技巧
创建二维数组原创 2020-07-13 07:49:32 · 109 阅读 · 0 评论 -
防抖(debounce)与节流(throttle)
emm原创 2020-07-01 18:31:32 · 195 阅读 · 0 评论 -
简单讲解浅拷贝和深拷贝
数据结构分成基本数据类型和引用数据类型。浅拷贝和深拷贝就是在这个基础上引入的概念。如果拷贝一个对象时,只对基本数据类型原创 2020-06-30 14:30:17 · 277 阅读 · 1 评论 -
2019前端技术趋势解读
三大框架标准化前端三大框架经过几年的发展已经渐渐的趋于平稳化、标准化。从Web前端应用开发框架发展来看,经历了MVC、MVP、MVVM、Virtual DOM、MNV*、CLI、webpack等工程化,逐步解决了Web前端开发效率、设计模式、DOM交互性能的问题。前端技术开发生态多元化从浏览器、移动端和服务端,Web前端正朝着多端、多技术实现的方向发展。这意味这前端技术栈能做的事越来越多,平台越来越大。如今移动端的三种主流的开发模式正朝着统一化发展。1、H5+原生(hybrid模式)...原创 2020-06-29 09:15:33 · 229 阅读 · 0 评论