Maple Jan

摘要： 手滑把Mac的系统升到了10.9，结果机子上的PhpStorm6.0启动不了。十分天真的重装了一次PhpStorm，问题依然没有修复。开始怨念苹果的这次升级，毕竟以往的升级都是无缝的，升级OS就应该和更新个软件那么简单（绝对是在吐槽Windows）。后来Google了一下，果然已经有人遇到了同样的问题。传送门：OSX 10.9 update removed java - how to fix that?原来这次的更新，Apple直接把Java给去掉了。至于是什么原因，就要发挥大家的想象力了...既然定位了问题，解决就不麻烦了，直接下载Java安装包 →Java for OS X 2013-00 阅读全文

摘要： 在XMLHttpRequest Level2出台之前，大多数的异步上传图片都是利用iframe去实现的。至于具体的实现细节，我就不在这边啰嗦的，Google一下就有文章谈这个东西。这次主要说说，怎么用新的API去实现图片上传。首先，少不了的自然是XMLHttpRequest Level2的一些新特性啦。其中最为实在的就是FormData对象，直接把表单(form)的DOM对象转为FormData对象，然后向服务器发送。还有就是Progress事件的支持，异步上传终于可以查看进度条啦！这里我就不废话了，因为大多数人应该都看过的阮一峰的《XMLHttpRequest Level 2 使用指南》，直 阅读全文

摘要： 关于lazyload，很久之前整理过它的文档：《Lazy Load(1.7.0)中文文档 -- 延迟加载图片的jQuery插件》因为懒，所以才要用lazyload。但lazyload用了一些jQuery特有的内部接口，导致Zepto.js不支持。So，就在github上面fork了一个支持Zepto.js的branch。github：https://github.com/jiancm2011/jquery_lazyload 阅读全文

摘要： 很随意的总结，几乎是代码片段，纯粹当个人笔记。JavaScript中，定义Function对象有两种方法。函数声明(function declaration)1 function fn() {2 // 代码3 };函数表达式(function expression)var fn = function () { // 代码};函数作回调(callback)时的作用域其实回调并不是传递一次性的匿名函数或全局函数，而是对象的方法。看下面的代码，输出结果和我们所想的不一致。 1 var obj = {}; 2 obj.color = "red"; 3 obj.getColor = 阅读全文

摘要： 关于如何编写更高效更优雅的CSS代码，网上已经有很多文章了。但我还是在这里重新总结一下，算是对CSS的温习，也方便以后查找资料。下面开始正文。必不可少的reset.css不同的浏览器之间，对标签都有设置默认样式，所以需要重置这些影响布局统一性的样式。reset.css的代码， 可参考YUI的：http://developer.yahoo.com/yui/reset/如果是移动端的web开发，要清除浏览器默认的点击样式，还需加上：1 *, ::after, ::before{2 -webkit-tap-highlight-color: rgba(0,0,0,0);3 -moz-t... 阅读全文

摘要： 做移动端的Web也有一段时间了，踩过的坑真心不少。下面列出一些，移动端浏览器兼容性的Bug，供大家参考。【UC浏览器】video标签脱离文档流场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。Demo：http://t.cn/zj3xiyu解决方案：不使用transform属性。translate用top、margin等属性替代。【UC浏览器】video标签总在最前场景：<video>标签总是在最前（可以理解为video标签的z 阅读全文

摘要： /*** 本文纯粹是梳理一下目前W3C标准中Array对象的自带Method。* 全文没啥营养，不过最后性能测试的部分，倒是抛出了一些疑问。*/赋值方法 （Mutator methods）这些方法直接修改数组自身pop 和 push Array.pop();// 删除数组最后一个元素，返回被删除的元素Array.push(element1, ..., elementN); // 在数组尾部插入1-N个元素，返回操作后数组的length通过这pop 和 push ，就能把数组模拟成 堆栈(stack) 来进行操作。堆栈这种数据结构的特点，就是“后进先出”（LIFO, Last In First. 阅读全文

摘要： 客户端(浏览器)安全同源策略（Same Origin Policy）同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。如：不能通过Ajax获取另一个源的数据；JavaScript不能访问页面中iframe加载的跨域资源。对 http://store.company.com/dir/page.html 同源检测跨域限制浏览器中，script、img、iframe、link等标签，可以跨域引用或加载资源。不同于 XMLHttpRequest，通过src属性加载的资源，浏览器限制了JavaScript的权限，使其不能读、写返回的内容。XMLHttpRequest 也受到也同源策 阅读全文

摘要： 人机交互人机交互技术(Human-Computer Interaction Techniques)是指通过计算机输入、输出设备，以有效的方式实现人与计算机对话的技术。—— 互动百科简单点说，就是：输入（Input）输出（Output）›输入，其实就是命令机器干一些事情。输入设备：键盘、鼠标、画板…›输出，其实就是机器告诉你它干了什么。›输出设备：显示器、音响…目前，移动互联网的交互中，输入输出设备主要还是手机屏幕。所以移动互联网的交互，实质是：人机交互 = 视觉交互视觉交互中的“真理” —— 格式塔（Gestalt）原理›格式塔，是德文Gestalt的音译，原意是形状、图形的意思。›格式塔原理 阅读全文

摘要： CORS全称：Cross-Origin Resource Sharing中文意思：跨域资源共享？好吧，目前中文方面的资料还比较少，能搜索到的那仅有的几篇相关介绍，也几乎是雷同的。最近工作上也有用到CORS的地方，随便做点分享吧，也当是笔记。大家也知道，XMLHttpRequest接口是Ajax的根本，而Ajax考虑到安全性的问题，是禁止跨域访问资源的。也就是说：www.a.com的页面无法通过Ajax来调用www.b.com的资源。很多人又会说，但jQuery的$.ajax()明明就可以跨域访问啊！对，的确是跨了，但那是jsonp！关于jsonp的介绍也很多了，这里不扯。其实jQuery的$. 阅读全文