归档: 2015/3

2015
0

前端

JavaScript事件(1)

本来以为页面做的差不多了。后来发现移动端和PC端一样有好多坑要填=。=干了几天感觉恶补了JS什么的。这次主要总结一下JS中的事件。 事件流事件流描述的是从页面中接受事件的顺序。 事件冒泡IE的事件流，事件开始时由最具体的元素接收，逐级向上传播到较为不具体的结点。还是很好理解的。。比如：1234567<!DCTYPE html><html><head></head><body> <div>ddd</div></body></html> 单击<div>元素，Click事件就会从<div>到<body>到<html>到document。就像冒泡一样。所有浏览器都支持，IE5.5之前会跳过<html>。现代浏览器冒泡到window对象。 事件捕获顺序和冒泡相反，由Netscape Communicator团队提出，现代浏览器也支持这种事件流模型。”DOM2级事件”规范要求事件从document对象开始传播，但是现代浏览器从window对象开始。 DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获阶段为截获事件提供了机会；然后是实际的目标接收到事件；最后的冒泡阶段可以在这个阶段对事件做出相应。就像先事件捕获（不包括目标div）然后在处于目标阶段，事件在div上发生，然后开始冒泡。规范要求捕获阶段不会涉及事件目标，但是现代浏览器会在捕获阶段触发事件对象上的事件。因此有两个机会在目标对象上操作事件。兼容性：IE8及之前不支持。

0

JS

JS-OJ(1)

最近在做LeetCode有各种语言。刚好有JavaScript。做做算法的同时也能熟悉JS。 Number of 1 Bits Write a function that takes an unsigned integer and returns the number of ’1’ bits it has (also known as the Hamming weight).For example, the 32-bit integer ’11’ has binary representation 00000000000000000000000000001011, so the function should return 3. 1234567891011var hammingWeight = function(n) { var bits = n.toString(2); var pos = bits.indexOf("1"); var i = 0; while(pos > -1) { i++; pos = bits.indexOf("1",pos+1); } return i; }; 求汉明重量。就是找出一个二进制的数字中有多少个1。直接用最暴力的方法就是转化之后一个个数出来。Number类型的toString()方法返回字符串形式的数值，传递一个表示基数的参数能返回对应进制。String类型的indexOf()从字符串中搜索给定的子字符串，返回位置。第二个参数表示从字符串中的哪个位置开始搜索。上面的方法就是遍历一个字符串的感觉了看C的解法都是右移啊，与运算啊什么的。1234567891011var hammingWeight = function(n) { var re = 0; while(0 !== n) { n = n&(n-1); ++re; } return re;}; 可是这个解法用的时间比我前面的解法还要多几毫秒。然后用上面的位运算换成C语言来写。结果吓尿了哈哈：JS用了170msc用了1ms…根本不是一个重量级啊…Number of 1 Bits

0

前端

重构练习-1

前面太自大了。。怎么能叫前端呢。还只是重构一只呀。 Rating星星的CSS基本实现html:1234567<div class="rating right"> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star hover"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div> less:123456789101112131415161718192021.rating{ unicode-bidi: bidi-override; direction: rtl; text-align: center; i{ color: #E4E4E4; cursor: pointer; position: relative; }}.rating > i:hover,.rating > i:hover ~ i{ color: transparent;}.rating > i:hover:before,.rating > i:hover ~ i:before{ content: '\f005'; color: #FFDF56;}

0

前端

兼容性小结(1)

开学了。我又忘记更博了。啊~ 这次记录了一些兼容性的东西： RM8005: IE6 IE7 IE8(Q)行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部。 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落：A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box. 由上面的描述可以得到以下结论：如果一个元素浮动前是一个行内元素，则该元素浮动后，顶部应与其之前所在的行框顶部对齐。 此问题的触发条件:同一个父容器内有多个行内元素；某些为非浮动元素，某些为浮动元素（可以是左浮动或右浮动）；浮动的子元素不都是位于非浮动的子元素之前。

0

移动端

移动端重构小节(2)

话说这个寒假还是学了不少东西的哈哈。不过做项目的时候还是感觉自己能力很不足很不足很不足（重要的事情说三遍）要多学习多学习多学习。其实做项目提升还是很大的。 看到什么就写什么。 媒体查询做移动端和PC端会用到的东西。这也是高大上的（对我来说）响应式布局。CSS3 @media 查询仔细再看一遍才发现有些地方误解了。语法：123@media mediatype and|not|only (media feature) { CSS-Code;} 之前用的是@media all and (max-width:640px)以为前面的all是所有的尺寸=。=其实前面的是媒体类型，后面的是媒体功能。媒体类型主要使用：all print screen speech。看来一般用all了。媒体功能就很多了，这里不写。一般是定义大小和分辨率。兼容性：IE9以下需要引入JS文件：Respond.js。放到底部，并且要http协议才能用。当然会有一点延迟啦。写在媒体查询之外的样式会应用在全网页。后面做一个项目的时候用响应式设计，刚开始做的是移动端，设计师切好图我就直接写了。然后发现一个坑爹的事情，导致我拿到PC端的设计图时内心几乎是崩溃的。以后最好提前和设计师沟通，不然就是在给自己挖好多好多的坑（啊）。反正以后我重构不会让设计师帮我切图了。做这个的时候多分组吧。把内容区块包好。在不同的大小下一般是用浮动来控制内容的位置。

0

前端

移动端重构小结(1)

前言：我是大懒虫Orz。一个月没有更新了=。=检讨一下。主要是在做一个移动端的app网页还有完成QT的作业还有过年还有益米的事情。真的要好好总结一下才能提升自己！ 初始化meta标签<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />移动端的页面一定会用到的meta标签。相关概念： meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持 主要参数有下面几个： maximum-scale：用户可以缩放的最大值 minimum-scale：用户可以缩放的最小值 initial-scale：viewport的默认缩放大小 width：固定viewport的宽度 height：固定viewport的高度 user-scalable：是否允许用户缩放 前三个参数都是缩放相关的，它们的值是viewport的缩放大小，他们仅仅改变缩放大小，并不是改变viewport的实际大小。 之后就是width和height，修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器（页面区域）在屏幕上的默认大小。可以是具体的数值，也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上，防止出现横向滚动条就可以使用 最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样 参考：移动端的meta viewport 更详细的文章：移动前端开发之viewport的深入理解