web前端
SYYling
这个作者很懒,什么都没留下…
展开
-
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 · 869 阅读 · 0 评论 -
&&与||到底返回什么~,&&or&
在实际开发过程中,我们往往需要加数据保护判断,譬如后端返回的接口数据是data,你需要渲染data.result.status在页面上,那么可以直接写data.result.status在页面上么,答案是否定的,任何时候,当无法保证这些数据一定正常返回时(可能这里的data.result是undefined),你必须做好必要的防御措施,譬如你需要if(data && data.result && d原创 2016-08-20 17:30:15 · 1481 阅读 · 0 评论 -
¥符号在不同字体和设备上的显示
作为电商公司,商品的展示是前端所需要实现的基本功能,而人民币符号则会由于不同字体有不一样的展示。目前我们公司采用的是在pc平台上统一是¥(中间两横的人民币符号),实际代码组织为:¥68.00css样式为:.yahei{font-family:"Microsoft Yahei",tahoma,arial; } 若去掉yahei的类声明,大家可以清楚的原创 2016-06-13 14:30:41 · 5566 阅读 · 0 评论 -
console.log样式定义
大家都知道百度的控制台里有相关的招聘信息,还特意用红色字体标明了投递邮箱等。那么如何在控制台里用红色字体输出呢,我们都知道console.warn和 console.error可以实现不单单是简单字体的样式,但是如果样式更多一点呢,比如说我想输出的文字有背景图片呢,官方文档提供了:console.log("%c要输出的信息","样式")的用法,如果不加%c就是简单的把前面和后面的文字一起输出了原创 2016-02-26 11:26:19 · 905 阅读 · 0 评论 -
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 · 1367 阅读 · 0 评论 -
简单而不简单的倒计时
大家对倒计时的第一反应就是通过setTimeout方法来反复执行,貌似这个问题都没有需要探讨的价值,其实不然。不同手机上和pc上的new Date()会有些许差异,所以比如说给定一个未来的时间戳,你获取当前时间与未来时间戳的时间差,并不是获取new Date()然后与未来时间戳进行相减,而是通过当前服务器时间来获取这个最初的时间差,而这个服务器时间不一定和你电脑上的时间统一。一般会以北京时间为原创 2016-02-16 20:10:37 · 1149 阅读 · 0 评论 -
浏览器编码问题
今天在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 · 5945 阅读 · 0 评论 -
立即自执行函数和分组操作符
今天遇到函数自执行的情况,排查了一会才发现问题根源,特地百度了一下,结果发现一个很有意思的小问题。function f(){console.log('called')}(1)按照我的常规想法,上述例子在控制台里应该输出的是called,因为后面的小括号代表了该函数立即执行,但是实际上它输出为1这是因为我们经常会出现的一种语法错误:function g(){ }()期原创 2015-11-24 14:29:34 · 1077 阅读 · 1 评论 -
三元表达式之理解/jquery源码分析之$.inArray实现
每次看到三元表达式就会惶惶然分不清如何读,正如语文中的断句一样,jquery源码中的三元表达式更是不知如何断句。附jquery中的inArray实现。大家熟悉jquery的应该都不陌生inArray的用法。在源码实现中,先判断了arr是否存在,如果不存在,则可直接返回-1,否则进行后续判断,当存在indexOf方法时,则直接使用call来调用indexOf方法。否则继续。在原创 2015-08-18 12:08:01 · 2036 阅读 · 0 评论 -
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 · 7439 阅读 · 0 评论 -
函数柯里化or not
今天leader说需要写一个通用函数,可以实现在不同的情况下都可以仅调用这一函数,而只是传递参数不同,我首先想到的是函数柯里化,实现把不同的参数转化成单一参数的方式,于是,利用了常见的函数柯里化方式并加以改造,利用了我们最常见的参数对象arguments,然后在总函数中写了arguments[1],arguments[2]来实现功能,自我感觉好像还不错。但是leader看了代码说不行,不利于开原创 2015-07-29 18:16:48 · 652 阅读 · 0 评论 -
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 · 6879 阅读 · 0 评论 -
前端相关书籍及博客等网上资源总结
从基本到深入到前沿html5权威指南html5经典实例CSS禅意花园。响应式web设计(html和css实战)javascript权威指南,javascript经典实例高性能javascript,javascript语言精粹javascript设计模式node权威指南node高级编程这些是前端比较基本的东西,响应式设计涉及到html5,语言精粹尽管不原创 2015-05-25 12:50:41 · 799 阅读 · 0 评论 -
小型倒计时定时器: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 · 1189 阅读 · 0 评论 -
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 · 1442 阅读 · 0 评论 -
BFC块级化上下文的解决办法
一、清除浮动浮动元素会影响它的兄弟元素的位置和让父元素产生高度塌陷,清除浮动的方法有:clear : both (应用在空 div 元素或者父元素的 after 伪类上)br 标签的 clear 属性 浮动父元素(触发 BFC)overflow: hidden (触发 BFC) display: table或table-cells;(触发 BFC,display:t转载 2015-06-05 10:53:06 · 1444 阅读 · 0 评论 -
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 · 1431 阅读 · 0 评论 -
eslint使用姿势(优雅的代码规范)
作为一种可以规范化我们代码的工具,eslint在越来越多的场景下开始被使用,它可帮助我们迅速定位代码格式bug gulp-eslint sublime-eslint是我经常接触到的eslint形式~,接下来先来介绍下sublime-eslint的正确使用姿势 利用package-control安装SublimeLinter和SublimeLinter-contr原创 2016-09-03 17:37:27 · 5211 阅读 · 0 评论