- 博客(42)
- 收藏
- 关注
RSS订阅原创 eslint使用姿势(优雅的代码规范)
作为一种可以规范化我们代码的工具，eslint在越来越多的场景下开始被使用，它可帮助我们迅速定位代码格式bug gulp-eslint sublime-eslint是我经常接触到的eslint形式～，接下来先来介绍下sublime-eslint的正确使用姿势 利用package-control安装SublimeLinter和SublimeLinter-contr
2016-09-03 17:37:27
5183
原创 利用命令快速构建react工程(create-react-app or nwb)
cretae-react-app前一段时间在很多app和博客中看到facebook的create-react-app命令，可以利用这个命令迅速搭建react工程，官网详细见https://github.com/facebookincubator/create-react-app , 你仅仅需要执行npm install create-my-appcreate-react-app my-app便
2016-09-03 16:22:07
5908
原创 webpack部分插件介绍
在之前的react与webpack的搭配使用时介绍了webpack的基本使用及部分优化，而在实际的使用过程中还是遇到了一些其它问题，所以又把插件列表好好捋了一下，挑自己可能在日后工作用到的整理一下～可能有部分理解不到位，欢迎指正不知道有没有小伙伴和我一样，老是遇到webpack打包过程中出现abort trap:6,然后webpack服务就挂了的情况，查网上资料，说是堆栈的问题，可是这种堆栈问题实
2016-08-21 16:33:19
4388
原创 &&与||到底返回什么～，&&or&
在实际开发过程中，我们往往需要加数据保护判断，譬如后端返回的接口数据是data,你需要渲染data.result.status在页面上，那么可以直接写data.result.status在页面上么，答案是否定的，任何时候，当无法保证这些数据一定正常返回时(可能这里的data.result是undefined)，你必须做好必要的防御措施，譬如你需要if(data && data.result && d
2016-08-20 17:30:15
1455
原创 react数据处理问题
在react官网http://reactjs.cn/react/docs/tags-and-attributes.html中罗列了react支持的各种标签及属性，react使用者无法使用其他自定义属性，譬如react element则会被解析成html中的,ee自定义属性丢失，其中支持属性在react源码中的对应可参考react源码中的htmldompropertyconfig.js这个文件r
2016-08-01 21:43:35
2397
原创 react及webpack相关注意点,小工具
官网上提示目前，一个component 的 render，只能返回一个节点。如果你需要返回一堆 div，那你必须将你的组件用 一个div 或 span 或任何其他的组件包裹。而在实际操作中，不仅仅在render函数中，在其他函数中也是同样，不可以只返回多个节点，外面必须包裹一层节点，否则会出现很多神奇的错误warning.js:45 Warning: Each child in an array
2016-07-30 16:50:08
784
原创 webpack及react的搭配使用(一)
准备工作目前webpack作为目前国内最火的打包及加载工具之一，经常在react工程中使用，接下来我们来详细了解下webpack的使用姿势 在接下来的操作步骤之前，需要先配置修改react工程下的package.json,增加devDependencies如下: "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^
2016-07-24 20:13:35
6864
原创 npm版本更新问题(国内镜像问题)
最近因为node版本为stable稳定版4.4.7，对应的npm版本低于3，所以想进行一次升级，在网上寻找了很多资料，综合有两种方式，一种是卸载当下node,安装官网node的6.3.0,其中内置npm版本偏高，为3.10.5.另外可通过npm install -g npm 进行自身升级。然后升级完毕，通过npm –v即可查看当前 npm版本今天早上因为任务需求需要写package.json,然后
2016-07-23 16:04:27
5860
原创 ￥符号在不同字体和设备上的显示
作为电商公司，商品的展示是前端所需要实现的基本功能，而人民币符号则会由于不同字体有不一样的展示。目前我们公司采用的是在pc平台上统一是￥（中间两横的人民币符号),实际代码组织为:￥68.00css样式为:.yahei{font-family:"Microsoft Yahei",tahoma,arial; } 若去掉yahei的类声明，大家可以清楚的
2016-06-13 14:30:41
5427
原创 a链接在ie下的小bug，你知不知道a链接里应该是要有内容的呢
今天写了一段比较简单的代码，是一个div上有两个链接，整体div是一个链接，局部区域上是另外一个链接，由于div里需要包含图片，而且a链接不能嵌套，这个整体链接不能写在div上，所以我采用了绝对定位的方式，类似于.的结构，但是在ie8浏览器中，nav-all的整体区域链接并不能点击，想了很久，以为是父元素z-index的问题，因为当时的结构是.nav-all{z-index:5;} .nav-
2016-03-15 21:48:08
1348
原创 console.log样式定义
大家都知道百度的控制台里有相关的招聘信息，还特意用红色字体标明了投递邮箱等。那么如何在控制台里用红色字体输出呢，我们都知道console.warn和 console.error可以实现不单单是简单字体的样式，但是如果样式更多一点呢，比如说我想输出的文字有背景图片呢，官方文档提供了：console.log("%c要输出的信息","样式")的用法，如果不加%c就是简单的把前面和后面的文字一起输出了
2016-02-26 11:26:19
879
原创 简单而不简单的倒计时
大家对倒计时的第一反应就是通过setTimeout方法来反复执行，貌似这个问题都没有需要探讨的价值，其实不然。不同手机上和pc上的new Date()会有些许差异，所以比如说给定一个未来的时间戳，你获取当前时间与未来时间戳的时间差，并不是获取new Date()然后与未来时间戳进行相减，而是通过当前服务器时间来获取这个最初的时间差，而这个服务器时间不一定和你电脑上的时间统一。一般会以北京时间为
2016-02-16 20:10:37
1130
原创 不同行内元素的baseline问题（附自己觉得重要的地址)
今天因为需求需要把span标签和input放在一行,结果出现上下位错位的问题，左边的是input框，右边是span标签内嵌套了两个a标签，a标签有背景图片并绑定相关事件，大家可以很明显看到有几像素的偏差，而这个并不是font-size:0这种可以解决的，所以在网上查了很长时间，在知乎上查到了相关解答。https://www.zhihu.com/question/26778887如上
2016-02-16 10:37:55
754
原创 浏览器编码问题
今天在google浏览器的地址栏输入https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=韩语教学，回车，打开关于韩语教学的网页，在google浏览器的控制台输入document.url,结果出来的是https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&t
2016-01-07 15:24:22
5764
原创 border最小宽度限制1px
今天准备用标签来实现分割线，其原始css如下：border-right:0.01rem solid #fff;width:0;height:0.2rem;display:inline-block;由于自己实现了跟随屏幕而变化的基准font-size函数，当屏幕宽度为750时body的font-size为100px,所以当屏幕小到一定程度时，body的font-size要小于
2015-11-24 21:48:45
4975
原创 立即自执行函数和分组操作符
今天遇到函数自执行的情况，排查了一会才发现问题根源，特地百度了一下，结果发现一个很有意思的小问题。function f(){console.log('called')}(1)按照我的常规想法，上述例子在控制台里应该输出的是called，因为后面的小括号代表了该函数立即执行，但是实际上它输出为1这是因为我们经常会出现的一种语法错误：function g(){ }()期
2015-11-24 14:29:34
1048
1
原创 使用SVG中的Symbol元素制作Icon（链接地址）
http://isux.tencent.com/16292.html（如何使用symbol标签制作icon)http://www.w3ctech.com/topic/92(svg icon和icon font的区别）
2015-08-27 16:13:17
1201
原创 三元表达式之理解/jquery源码分析之$.inArray实现
每次看到三元表达式就会惶惶然分不清如何读，正如语文中的断句一样，jquery源码中的三元表达式更是不知如何断句。附jquery中的inArray实现。大家熟悉jquery的应该都不陌生inArray的用法。在源码实现中，先判断了arr是否存在，如果不存在，则可直接返回-1，否则进行后续判断，当存在indexOf方法时，则直接使用call来调用indexOf方法。否则继续。在
2015-08-18 12:08:01
2011
原创 附两个自己认为比较重要的链接地址（移动端的position:fixed,flexbox实现垂直居中布局）
http://bradfrost.com/blog/mobile/fixed-position/移动端实现position:fixed有哪些问题http://zh.learnlayout.com/flexbox.html
2015-08-08 16:32:28
1516
原创 函数柯里化or not
今天leader说需要写一个通用函数，可以实现在不同的情况下都可以仅调用这一函数，而只是传递参数不同，我首先想到的是函数柯里化，实现把不同的参数转化成单一参数的方式，于是，利用了常见的函数柯里化方式并加以改造，利用了我们最常见的参数对象arguments,然后在总函数中写了arguments[1],arguments[2]来实现功能,自我感觉好像还不错。但是leader看了代码说不行，不利于开
2015-07-29 18:16:48
635
原创 animation几个比较好玩的属性(alternate,及animation-fill-mode)
div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /* Firefox */-webkit-animation:mymove 5s infinite; /* Safa
2015-07-22 11:17:18
7399
转载 CSS中绝对定位对子元素height的影响
CSS中height:100%和height:inherit的异同by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4642一、胡聊海聊凑篇幅上周在微博上无节操吐槽了下inherit的段子，没想到回声还不少：不过inher
2015-07-17 10:46:28
6835
原创 小型倒计时定时器：innerText的浏览器兼容问题
没想到一个小的定时器居然会卡了壳，var seconds=50;function clock(){seconds--;//=seconds;setText(document.getElementById('count-down'),seconds);if(seconds>0) setTimeout(clock,1000);//alert(seconds);}这是一个很简单的
2015-07-09 10:21:26
1172
转载 x-webkit-speech 语音输入功能
今天无意中查看天猫审查元素发现的，The HTML Speech Input API aims to provide web developers with features that are typically not available when using standard speech recognition software to replace keyboard input in
2015-06-27 23:29:47
1419
原创 jquery源码之属性判断-$.type类型
今天我突然想看一下jquery里面如何来判断一个数据类型是否为Array,发现里面代码为：isArray: Array.isArray || function( obj ) {return jQuery.type(obj) === "array";},我们知道原生javascript判断是否为Array类型的方法是：Array.isArray=function(arg)
2015-06-22 22:32:32
1408
原创 javascript中apply,call,bind方法
apply，call应该是我们比较熟悉的方法，像Math.max.apply(arr),取数组元素中的最大值，Array.prototype.slice.call(obj)把obj变为数组等方法已经说明了apply及call的使用，这两者在性能上并无区别，只不过在后面参数上有一定差异，apply的参数是数组形式，而call则是单个元素的形式，譬如我们在网上看到的最常见的add.call(sub
2015-06-17 22:50:53
855
原创 算法之最大连续子序列之和之变形题目
Here are n numbers.You have a magic : first , you choose a interval [l,r],and then each Si(lYou can use the magic at most once to make sum of all the numbers to be maximum.What is the maximum
2015-06-06 22:49:03
840
转载 BFC块级化上下文的解决办法
一、清除浮动浮动元素会影响它的兄弟元素的位置和让父元素产生高度塌陷，清除浮动的方法有：clear : both （应用在空 div 元素或者父元素的 after 伪类上）br 标签的 clear 属性 浮动父元素（触发 BFC）overflow: hidden （触发 BFC） display: table或table-cells;（触发 BFC，display:t
2015-06-05 10:53:06
1418
原创 前端相关书籍及博客等网上资源总结
从基本到深入到前沿html5权威指南html5经典实例CSS禅意花园。响应式web设计（html和css实战）javascript权威指南，javascript经典实例高性能javascript，javascript语言精粹javascript设计模式node权威指南node高级编程这些是前端比较基本的东西，响应式设计涉及到html5,语言精粹尽管不
2015-05-25 12:50:41
785
原创 node的serve-favicon中间件的使用
昨天折腾了很长时间connect，譬如connect中connect.logger的使用方法，最终还是没怎么搞明白，实验没有成功，不过倒学会了一个比较好玩的。有一个名称为serve-favicon的中间件，可以用于请求网页的logo。譬如如下的使用方法：var connect=require('C:/Users/node_modules/connect');//connect中间件的路
2015-05-15 09:25:48
13558
原创 repl 实现在无返回值时不输出undefined（参考相关书籍）
每次在命令行中输入node即可进入repl命令，我们即可进行相关命令使用，但有一点很不开心的就是它总是要在var a=2;这样变量赋值的式子后输出undefined,那么如果我们不想输出undefined的呢。此时我们可以定制自己的repl，方法很简单。建立一个js文件，放在一个文件夹下，我放在了F盘下的Node文件夹里，然后在这个js文件里输入以下指令。 repl=require('r
2015-05-13 13:45:20
1086
原创 sublime编辑器使用增加自动补全功能
前一年一直在用Dreamweaver，中间有一段时间用记事本写，最近一段时间看相关群里很多人都在用sublime编写前端文件，所以我也来赶脚试一下sublime是一款轻量级编辑器，Sublime Text 2是收费软件，但可以无限期试用，我们先把sublime text下载下来，然后按指示一步步安装即可。打开sublime text后，我发现并没有相关提示功能，充分打击了我辛苦的把它下载下
2015-05-13 13:42:53
10978
原创 mysql启动问题
今天点击mysql.exe，结果mysql一闪而退出，蒙蒙中看到了is denied for odbc。。。，搜了网上说是因为配置文件的问题，于是右键查看了mysql.exe的属性，发现后面有my.ini这样的一个配置文件，但是和网上不同的是，我的mysqlserver5.6的文件夹下只有my-default.ini的配置文件，而不是六个之多，尝试着将my-default.ini复制，创立新文件m
2015-05-11 20:32:31
518
转载 meta缓存（转载）
meta http-equiv="pragma" content="no-cache">,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.) ,常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据
2015-05-06 17:38:36
1066
原创 简单的java中JTable删除数据后序号移动问题
尽管这个解决方案可能不是最佳，据一些比较厉害的人说会存在sql注入等等问题，但是作为一个内部小工具，有些思想可供参考我题目的意思表达尚不清楚，确切来说，我前几天想的是实现这样一个功能。譬如，jtable中现在存在三条数据，0 面包 1牛奶 2方便面。现在我利用jtable中的getselectedrow方法，将其中的牛奶删除，然后jtable表格实现重绘，出现的数据为 0 面包 1 方便面
2015-05-03 12:34:40
2078
原创 QQ空间的字体/unicode编码在字体中的用处
今天在空间看到body{font-family:punctuation,\5FAE\8F6F\96C5\9ED1;}查了一下，punctuation是微软雅黑字体，所以以为起作用的是便是punctuation，但是后期发现单用punctuation和上述字体并不一样，但只用后一个发现是一样的，而后一个的字体样式也是微软雅黑。经查知道，\5FAE\8F6F\96C5\9ED1应该是unicode
2015-04-07 19:50:04
1195
原创 如何判断对象类型/对typeof方法使用认识
GDTClick.getType=function(obj){return obj===null?'null':(obj===undefined?'undefined':Object.prototype.toString.call(obj).slice(8,-1).toLowerCase());}今天从空间的审查元素中截取了这么一句，经整理后得知是判断一个对象类型的方法，因为typeof判断并不细
2015-04-06 10:57:14
730
原创 javascript中的类型转换
String转换较为简单，例如undefined直接转换成“undefined”，有一个比较特别的是，String(document)在Opera和Firefox 浏览器中将输出document对象的ECMAscript特定表示法，【object HTMLDocument],IE浏览器则仅仅显示【object],而Safari和webkit浏览器则根本不支持将document对象转换成字符串。
2015-04-06 10:28:41
436
转载 CSS中line-height的奇妙用处
常常使用line-height设置内容（图片、文字）行高上下居中样式效果。line-height:+数字+单位（在CSS布局中我们一般采用像素px为单位）行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。行高应用介绍 -Line-height行高属性，运用到对文字排版，实现上下排
2015-04-05 16:20:26
2328
原创 javascript中的function
无标题文档var f="xxx";window.onload=function w(x){ console.log(f);var f=function(){}; function f(x)//2 { console.log(x);}}/*有两种形式可以定义函数，其一为函数定义表达式，为var f=function形式的，另外一种为函数声明语
2015-03-31 23:19:34
516
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人