javacsript
文章平均质量分 57
yakunyang(2016)
入坑2016,留下一些日志,做留恋流年
展开
-
混合开发调试h5spy-debugger
h5 debugger工具- spy-debugger 使用说明写在前面正常进行h5调试,我们可以借助的方法有数据线链接电脑,使用chromeChrome://inspect (需电脑可翻墙) 借助charles工具、mobiledebug调试工具、xCode等(有一点学习成本) 或者嵌入原生app开发,原生老师提供内部版本的控制台工具;(局限性)工具调试的原理都是一致的,对http请求做了一层代理和转发本文章介绍一款小众调试工具,spy-debugger官方链接:h.......原创 2021-03-19 18:28:18 · 846 阅读 · 0 评论 -
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 · 315 阅读 · 0 评论 -
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 · 196 阅读 · 1 评论 -
每周收获-- 异常捕获和上报
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 · 92 阅读 · 0 评论 -
每周有收获--优雅的捕获 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 · 183 阅读 · 0 评论 -
每周小收获-正则小补充-返向断言
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 · 50 阅读 · 0 评论 -
每周有收获之- 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 · 135 阅读 · 0 评论 -
每周有收获之--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 · 114 阅读 · 0 评论 -
设计模式-工厂模式 -简单工厂
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 · 59 阅读 · 0 评论 -
发布订阅模式、观察者
// 发布订阅// 创建一个对象// 在该对象上创建一个缓存列表(调度中心)// on 方法用来把函数 fn 都加到缓存列表中(订阅者注册事件到调度中心)// emit 方法取到 arguments 里第一个当做 event,根据 event 值去执行对应缓存列表中的函数(发布者发布事件到调度中心,调度中心处理代码)// off 方法可以根据 event 值取消订阅(取消订阅)// once 方法只监听一次,调用完毕后删除缓存函数(订阅一次)let eventEmitter...原创 2020-06-29 19:34:04 · 136 阅读 · 0 评论 -
惰性函数
<!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 · 135 阅读 · 0 评论 -
symbol 的前世今生
1,Symbol 前世今生ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。是第7种数据类型: string/number/undefiend/null/Boolearn/Object/symbolSymbol 值通过Symbol函数生.原创 2020-12-16 19:16:08 · 121 阅读 · 0 评论 -
js 语句和表达式
Js语句(statement)语句(statement)”和“表达式(expression)一个“句子(sentence)”是一个表达想法的词汇的完整构造。它由一个或多个“短语(phrase)”组成,它们每一个都可以用标点符号或连词(“和”,“或”等等)连接。一个短语本身可以由更小的短语组成。一些短语是不完整的,而且本身没有太多含义,而另一些短语可以自成一句。这些规则总体地称为英语的 文法。语句完成值一个鲜为人知的事实是,所有语句都有完成值(即使这个值只是u...原创 2020-12-16 18:33:43 · 507 阅读 · 0 评论 -
CMD 、AMD 、es6 模块化
CMD 、AMD 、es6 模块化产生的背景:变量的收纳减少全局的污染和不同功能模块的可维护性。大程序拆分成互相依赖的小文件,再用简单的方法拼装起来CMD同步加载,脱胎于nodejs参照参照CommonJS规范实现,此规范广泛使用于后台。耗费的仅是读取时间举个例子: var math = require('math'); math.add(2,3); // 5在第一行require('math')之后运行,因此必须等math.js加载完成。这对服务器端不是一个问题,因为...原创 2020-12-03 19:32:05 · 211 阅读 · 0 评论 -
contenteditable=“true“ 富文本编辑器小插图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>contenteditable</title><style>*{margin:0;padding:0;}原创 2020-11-25 20:58:11 · 296 阅读 · 0 评论 -
vue 组件之间的通信 非业务性组件不应该依赖 vuex
vue 组件之间的通信。(非业务性组件。不应依赖vuex) 或者 自己管理好自己。provide/inject祖先组件中通过provider来提供变量,然后在孙组件中通过inject来注入变量procide/inject API主要解决了跨域组件间的通讯问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系下边通过一个例子来说明provide/inject的用法:父组件<template> <div> .原创 2020-11-13 11:46:16 · 155 阅读 · 0 评论 -
洗牌
let arr = [1,2,3,4,5];function shuffle(a) {var j, x, i;for (i = a.length; i; i--) {j = Math.floor(Math.random() * i);x = a[i - 1];a[i - 1] = a[j];a[j] = x;}return a;}function shuffle(a) {for (let i = a.length; i; i--) {let j = .原创 2020-08-24 18:29:35 · 101 阅读 · 0 评论 -
App与 JS 交互,桥连接代码以及原理
App与 JS 交互桥连接代码以及原理概述: 1 使用demo 2 文档 3 源码解析举个例子1,js调用app2,app 调用js2,文档(1)js 调用app// 调用时传递的参数均为字符串,未方便书写,写成了对象形式,下同。/***向app发起请求* actionName {String} 调用app的方法名* @param args.__token {String} token为唯一标识,用来区别,同一方法的多次调用。*...原创 2020-08-24 11:00:07 · 3494 阅读 · 0 评论 -
树-DFS(深度优先搜索)和BFS(广度优先搜索)广度优先搜索算法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>YYK</title><script src="https://cdn.staticfile.org/jquery/1..原创 2020-08-19 21:01:22 · 169 阅读 · 0 评论 -
前端过滤 emoji 表情包
function filterEmoji(Emoji){return Emoji = Emoji.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u3原创 2020-08-19 11:25:43 · 758 阅读 · 0 评论 -
递归便利子树
const obj ={name:"1",id:1,child:[{name:2,id:2,child:[{name:4,id:4,}]},{name:3,id:3,},{name:5,id:5,}]}// function recursionGet(setValues, valueId) {// let value = null;// for (let index = 0; index ...原创 2020-08-11 14:06:39 · 226 阅读 · 0 评论 -
实现继承的多种方式
<!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>写在前面:<br>关于继原创 2020-08-10 23:45:33 · 105 阅读 · 0 评论 -
创建对象的多种方式
<!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><script>/.原创 2020-08-10 23:10:05 · 107 阅读 · 0 评论 -
js 洗牌算法
function shuffle(arr){ var result = [], random; while(arr.length>0){ random = Math.floor(Math.random() * arr.length); result.push(arr[random]) arr.splice(random, 1) } return result;}原创 2020-08-05 17:04:43 · 843 阅读 · 0 评论 -
js reduce 高阶函数。 tcp udp
function myReduce(arr,cb){//简单模式,没有初值let res = arr[0];for(let i = 1 ;i<arr.length;i++){const cur = arr[i];res = cb(res,cur,i,arr);}return res;}https://zhuanlan.zhihu.com/p/24860273原创 2020-08-05 16:23:01 · 87 阅读 · 0 评论 -
cors 跨域
原创 2020-07-21 16:11:14 · 90 阅读 · 0 评论 -
深入理解jsonp
原创 2020-07-21 16:00:16 · 101 阅读 · 0 评论 -
rem
rem布局原理深度理解(以及em/vw/vh)一、前言 我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对rem的理解很含糊, 包括vw、vh等。所以打算写博客总结一下,以加深理解。二、几个概念 这里就不讲那些,物理像素、设备像素比了,可以自己查阅。要去理解rem/em/vm/vh等,首先要直观的去理解他们到底是什么?理解好了,后面就好办了。其实这几个都是css原创 2020-07-08 18:14:11 · 180 阅读 · 0 评论 -
仿写 new
function myNew(){var obj = Object.create(null);Constructor = [].shift.call(arguments);obj.__proto__ = Constructor.prototype;var ret = Constructor.apply(obj, arguments);return typeof ret === 'object' ? ret : obj;}原创 2020-06-29 18:51:24 · 141 阅读 · 0 评论 -
简单的数据递归渲染
treeArr= [{name:"yyk-1",children:[{name:"yyk-1-1",children:[{name:"yyk-1-1-1",}]},{name:"yyk-1-2",}]},{name:"yyk-2",},{name:"yyk-3",}]function recursive(data) {var str = '<ul>';for (var i = 0; i .原创 2020-05-12 11:49:05 · 410 阅读 · 0 评论 -
js 数组扁平化
const arr = [1, [1,2], [1,2,3]]arr.flat(Infinity) // [1, 1, 2, 1, 2, 3]// 方法二 正则const str = `[${JSON.stringify(arr).replace(/(\[|\])/g, '')}]`JSON.parse(str) // [1, 1, 2, 1, 2, 3]// 方法三 递归...原创 2020-04-23 19:54:43 · 100 阅读 · 0 评论 -
类型检测
// var type = {}.toString.call(array)// var reg = /Symbol/g;// var isSymbol = reg.test(type);// console.log("type---",isSymbol)原创 2020-04-23 19:37:39 · 92 阅读 · 0 评论 -
js 共有方法,私有方法,特权方法,静态属性和方法,静态类
Javascript 面向对象(共有方法,私有方法,特权方法,静态属性和方法,静态类)示例讲解一,私有属性和方法https://www.cnblogs.com/xiongzaiqiren/p/6733985.html私有方法:私有方法本身是可以访问类内部的所有属性(即私有属性和公有属性),但是私有方法是不可以在类的外部被调用。 1 <script> 2 ...原创 2019-10-23 15:48:53 · 544 阅读 · 0 评论 -
手写防抖 节流
functionthrottle(callback,wait=3000){lettimer=null;letstartTime;returnfunction(){constctx=this;constargs=arguments;constnow=+newDate();...原创 2019-09-25 18:55:45 · 183 阅读 · 0 评论 -
javacsript之 get与post
1,get 请求可以被缓存2,get 请求保留在浏览器历史记录中,(便于分享网址)3,请求可以被收藏为书签4,带的参数字节有限制(单个参数256)URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。;5,请求应该被用于取回数据6,不应处理敏感数据(密码等)二 post1,不被缓存2,不会被暴露在浏览器历史中,3,不能被书签收藏,4,长度无限制三原创 2018-02-06 22:02:37 · 164 阅读 · 0 评论