前端/Javascript
文章平均质量分 57
十方魔
朝同歌,暮同酒。
展开
-
typescript笔记
深入浅出typescript在Youtube上看视频学了一下typescript,主要为了接下来读源码方便。primitive类型的用小写。少用object/any。可以直接用[key: string]这样的方式去定义规范。interface Person { readonly sex: string; [key: string] : string | number;}cons...原创 2019-09-10 12:08:29 · 237 阅读 · 0 评论 -
理解 es6 --- 类 class
英文电子书点此阅读《understanding es6》目录class in javascript (类)class 的特点在类中定义generatorstatic 关键词扩展类 derived classes从built-in的类型中继承Symbol.species在 class constructor 中使用 new.targetsummary...原创 2018-03-28 11:56:27 · 450 阅读 · 0 评论 -
理解understanding es6 ---- 迭代器与生成器(iterators and generators)
英文电子书点此阅读《understanding es6》目录迭代器与生成器(iterators and generators)iterator和generator的概念iterable 和 for-of内置的迭代器高阶用法执行异步任务summary迭代器与生成器(iterators and generators)iterator和gen...原创 2018-03-27 11:30:37 · 272 阅读 · 0 评论 -
利用ES6的generator写一个时间间隔递增的定时器
任务是这样,定时器在0时刻打出1,然后隔1s打出2,隔2s打出3…….如此,时间间隔依次递增。考虑用generator的 yield 功能来完成 停顿。talk is cheap, here’s the code.function sleep(sleepTime){ setTimeout( ()=>{ it.next() // 关键在于异步控制...原创 2018-03-26 16:25:09 · 2504 阅读 · 2 评论 -
理解ES6 --- 第4章 如何拆解数组和对象来获取数据 desturcturing
英文电子书点此阅读《understanding es6》目录解构:更易获取数据拆对象的数据给不同名的本地变量赋值解析嵌套对象的数据拆数组的数据rest items混合解构数据summary解构:更易获取数据拆对象的数据let node = { type: "Identifier", name...翻译 2018-03-06 14:48:26 · 1341 阅读 · 0 评论 -
理解ES6 第三章:对象 ---Object.assign给对象添加多个属性, super, 原型。。。
英文电子书点此阅读《understanding es6》目录对象快速初始化属性简洁的函数定义(只能用于对象method,不能用于全局)可以计算的属性名Object.is()Object.assign()同名属性自有属性的枚举顺序Object.setPrototypeOf()super reference 继承更高一级的类正式定义了对象的方法(method)su...翻译 2018-03-04 10:42:47 · 8404 阅读 · 0 评论 -
理解es6---第三章 函数(箭头函数,spread parameters, rest parameters, 匿名参数)
英文电子书点此阅读《understanding es6》目录函数带默认参数的函数arguments的变化默认参数表达式默认实参的暂时死区(temporal dead zone)函数中的匿名参数the spread operator函数的 name 属性函数的双重用处block-level functions 定义在块级作用域内的函数箭头函数尾递归优化Summ...翻译 2018-03-02 15:06:20 · 798 阅读 · 0 评论 -
理解ES6--第6部分:set 和 map , js中的字典,地图,弱字典和弱地图
英文电子书点此阅读《understanding es6》目录set and map 字典和地图ES5中模拟set和mapES6中的setES6中的地图 mapsummaryset and map 字典和地图ES5中模拟set和maplet set = Object.create(null)//set 用于检查某个值是否存在。map用...翻译 2018-03-08 18:09:24 · 2704 阅读 · 0 评论 -
zepto 自定义模块 生成zepto.min.js (自己存个档,不想每次用的时候再去搜了)
linux 下 在git clone 下来的 zepto文件夹 运行以下命令MODULES="touch data fx detect" npm run-script distwindows可能要改一下 make 源文件://make文件的第42行,在ie 后面加上你要增加的模块,然后重新执行命令即可:$ npm run-script distmodules = (env[...转载 2018-03-08 15:12:43 · 2120 阅读 · 0 评论 -
理解ES6中的Symbol (understanding es6 第5章)
英文电子书点此阅读《understanding es6》目录symbol 和 symbol属性创建symbols使用Symbols共享SymbolsSymbol Coercion 类型强制转换检索对象的symbol用 well-known Symbols 暴露内部操作(似乎没什么用)summarysymbol 和 symbol属性一开...翻译 2018-03-06 19:28:26 · 282 阅读 · 0 评论 -
理解 ES6 --- 数组新方法
英文电子书点此阅读《understanding es6》目录array in javascript (类)Array.of(), Array.from()find() and findIndex()fill() , copyWithin()typed arraysarray in javascript (类)Array.of(), Array.from()...原创 2018-03-29 10:04:03 · 226 阅读 · 0 评论 -
大数相加 之 javascript版 据传是个腾讯面试题
前两天看公众号,有腾讯的面试题是远程写个大数相加。早上自己就练手写了一个。大致思路是用字符串代替数字,倒序后进位相加。暂时不考虑负数的情况。(正负数在判断符号后,可以归纳为异号相减,同号相加,最后处理符号即可)。为了调试方便没有加函数,直接写在最外层:var a = '011', b = '0023'function turnToNum (str){ if(typeo...原创 2018-04-23 14:13:29 · 549 阅读 · 0 评论 -
commonjs与es6 中的模块化机制有什么区别
CommonJs导出的是变量的一份拷贝,ES6 Module导出的是变量的绑定(export default 是特殊的)cjs中,对象的传递如同a = b 一样,基本类型值传递,对象则引用传递。而es6 module中,如果不用export default去引用,基本类型也是引用传递的。export default的赋值则与a = b 相同。CommonJs是单个值导出,ES6 Module可...原创 2019-07-11 11:51:18 · 2179 阅读 · 0 评论 -
React hooks API小结
setStateconst [state, setState] = useState(initialState)setState(currentState)setState((prevState) => f(prevState))接受一个值或者一个函数不会自动Merge,需要解构自己merge(或者使用useReducer)懒init 如果initialState需要通过复...原创 2019-03-23 22:17:16 · 2255 阅读 · 0 评论 -
页面的生命周期API及给开发者的建议------来自谷歌开发者博客
导读:web平台很早就有了生命周期的概念,如load, unload, visibilitychange,但这些时间只能让开发者响应用户发起的生命周期变化。为了更合理地使用系统资源,开发者应善用页面周期状态。另外,对浏览器而言,越多的开发者开始应用新的页面周期API,冻结和丢弃页面也会变得更安全可靠,从而节约内存,cpu,电量和网络资源。文章目录背景概览页面生命周期和状态检测生命周期跨浏览器差异...翻译 2018-11-15 16:16:55 · 532 阅读 · 0 评论 -
理解es6系列-----【proxy和refection】----未完待续
文章目录什么是proxy和refection生成一个新的简单proxy用set陷阱来验证属性用get陷阱来验证对象结构(object shape)用has陷阱来隐藏属性deleteProperty 来阻止属性被删除getPrototypeOf 和 setPrototypeof结论什么是proxy和refection通过 new Proxy()可 生成一个proxy来代替目标对象(target...原创 2018-10-27 18:19:11 · 1383 阅读 · 1 评论 -
记两个ios的bug: 日期问题和奇葩的vue 点击无响应问题
目录new Date()– invalid Datevue @click 点击经常无响应new Date()– invalid Dateios 不认’2018-12-12’的’-‘, 也不认日期与事件之间的空格,需要在字符串用new Date()转化为日期时,replace一下const dateString = '2010-11-29 11:11:11'const ...原创 2018-09-06 18:05:57 · 2673 阅读 · 2 评论 -
解读vue源码之nextTick:何谓 event-loop, 浏览器的事件机制,task/microtasks
前言:目录:nextTick 与异步渲染UI浏览器的event-loopnextTick 与异步渲染UI浏览器的event-loop原创 2018-08-23 18:54:40 · 682 阅读 · 0 评论 -
rxjs6学习笔记----结合react,redux使用
rxjs版本是当前2018-07-23最新, "rxjs": "^6.2.2"。导入模块的区别pipe操作符学习资源导入模块的区别rxjs已经出到6原创 2018-07-23 18:00:01 · 4494 阅读 · 0 评论 -
input的autocomplete效果 ---又是一道腾讯编程题
题目效果代码htmlcssjs思考题目页面内有一个 input 输入框,实现在数组 arr 查询命中词并和 autocomplete 效果。效果忽略圆圈,这是quickTime录屏的side effect。。。 代码html <div id="div1"> <input type="text" ...原创 2018-04-25 19:40:26 · 2685 阅读 · 3 评论 -
原生实现html5的拖拽功能 drag and drop
题目思路代码效果图拖拽库HTML5的拖拽API题目页面内有一个正方形元素 A 以及一个待放置区域 B,实现对其拖拽和放下到 B 区域内,并且改变 B 区域背景颜色 (不可用 html5 原生事件)。这也是一道腾讯面试题,要求远程编程。思路用鼠标的mousedown事件来模拟dragstart用持续的mousedown事件来模拟dra...原创 2018-04-25 11:55:28 · 1724 阅读 · 0 评论 -
理解ES6 (1) var, let, const 之间的区别 (2) 字符串和正则表达式
英文电子书点此阅读《understanding es6》目录block bindingsStrings and Regular Expressions用codePointAt来更好地unicode 支持String类的normalize方法正则表达式中的 u 标志other string changesother regular expression changes复...翻译 2018-01-31 14:49:35 · 634 阅读 · 0 评论 -
微信JS-SDK分享功能 填坑全纪录
问题一:分享失败这个原因有很多,最常见的一个是分享出去link跟配置的JS接口安全域名不一致。另外,Link需要是http开头的。问题二:自定义分享内容,安卓成功,IOS能分享,但是默认样式这是最近遇到的一个问题,而且ios在appmsgconfig里的success回调中写alert是能alert出来的,就是分享成功了,但样式不对,最后终于发现是这样:link参数中带中文或者特殊...原创 2018-02-26 14:18:40 · 2052 阅读 · 0 评论 -
利用ES6 的generators 化异步为同步
generator可以将异步转化为同步,让JS中讨厌的回调清晰起来。如下例:var fs = require('fs')function run(generator){ console.log('now in run') var it = generator(go) console.log(`now get it : ${it}`) function go(原创 2018-01-16 13:54:04 · 608 阅读 · 0 评论 -
javascript 求一组数的最小公倍数和最大公约数的简便算法 (三种方法,面向对象,回归迭代,和循环)
方法来自求多个数最小公倍数的一种变换算法 最小公倍数的算法由最大公约数转化而来。最大公约数可通过如下步骤求得:(1) 找到a1,a2,..,an中的最小非零项aj,若有多个最小非零项则任取一个(2) aj以外的所有其他非0项ak用ak mod aj代替;若没有除aj以外的其他非0项,则转到(4)array.reduce array.forEach arr.map JavaScript算法原创 2017-08-21 10:38:11 · 3910 阅读 · 0 评论 -
canvas叠合多张图片,以及图片的跨域和onload问题(combine multi imgs)
近做了一个微信活动的页面,需求是这样:有一张静态的图片预先传在网上,在canvas上以它作为底图。另外要针对每个用户生成一个特有的二维码图片,叠在底图上。最后把绘制好的canvas转成img形式,使长按二维码可以识别。采用了jquery.qrcode插件,解决跨域问题用img.crossOrigin = "Anonymous"原创 2017-08-16 13:31:43 · 1777 阅读 · 0 评论 -
jquery中.prop()和.attr()的区别 什么叫布尔型属性 property vs attributes , boolean attributes...
固有属性 布尔型属性 jquery 1.6之后出了个新方法 .prop() , .prop() 与 .attr() 到底各自对应什么呢? 什使用.prop()来获取property,使用.attr()来获取attributes。么是property, 什么是attributes。写一个html/xml的classList 是数组 className 是字符串 以空格间隔 不好操作原创 2017-06-15 11:57:33 · 1024 阅读 · 0 评论 -
orginalEvent是什么,有什么用处,jquery不是万能的
翻译了一段来自stackoverflow的问答,原文在此。事件对象包括一个叫做originalEvent的属性,代表了浏览器自己产生的事件对象。jquery包裹了这个原生的事件对象,赋予了它jquery的方法和属性。但在某些情况下,需要去取得原始的这个事件对象,就要用到event.orginalEvent属性。尤其在移动端的触摸touch events事件时,尤为有用。翻译 2017-06-09 13:23:54 · 1323 阅读 · 0 评论 -
复习jquery 笔记 版本1.2.1,jquery in action 总结细节
jQuery in action$(“xxx”)得到的是包装集, 类似数组但没有数组方法,.size()等于数组的length,可用.get()转为数组。要引用其中元素需要用到[0]。也可以用包装集.index(元素)的方法来取得该元素在包装集中的顺序下标。()里面都要加引号,不能是直接的element tag。 nth-child是以1开始计数的,其余都是以0开始计数的,不管是包装集还是slice还是原创 2017-05-31 10:35:24 · 232 阅读 · 0 评论 -
$.(fn) vs document.body.onload vs window.onload
$.(document).ready()指的是DomContentsLoaded, 但本身jquery文件的 加 载(刚才是放在head头里的了)也是需要时间的。当DOM节点中没有需要长时间加载的资源时,速度是很快的,ready事件和window.onload,body.onload事件几乎同时,所以可能出现这样的情况,如果在ready 事件中写window.onload,还有可能导致window.onload出不来原创 2017-06-16 14:04:41 · 360 阅读 · 0 评论 -
过了太久我已经不记得这个是啥玩意了,隐约觉得第二第三题方法都太笨了
1.找一个数列中的最长”上升下降“序列的数组下标 比如 8 //数列长度 1 3 1 2 5 4 3 9 //数列 0 1 2 3 4 5 6 7 //数列下标 那么下标就是 2 6这个需要设参数来确保是上升还是下降序列,看代码吧。var incredecre=function(array){var incre;var finalstart=-1,finalend=-1,maxl原创 2017-04-17 14:00:42 · 361 阅读 · 0 评论 -
javascript 实现快排的两种方法 和sort()的比较,以及效率
思想是一样的,具体到实现还可以用算法导论上的一种,懒得写了,前面那种是网上看到的,主要是每次都切走了数组的pivot,递归的时候再加进去。后面长的那种是移位填坑法,来自严奶奶的数据结构,比较好理解。function quickSort1(arr){ if (arr.length <= 1){return arr}; var pivotIndex = Math.floor(arr.le原创 2017-03-20 19:53:40 · 4759 阅读 · 0 评论 -
javascript写算法(一) 动态规划:最长公共子序列
csdn是疯了吗,是baidu算出来的广告嵌在了iframe里,fixed to viewport,之前一直用的c++写算法,在std的基础上javascript的“人造性”更强,比如数组和字符串都有很多自带的function,而且有一种不拘于数据类型的灵活性。写算法的话,网上的提交工具许多是用node 中readline javascript实现最长公共子序列 动态规划原创 2017-03-26 22:35:48 · 2967 阅读 · 0 评论 -
node js 下查找数组最大最小值 时间复杂度 1.5N 思路来自编程之美
主要是熟悉一下node输入输出,以及array.forEach 和 array.map 都不会直接改变原数组。还有三目运算符 : 两侧必须是单语句。const readline = require('readline')const rl = readline.createInterface({ input:process.stdin, output:process.stdout})var inp原创 2017-08-30 15:19:37 · 1353 阅读 · 0 评论 -
js移除数组中元素-- 倒着遍历数组,绕过改变下标的问题
题目描述 移除数组 arr 中的所有值与 item 相等的元素,直接在给定的 arr 数组上进行操作,并将结果返回 示例1 输入[1, 2, 2, 3, 4, 2, 2], 2 输出[1, 3, 4]我一开始还好死不死用的foreach,忽略了改变数组之后,下标也改变的情况,正好被改的那个index上的元素就遍历不到了。后来用for来控制index –,代码如下:function remove原创 2017-08-31 17:06:18 · 5209 阅读 · 0 评论 -
弹出弹窗后,如何禁止底层的body滚动,适用于超长的页面
常见场景从event target入手还是直接干body吧conclusion常见场景在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目。有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-index肯定是在下面的 )的内容也在滚动。这内外一起滚,就有点尴尬了。举例,下面两张图里,都有类似的问题。那原创 2018-01-04 16:37:35 · 41230 阅读 · 7 评论 -
用Chart.js画渐变色的曲线图,及展示某个点的坐标,踩坑实战
需求是这样:有一系列数据,是写死在JS中的,利用这些数据点绘制折线图。然后会调用接口拿到一个点的数据(只有横坐标),要在折线图上把这个点表示出来,并显示点数据(tooltip)。先看看本宝宝用chart.js画的效果图:怎么样,还是蛮漂亮的吧?几乎原原本本地达到了UI师的设计稿。废话不说,先上代码。这是HTML:<canvas id='mychart' width='300' height='200原创 2017-12-06 16:07:13 · 5591 阅读 · 0 评论 -
用Vue做一个职业选择或地区选择的三级嵌套组件
设计图长这样: 如图,大概分为三级。点击事件上有个小trick要注意,那就是,第一级点击后显示第二级,第二级点击之后是toggle第三级。那个职业选择的数据大概有五千多条,有点多,需要拉接口调。这里写个模拟的,结构就是一级一级套对象,代码如下:function getJobs__list(level,arg1,arg2){ // 这是展示的 var Jobs__list = {原创 2017-12-07 14:03:43 · 3761 阅读 · 1 评论 -
node.js快速入门: learnyounode题目解答,http collect ,async/await in node...etc
learnyounode是一套很棒的node入门课程,由浅到深,引导和提示都很全面,以编程的方式学习node的核心功能。推荐萌新们来一发~~~安装与教程参考我是在这个网上看到的各种课程,感觉还挺全面的 nodeschool: 教你 Web 开发技能的开源课程,自学或者参加一个附近的教学活动这是官方的github地址: learnyounode 的 github小伙伴也可以去参考这个人的博客,写的原创 2017-12-28 10:47:25 · 1233 阅读 · 0 评论 -
javascript的递归、尾调用和蹦床函数: 各种解决方案的性能对比及Babel和ES6优化([翻译自外网博客]
递归,尾调用和蹦蹦床(trampoline)递归是指一个函数在返回一个确定的结果之前,调用了它本身。许多函数式语言都是围绕着递归和惰性求值1建立的。尽管javascript这门语言有许多函数式的方面,目前它并不能高效安全地处理递归。这意味着我们不能在程序中使用递归吗采用递归的形式时,有时能够显著提高函数可读性、可维护性,使其更加精炼。一些数学函数和算法就属于这类范畴。BABEL的递归优化。ES6.翻译 2017-11-15 10:37:23 · 2469 阅读 · 0 评论