自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(31)
  • 资源 (1)
  • 收藏
  • 关注

原创 CSS实现间距相同 首尾无边距处理

CSS实现间距相同 首尾无边距处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t

2021-07-16 11:34:05 852

原创 Javascript中的箭头函数

Javascript中的箭头函数没有自己的this不能使用new没有arguments没有prototype写法简单 默认返回 a => a

2021-05-10 15:19:17 81

原创 canvas粒子动画之404(即拿即用)

canvas粒子动画之404(即拿即用)/** * canvas 粒子动画 * 2020-09-28 gaoli */class Grain { constructor(el) { // 初始化canvas this.createCav(el); this.init(); } init() { setInterval(() => { const imgData = this.drawText(); this.draw

2021-01-05 16:03:17 203

原创 Js深拷贝

// 函数防抖function deload(fn, time) {var timer = null;return function() {if(timer) {clearTimeout(timer);}timer = setTimeout(fn, time)}}// 绑定事件window.onscroll = deload(func...

2020-06-02 11:16:58 111

原创 JS发布订阅模式

/*** 发布订阅模式** */function Observe(arr) { this.data = {}; this.SubData = Array.isArray(arr) ? arr : [arr];}// 发布Observe.prototype.Subscribe = function (type, fun) { if (!this....

2020-03-26 12:40:20 98

原创 JS数组之Array.from

JS数组之Array.fromArray.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。首先、我们从可迭代对象入手,我们知道JS里可迭代对象有:字符串、 数组、Map、 Set、generator,他们都属于ES6标准引入了新的iterable类型 注意:对象不属于iterable类型示例 var arr = ['Marry', 'Jack',...

2020-03-24 12:05:32 869 1

原创 手写一个new

new方法实现 function _new() { let arr = Array.from(arguments); const fn = arr.shift(); console.log(fn); let obj = {}; if (typeof fn !== "function") return; ...

2020-03-24 11:01:09 69

原创 JS call applay bind 实现

call方法实现 const name = "Marry"; function myCall() { const arr = Array.from(arguments); const obj = arr.splice(0,1)[0]; const sym = Symbol('a'); obj[sym] = this...

2020-03-23 17:13:23 203

原创 JS寄生组合继承

function Person(name,age) { this.name = name; this.age = age; } Person.prototype.sex = function () { return 123 }; // 重点 let con = function (obj) { ...

2020-03-23 12:23:35 80

原创 proxy的深度拦截实现

let obj = { city: "北京", area: ['海淀区', '石景山区', '门头沟区'], children: { test1: { name: "鲁谷", area: ['sss', 'bbb'] } ...

2020-03-23 11:35:03 1392

原创 ES6 generator function* yiled*用法

简单叙述一下generator用法function*关键字可以在表达式内部定义一个生成器函数。function* foo() { yield 'a'; yield 'b'; yield 'c';}let str = '';for (const val of foo()) { str = str + val;}console.log(str); // "...

2020-03-22 09:11:46 176

原创 JS对象常用方法

JS对象常用方法APIexampleObject.entriesconst entries = Object.entries({name: "Marry", age: 18}); // console.log(JSON.stringify(entries)) // [[“name”,“Marry”],[“age”,18]]Object.keysObject.key...

2020-03-22 08:33:25 135

原创 JS中判断数据类型

JS中判断数组还是对象

2020-03-21 16:23:11 60

原创 ES6 Map Set

flat数组扁平化/ 数组扁平化 排序let arr = [1,[2,3],[1,2,3],[3,2,1]];arr = arr.join(",").split(",").sort((x,y) => x-y)console.log(arr)我们看ES6的Map Setlet Arr = new Set(["A","B","C"]);console.log(Arr...

2020-03-18 11:42:16 75

原创 文本分割动画

function textSplice() { var dom = document.querySelector("#app"); var arr = dom.innerText.split(""); dom.style.opacity = 1; dom.innerHTML = ""; arr.forEach((tex...

2020-03-13 11:17:18 89

原创 JS判断元素是否在可视区域

function ISshow(dom, callback) { // start 。。。。 var status = Array.isArray(dom); // 减少判断 var scro = (function() { if(document.document...

2020-03-13 10:26:59 1110 1

原创 JS Event Loop

众所周知:JS是单线程 非阻塞 的脚本语言, 所有的任务都在主线程里执行。执行顺序1.执行主线程任务2.遇到宏任务添加到宏任务队列3.遇到微任务添加到微任务队列4.主线程执行完毕5.执行微任务队列中的微任务6.微任务执行完毕7.执行宏任务队列的宏任务8.宏任务执行完毕9.以上任务中包含新的微任务和宏任务 以此循环代码示例:setTimeout(()=>{ ...

2020-03-05 11:03:21 96

原创 web安全预防之xss攻击

innerHTML(原生)、v-html(vue)、dangerouslySetInnerHTML(react)等直接渲染html的函数慎用,确保渲染的数据是由前端写死的、无危害的才可直接使用;使用innerHTML(原生)、v-html(vue)、dangerouslySetInnerHTML(react)等直接渲染html的函数渲染请求数据时,需要先把字符串转义:1)、把 > 替换...

2020-03-05 10:22:48 104

原创 JS柯里化实例

function add() { // 第一次执行时,定义一个数组专门用来存储所有的参数 var _args = Array.prototype.slice.call(arguments); // 在内部声明一个函数,利用闭包的特性保存_args并收集所有的参数值 var _adder = function() { _args.push(...ar...

2020-03-04 19:16:20 168

原创 JS将俩个有序数组合并为一个有序数组

function arrSort(arr1, arr2) { var [i,j] = [0,0]; let newArr = []; while(i < arr1.length || j <arr2.length) { if (arr1[i] < arr2[j]) { newArr.push(arr1[i]); ...

2020-03-04 18:01:23 3011 1

原创 JS二叉树递归算法

模拟数据let tree = { value: "-", left: { value: '+', left: { value: 'a', }, right: { value: '*', left: { value: 'b', },...

2020-03-04 11:38:27 257

转载 http协商缓存和强缓存

http协商缓存VS强缓存之前一直对浏览器缓存只能描述一个大概,深层次的原理不能描述上来;终于在前端的两次面试过程中被问倒下,为了泄恨,查阅一些资料最终对其有了一个更深入的理解,废话不多说,赶紧来看看浏览器缓存的那些事吧,有不对的地方,请各位不吝赐教啊。本文主要讲解浏览器端的缓存,缓存的作用是不言而喻的,能够极大的改善网页性能,提高用户体验。1、浏览器缓存缓存这东西,第一次必须获取到资源后...

2020-03-03 16:52:42 66

原创 JS call方法实现

Function.prototype.mycall = function (context) { console.log(context, arguments) var content = context || window; content.fn = this; var args = []; // arguments是类数组对象,遍历之前需要保存长度,过滤出第一个传参 f...

2020-03-03 12:23:08 141

原创 JS算法之深度优先遍历及广度优先遍历

模拟数据// 模拟数据let msg = [ { name: 1, children: [ { name: '1-1', children: [ { name: '1-1-1'...

2020-03-03 11:17:07 732

原创 配置@babel/plugin-syntax-dynamic-import

根目录下创建 .babelrc内容:{ "plugins": ["@babel/plugin-syntax-dynamic-import"]}

2020-02-27 11:37:40 3920

原创 vue总结 vue-router篇

感悟:最近呢参加了一些面试,感觉自己基础还是不够好 总结一下vue-router 篇:跳转路由的几种方式: 1、声明式: 1) 根据路由路径(/home/sort/detail)跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link> ...

2020-02-27 10:21:28 195

原创 web拾色器

说明:此拾色器自己闲来无事随便画的 提供一个思路 大佬勿喷html: <!-- 选择器 --> <div class="color-select"> <div class="color-select-content" id="select_back"> <div class="color-point"&g...

2020-02-26 15:56:18 534

原创 vue组件注册 Vue.extend Vue.component Vue.use的使用 以及组件嵌套

/** * vue.extend用法 * 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 * 注意:此实例可以挂载到根实例之外 */ const Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}&l...

2020-02-23 11:18:19 554

原创 Promise.all简单封装

promise.all 本质上也是一个promise 通过then方法获取值function myPromiseall(...arguments) { return new Promise((reslove,reject) => { let arr = [], // resolove返回值 err = true, // Promise 状态 ...

2020-02-22 11:55:29 801

原创 Vue组件之间的传值的方式

父子组件之间的传值方法一:props 和 $emit父组件: 传值count给子组件<template> <div class="hello"> <!-- header --> <Header @func="Receive" :count="msg"></Header> <!-- nav -...

2020-02-14 11:31:05 132

原创 常见算法

letarr=[1,12,3,65,12,745,88,44];/****冒泡排序是每级筛选出最大的排到最后**/functionBubbling(arr){constlength=arr.length;letstate=false;//位置未进行改变则循环结束...

2020-01-21 22:18:55 94

city.js 城市选择专用

js城市JSON

2020-03-31

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除