前端基础
cellinlab
这个作者很懒,什么都没留下…
展开
-
js实现兼容多种数据类型深拷贝
// 深拷贝function deepCopy (data) { const t = typeOf(data) let o if (t === 'array') { o = [] } else if (t === 'object') { o = {} } else { return data } if (t === 'array') { ...原创 2020-04-26 14:51:45 · 429 阅读 · 0 评论 -
JS生成随机字符串
function rstr (len = 32) { const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890' const maxPos = $chars.length let str = '' for (let i = 0; i < len; i++) { str...原创 2020-04-22 17:37:48 · 577 阅读 · 0 评论 -
Jquery及div实现自定义样式select(dropdown)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit...原创 2020-04-15 17:30:12 · 529 阅读 · 0 评论 -
网页布局解决方案速查思维导图
[点击查看代码示例]原创 2020-04-11 14:06:35 · 340 阅读 · 0 评论 -
浏览器工作原理 学习笔记
学习地址:[浏览器工作原理与实践](https://time.geekbang.org/column/intro/100033601)浏览器架构演化进程:一个程序的运行实例。详细解释就是,启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。线程:依附于进程的,在进程中使用多线程并行处理能提升运算效率进程与线...原创 2020-04-06 18:28:39 · 2258 阅读 · 0 评论 -
ES6 Generator 在抽奖和长轮询场景中的应用
{ // 抽奖次数限制 let draw = function(count) { // 抽奖逻辑 console.info(`剩余抽奖次数${count}`) } let residue = function* (count) { while (count > 0) { count-- yield draw(count) ...原创 2020-03-31 17:39:48 · 256 阅读 · 0 评论 -
ES6 Iterator 在简单对象中的实现
// Iterator{ let arr = ['hello', 'world'] let map = arr[Symbol.iterator]() console.log(map.next()) console.log(map.next()) console.log(map.next())}{ // 实现iterator let obj = { sta...原创 2020-03-31 16:54:22 · 134 阅读 · 0 评论 -
使用ES6 Proxy和Reflect实现数据校验
// 数据校验function validator(target, validator) { return new Proxy(target, { _validator: validator, set(target, key, value, proxy) { if (target.hasOwnProperty(key)) { let va = this._valida...原创 2020-03-31 14:47:22 · 240 阅读 · 0 评论 -
JavaScript 对象深拷贝的实现
// ./src/helpers/util.tsexport function isPlainObject(val: any): val is Object { return toString.call(val) === '[object Object]'}export function deepMerge (...objs: any[]): any { const resul...原创 2020-03-26 14:59:35 · 222 阅读 · 1 评论 -
TypeScript 从零实现 axios 0x5 异常处理
错误处理网络异常// ./xhr.tsimport { AxiosRequestConfig, AxiosPromise, AxiosResponse } from './types'import { parseHeaders } from './helpers/headers'// ./src/xhr.tsexport default function xhr(config:...原创 2020-03-21 16:26:28 · 490 阅读 · 0 评论 -
前端使用XMLHttpRequest实现通过链接下载文件
前端使用XMLHttpRequest实现通过链接下载图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2020-03-04 15:09:07 · 2778 阅读 · 0 评论 -
重学css 0x4 CSS动画
CSS中的动画类型transition补间动画 keyframe关键帧动画 逐帧动画Transition 补间动画位置——平移(left/right/margin/transform) 方位——旋转(transform) 大小——缩放(transform) 透明度(opacity) 其他——线性变化(transform)<!DOCTYPE html>&l...原创 2020-02-25 21:28:53 · 130 阅读 · 0 评论 -
重学css 0x3 CSS效果
box-shadow营造层次感(立体感) 充当没有宽度的边框 特殊效果/* x偏移量 | y偏移量 | 阴影颜色 */box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | ...原创 2020-02-24 21:53:27 · 188 阅读 · 0 评论 -
重学css 0x2 CSS布局
发展早期table为主 简单 后来以技巧性布局为主(难) 现在推广flexbox/grid(偏简单)常用布局方法table表格布局 float浮动+margin inline-block布局 flexbox布局表格布局<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2020-02-23 11:06:11 · 167 阅读 · 0 评论 -
重学css 0x1 CSS基础
Cascading Style Sheet (层叠样式表)选择器基于性能考虑,选择器是从右往左解析的,可以更快匹配选择器分类元素选择器 a {} 伪元素择器 ::before{} 类选择器 .link {} 属性选择器 [type=radio]{} 伪类选择器 :hover{} 伪类是一种状态 ID选择器 #id {} 组合选择器 [type=checkbox] + la...原创 2020-02-22 22:07:42 · 120 阅读 · 0 评论 -
重学css 0x0 HTML
常见元素head区meta title style link script basebody区div/section/article/aside/header/footer p span/em/strong table/thead/tbody/tr/td ul/ol/li/dl/dt/dd a form/input/select/textarea/button...原创 2020-02-22 15:40:15 · 257 阅读 · 0 评论 -
tsd init 报错The type definition `index.d.ts` does not exist. Create one and try again.
使用tsd init 报错报错信息The type definition `index.d.ts` does not exist. Create one and try again.解决方案npm i tsd@0.6.5 -g原创 2020-02-21 22:08:35 · 1396 阅读 · 0 评论 -
Learning TypeScript 0x1 自动化工作流程
Gulp初始化npm init -y编译依赖npm i gulp-typescript --save-dev全局安装npm i -g gulp开发依赖npm i --save-dev gulp测试// gulpfile.jsvar gulp = require('gulp')gulp.task('default', function() {...原创 2020-02-13 15:57:15 · 123 阅读 · 0 评论 -
Learning TypeScript 0x0 基础
架构及设计目标TS是JS的超集。安装npm i -g typescript新建test.tsvar t : number = 1;编译tsc test.ts编译结果test.jsvar t = 1;类型可选的静态类型声明var counter; // 未知(any)类型var counter = 0; // number类型(推断...原创 2020-02-12 22:50:49 · 147 阅读 · 0 评论 -
JSOOP module(模块化)
可以利用模块隐藏部分实现const _radius = new WeakMap()class Circle { constructor(radius) { _radius.set(this, radius) } draw() { console.log(`Circle with radius ${_radius.get(this)}`) }}con...原创 2020-01-12 14:32:12 · 112 阅读 · 0 评论 -
JSOOP 实战Stack(栈)的实现
const _items = new WeakMap()class Stack { constructor() { _items.set(this, []) } push(obj) { _items.get(this).push(obj) } pop() { const items = _items.get(this) if (items.l...原创 2020-01-12 13:59:08 · 134 阅读 · 0 评论 -
JSOOP ES6继承(extends、super和方法重写)
extendsclass Shape { move() { console.log('move') }}class Circle extends Shape { draw() { console.log('draw') }}const c = new Circle()superclass Shape { constructor (c...原创 2020-01-12 13:39:10 · 1264 阅读 · 0 评论 -
JSOOP 存取器(getter和setter)
外部访问私有属性const _radius = new WeakMap()class Circle { constructor(radius) { _radius.set(this, radius) } getRadius() { return _radius.get(this) }}const c = new Circle(1)es6语法,实...原创 2020-01-12 13:19:41 · 191 阅读 · 0 评论 -
JSOOP 私有化属性(Symbol和WeakMap)
使用Symbol实现私有属性const _radius = Symbol()class Circle { constructor(radius) { this[_radius] = radius }}const c = new Circle(1)const key = Object.getOwnPropertySymbols(c)[0]console.log(c[...原创 2020-01-11 23:44:49 · 202 阅读 · 0 评论 -
JSOOP this关键字
方法调用:从一个对象上调用方法,对象中的this指向对象本身函数调用:这种调用没有指向,其this指向全局对象(window或global)const Circle = function() { this.draw = function() { console.log(this) }}const c = new Circle()// method callc....原创 2020-01-11 23:09:58 · 147 阅读 · 0 评论 -
JSOOP class 静态方法和实例方法
实例方法在实例或者说对象中生效,静态方法在类中起效。class Circle { constructor(radius) { this.radius = radius } // instance method draw() {} // Static method static parse(str) { const radius = JSON.par...原创 2020-01-11 20:51:12 · 429 阅读 · 0 评论 -
JSOOP class
简单示例class Circle { constructor (radius) { this.radius = radius this.move = function() {} } draw() { console.log('draw') }}const c = new Circle(1)class本质是function,_class...原创 2020-01-11 20:27:15 · 134 阅读 · 0 评论 -
JSOOP 多态 及其应用场景
多态实现及其应用function extend(Child, Parent) { Child.prototype = Object.create(Parent.prototype) Child.prototype.constructor = Child}function Shape(color) { this.color = color}Shape.prototype...原创 2020-01-11 16:34:19 · 296 阅读 · 0 评论 -
JSOOP 封装extend函数和基类方法重写
封装之前function Shape(color) { this.color = color}Shape.prototype.duplicate = function() { console.log('duplicate')}function Circle(radius, color) { Shape.call(this, color) this.radius = ra...原创 2020-01-09 23:17:13 · 305 阅读 · 0 评论 -
JSOOP Object.create 从给定的原型创建对象
function Shape() {}Shape.prototype.duplicate = function() { console.log('duplicate')}function Circle(radius) { this.radius = radius}Circle.prototype = Object.create(Shape.prototype)Circl...原创 2020-01-09 22:35:47 · 113 阅读 · 0 评论 -
JavaScript prototype实现静态方法(原型继承)
原型继承function Circle (radius) { // instance members this.radius = radius}// Prototype membersCircle.prototype.draw = function() { console.log('draw')}const c1 = new Circle(1)const c2 =...原创 2020-01-07 21:08:27 · 553 阅读 · 0 评论 -
JavaScript Unicode和字符串相互转换
const str = '????:Hello World????!'const unicodeArr = []for (const char of str) { unicodeArr.push(char.codePointAt(0))}console.log(unicodeArr)let newStr = ''unicodeArr.forEach(unicode => { ...原创 2020-01-07 20:51:20 · 355 阅读 · 0 评论 -
JSOOP 原型链继承
一切对象都继承自__proto__多级继承原创 2020-01-06 21:44:27 · 124 阅读 · 0 评论 -
JS OOP 简单示例
function stopWatch() { let startTime = null let endTime = null let running = false let duration = 0 this.start = function () { if (running) { throw new Error('stoWatch is running!...原创 2020-01-06 21:08:14 · 320 阅读 · 0 评论 -
JavaScript 值类型和引用类型
值类型let number = 10function increase(number) { number++}increase(number)console.log(number) // 10引用类型let obj = { value: 10}function increase(obj) { obj.value ++}increase(obj)co...原创 2020-01-05 22:58:49 · 99 阅读 · 0 评论 -
JS Array中reduce实现二维数组转一维数组和元素次数统计
二维数组转一维// 二维数组转一维数组const flattened = [[0,1],[2,3],[4,5]].reduce((a,b) => a.concat(b), [])console.log(`flattened is ${flattened}`)数组中元素出现次数统计// 计算数组中每个元素出现的次数const names = ['a', 'b', 'a'...原创 2019-12-30 10:16:17 · 465 阅读 · 0 评论 -
Web API 接口参考Node之Node.nextSibling
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-12-25 11:23:38 · 346 阅读 · 0 评论 -
Vue 实战后台管理项目 0x0 Vuecli项目初始化
创建项目npm i --global vue-clivue init webpack vcustomers初始化gitgit initgit add .git commit -m "init init"git remote add origin https://gitee.com/用户名/仓库名.gitgit pull origin master --allow-u...原创 2019-11-28 21:15:04 · 132 阅读 · 0 评论 -
《Javascript 高级程序设计(第三版)》笔记0x2 JavaScript基本概念(1)
目录语法变量数据类型 typeof: Undefined类型 Null类型 Boolean类型 Number类型 浮点数值 数值范围 NaN 数值转换 String类型 字符字面量 字符串的特点 转换为字符串 Object类型...原创 2018-12-04 19:49:46 · 215 阅读 · 0 评论 -
《Javascript 高级程序设计(第三版)》笔记0x3 JavaScript基本概念(2)
目录 操作符 一元操作符 位操作符 布尔操作符 乘性操作符 加性操作符 关系操作符 相等操作符 条件操作符 赋值操作符 逗号操作符操作符 包括算术操作符、位操作符、关系操作符和相等操作符。 一元操作符//递增和递减操作符var age = 29;va...原创 2018-12-05 00:10:30 · 234 阅读 · 0 评论