2015年9-10

Js

• 代码段1代码段2
• 原生的.style.属性获得的是内嵌样式 如果外联样式或者内部样式的话是通过document.styleSheets cssRules和Rules等等 需要兼容
• 5种css和js交互比较新的方法
  其中第一点js获取伪元素
• 高效jquery编写技巧

// 糟糕function initVar($myVar) {    if(!$myVar) {        $myVar = $('#selector');    }}// 建议function initVar($myVar) {    $myVar = $myVar || $('#selector');}  不存在才赋值

• settimeout0的应用
• 发展简史jQuery时间轴特效
• jQuery和CSS3超炫旋转环状菜单特效
• zepto源码注释
• js优化小技巧
• 滚动触发css3动画

• js深层复制

  function clone(obj){    var o,i,j,k;    if(typeof(obj)!="object" || obj===null)return obj;    if(obj instanceof(Array))    {        o=[];        i=0;j=obj.length;        for(;i<j;i++)        {            if(typeof(obj[i])=="object" && obj[i]!=null)            {                o[i]=arguments.callee(obj[i]);            }            else            {                o[i]=obj[i];            }        }    }    else    {        o={};        for(i in obj)        {            if(typeof(obj[i])=="object" && obj[i]!=null)            {                o[i]=arguments.callee(obj[i]);            }            else            {                o[i]=obj[i];            }        }    }    return o;}

  深入剖析 JavaScript 的深复制
  其中提到Underscore 的 clone() 不能算作深复制，但它至少比直接赋值来得“深”一些，它创建了一个新的对象。
  jQuery 中也有这么一个叫 &amp.clone() 的方法，可是它并不是用于一般的 JS 对象的深复制，而是用于 DOM 对象。&amp.extend() 方法来完成深复制。值得庆幸的是，我们在 jQuery 中可以通过添加一个参数来实现递归extend。调用$.extend(true, {}, …)就可以实现深复制啦

   var x = {        a: 1,        b: { f: { g: 1 } },        c: [ 1, 2, 3 ]    };    var y = $.extend({}, x),          //shallow copy        z = $.extend(true, {}, x);    //deep copy    y.b.f === x.b.f       // true    z.b.f === x.b.f       // false

• 不能用instanceof 和 constructor来判断array，原因参考：http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/ 不多iframe 没事

  var arr = [];arr instanceof Array; // truearr.constructor == Array; // true//jquery中的isArray: function( arr ) {  return !!arr && arr.constructor == Array;}

  The problems arise when it comes to scripting in multi-frame DOM environments.

      var iframe = document.createElement('iframe');    document.body.appendChild(iframe);    xArray = window.frames[window.frames.length-1].Array;    var arr = new xArray(1,2,3); // [1,2,3]// Boom!arr instanceof Array; // false// Boom!arr.constructor === Array; // false

  解决Duck-typing

  function isArray(object) {  return object != null && typeof object === "object" &&    'splice' in object && 'join' in object;}

  新版ECMAScript有isArray了

Html&css

• 60个有用CSS代码片段
• css3 background
• 实用教程！用CSS创建扁平化面包屑导航
• Normalize.css 源码解读
• css选择器
  编写高效的 CSS 选择器
  提到了关键选择器 和过度限制选择器 记住浏览器是从右开始找
• BFC
• line-height
  所以在使用line-height时，除非你刻意否则尽量使用倍数设值
  内容区行高与字体尺寸有关，padding不对行高造成影响。
• css trigger 查看css属性变化的时候性能
• 高性能 CSS3 动画 其中有hack代码
• 10款css工具 其中前缀 渐变 按钮很好
• float系列 inlinebox linebox
• http://www.html5cn.org/article-7057-1.html
• 动画12则非常好
• 很多好的html5例子
• loading css3
• -moz-background-size:100% 100%;
  background-size:100% 100%;背景自适应
  background-size不要和background连写 兼容问题
• http://www.imooc.com/article/1167 html5动画生成器
• CSS z-index 属性的使用方法和层级树的概念
• Understanding CSSjs z-index
• 从输入 URL 到页面加载完的过程中都发生了什么事情
• 切记：appendChild()、insertBefore()是移动element节点！
• [css行高line-height的一些深入理解及应用]
  http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98lineheight%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/
  http://www.zhangxinxu.com/wordpress/2015/01/tips-blank-character-chinese-align/#comments
• CSS页面布局的技巧
  http://bbs.lanrentuku.com/thread-2648-1-1.html
• 有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性？
  http://www.zhihu.com/question/20979831
• 那些年我们一起清过得浮动**（其中末尾精益求精部分after闭合浮动 before阻止重叠方法 重点）
  BFC神奇背后的原理
  bfc和haslayout
  在 CSS 布局中，用 float 好还是用 position 好？分别有什么优势
• 如何让height：100%起作用
  web中计算宽度和高度是不一样的

• div内部块级元素设置外间距（margin）对其的影响
  内部块元素设置margin并没有撑开外面的div
  解决overflow:hidden zoom:1 如果可以显示border直接设置个border就好了

• 一个完整的flexbox指南
  http://www.w3cplus.com/css3/flexbox-basics.html
  http://my.oschina.net/yinyongcom666/blog/151085

• 行内元素产生水平间距bug
  font-size 0 不能解决所有浏览器问题
• ie下a中的img自动添加border 所以img标签中最好加上border=“0”；
• 【前端外刊】想要站点文字默认为双倍行距。line-height 最佳实践 确保将line-height是没单位数值
  如何让元素部分重叠 负值margin
  伪元素和伪类
  http://zhuanlan.zhihu.com/FrontendMagazine/20020090
• 跨浏览器开发必备知识库
• https://css-tricks.com/perfect-full-page-background-image/
  完美full-page背景
• 纯css实现气泡窗

移动端

1. 无线建站指南入门
2. 移动web资料
   
   1. 移动web滑屏框架
   2. Spirit腾讯移动Web整体解决方案移动标准 UI js库
3. 小师傅给的移动端资料
4. 这个项目收集移动端开发所需要的一些资源与小技巧
5. 想学响应式设计？来看史上最全的响应式设计资源库
   http://www.uisdc.com/responsive-web-design （这里有响应式的例子)
   40个栅格插件
   Kraken
   jpanelMenu

性能

1. http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fbj.58.com%2Fjob.shtml%3FPGTID%3D14391357614640.23508751671761274%26ClickID%3D1
2. http://tech.meituan.com/performance-framework-and-platform.html
3. http://segmentfault.com/a/1190000003646305