- 博客(216)
- 收藏
- 关注
RSS订阅原创 js A相对b的位置和卷动
function heightToTop(ele){ //ele为指定跳转到该位置的DOM节点 const root = document.body; let height = 0; do{ height += ele.offsetTop; ele = ele.offsetParent; }while( ele !== root ) return height;}元素滚动到可见区域 // var ele = d...
2022-04-29 17:35:52
293
原创 寄生构造函数 寄生组合创建对象
//寄生构造函数-产生新的数据类型// 创建具有额外方法的的特殊数组，但是不能影响原来的数组的原型链function specialArray(){const values = new Array();for(let i = 0 ;i<arguments.length;i++){values.push(arguments[i])}values.toSplitLine = function(){return this.join("||")}return value
2021-11-11 23:11:29
227
原创 设计原则-开闭原则（对扩展开放，对修改关闭）
Function.prototype.after = function(afterFn){var _this = this;return function(){var res = _this.apply(this,arguments)afterFn.apply(this,arguments)return res;}}Function.prototype.before = function(beforeFn){var _this = this;return functi
2021-10-19 11:20:16
168
原创 jq $.Deferred() 实现 async // Promise 实现Async
function getAjax1(){var def= $.Deferred()setTimeout(function(){def.resolve("我1")}, 100);return def}function getAjax2(res){var def= $.Deferred()setTimeout(function() {def.resolve(res+"爱2")}, 100);return def}function getAjax3(res)
2021-10-15 17:31:03
182
1
原创 vue- proxy
const dom = new Proxy({}, {get(target, property) {return function(attrs = {}, ...children) {const el = document.createElement(property);for (let prop of Object.keys(attrs)) {el.setAttribute(prop, attrs[prop]);}for (let child of children) {i
2021-10-09 11:30:57
59
原创 Homebrew 国内安装
苹果电脑 常规安装脚本（推荐 完全体 几分钟安装完成）：/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"苹果电脑 极速安装脚本（精简版 几秒钟安装完成）：/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" speed苹果电脑 卸载脚本：/b
2021-10-01 10:08:35
125
原创 重学前端：for in for of Object.keys
Array.prototype.method=function(){ console.log(this.length);}var myArray=[1,2,3]myArray.name="数组";for (var key in myArray) {console.log(key);}// 0 1 2 name method// for in 循环回便利所有的可枚举属性，和原型链上的可枚举属性。适合便利对象，不适合便利数组Object.prototype....
2021-09-09 12:02:52
77
原创 requestAnimationFrame
es11 新增使用ES11需要安装的babel插件plugins: [ "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods", "@babel/plug
2021-09-09 11:08:44
77
原创 每周有收获--element ui源码 toolTip原理
<!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-Compatible" content="ie=edge"><title>Document</
2021-09-06 14:35:08
824
原创 每周收获-- 异常捕获和上报
1 try catch 、 promise.catch () 等2.window.onerror = function(message, source, lineno, colno, error) { console.log('捕获到异常：',{message, source, lineno, colno, error}); }。无法捕获 静态资源异常，或者接口异常。3. window.addEventListener('error', (error) => { cons...
2021-07-09 21:15:15
80
原创 每周收获--js 换肤
1，通过class 来控制。document.documentElement.className = 'theme-dark';2.S改变link标签的href切换样式表 。<link id="theme" href="theme-light.css" rel="stylesheet" type="text/css">document.getElementById('#theme').href = 'theme-dark.css';3.HTML 的 rel 属性下的 altern
2021-07-09 21:06:07
75
原创 每周有收获--优雅的捕获 async await错误
// 举个例子let promise0 =function(){return new Promise((resolve,reject)=>{setTimeout(()=>{reject('错误')},200)})}let promise1 =function(){return new Promise((resolve,reject)=>{setTimeout(()=>{resolve(11)},200)})}le..
2021-05-25 15:03:18
167
原创 每周有收获-nuxt 页面级新增和应用
Nuxt页面级新增layOut:属性选择当前布局所在的父模版。page文件夹下为：页面级组件举个例子为testPage.vueLayouts文件下的文件可以提供一个页面的父级环境举个例子：在layouts文件夹下新建test.vue 正常书写html等,在你想要填充page的页留下<nuxt /> 标签， 并在testPage.vue中设置属性layOut:’test’。那么您的page页面将渲染到test.vue的原来的<nuxt /> 标签位...
2021-04-21 19:14:29
519
原创 每周小收获 - 点击伪元素
一种是： 元素本身：pointer-events: none;禁用点击事件, 其伪元素通过pointer-events: auto;启用点击事件，使鼠标只能点击到伪元素第二种是：通过子元素的事件冒泡原理，在子元素事件处理结束后return false，告知父元素事件处理完毕。这样只就屏蔽了父元素接收事件，然后:after伪元素是悬浮在子元素上面的，故点击伪元素的时候触发父元素事件...
2021-04-13 12:02:25
157
原创 每周小收获-正则小补充-返向断言
const reLookahead = /\D(?=\d+)/, match = reLookahead.exec('$123.89'); console.log( match[0] ); // $const reLookbehind = /(?<=\D)\d+/, match = reLookbehind.exec('$123.89'); console.log( match[0] ); // 123.89const reLookbehindNeg = /(?<!\D)\d+...
2021-04-13 09:48:16
39
原创 混合开发调试h5spy-debugger
h5 debugger工具- spy-debugger 使用说明写在前面正常进行h5调试，我们可以借助的方法有数据线链接电脑，使用chromeChrome://inspect （需电脑可翻墙） 借助charles工具、mobiledebug调试工具、xCode等（有一点学习成本） 或者嵌入原生app开发，原生老师提供内部版本的控制台工具；（局限性）工具调试的原理都是一致的，对http请求做了一层代理和转发本文章介绍一款小众调试工具，spy-debugger官方链接：h.......
2021-03-19 18:28:18
800
原创 vue hook
//父组件<rl-child :value="40" @hook:mounted="childMountedHandle" />method () { childMountedHandle() { // 子组件触发mounted,父组件就触发这个事件 }},//子组件，什么也不需要操作mounted() {document.addEventListener('scroll', this.throttle);this.$once('hook:...
2021-03-10 21:14:42
76
原创 每周收获-http简单深入
http简单深入1、Cache缓存Private publicN0-cache 有缓存，但是不能直接使用缓存，需要验证。No-store 完全没有缓存，需要重新发送请求。max-ages-Max-agemax-stale2、验证Must-revalidateProxy-revalideteNo-transform告诉代理服务器不要压缩和转换（只是说明，不是强制执行）Last-modified 上次修改时间配合if-modified-si...
2021-02-28 18:08:37
70
原创 每周有收获之--实战德芙般丝滑tabs
像element ui 一样nav 部分丝滑的tabs切换关键在于获取dom 的宽度。通过宽度计算自己应该的left 和自身宽度 然后使用css3transition: all 1s ease;或者其他 css 插件或者js 插件实现动画红色标记处切换要有丝滑动效果。mounted 后执行截图中的函数；乘以 0.8 是因为 。 ui要求 下划线的宽度是 当前nav 宽度的 80%...
2021-01-18 21:10:01
97
原创 每周有收获之--Vue 边界组件循环引用、es6 Module循环引用
Vue 边界循环引用。需要注意的地方如果是tree状态递归组件，注意递归过程中的<Tree v-if> 判断。否则容易溢出 index业务页面中先A组件，但是A使用了B组件。B组件中也使用了A组件“形成了父子悖论”除了注意v-if判断。A组件可以在动态引入B组件。或者在A组件beforeCreate中注册B组件。或者将二者全注册。方法1://方法2在Tree组件中beforeCreate: function (...
2021-01-17 11:15:16
232
原创 每周有收获之-vue 组件制造小注意
// vue 深层探究// Vue.extend( options )// 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 必须是函数的返回，因为是子例// 举个例子const Demo = Vue.extend({template:`<h1 @click="onHandle">标题 {{a}}</h1>`,data(){return {a:100}},methods:{onHandle(){t
2021-01-13 19:47:13
133
1
原创 每周有收获之- const let 源码
// 实现 let// (// function(){// var a = 1;// console.log(a);// }// )()// 实现constfunction _const(key, value) {const desc = {value,writable: false}Object.defineProperty(window, key, desc)}
2021-01-10 19:06:23
126
原创 每周有收获之--proxy 和管道函数
// 试用proxy 实现 管道函数 x |> fn1 |> fn2 |fn3// 函数式编程之-函数的组合// const add = (x)=>{// return x+1;// }// const double = (x)=>{// return x * 2;// }// const add100 = (x)=>{// return x +1000;// }// const pipe = (...args)=>..
2021-01-05 21:17:56
97
原创 设计模式-工厂模式 -简单工厂
1.简单工厂:又叫静态工厂方法，就是创建对象，并赋予属性和方法应用：抽取类相同的属性和方法封装到对象上function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o;}...
2020-12-28 21:06:30
53
原创 vue 组件通信之--非业务性组件不应该依赖 vuex
组件信息之间传递$bus this.$parent Provide inject Vue.observable // 创建临时store
2020-12-28 21:04:56
86
原创 每周一组件 之-懒加载指令
const LazyLoad = {init(el, val, defaultSrc) {el.setAttribute('data-src', val)el.setAttribute('src', defaultSrc)},observe(el) {var io = new IntersectionObserver((entries) => {const realSrc = el.dataset.srcif (entries[0].isIntersecting) {
2020-12-28 20:57:48
82
原创 每周一组件之--指令-- 防抖截流指令
可以来回传递参数的指令。可以进行封装上传组件之类的const throttleHaveParam = {inserted: function(el, binding) {let timeoutel.addEventListener('input', function() {const _this = this;const args = arguments;if (!timeout) {timeout = setTimeout(() =&g...
2020-12-28 20:53:51
158
原创 每周一组件之- MP3组件的自我管理
<template><div class="player"><audioclass="hidden"ref="audio"@pause="pause"@play="play"@timeupdate="updateTime"@ended="ended":src="src"controls="controls"controlslist="nodownload"></audio><div @click="paly
2020-12-28 20:47:23
109
原创 惰性函数
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>惰性函数</title></head><body><p id="test1">惰性函数1
2020-12-28 20:43:04
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人