- 博客(56)
- 收藏
- 关注
RSS订阅原创 jscodeshift 那点秘密
在 重构利器 jscodeshift 的末尾，留下了几个问题：怎么做到同时满足 JavaScript 和 TypeScript 的解析？jscodeshift 是如何实现链式调用的？registerMethods 怎么实现，怎么使用？测试工具 testUtils 做了哪些封装？上一篇文章中我们举了一个 ????：export const sum = (a, b) => { console.log('计算下面两个数的和：', a, b); return a + b;};ex
2021-08-01 14:59:36
402
原创 聊一聊浏览器的内容
今天翻读平时工作做的便签时，注意到了一张浏览器内核相关的记录，尽毫无印象，于是写下这篇文章： 浏览器组成浏览器简单的说由两部分组成：shell + 内核。Shell的含义，简单地说，就是提供给用户操作，以便调用内核去实现各种功能的窗口，例如菜单栏、工具栏等等。内核才是浏览器的核心和最重要的。内核是基于标记语言显示内容的程序或模块，所以一般也称内核为“渲染引擎”（Rendering E...
2018-02-11 11:57:59
588
转载 10 种最常见的 Javascript 错误
为了回馈我们的开发者社区，我们查看了数千个项目的数据库，发现了 JavaScript 中频度最高的 10 种错误。我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”，你将会成为一个更好的开发者。数据才是王道，我们收集并分析了出现频次排前 10 的 JavaScript 错误。 Rollbar 会收集每个项目的所有错误，并总结每个错误发生的次数。我们通
2018-02-07 10:01:39
1358
原创 type=number和type=tel的区别
众所周知，HTML5加入了新的input类型 number，这是方便数量输入的。如果是在移动端中，属性type=”number”和type=”tel”会唤起系统的数字键盘，这对于交互还是挺友好的。 浏览器兼容性大部分浏览器还是非常支持这个属性的。就算这样，这里面也有一个坑：不把我们可爱的小数点当作输入。我通过监听input事件然后查看事件对象的data属性（识别当前输入字符）： 这数据和视图
2018-01-07 14:31:28
45379
3
原创 微信JS-SDK中getLocalImgData的坑
经常开发微信web需求的童鞋对微信jssdk肯定不会陌生。但是里面的坑未必都踩过，特此分享这篇填坑教程，与大家共勉。微信获取本地图片接口：wx.getLocalImgData({ localId: '', // 图片的localID success: function (res) { var localData = res.localData; // l
2017-10-19 21:06:37
23025
10
原创 解决type=file中获取不到value值
做前端开发的童鞋肯定会遇到这样的需求，获取表单里面全部input的值。但是也不难发现这样的bug，给type=“file”的input标签赋值value，然后再通过js去获取value的时候，发现根本拿不到想要的那个值，拿到的是空字符串。通过zepto或者jquery的源码也可以看出来，form表单的参数序列化方法serialize$.fn.serializeArray = function() {
2017-09-16 10:44:53
16579
1
转载 网站页面性能优化的34条黄金守则
雅虎团队经验：网站页面性能优化的34条黄金守则 1、尽量减少HTTP请求次数 终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的
2017-08-14 15:42:33
540
原创 -webkit-touch-callout禁止长按菜单
微信浏览器如果js中的点击事件，长按会弹出一个javascript提示的菜单栏，有打开和取消两个选项。IOS要取消这一个默认事件，可以在父元素使用-webkit-touch-callout:none;来禁止掉这个菜单弹出。该CSS样式有两个可以取的值：default：此值表示显示默认的callout none：此值表示禁用callout`安卓不支持这个css样式，安卓就直接使用HTML5提出的co
2017-07-26 10:25:21
6520
原创 localStorage存储代替GET方式
做久了前端开发就会知道，有时候需要把页面A的数据传到页面B上，用URL参数的形式会显得累赘。而且浏览器和服务器对于URL的长度也有所限制。浏览器1、IEIE浏览器（Microsoft Internet Explorer） 对url长度限制是2083（2K+53），超过这个限制，则自动截断（若是form提交则提交按钮不起作用）。2、firefoxfirefox（火狐浏览器）的url长度限制为 65 5
2017-07-10 14:21:36
1323
转载 四种常见的 POST 提交数据方式
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于
2017-07-06 09:25:25
357
原创 Javascript实现二叉搜索树
class Node { //节点结构 constructor(data, left, right) { this.data = data; this.left = left; this.right = right; }}class BinarySearchTree {
2017-05-28 11:23:05
394
原创 javascript惰性函数
惰性函数有些地方也叫作自定义函数。做法是创建一个新函数并且将其分配保存了另外函数的同一个变量，那么就以一个新函数覆盖了就函数。在某种程度上，回收了旧函数指针以指向一个新函数。而这一切发生在就函数体的内部。在这种情况下，该函数以一个新的实现覆盖并重新定义了自身。var scareMe = function(){ alert("foo"); scareMe = function(){
2017-05-23 14:26:32
610
原创 Codeigniter提示:Undefined property: XXXX::$db的解决方法
问题提示: Undefined property: XXXX::db解决方法:到application\config\autoload.php中修改db 解决方法: 到application\config\autoload.php中修改autoload[‘libraries’]的值 把 autoload[′libraries′]=array();修改为autoload['librarie
2017-05-22 11:28:17
6484
原创 Javascript判断数组的方法
用typeof判断数组会返回object，因为数组也是对象。用instanceof Array判断数组在大部分浏览器是没问题的，但是在某些IE浏览器并不能得到正确的结果。一般使用以下两种方法：一是用ES5的Array.isArray()二是如果不支持isArray()，用Object.prototype.toString().call()：综合一下：if(typeof Array.isArray =
2017-05-20 13:48:41
491
原创 用eval不如用Function
忘记在哪本书中看到过这样一句话，eval（）是一个魔鬼。平时在处理用Ajax请求的JSON数据时，有些人会用eval。这中间存在安全隐患。还有的是，在使用定时函数，setInterval（）、setTimeout（）时，有些写法也会导致类似eval（）的隐患。例如：setTimeout（"myFunc（）" ， 1000）;setTimeout("myFunc(1,2,3)" , 1000);ne
2017-05-20 11:31:56
2428
原创 javascript中的标签语句label:statement
label:statement语法如上所示，用标签label去定义一个操作。var temp=0; start: for(var i=0; i<5; i++) { for(var m=0; m<5; m++) { if(m==1) { break start; } temp++;
2017-05-17 20:55:00
2858
原创 你不知道的&&和||
开发中，编写有一定逼格的代码是每个程序猿都追求的。经常用来判断的符号&&和||，也经常用来定义变量哦，你知道吗？逻辑与（&&）： 在有一个操作数不是布尔值的情况下，就不一定返回布尔值。比如以下情况：1、第一个操作数是对象，返回第二个数；var myinfo = {'age':25};console.log(myinfo && 2); //输出2
2017-05-17 20:44:53
728
原创 取消鼠标右键默认事件contextmenu
想要web页面充分展示自身特色，修改浏览器默认的右键事件必不可少。右键单击网页，总是弹出另存为、审查元素、查看网页源代码等等之类的菜单。就我看来这是挺影响体验的。像右键这么重要的位置，必须充分利用。调整页面链接之类等等的需求都是可以的。如何实现这个需求？利用浏览器contextmenu事件。支持contextmenu事件的浏览器有IE、Firefox、Safari、Chrome和Opera11+。下
2017-04-01 13:15:03
6667
原创 取消鼠标右键默认事件contextmenu
想要web页面充分展示自身特色，修改浏览器默认的右键事件必不可少。右键单击网页，总是弹出另存为、审查元素、查看网页源代码等等之类的菜单。就我看来这是挺影响体验的。像右键这么重要的位置，必须充分利用。调整页面链接之类等等的需求都是可以的。如何实现这个需求？利用浏览器contextmenu事件。支持contextmenu事件的浏览器有IE、Firefox、Safari、Chrome和Opera11+。下
2017-04-01 13:14:57
2403
原创 跨兼容浏览器的事件处理程序
从事前端开发工作的童鞋们，肯定会遇到浏览器事件处理兼容问题。从DOM0级事件处理程序到DOM2级事件处理程序。以及IE这个永恒的话题。下面是兼容所有浏览器的时间处理程序，包含添加、删除、阻止冒泡、取消默认行为、获取事件对象event、获取事件目标方面，直接上码：(function(){ var EventUitl = { addHandler : function(eleme
2017-03-31 11:41:27
447
原创 简单说一说数据结构——集合
迄今为止，我们已经学习了数组（列表）、栈、队列和链表（及其变种）等顺序数据结构。这一节我们讲讲集合。集合的定义是由一组无序且唯一（即不能重复）的项组成的。不包含任何元素的集合就叫做空集。上高中那会，我们都接触过集合，其中一些概念比如交集、并集、差集等等。ECMAScript6也实现了集合这种数据结构——Set类。而我们用ECMAScript5来实现。也可以为看Set时做铺垫。首先，集合Set类的骨架
2017-03-23 16:37:30
8116
原创 $(...).live is not a function
jquery中的live()方法在jquery1.9及以上的版本中已被废弃了，如果使用，会抛出TypeError: $(…).live is not a function错误。解决方法：之前的用法：.live(events， function) 新方法：.on(eventType, selector, function)若selector不需要，可传入null例子1：之前：$('#mainmenu
2017-03-10 15:18:06
958
原创 常用的git命令
Git是目前世界上最先进的分布式版本控制系统（没有之一）。balabalabala……..配置git config --global user.name "your name"git config --global user.email "your email" 初始化git仓库git init添加项目git add A file提交git commit -m "A detail descript
2017-03-07 18:23:34
287
原创 简单说一说排序算法
作为一名合格的程序员，还是要懂一些排序算法。学习这个话题，通常都会先学冒泡排序，因为它在所有的排序算法中是最简单也是最**的。当然，简单是不会有好结果的。它的性能也是最差的。冒泡排序通过比较任何两个相邻的项，如果第一个比第二个打，则交换它们。元素项向上移动至正确的顺序，就好像气泡从水中往上冒一样。冒泡因此得名。具体实现代码：function bubbleSort(array){ var
2017-03-05 20:17:04
697
原创 简单说一说数据结构——链表
数组是一种非常简单的存储数据序列的数据结构。平时开发中，要存储多个元素，数组是最常用的数据结构。但是，在大多数语言中，数组的大小是固定的。从数组的起点或中间插入或移除项的成本非常高，因为需要频繁地移动元素。链表存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的。每一个元素由一个存储元素本身的节点和一个指向下一个元素的引用（称为指针或链接）组成。相对于数组，链表添加或者移除元素的时
2017-02-20 20:44:36
2838
2
原创 微信浏览器阻止页面拖动
经常开发H5的童鞋一定会遇到这样的问题，当你的页面中有滑动或者拖拽事件时，整个网页也会随着移动。然后还能够看到域名信息。这是非常崩溃的体验！但是这个问题非常好解决，只要在body标签添加禁止滑动或者拖拽事件即可。这样的话，即使是其他子事件的滑动或者拖拽也会在这里给阻止掉。document.body.addEventListener('touchmove' , function(e){ e.p
2017-02-20 13:01:21
18069
9
原创 简单说一说数据结构——队列
上一次我们已经学习了栈。今天我们来说一说队列。队列和栈非常类似，都是非常容易理解的数据结构。队列是遵循先来先服务原则的一组有序的项。队列在尾部添加新元素，并从顶部移除元素。在现实中，最常见的队列的例子就是排队： 排在前面的会先被服务，不管是什么服务。概念的东西非常简单，在这里就不再多说了。接下来声明一些队列可用的方法： enqueue（elements）：向队列尾部添加一个或多个新的项。 de
2017-02-15 20:42:38
1719
原创 简单说一说数据结构——栈
数组是Javascript里面非常灵活的数据结构，如何用数组来构建栈？栈是一种遵从后进先出(LIFO)的有序集合。新添加的或删除的元素都保存在栈的末尾，称为栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。现实生活中，书堆就是栈很好的呈现。后面放的就在上面，也是要第一本拿开的。其他就不多说了，栈也是一种比较简单的数据结构。下面，为栈声明一些方法：push(element(s))：添加
2017-02-14 17:25:05
810
1
转载 Math.random()函数生成n到m间的随机数字
Math.random()函数返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1)生成n-m，包含n但不包含m的整数：第一步算出 m-n的值，假设等于w第二步Math.random()*w第三步Math.random()*w+n第四步parseInt(Math.random()*w+n, 10)生成n-m，不包含n但包含m的整数：第一步算出
2016-12-22 09:45:39
7931
转载 Gulp开发教程（翻译）
对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。通过本文，我们将知道如何使用Gulp来改变开发流程，从而使开发更加快速高效
2016-12-15 11:38:40
591
转载 Web性能优化：图片优化
HTTP Archieve有个统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看，图片也绝对是优化的热点和重点之一，Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。Google
2016-12-15 10:12:49
483
转载 移动H5前端性能优化指南
概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点，首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点6. 基于第五点，要合理处理代码减少渲染损耗7. 基于第二
2016-12-15 10:08:11
353
转载 怎么做出牛逼的二维码图片？
怎么做出牛逼的二维码图片？当然不是黑白两色的那种二维码图片了，要牛逼，要图形化，场景化、游戏化，一起看看牛逼的二维码图片是怎么做出来的吧！我曾经以为，二维码就是这样的或者是这样的 好看一点的也不过是这样的…… 直到有一天，boss说: 于是LZ便去问度娘：啥是“流弊”的二维码？接着LZ的世界观被
2016-12-02 11:04:13
16731
2
转载 PubSub模式简单实现
PubSub是一种设计模式，中文叫发布订阅模式，简单来说就是消息发布者不直接向订阅者发布消息，而是发布到中介，而中介根据不同主题对消息进行过滤，并通知对该主题感兴趣的订阅者。该模式在前端现在很火的组件化开发十分常用，因为该模式松耦合，易于扩展的优点正式组件化开发所需要的。一个PubSub模型主要方法有3个，订阅，退订，发布，下面尝试在前端实现一个最简单的PubSub模块。var Pub
2016-11-30 11:24:59
6453
转载 React 各种组件关系通信
前言今天群里面有很多都在问关于 React 组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译，看过我博客的人都知道，我翻译可能不会按部就班，会尽可能用中文的意思，来将作者要讲述的技术描述清楚。英文能力有限，如果有不对的地方请跟我留言，一定修改……^_^原著序处理 React 组件之间的交流方式，主要取决于组件之间的关系，然而这些
2016-11-30 10:33:28
3825
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人