JavaScript
阿伦gh
所有技术博客优先在个人站点(blog.helloallen.cn)上发布,每月底定期同步至此,主要目的是推广个人站点和内容备份
展开
-
讲讲JS中的类、继承和单例
本篇分别通过 ES5 和 ES6 讲述JS中的类、静态方法、继承和单例ES5 类和静态方法1、构造函数里面的方法和属性与原型链上的方法和属性都叫做:实例方法。要调用必须通过实例化构造函数(Person类),静态方法直接通过构造函数(类名)进行调用2、原型链上的属性和方法可以被多个实例共享,而构造函数里面的方法和属性不会被多个实例共享 // 通过构造函数来定义类 function Person(name, age) { // 构造函数里面的方法和属性 this.name = .原创 2020-09-23 20:00:09 · 351 阅读 · 0 评论 -
理解和使用ES6中的Symbol
ES6中引入了一种新的基础数据类型:Symbol,不过很多开发者可能都不怎么了解它,或者觉得在实际的开发工作中并没有什么场景应用到它,那么今天我们来讲讲这个数据类型,并看看我们怎么来利用它来改进一下我们的代码。这是一种新的基础数据类型(primitive type)Symbol是由ES6规范引入的一项新特性,它的功能类似于一种标识唯一性的ID。通常情况下,我们可以通过调用Symbol()函数来创建一个Symbol实例:let s1 = Symbol()或者,你也可以在调用Symbol()函数时.原创 2020-09-20 20:46:48 · 130 阅读 · 0 评论 -
通过JS将图片File转为base64并压缩
后端为了方便需要直接将图片存储为base64,但图片过大时转出的base64过长,因此前端需要对转后的base64进行压缩话不多说,直接上代码/** * * @param {需要转换的图片file} file * @param {是否返回压缩后的base64} isCompression * @param {转换成功后通过回调函数将结果返回} callback */export function imageToBase64(file, isCompression, callbac.原创 2020-09-20 20:46:11 · 1409 阅读 · 0 评论 -
HTTP协议的 Request Payload 和 Form Data 的区别
前言在一个前后端分离的新项目中,前端执行post请求,后端springMVC的 @RequestMapping 接收不到对应的请求参数。开始以为是前端webpack的proxy(将请求跨域代理到后台服务)配置问题。然而,并不是这样…proxy配置如下:"proxy": { "api": { "target": "http://localhost:7000/", "changeOrigin": true, "pathRewrite": { "^/api/v1": "" } }}前端原创 2020-06-13 22:42:23 · 699 阅读 · 0 评论 -
关于前端请求的那些事
引言前端是一个快速发展的领域,而在前端的技术栈当中,前端请求又是最见的一个领域,通过请求接口数据,才能将一个静态的页面动态化。本文将以前端发展的时间轴来逐一分析前端请求的技术演变及其优劣,针对这一课题,作者查阅了相关资料加以自己的理解,如有错误,烦请指出。XMLHttpRequestAJAX:Asynchronous JavaScript and XML,意思是用JavaScript执行异步网络请求。现代浏览器上,ajax的实现主要依靠 XMLHttpRequest 对象,该对象用于和服务器交换数据原创 2020-06-13 22:41:42 · 294 阅读 · 0 评论 -
Promise 从入门到自定义 系列一(准备阶段)
区别实例对象和函数对象函数对象:将函数作为对象使用时,简称为函数对象实例对象:new 函数产生的对象,简称为对象function Fn() { // Fn函数}const fn = new Fn() // Fn是构造函数,fn是实例对象(简称对象)console.log(Fn.prototype) // Fn是函数对象Fn.bind({}) // 调用Fn函数对象的bind方法$('#test') // jquery函数$.get('/test') // 调用jquery函数对象的g原创 2020-06-13 22:39:01 · 93 阅读 · 0 评论 -
Promise 从入门到自定义 系列二(promise的理解和使用)
Promise是什么?理解抽象表达:Promise是JS中进行异步编程的新的解决方案(旧的是谁?纯回调)具体表达:从语法上讲,Promise是一个构造函数(通过创建实例来使用);从功能上说,Promise对象用来封装一个异步操作并可以获取其结果。promise的状态改变pending变为resolvedpending变为rejected说明:只有这两种,且一个promise对象只能改变一次;无论变为成功还是失败,都会有一个结果数据;成功的结果数据一般称为value,失败的结果数据一原创 2020-06-13 22:38:25 · 182 阅读 · 0 评论 -
自定义表单验证
背景:登录页面验证用户名和密码是否合法:vue + ElementUIlogin.vue<template> <div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules"原创 2019-01-31 11:24:33 · 614 阅读 · 0 评论 -
GMT时间、UTC时间、CST时间
1.UTC时间(世界标准时间) 与 GMT时间(格林威治时间我们可以认为格林威治时间就是世界协调时间(GMT=UTC),格林威治时间和UTC时间均用秒数来计算的。世界标准时间 (UTC, Coordinated Universal Time) 是当今民用时间的基础。它使用一天 24 小时时间制,并结合了地球的自转时间与原子钟的高精度度量。UTC是一个标准,而不是一个时区。UTC 是一个全球通...原创 2019-01-31 09:47:15 · 12620 阅读 · 0 评论 -
关于this
this指向:this 永远指向最后调用它的那个对象示例1 var name = 'hello' function a() { var name = 'world' console.log(this.name) // hello console.log('inner:' + this) } a() console.log(...原创 2019-01-28 15:40:51 · 93 阅读 · 0 评论 -
前端代码规范
Google JS 代码规范1、使用空格代替tab2、杜绝var,如果变量不需要被重新赋值,默认应该使用const3、优先使用箭头函数,可以避免一些this的指向问题4、使用模板字符串取代连结字符串:// 连接字符串:function sayHi(name) { return 'How are you, ' + name + '?';}// 模板字符串:function sa...原创 2020-06-13 22:47:42 · 749 阅读 · 0 评论 -
实现在vue中element-ui的el-dialog弹框拖拽
1、在 utils 中新建 directives.js 文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialo...转载 2019-01-18 19:40:20 · 20927 阅读 · 34 评论 -
关于AJAX
AJAX:Asynchronous JavaScript and XML,意思是用JavaScript执行异步网络请求。现代浏览器上,ajax的实现主要依靠XMLHttpRequest 对象,该对象用于和服务器交换数据1、XMLHttpRequest对象有 open(“请求类型”, “请求文件在服务器上的位置”,是否异步) 和 send() 方法。对于get请求可以通过向URL添加唯一的ID...原创 2018-12-07 23:24:45 · 117 阅读 · 0 评论 -
谈谈Webpack
// 一个常见的`webpack`配置文件const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = ...原创 2020-06-13 22:48:03 · 129 阅读 · 0 评论