- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 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
871
原创 Javascript中的箭头函数
Javascript中的箭头函数没有自己的this不能使用new没有arguments没有prototype写法简单 默认返回 a => a
2021-05-10 15:19:17
83
原创 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
205
原创 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
113
原创 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
100
原创 JS数组之Array.from
JS数组之Array.fromArray.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。首先、我们从可迭代对象入手，我们知道JS里可迭代对象有：字符串、 数组、Map、 Set、generator，他们都属于ES6标准引入了新的iterable类型 注意：对象不属于iterable类型示例 var arr = ['Marry', 'Jack',...
2020-03-24 12:05:32
870
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
70
原创 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
204
原创 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
83
原创 proxy的深度拦截实现
let obj = { city: "北京", area: ['海淀区', '石景山区', '门头沟区'], children: { test1: { name: "鲁谷", area: ['sss', 'bbb'] } ...
2020-03-23 11:35:03
1400
原创 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
177
原创 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
原创 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
77
原创 文本分割动画
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
90
原创 JS判断元素是否在可视区域
function ISshow(dom, callback) { // start 。。。。 var status = Array.isArray(dom); // 减少判断 var scro = (function() { if(document.document...
2020-03-13 10:26:59
1112
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
112
原创 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
3023
1
原创 JS二叉树递归算法
模拟数据let tree = { value: "-", left: { value: '+', left: { value: 'a', }, right: { value: '*', left: { value: 'b', },...
2020-03-04 11:38:27
261
转载 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
736
原创 配置@babel/plugin-syntax-dynamic-import
根目录下创建 .babelrc内容：{ "plugins": ["@babel/plugin-syntax-dynamic-import"]}
2020-02-27 11:37:40
3924
原创 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
545
原创 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
555
原创 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
803
原创 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
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人