第一次用上图片有点小激动。。五一小长假又是在学校。现在都是一个学期才回一次家了。 JS-main其实重新去看自己写的JS，有好多地方可以改。更悲催的是，发现JS基本都是用来实现动画效果的=。=1234567var commonAnimatefun = function(id, prevCls, addCls) { var ele = document.getElementById(id); if (ele.className.indexOf(prevCls) > -1) { return; }; ele.className += addCls;} 实现第一部分写的滚动触发JS然后给父元素添加动画类就是这个函数了。之前写的重复的太多，就封装成这个函数，当符合条件就触发。当然，为了避免多次添加类，函数内做一点判断。不过我更想是执行了一遍这个函数就取消执行，不要进入函数判断。写这篇东西的时候自己看着JS好不爽，边写边重新重构代码了：
你们知道弄了一整天才把博客重新弄好是什么心情吗。。给笔记本换了固态硬盘格了C盘D盘什么软件都要重装。折腾了好久才知道原来HEXO升级为3.0了。之前2.7用的好好的现在弄了好久真的是心好累啊心好累啊。不过算是弄好了，自己把public文件夹手动deploy【再见】。好了记一下主页里用到的JS吧。最终页面：益米，让校园生活轻松自在 JS-base不知道为什么我自己就是不喜欢用jQuery。就是喜欢自己写长长的JS代码。所以把自己之前写过的函数都收集起来真的是太有必要了： 判断是否在数组内12345678function is_inArray (array,target) { for (var i = 0; i < array.length; i++) { if (array[i] == target) { return i; } } return -1;} 其实我觉得写得还好。。不过来看看zepto.js的：123$.inArray = function(elem, array, i){ return emptyArray.indexOf.call(array, elem, i)}
在做益米的主页时，又学到了很多新知识：CSS3动画，SEO，JS事件处理等等。设计师很给力，我也在努力重构出他想要的效果。最终页面：益米，让校园生活轻松自在 开始设计师是做好一个模块就丢给我。所以我刚开始也是一个模块一个模块的重构。做完5个模块后总设计图就发给我了。然后就是直接把HTML和LESS拼接在一起。大概的样子就出来了。不过第一次这么做也出现了一些问题，记录一下： 模块命名最好在项目开始的时候就定义好各种基本模块的名字，比如：1<div class="module-container"></div> 然后确定好容器的宽度，以及在总页面中是怎么呈现。后来定义的是这样：1.module-container {width: 1110px;margin: 0 auto;} 实际中这个并不是最外层的容器。需要另外一个div来包裹，设置宽度啊背景啊什么的：1.w100p {width: 100%;min-width: 1200px;background-color: #EDF4F9;} 然后秉承着padding和宽度分离的原则，在w100p类之下再设置一个内边距，来控制内容在一整个区块中的上下距离：1.p100 {padding: 100px 0;} 其实我没有量设计图的距离…就让内容看起来是居中的。不过让内容垂直居中其实有很多办法，以后再讲。 CSS3 动画动画都单独放在一个CSS里面。
在做益米的下载页的时候发现微信浏览器有些地方需要注意。 链接跳转跳转苹果App Store：第一次是设置链接为https://appsto.re/cn/z3aa6.i发现在微信里这个链接不能跳转，查了资料后发现有一种方法：微信中打开app store连接。意思就是微信会内部把链接重定向，判断是App Store就阻止掉。所以在页面里面改写链接，改成在他们域名下，再使用JS进行跳转。具体方法是前面加上http://mp.weixin.qq.com/mp/再重定向：redirect?url=后面再把原来的链接里的冒号改成%3A，斜杠改为%2F。所以链接变成了：http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fappsto.re%2Fcn%2Fz3aa6.i 尝试之后发现这个方法已经失效了。 无奈之下使用引导用户使用safari打开： 引导跳转制作遮罩层：12345<div id="popweixin"> <div class="tip"> <img src="images/weixinpopup.png" alt=""> </div></div> 123456789101112131415161718192021222324#popweixin{ width: 100%; height: 100%; overflow: hidden; position: fixed; z-index: 1000; background: rgba(0,0,0,0.5); top: 0; left: 0; display: none;}#popweixin .tip { width: 100%; background: #FFF; z-index: 1001;}#popweixin img { width: 100%;}
跨浏览器的事件处理程序1234567891011121314151617181920var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } },} 顺序 DOM2级方法：false表示在冒泡阶段调用 IE8下的方法执行顺序 DOM0级最不提倡的方法（现代浏览器不执行）
本来以为页面做的差不多了。后来发现移动端和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及之前不支持。
最近在做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
前面太自大了。。怎么能叫前端呢。还只是重构一只呀。 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;}
开学了。我又忘记更博了。啊~ 这次记录了一些兼容性的东西： 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. 由上面的描述可以得到以下结论：如果一个元素浮动前是一个行内元素，则该元素浮动后，顶部应与其之前所在的行框顶部对齐。 此问题的触发条件:同一个父容器内有多个行内元素；某些为非浮动元素，某些为浮动元素（可以是左浮动或右浮动）；浮动的子元素不都是位于非浮动的子元素之前。
话说这个寒假还是学了不少东西的哈哈。不过做项目的时候还是感觉自己能力很不足很不足很不足（重要的事情说三遍）要多学习多学习多学习。其实做项目提升还是很大的。 看到什么就写什么。 媒体查询做移动端和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端的设计图时内心几乎是崩溃的。以后最好提前和设计师沟通，不然就是在给自己挖好多好多的坑（啊）。反正以后我重构不会让设计师帮我切图了。做这个的时候多分组吧。把内容区块包好。在不同的大小下一般是用浮动来控制内容的位置。