用javascript解决placeholder的ie8不兼容问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">  
  if( !('placeholder' in document.createElement('input')) ){  
   
    $('input[placeholder],textarea[placeholder]').each(function(){   
      var that = $(this),   
      text= that.attr('placeholder');   
      if(that.val()===""){   
        that.val(text).addClass('placeholder');   
      }   
      that.focus(function(){   
        if(that.val()===text){   
          that.val("").removeClass('placeholder');   
        }   
      })   
      .blur(function(){   
        if(that.val()===""){   
          that.val(text).addClass('placeholder');   
        }   
      })   
      .closest('form').submit(function(){   
        if(that.val() === text){   
          that.val('');   
        }   
      });   
    });   
  }  
</script> 

忽略浏览器对部分HTML的解析

当我们需要忽略浏览器对部分HTML解析的时候，HTML代码中的<plaintext>和<xmp></xmp>可以帮我们实现。

<plaintext>是单标签，它插入到HTML代码中时，其__后面的所有HTML标签全部失效__，即浏览器对<plaintext>后面所有的HTML标签不作解析，直接在页面上显示。因为本博客是用markdown写的，当时没有给<plaintext>标签加反单引号，结果导致其后所有代码浏览器都不解析了0.0

<xmp></xmp>是双标签，它__只使其包含的内容中的标签失效__，<xmp></xmp>的使用更为普遍。

###效果：

  1. 未使用<xmp></xmp>：

  2. 使用<xmp></xmp>：

雅虎十四条

######转自http://www.keephelp.com/qianduan/yahoo-14/

法则 1. 减少 HTTP 请求次数

80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素， 如图像、 样式表、 脚本和 Flash 等，的下载上。 减少页面元素将会减少 HTTP 请求 次数。这是快速显示页面的关键所在。 一种减少页面元素个数的方法是简化页面设计。 但是否存在其他方式，能做到既 有丰富内容，又能获得快速响应时间呢？以下是这样一些技术： Image maps 组合多个图片到一张图片中。总文件大小变化不大，但减少了 HTTP 请求次数从而加快了页面显示速度。 该方式只适合图片连续的情况；同时坐标的 定义是烦人又容易出错的工作。 CSS Sprites 是更好的方法。它可以组合页面中的图片到单个文件中，并使用 CSS 的 background-image 和 background-position 属性来现实所需的部分图片。 Inline images 使用 data: URL scheme 来在页面中内嵌图片。这将增大 HTML 文 件的大小。组合 inline images 到你的（缓存）样式表是既能较少 HTTP 请求， 又能避免加大 HTML 文件大小的方法。 Combined files 通过组合多个脚本文件到单一文件来减少 HTTP 请求次数。样式 表也可采用类似方法处理。 这个方法虽然简单，但没有得到大规模的使用。 大 10 美国网站每页平均有 7 个脚本文件和 2 个样式表。当页面之间脚本和样式表变化 很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。 减少 HTTP 请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的 作用。 Tenni Theurer 的文章 Browser Cache Usage – Exposed!描述，40-60% 据 的日常访问是首次访问，因此为首次访问者加快页面访问速度是用户体验的关键。

前端面试题

######转自trigkit4

前端开发面试知识点大纲：

HTML&CSS：  对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

JavaScript：   数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他：  HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

1.请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
第一：每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie
2.IE7和之后的版本最后可以有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有做硬性限制

在git Bash下进行复制粘贴

window自带的命令行工具不怎么好用，所以用__git Bash__代替它。可是刚安装好的__git Bash__并不能复制粘贴，这样如果要输入很长的命令的时候是非常痛苦的，比如说clone网址啊什么的。

####其实只需要简单设置，__git Bash__就可以支持复制粘贴了：
在__git Bash__命令行界面上__右键点击左上角__，在出现的菜单中点击 > properties（属性），然后在勾选 > quickedit（快速编辑），这样就ok了。
####PS: __git Bash__的复制粘贴是鼠标右键。

hexo博客优化

