暑假在See实习：See 一张图片找到全球同款。进去之后接手的第一个项目是继续完成移动端版的App。需求有：登录，发表心愿，同求等等，主要是把整个流程都完成。年少无知的我以为只是重构点移动端页面，竟然说2天半可以完成（其实如果只是重构是真的够了）；然后Sheen一脸惊讶，拍拍肩膀：”你确定？”。最后给了我5天左右的时间。好，不废话了。其实主要做的东西就是ajax和后台交互，移动端文件上传。
JS交互（后台）这次作品和后台交互还是蛮多的，自己已经不只是再单纯的重构写页面了，这次也花了很多时间在这里导致没有太多时间打重构的代码=。=主要涉及这几个：表单验证，表单提交，Ajax，数据传递。 整体结构参考的博文找不到了。。1234567891011121314151617181920212223242526272829var loginBar = { init: function () { _this = loginBar; _this.config = { $loginBtn: $('#login-btn'), $regisBtn: $('#regis-btn'), $loginOly: $('#login-overlay'), $regisOly: $('#regis-overlay') }; _this.setup(); }, setup: function () { _this.bindEvent(_this.config.$loginBtn, _this.config.$loginOly); _this.bindEvent(_this.config.$regisBtn, _this.config.$regisOly); }, //事件绑定，外部也可以单独调用 bindEvent: function (clickObj, targetObj) { clickObj.click(function () { targetObj.fadeIn(500).click(function (event) { if (event.target == $(this).context) { $(this).fadeOut(500); }; }) }) }}
第一次用上图片有点小激动。。五一小长假又是在学校。现在都是一个学期才回一次家了。 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里面。
跨浏览器的事件处理程序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及之前不支持。
话说这个寒假还是学了不少东西的哈哈。不过做项目的时候还是感觉自己能力很不足很不足很不足（重要的事情说三遍）要多学习多学习多学习。其实做项目提升还是很大的。 看到什么就写什么。 媒体查询做移动端和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端的设计图时内心几乎是崩溃的。以后最好提前和设计师沟通，不然就是在给自己挖好多好多的坑（啊）。反正以后我重构不会让设计师帮我切图了。做这个的时候多分组吧。把内容区块包好。在不同的大小下一般是用浮动来控制内容的位置。
前言：我是大懒虫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的深入理解
慕课网教程地址：JS动画效果 速度动画本门教程的基础。实现的是分享按钮的移出。首先要知道一个东西：定时器 HTML DOM setInterval() 方法定义和用法setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。语法setInterval(code,millisec[,"lang"])–W3Cschool 网页中的JS就是不断的执行改变属性的函数，比如距离，透明度来达到动画的效果:timer = setInterval(function (){},30)后面的就是时间啦，每隔多少秒重复执行前面的（匿名）函数。用clearInterval(timer)来结束计时器。最基本的代码：1234567891011121314151617181920212223242526272829window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function () { startMove(0); } oDiv.onmouseout = function () { startMove(-200); }}var timer = null;function startMove (iTarget) { clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function () { var speed = 0; if (oDiv.offsetLeft > iTarget) { speed = -10; }else{ speed = 10; } if (oDiv.offsetLeft == iTarget) { clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30)} 首先是鼠标一入一出的时候执行函数。 当函数的开头没有clearInterval(timer)时，每次移入DIV就会触发一次定时器：timer = setInterval()，旧的定时器还没关闭，新的定时器就开始工作了，就会造成叠加，速度就会不是匀速运动而是越来越快（鼠标放在上面越久） 下面的逻辑就通过对动画的分析能知道应该怎么写。