##添加RSS
hexo有提供RSS生成插件：hexo-generator-feed，需要自己手动安装：

  1. 在博客目录下运行

    1
    $ npm install hexo-generator-feed --save

  2. 配置hexo/_config.yml文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    feed:
      type: atom
      path: atom.xml
      limit: 20	```

    3. 访问本地地址：<http://localhost:4000/atom.xml>,插件启用成功的话，会自动生成atom.xml文件。
    4. 在站点导航中添加链接：
    在`themes/light/_config.yml`中，编辑 `rss: /atom.xml`
    在`themes/light/layout/_partial/header.ejs`中，`<ul></ul>`之间，添加一样代码`<li> <a href="/atom.xml">RSS</a> </li>`

    <!-- more -->

    <br>
    ##添加sitemap站点地图
    为了方便搜索引擎收录我们的网站，我们可以通过[hexo-generator-sitemap](https://github.com/hexojs/hexo-generator-sitemap)插件，生成一个sitemap.xml文件，然后登录站长平台，在提交Sitempas界面里提交自己网站的sitemap.xml文件，比如我的文件：<http://landerqi.com/sitemap.xml>。

    __四大搜索站长平台地址__：

    - 百度站长平台：<http://zhanzhang.baidu.com>
    - 360站长平台：<http://zhanzhang.haosou.com>
    - 搜狗站长平台：<http://zhanzhang.sogou.com>
    - 谷歌站长平台：<http://google.com/webmasters>

    1. 安装，在博客目录下运行：

    $ npm install hexo-generator-sitemap –save

    1
    2

    2. 配置`hexo/_config.yml`文件

    sitemap:
    path: sitemap.xml

    1
    2
    3
    4

    <br>
    ##添加百度统计
    到百度统计注册账号，添加网站地址，将百度提供给你的一段js代码加入你的网站即可。__大概类似这样的代码：__
    1
    2
    3
    4
    5
    我把它加在了`themes/lightqi/layout/_partial/head.ejs` 中的head标签里面。

    <br>
    ##添加百度分享
    找到`themes\lightqi\layout\_partial\article.ejs`里的如下代码:

    <%- partial(‘post/category’) %>
    <%- partial(‘post/tag’) %>

    1
    修改成如下:
    <%- partial('post category') %> <%- partial('post tag') %> 
    1
    2
    3

    还需要添加如下代码至 themes\lightqi\layout\_partial\after_footer.ejs .

    1
    2

    最后美化一下样式，找到`themes\lightqi\source\css\_partial\archive.styl`加入出下代码：
    .archive article .nirdonkey float left .bdsharebuttonbox float right 
    1
    2
    3
    4
    5

    <br>
    ##添加多说评论
    - 注册[多说](http://duoshuo.com/)账号，获得通用代码。
    - 将通用代码粘贴到`themes\light\layout\_partial\comment.ejs`里面，如下：

    <% if ( page.comments){ %>

    通用代码
    <% } %> 
    1
    - `hexo\_config.yml`中加入:
    # duoshuo comment duoshuo_shortname: landerqi(你站点的short_name) ``` short_name是指你在http://duoshuo.com/create-site/申请网站后的duoshuo.com前的字段。

##文章中插入图片 - 插入图片格式为`![图片名称](图片连接地址)`，图片大家可以上传到七牛云存储或者一些其他的存储服务，我自己现在是在用七牛，免费的基本已经够用了。 - 使用本地路径：在`hexo/source`目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为`/img/图片名称`。
##绑定自己的域名 - 首页你得拥有自己的域名，你可以到万网，或Godaddy这些域名提供商上挑选自己喜欢的域名。 - 注册DNSPOD，用DNSPOD解析域名： ![](https://fesystem.bs2dl.yy.com/156938311221483) 记录类型选CNAME。 __如果是在万网或Godaddy上购买的域名，需要修改DNS地址为`f1g1ns1.dnspod.net`和`f1g1ns1.dnspod.net`，DNSPOD才可以成功解析。__ - 在`source`目录下新建一个名为CNAME的文本文件，里面写入你要绑定的域名，比如`landerqi.com`。
__我自己的主题代码已提交到Github上了，大家如果觉得配置麻烦，可以直接使用我的主题[lightqi](https://github.com/landerqi/lightqi)，使用方法非常简单，在博客根目录下输入`git clone https://github.com/landerqi/lightqi.git themes/lightqi`。再修改hexo/_config.yml的theme为lightqi即可__

Sublime Text 3 插件安装方法及热门插件推荐

之前工作的时候一直用的Webstorm（前端开发神器）。在性能高的电脑上用Webstorm挺好的，可是Webstorm在我的macbook air运行起来非常卡。所以决定使用一下Sublime Text :)

Sublime Text是一款非常精巧的文本编辑器，速度快得出奇。这些非常棒的特性包括任意跳转（Goto Anything）、多重选择（multiple selections）、指令面板（command palette）、免打扰模式（distraction free mode）、分区编辑（split editing）、快速项目切换（instant project switch），你还可以随意地自定义更多功能。还有，这款编辑器支持Mac、Windows和Linux平台。

因为自己一直习惯用vim快捷键，以及用惯了Webstorm的自动保存功能，所以做了些简单配置：
preferences-> User Settings

1
2
3
4
5
{
    "ignored_packages": [], //使用vim快捷键
    "save_on_focus_lost": true, //这是设置当Sublime 失去焦点后自动保存
}