atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>一人一马一江湖</title>
  
  <subtitle>愿你可以朝九晚五，又可以浪迹天涯</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://loeuy.cn/"/>
  <updated>2018-07-13T17:08:22.447Z</updated>
  <id>http://loeuy.cn/</id>
  
  <author>
    <name>荣嬷嬷</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>简历</title>
    <link href="http://loeuy.cn/resume.html"/>
    <id>http://loeuy.cn/resume.html</id>
    <published>2018-07-13T16:58:54.000Z</published>
    <updated>2018-07-13T17:08:22.447Z</updated>
    
    <content type="html"><![CDATA[<h1 id="联系方式"><a href="#联系方式" class="headerlink" title="联系方式"></a>联系方式</h1><ul><li>手机/微信号：17603007311</li><li>Email：<a href="mailto:ljr2014ncu@gmail.com" target="_blank" rel="noopener">ljr2014ncu@gmail.com</a> </li><li>QQ：1013334587</li></ul><h1 id="个人信息"><a href="#个人信息" class="headerlink" title="个人信息"></a>个人信息</h1><ul><li>刘金荣/男/23</li><li>南昌大学/软件学院/软件技术</li><li>工作年限：2年</li><li>技术博客：<a href="loeuy.cn">rongmo.github.io</a></li><li>期望职位：前端工程师</li><li>期望城市：广州、深圳</li></ul><a id="more"></a><h1 id="技能清单"><a href="#技能清单" class="headerlink" title="技能清单"></a>技能清单</h1><ul><li>熟练运用 HTML、CSS 等网页重构技术进行页面开发，对页面布局、文档流、盒模型等有自己的理解，熟悉 CSS3、HTML5 新特性。</li><li>熟悉 PS，psd切图构建页面框架，背景小图合成雪碧图；了解AI，使用ai制作字体图标，优化页面加载。</li><li>熟悉客户端 JavaScript 及浏览器 DOM技术，但不仅限于 JavaScript 及浏览器 DOM，对于常用 JavaScript 框架和类库（如 jQuery、Bootstrap、swiper、zepto、lazyload）也熟练掌握；了解服务端 JavaScript 技术（如 Node.js）。</li><li>熟悉响应式布局，弹性盒布局，移动端适配，less 的用法。</li><li>熟悉Vue.js 并有相关项目开发经验，掌握vue-cli,vue-router,axios,vuex等的使用，熟练使用模块组件化，了解部分指令的实现机制。</li><li>熟悉微信小程序并有相关项目开发经验，了解小程序的开发原理。</li><li>熟悉 ECMAScript6 及基于 webpack 的前端模块化构建工作流。</li><li>熟悉 git 工作流及常用的 Linux 命令，对服务器配置与环境搭建等也有所了解。习惯使用 Visual Studio Code/WebStorm + Google Chrome 的开发环境。</li><li>了解react 技术栈、Angular 技术栈。</li></ul><h1 id="工作经历"><a href="#工作经历" class="headerlink" title="工作经历"></a>工作经历</h1><blockquote><h2 id="东莞市易得网络-（2017年5月-至今-）-web前端工程师"><a href="#东莞市易得网络-（2017年5月-至今-）-web前端工程师" class="headerlink" title="东莞市易得网络 （2017年5月 ~ 至今 ） web前端工程师"></a>东莞市易得网络 （2017年5月 ~ 至今 ） web前端工程师</h2></blockquote><ul><li>负责公司网站开发，性能优化，维护</li><li>配合后台工程师，完成产品前台页面制作，致力于改善用户体验</li><li>前后端分离，与后台进行沟通共同完成数据格式，数据接口制定，实现前后台数据交互 </li><li>与客户对接，修改客户提出的需求，帮助客户发布小程序与后期的优化、维护</li></ul><h4 id="美业易后台管理系统（2018-05-2018-08）"><a href="#美业易后台管理系统（2018-05-2018-08）" class="headerlink" title="美业易后台管理系统（2018.05~2018.08）"></a>美业易后台管理系统（2018.05~2018.08）</h4><p>​    待更新</p><h4 id="美业易微信小程序（2018-02-2018-05）"><a href="#美业易微信小程序（2018-02-2018-05）" class="headerlink" title="美业易微信小程序（2018.02~2018.05）"></a>美业易微信小程序（2018.02~2018.05）</h4><p>​    待更新</p><h4 id="聚超微商城-（2017-10-2018-01）"><a href="#聚超微商城-（2017-10-2018-01）" class="headerlink" title="聚超微商城 （2017.10~2018.01）"></a>聚超微商城 （2017.10~2018.01）</h4><p>​    待更新</p><h4 id="红蜻蜓微商城-PC商城（2017-05-2017-10）"><a href="#红蜻蜓微商城-PC商城（2017-05-2017-10）" class="headerlink" title="红蜻蜓微商城/PC商城（2017.05~2017.10）"></a>红蜻蜓微商城/PC商城（2017.05~2017.10）</h4><p>​    待更新</p><blockquote><h2 id="南昌百恒网络-（-2015年12月-2017年4月-）-web开发"><a href="#南昌百恒网络-（-2015年12月-2017年4月-）-web开发" class="headerlink" title="南昌百恒网络 （ 2015年12月 ~ 2017年4月 ） web开发"></a>南昌百恒网络 （ 2015年12月 ~ 2017年4月 ） web开发</h2></blockquote><ul><li>主要负责公司前端页面的开发和维护</li><li>根据文档需求，与后端开发人员合作完成页面的交互功能</li><li>高质量的完成上级交代的任务</li></ul><h4 id="中国婚庆糖果网（PC-端）（2016-03-2016-06）"><a href="#中国婚庆糖果网（PC-端）（2016-03-2016-06）" class="headerlink" title="中国婚庆糖果网（PC 端）（2016.03-2016.06）"></a>中国婚庆糖果网（PC 端）（2016.03-2016.06）</h4><ul><li>项目简介：中国婚庆糖果网致力于打造全国最大的喜糖订包中心，与全国各地的婚纱摄影店合作，为每一对新人提供周到完善的喜糖预定，及包装解决方案。</li><li>责任描述：团队合作，本人负责部分页面的编写，和后台人员沟通实现页面数据的交互。</li><li>项目技术：<ul><li>运用 DIV+CSS 完成布局排版；</li><li>配合后台人员，使用 ajax 来完成数据渲染；</li><li>使用 JQuery 完成页面的动画效果，增加用户的体验</li><li>使用百度分享插件。</li></ul></li></ul><h4 id="中国婚庆糖果网（微商城）（2016-07-2016-10）"><a href="#中国婚庆糖果网（微商城）（2016-07-2016-10）" class="headerlink" title="中国婚庆糖果网（微商城）（2016.07-2016.10）"></a>中国婚庆糖果网（微商城）（2016.07-2016.10）</h4><ul><li>责任描述：团队合作项目，负责部分页面编写，和一些逻辑代码的编写。</li><li>项目技术：<ul><li>使用 require.js</li><li>使用 swiper 实现轮播</li><li>使用 JavaScript/jQuery 完成相关逻辑</li><li>使用 rem、flex 适应不同分辨率、不同终端设备</li></ul></li></ul><h4 id="里鲜生（微商城）-（2016-10-2017-02）"><a href="#里鲜生（微商城）-（2016-10-2017-02）" class="headerlink" title="里鲜生（微商城） （2016.10~2017.02）"></a>里鲜生（微商城） （2016.10~2017.02）</h4><ul><li>项目简介：该项目是电商交易平台，专注于农副生鲜产品的配送，OTO 电商运营。责任描述：团队合作项目，主要负责搭建框架，并编写部分页面以及数据的渲染。</li><li>责任描述：团队合作项目，主要负责搭建框架，并编写部分页面以及数据的渲染。</li><li>项目技术：<ul><li>运用sass进行代码编译实现手机端适配，运用gulp进行代码的整理和压缩</li><li>使用 angular.js ，运用 angular-ui-route 实现路由之间的切换</li><li>使用 angular.js 中$http 请求数据并完成渲染</li></ul></li></ul><hr><h1 id="致谢"><a href="#致谢" class="headerlink" title="致谢"></a>致谢</h1><p>感谢您花时间阅读我的简历，期待能有机会和您共事。<br>​      </p>]]></content>
    
    <summary type="html">
    
      &lt;h1 id=&quot;联系方式&quot;&gt;&lt;a href=&quot;#联系方式&quot; class=&quot;headerlink&quot; title=&quot;联系方式&quot;&gt;&lt;/a&gt;联系方式&lt;/h1&gt;&lt;ul&gt;
&lt;li&gt;手机/微信号：17603007311&lt;/li&gt;
&lt;li&gt;Email：&lt;a href=&quot;mailto:ljr2014ncu@gmail.com&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;ljr2014ncu@gmail.com&lt;/a&gt; &lt;/li&gt;
&lt;li&gt;QQ：1013334587&lt;/li&gt;
&lt;/ul&gt;
&lt;h1 id=&quot;个人信息&quot;&gt;&lt;a href=&quot;#个人信息&quot; class=&quot;headerlink&quot; title=&quot;个人信息&quot;&gt;&lt;/a&gt;个人信息&lt;/h1&gt;&lt;ul&gt;
&lt;li&gt;刘金荣/男/23&lt;/li&gt;
&lt;li&gt;南昌大学/软件学院/软件技术&lt;/li&gt;
&lt;li&gt;工作年限：2年&lt;/li&gt;
&lt;li&gt;技术博客：&lt;a href=&quot;loeuy.cn&quot;&gt;rongmo.github.io&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;期望职位：前端工程师&lt;/li&gt;
&lt;li&gt;期望城市：广州、深圳&lt;/li&gt;
&lt;/ul&gt;
    
    </summary>
    
    
      <category term="简历" scheme="http://loeuy.cn/tags/%E7%AE%80%E5%8E%86/"/>
    
  </entry>
  
  <entry>
    <title>ClassName命名</title>
    <link href="http://loeuy.cn/ClassName.html"/>
    <id>http://loeuy.cn/ClassName.html</id>
    <published>2018-05-27T14:05:36.155Z</published>
    <updated>2018-06-25T15:32:57.415Z</updated>
    
    <content type="html"><![CDATA[<p>ClassName的命名应该尽量精短、明确，必须以<strong>字母开头命名</strong>，且<strong>全部字母为小写</strong>，单词之间<strong>统一使用下划线</strong> “_” 连接</p><a id="more"></a><h2 id="命名原则"><a href="#命名原则" class="headerlink" title="命名原则"></a>命名原则</h2><p>基于姓氏命名法（继承 + 外来），如下图：</p><p><img src="http://labs.qiang.it/ppguide/img/standard_jiapu.png" alt="enter image description here"></p><p>祖先模块不能出现下划线，除了是全站公用模块，如 <code>mod_</code> 系列的命名：</p><p><strong>推荐：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_son"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_son"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">...</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 这个是全站公用模块，祖先模块允许直接出现下划线 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mod_info"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mod_info_son"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mod_info_son"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">...</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>不推荐：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_son"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_son"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">...</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_cover"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块</p><p><strong>推荐：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_cover"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_user"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_user_img"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"miui_tit"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"miui_txt"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_list"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>不推荐：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_cover"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_user"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_user_img"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">""</span> <span class="attr">alt</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_user_img_tit"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_user_img_txt"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"modulename_info_list"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="模块命名"><a href="#模块命名" class="headerlink" title="模块命名"></a>模块命名</h2><p>全站公共模块：以 <code>mod_</code> 开头</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mod_yours"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>业务公共模块：以 <code>业务名_mod_</code> 开头</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"paipai_mod_yours"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="常用命名推荐"><a href="#常用命名推荐" class="headerlink" title="常用命名推荐"></a>常用命名推荐</h2><p><strong>注意</strong>：ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此 </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ad"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>这种广告的英文或拼音类名不应该出现</p><p>另外，<strong>敏感不和谐字眼</strong>也不应该出现，如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fuck"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"jer"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"sm"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gcd"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ass"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"KMT"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> </span><br><span class="line">...</span><br></pre></td></tr></table></figure><table><thead><tr><th>ClassName</th><th>含义</th></tr></thead><tbody><tr><td>about</td><td>关于</td></tr><tr><td>account</td><td>账户</td></tr><tr><td>arrow</td><td>箭头图标</td></tr><tr><td>article</td><td>文章</td></tr><tr><td>aside</td><td>边栏</td></tr><tr><td>audio</td><td>音频</td></tr><tr><td>avatar</td><td>头像</td></tr><tr><td>bg,background</td><td>背景</td></tr><tr><td>bar</td><td>栏（工具类）</td></tr><tr><td>branding</td><td>品牌化</td></tr><tr><td>crumb,breadcrumbs</td><td>面包屑</td></tr><tr><td>btn,button</td><td>按钮</td></tr><tr><td>caption</td><td>标题，说明</td></tr><tr><td>category</td><td>分类</td></tr><tr><td>chart</td><td>图表</td></tr><tr><td>clearfix</td><td>清除浮动</td></tr><tr><td>close</td><td>关闭</td></tr><tr><td>col,column</td><td>列</td></tr><tr><td>comment</td><td>评论</td></tr><tr><td>community</td><td>社区</td></tr><tr><td>container</td><td>容器</td></tr><tr><td>content</td><td>内容</td></tr><tr><td>copyright</td><td>版权</td></tr><tr><td>current</td><td>当前态，选中态</td></tr><tr><td>default</td><td>默认</td></tr><tr><td>description</td><td>描述</td></tr><tr><td>details</td><td>细节</td></tr><tr><td>disabled</td><td>不可用</td></tr><tr><td>entry</td><td>文章，博文</td></tr><tr><td>error</td><td>错误</td></tr><tr><td>even</td><td>偶数，常用于多行列表或表格中</td></tr><tr><td>fail</td><td>失败（提示）</td></tr><tr><td>feature</td><td>专题</td></tr><tr><td>fewer</td><td>收起</td></tr><tr><td>field</td><td>用于表单的输入区域</td></tr><tr><td>figure</td><td>图</td></tr><tr><td>filter</td><td>筛选</td></tr><tr><td>first</td><td>第一个，常用于列表中</td></tr><tr><td>footer</td><td>页脚</td></tr><tr><td>forum</td><td>论坛</td></tr><tr><td>gallery</td><td>画廊</td></tr><tr><td>group</td><td>模块，清除浮动</td></tr><tr><td>header</td><td>页头</td></tr><tr><td>help</td><td>帮助</td></tr><tr><td>hide</td><td>隐藏</td></tr><tr><td>hightlight</td><td>高亮</td></tr><tr><td>home</td><td>主页</td></tr><tr><td>icon</td><td>图标</td></tr><tr><td>info,information</td><td>信息</td></tr><tr><td>last</td><td>最后一个，常用于列表中</td></tr><tr><td>links</td><td>链接</td></tr><tr><td>login</td><td>登录</td></tr><tr><td>logout</td><td>退出</td></tr><tr><td>logo</td><td>标志</td></tr><tr><td>main</td><td>主体</td></tr><tr><td>menu</td><td>菜单</td></tr><tr><td>meta</td><td>作者、更新时间等信息栏，一般位于标题之下</td></tr><tr><td>module</td><td>模块</td></tr><tr><td>more</td><td>更多（展开）</td></tr><tr><td>msg,message</td><td>消息</td></tr><tr><td>nav,navigation</td><td>导航</td></tr><tr><td>next</td><td>下一页</td></tr><tr><td>nub</td><td>小块</td></tr><tr><td>odd</td><td>奇数，常用于多行列表或表格中</td></tr><tr><td>off</td><td>鼠标离开</td></tr><tr><td>on</td><td>鼠标移过</td></tr><tr><td>output</td><td>输出</td></tr><tr><td>pagination</td><td>分页</td></tr><tr><td>pop,popup</td><td>弹窗</td></tr><tr><td>preview</td><td>预览</td></tr><tr><td>previous</td><td>上一页</td></tr><tr><td>primary</td><td>主要</td></tr><tr><td>progress</td><td>进度条</td></tr><tr><td>promotion</td><td>促销</td></tr><tr><td>rcommd,recommendations</td><td>推荐</td></tr><tr><td>reg,register</td><td>注册</td></tr><tr><td>save</td><td>保存</td></tr><tr><td>search</td><td>搜索</td></tr><tr><td>secondary</td><td>次要</td></tr><tr><td>section</td><td>区块</td></tr><tr><td>selected</td><td>已选</td></tr><tr><td>share</td><td>分享</td></tr><tr><td>show</td><td>显示</td></tr><tr><td>sidebar</td><td>边栏，侧栏</td></tr><tr><td>slide</td><td>幻灯片，图片切换</td></tr><tr><td>sort</td><td>排序</td></tr><tr><td>sub</td><td>次级的，子级的</td></tr><tr><td>submit</td><td>提交</td></tr><tr><td>subscribe</td><td>订阅</td></tr><tr><td>subtitle</td><td>副标题</td></tr><tr><td>success</td><td>成功（提示）</td></tr><tr><td>summary</td><td>摘要</td></tr><tr><td>tab</td><td>标签页</td></tr><tr><td>table</td><td>表格</td></tr><tr><td>txt,text</td><td>文本</td></tr><tr><td>thumbnail</td><td>缩略图</td></tr><tr><td>time</td><td>时间</td></tr><tr><td>tips</td><td>提示</td></tr><tr><td>title</td><td>标题</td></tr><tr><td>video</td><td>视频</td></tr><tr><td>wrap</td><td>容器，包，一般用于最外层</td></tr><tr><td>wrapper</td><td>容器，包，一般用于最外层</td></tr></tbody></table>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;ClassName的命名应该尽量精短、明确，必须以&lt;strong&gt;字母开头命名&lt;/strong&gt;，且&lt;strong&gt;全部字母为小写&lt;/strong&gt;，单词之间&lt;strong&gt;统一使用下划线&lt;/strong&gt; “_” 连接&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>移动端常见的一些兼容性问题</title>
    <link href="http://loeuy.cn/mob_com.html"/>
    <id>http://loeuy.cn/mob_com.html</id>
    <published>2017-06-14T10:04:45.000Z</published>
    <updated>2018-05-27T13:52:21.957Z</updated>
    
    <content type="html"><![CDATA[<p>随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题，</p><h5 id="1、安卓浏览器看背景图片，有些设备会模糊。"><a href="#1、安卓浏览器看背景图片，有些设备会模糊。" class="headerlink" title="1、安卓浏览器看背景图片，有些设备会模糊。"></a>1、安卓浏览器看背景图片，有些设备会模糊。</h5><p>用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？</p><p>经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960 <em> 640分辨率，在网页里只显示了480 </em> 320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。</p><a id="more"></a><p>想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100 <em> 100，背景图必须得200 </em> 200，然后background-size:contain;，这样显示出来的图片就比较清晰了。</p><p>代码可以如下：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">background:url(../images/icon/all.png) no-repeat center center;</span><br><span class="line"><span class="selector-tag">-webkit-background-size</span><span class="selector-pseudo">:50px</span> 50<span class="selector-tag">px</span>;</span><br><span class="line"><span class="selector-tag">background-size</span>: 50<span class="selector-tag">px</span> 50<span class="selector-tag">px</span>;<span class="selector-tag">display</span><span class="selector-pseudo">:inline-block</span>; <span class="selector-tag">width</span><span class="selector-pseudo">:100</span>%; <span class="selector-tag">height</span><span class="selector-pseudo">:50px</span>;</span><br></pre></td></tr></table></figure><p>或者指定 background-size:contain;都可以，大家试试！</p><h5 id="2、图片加载"><a href="#2、图片加载" class="headerlink" title="2、图片加载"></a>2、图片加载</h5><p>若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：</p><p>具体的canvas API 参见：<a href="http://javascript.ruanyifeng.com/htmlapi/canvas.html" target="_blank" rel="noopener">http://javascript.ruanyifeng.com/htmlapi/canvas.html</a></p><p>下面举例说明一个canvas的例子：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">canvas</span>&gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">//js动态加载图片和li 总共举例17张图片！</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> total=<span class="number">17</span>; </span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> zWin=$(<span class="built_in">window</span>); </span></span><br><span class="line"><span class="javascript">varrender=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> padding=<span class="number">2</span>; </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> winWidth=zWin.width(); </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> picWidth=<span class="built_in">Math</span>.floor((winWidth-padding*<span class="number">3</span>)/<span class="number">4</span>); </span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> tmpl =<span class="string">''</span>;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;=totla;i++)&#123; </span></span><br><span class="line"><span class="javascript">     <span class="keyword">var</span> p=padding; </span></span><br><span class="line"><span class="javascript">     <span class="keyword">var</span> imgSrc=<span class="string">'img/'</span>+i+<span class="string">'.jpg'</span>;</span></span><br><span class="line"><span class="javascript">     <span class="keyword">if</span>(i%<span class="number">4</span>==<span class="number">1</span>)&#123;</span></span><br><span class="line"><span class="undefined">        p=0;</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="javascript">  tmpl +=<span class="string">'&lt;li style="width:'</span>+picWidth+<span class="string">'px;height:'</span>+picWidth+<span class="string">'px;padding-left:'</span>+p+<span class="string">'px;padding-top:'</span>+padding+<span class="string">'px;"&gt;&lt;canvas id="cvs_'</span>+i+<span class="string">'"&gt;&lt;/canvas&gt;&lt;/li&gt;'</span>;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> imageObj = newImage(); </span></span><br><span class="line"><span class="undefined">  imageObj.index = i; </span></span><br><span class="line"><span class="javascript">  imageObj.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> cvs =$(<span class="string">'#cvs_'</span>+<span class="keyword">this</span>.index)[<span class="number">0</span>].getContext(<span class="string">'2d'</span>);</span></span><br><span class="line"><span class="javascript">    cvs.width = <span class="keyword">this</span>.width;</span></span><br><span class="line"><span class="javascript">    cvs.height=<span class="keyword">this</span>.height;</span></span><br><span class="line"><span class="javascript">    cvs.drawImage(<span class="keyword">this</span>,<span class="number">0</span>,<span class="number">0</span>);</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">  imageObj.src=imgSrc;</span></span><br><span class="line"><span class="undefined">  &#125;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined">render();</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h5 id="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs"><a href="#3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs" class="headerlink" title="3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs"></a>3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs</h5><p>zeptojs内置Touch events方法，具体可以看<a href="http://zeptojs.com/#Touch" target="_blank" rel="noopener">http://zeptojs.com/#Touch</a> events</p><p>看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！</p><h5 id="4、防止手机中网页放大和缩小。"><a href="#4、防止手机中网页放大和缩小。" class="headerlink" title="4、防止手机中网页放大和缩小。"></a>4、防止手机中网页放大和缩小。</h5><p>这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport</p><p>还有就是，有些手机网站我们看到如下声明：</p><p>代码如下:</p><p><code>&lt;!DOCTYPE html PUBLIC &quot;-//WAPFORUM//DTD XHTML Mobile 1.0//EN&quot; &quot;http://www.wapforum.org/DTD/xhtml-mobile10.dtd&quot;&gt;</code></p><p>设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明&lt;!DOCTYPE html&gt;。</p><p>使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。</p><p><code>&lt;meta name=&quot;viewport&quot;content=&quot;user-scalable=0&quot;/&gt;</code></p><p>但是为了更好的兼容，我们会使用完整的viewport设置。</p><p><a href="">复制代码</a>代码如下:</p><p><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0&quot; /&gt;</code></p><p>当然，<code>user-scalable=0</code>,有的人也写成<code>user-scalable=no</code>，都可以的。</p><h5 id="5、apple-mobile-web-app-capable"><a href="#5、apple-mobile-web-app-capable" class="headerlink" title="5、apple-mobile-web-app-capable"></a>5、apple-mobile-web-app-capable</h5><p>apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。</p><p>语法：</p><p><code>&lt;meta name=&quot;apple-mobile-web-app-capable&quot;content=&quot;yes&quot;&gt;</code></p><p>说明：</p><p>如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。</p><h5 id="6、format-detection"><a href="#6、format-detection" class="headerlink" title="6、format-detection"></a>6、format-detection</h5><p>format-detection 启动或禁用自动识别页面中的电话号码。</p><p>语法：</p><p><code>&lt;meta name=&quot;format-detection&quot;content=&quot;telephone=no&quot;&gt;</code></p><p>说明：</p><p>默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。</p><h5 id="7、html5调用安卓或者ios的拨号功能"><a href="#7、html5调用安卓或者ios的拨号功能" class="headerlink" title="7、html5调用安卓或者ios的拨号功能"></a>7、html5调用安卓或者ios的拨号功能</h5><p>html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。</p><p>如下：</p><p><code>&lt;a href=&quot;tel:4008106999,1034&quot;&gt;400-810-6999 转 1034&lt;/a&gt;</code></p><p>拨打手机直接如下</p><p><code>&lt;a href=&quot;tel:15677776767&quot;&gt;点击拨打15677776767&lt;/a&gt;</code></p><h5 id="8、html5GPS定位功能"><a href="#8、html5GPS定位功能" class="headerlink" title="8、html5GPS定位功能"></a>8、html5GPS定位功能</h5><p>具体请看：<a href="http://www.w3school.com.cn/html5/html_5_geolocation.asp" target="_blank" rel="noopener">http://www.w3school.com.cn/html5/html_5_geolocation.asp</a></p><h5 id="9、上下拉动滚动条时卡顿、慢"><a href="#9、上下拉动滚动条时卡顿、慢" class="headerlink" title="9、上下拉动滚动条时卡顿、慢"></a>9、上下拉动滚动条时卡顿、慢</h5><p><code>body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}</code></p><p>Android3+和iOS5+支持CSS3的新属性为overflow-scrolling</p><h5 id="10、禁止复制、选中文本"><a href="#10、禁止复制、选中文本" class="headerlink" title="10、禁止复制、选中文本"></a>10、禁止复制、选中文本</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span> &#123;<span class="attribute">-webkit-user-select</span>:none;</span><br><span class="line">  <span class="attribute">-moz-user-select</span>:none;</span><br><span class="line">  <span class="attribute">-khtml-user-select</span>:none;</span><br><span class="line">  <span class="attribute">user-select</span>:none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>解决移动设备可选中页面文本(视产品需要而定)</p><h5 id="11、长时间按住页面出现闪退"><a href="#11、长时间按住页面出现闪退" class="headerlink" title="11、长时间按住页面出现闪退"></a>11、长时间按住页面出现闪退</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">element</span> &#123;</span><br><span class="line">  <span class="attribute">-webkit-touch-callout</span>:none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h5 id="12、iphone及ipad下输入框默认内阴影"><a href="#12、iphone及ipad下输入框默认内阴影" class="headerlink" title="12、iphone及ipad下输入框默认内阴影"></a>12、iphone及ipad下输入框默认内阴影</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span>&#123;</span><br><span class="line">  <span class="attribute">-webkit-appearance</span>:none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h5 id="13、ios和android下触摸元素时出现半透明灰色遮罩"><a href="#13、ios和android下触摸元素时出现半透明灰色遮罩" class="headerlink" title="13、ios和android下触摸元素时出现半透明灰色遮罩"></a>13、ios和android下触摸元素时出现半透明灰色遮罩</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span> &#123;</span><br><span class="line">  <span class="attribute">-webkit-tap-highlight-color</span>:<span class="built_in">rgba</span>(255,255,255,0)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。</p><p>后面一篇文章有详细介绍，地址：<a href="http://www.jb51.net/post/phone_web_ysk" target="_blank" rel="noopener">http://www.jb51.net/post/phone_web_ysk</a></p><h5 id="14、active兼容处理-即-伪类-active-失效"><a href="#14、active兼容处理-即-伪类-active-失效" class="headerlink" title="14、active兼容处理 即 伪类 :active 失效"></a>14、active兼容处理 即 伪类 :active 失效</h5><p>方法一：body添加ontouchstart</p><p><code>&lt;body ontouchstart=&quot;&quot;&gt;</code></p><p>方法二：js给 document 绑定 touchstart 或 touchend 事件<br><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span>&gt;</span><br><span class="line">   <span class="selector-tag">a</span> &#123;</span><br><span class="line">     <span class="attribute">color</span>:<span class="number">#000</span>;</span><br><span class="line">   &#125;</span><br><span class="line">   <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">      <span class="attribute">color</span>:<span class="number">#fff</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">    &lt;a herf=foo &gt;bar&lt;/a&gt;</span><br><span class="line"> &lt;<span class="selector-tag">script</span>&gt;</span><br><span class="line">    document.addEventListener('touchstart',function()&#123;&#125;,false);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></p><h5 id="15、动画定义3D启用硬件加速"><a href="#15、动画定义3D启用硬件加速" class="headerlink" title="15、动画定义3D启用硬件加速"></a>15、动画定义3D启用硬件加速</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span> &#123;</span><br><span class="line">  <span class="attribute">-webkit-transform</span>:<span class="built_in">translate3d</span>(0,0,0)</span><br><span class="line">  transform: <span class="built_in">translate3d</span>(0,0,0);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>注意：3D变形会消耗更多的内存与功耗</p><h5 id="16、Retina屏的1px边框"><a href="#16、Retina屏的1px边框" class="headerlink" title="16、Retina屏的1px边框"></a>16、Retina屏的1px边框</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Element</span>&#123;</span><br><span class="line">  <span class="attribute">border-width</span>:thin;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h5 id="17、webkit-mask-兼容处理"><a href="#17、webkit-mask-兼容处理" class="headerlink" title="17、webkit mask 兼容处理"></a>17、webkit mask 兼容处理</h5><p>某些低端手机不支持css3 mask，可以选择性的降级处理。</p><p>比如可以使用js判断来引用不同class：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="string">'WebkitMask'</span>indocument.documentElement.style)&#123;</span><br><span class="line">  alert(<span class="string">'支持mask'</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">  alert(<span class="string">'不支持mask'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h5 id="18、旋转屏幕时，字体大小调整的问题"><a href="#18、旋转屏幕时，字体大小调整的问题" class="headerlink" title="18、旋转屏幕时，字体大小调整的问题"></a>18、旋转屏幕时，字体大小调整的问题</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span>, <span class="selector-tag">body</span>, <span class="selector-tag">form</span>, <span class="selector-tag">fieldset</span>, <span class="selector-tag">p</span>, <span class="selector-tag">div</span>, <span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span>&#123;</span><br><span class="line">  <span class="attribute">-webkit-text-size-adjust</span>:<span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h5 id="19、transition闪屏"><a href="#19、transition闪屏" class="headerlink" title="19、transition闪屏"></a>19、transition闪屏</h5><p>设置内嵌的元素在3D 空间如何呈现：保留3D<br><code>-webkit-transform-style: preserve-3d;</code><br>设置进行转换的元素的背面在面对用户时是否可见：隐藏 /<br><code>-webkit-backface-visibility:hidden;</code></p><h5 id="20、圆角bug"><a href="#20、圆角bug" class="headerlink" title="20、圆角bug"></a>20、圆角bug</h5><p>某些Android手机圆角失效</p><p><code>background-clip: padding-box;</code></p><h5 id="21、顶部状态栏背景色"><a href="#21、顶部状态栏背景色" class="headerlink" title="21、顶部状态栏背景色"></a>21、顶部状态栏背景色</h5><p><code>meta name=&quot;apple-mobile-web-app-status-bar-style&quot;content=&quot;black&quot;/&gt;</code></p><p>说明：</p><p>除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。</p><p>如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。</p><h5 id="22、设置缓存"><a href="#22、设置缓存" class="headerlink" title="22、设置缓存"></a>22、设置缓存</h5><p><code>&lt;meta http-equiv=&quot;Cache-Control&quot;content=&quot;no-cache&quot;/&gt;</code></p><p>手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。</p><h5 id="23、桌面图标"><a href="#23、桌面图标" class="headerlink" title="23、桌面图标"></a>23、桌面图标</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">href</span>=<span class="string">"touch-icon-iphone.png"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">sizes</span>=<span class="string">"76x76"</span><span class="attr">href</span>=<span class="string">"touch-icon-ipad.png"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">sizes</span>=<span class="string">"120x120"</span><span class="attr">href</span>=<span class="string">"touch-icon-iphone-retina.png"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon"</span><span class="attr">sizes</span>=<span class="string">"152x152"</span><span class="attr">href</span>=<span class="string">"touch-icon-ipad-retina.png"</span>/&gt;</span></span><br></pre></td></tr></table></figure><p>iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。</p><p>上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！</p><p> <code>&lt;link rel=&quot;apple-touch-icon-precomposed&quot;href=&quot;touch-icon-iphone.png&quot;/&gt;</code></p><p>图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)</p><h5 id="24、启动画面"><a href="#24、启动画面" class="headerlink" title="24、启动画面"></a>24、启动画面</h5><p><code>&lt;link rel=&quot;apple-touch-startup-image&quot;href=&quot;start.png&quot;/&gt;</code></p><p>iOS下页面启动加载时显示的画面图片，避免加载时的白屏。</p><p>可以通过madia来指定不同的大小：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--iPhone--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-320x460.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 320px)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- iPhone Retina --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-640x920.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- iPhone 5--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span><span class="attr">media</span>=<span class="string">"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-640x1096.png"</span>&gt;</span>t</span><br><span class="line"><span class="comment">&lt;!-- iPad portrait--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-768x1004.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 768px) and (orientation: portrait)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/&gt;</span>t</span><br><span class="line"><span class="comment">&lt;!-- iPad landscape--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-748x1024.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 768px) and (orientation: landscape)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/&gt;</span>t</span><br><span class="line"><span class="comment">&lt;!-- iPad Retina portrait--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-1536x2008.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/&gt;</span>t</span><br><span class="line"><span class="comment">&lt;!-- iPad Retina landscape--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"apple-touch-startup-image-1496x2048.png"</span><span class="attr">media</span>=<span class="string">"(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"</span><span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span>/&gt;</span></span><br></pre></td></tr></table></figure><h5 id="25、浏览器私有及其它meta"><a href="#25、浏览器私有及其它meta" class="headerlink" title="25、浏览器私有及其它meta"></a>25、浏览器私有及其它meta</h5><p>以下属性在项目中没有应用过，可以写一个demo测试以下！</p><p>QQ浏览器私有</p><p>全屏模式</p><p><code>&lt;meta name=&quot;x5-fullscreen&quot;content=&quot;true&quot;&gt;</code></p><p>强制竖屏</p><p><code>&lt;meta name=&quot;x5-orientation&quot;content=&quot;portrait&quot;&gt;</code></p><p>强制横屏</p><p><code>&lt;meta name=&quot;x5-orientation&quot;content=&quot;landscape&quot;&gt;</code></p><p>应用模式</p><p><code>meta name=&quot;x5-page-mode&quot;content=&quot;app&quot;&gt;</code></p><p>UC浏览器私有</p><p>全屏模式</p><p><code>&lt;meta name=&quot;full-screen&quot;content=&quot;yes&quot;&gt;</code></p><p>强制竖屏</p><p><code>&lt;meta name=&quot;screen-orientation&quot;content=&quot;portrait&quot;&gt;</code></p><p>强制横屏</p><p><code>&lt;meta name=&quot;screen-orientation&quot;content=&quot;landscape&quot;&gt;</code></p><p>应用模式</p><p><code>&lt;meta name=&quot;browsermode&quot;content=&quot;application&quot;&gt;</code></p><p>其它</p><p>针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓<br><code>&lt;meta name=&quot;HandheldFriendly&quot;content=&quot;true&quot;&gt;</code><br>微软的老式浏览器<br><code>&lt;meta name=&quot;MobileOptimized&quot;content=&quot;320&quot;&gt;</code><br>windows phone 点击无高光<br><code>&lt;meta name=&quot;msapplication-tap-highlight&quot;content=&quot;no&quot;&gt;</code></p><h5 id="26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好"><a href="#26、-IOS中input键盘事件keyup、keydown、keypress支持不是很好" class="headerlink" title="26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好"></a>26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好</h5><p>问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！</p><p>解决办法：</p><p>可以用html5的oninput事件去代替keyup<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"text"</span>id=<span class="string">"testInput"</span>&gt;</span><br><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">'testInput'</span>).addEventListener(<span class="string">'input'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> value = e.target.value;</span><br><span class="line">  &#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure></p><p>然后就达到类似keyup的效果！</p><h5 id="27、h5网站input-设置为type-number的问题"><a href="#27、h5网站input-设置为type-number的问题" class="headerlink" title="27、h5网站input 设置为type=number的问题"></a>27、h5网站input 设置为type=number的问题</h5><p>h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。</p><p>问题一解决，我目前用的是js。如下<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"number"</span>oninput=<span class="string">"checkTextLength(this ,10)"</span>&gt;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkTextLength</span>(<span class="params">obj, length</span>) </span>&#123;  </span><br><span class="line">      <span class="keyword">if</span>(obj.value.length &gt; length)  &#123;     </span><br><span class="line">        obj.value = obj.value.substr(<span class="number">0</span>, length);  </span><br><span class="line">      &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p><p>问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：</p><p><code>&lt;input type=&quot;number&quot; step=&quot;0.01&quot;/&gt;</code></p><p>关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。</p><p>假如step和min一起使用，那么数值必须在min和max之间。</p><p>看下面的例子：</p><p><code>&lt;input type=&quot;number&quot;step=&quot;3.1&quot;min=&quot;1&quot;/&gt;</code></p><p>输入框可以输入哪些数字？</p><p>首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。</p><p>问题三，去除input默认样式</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=number]</span> &#123;</span><br><span class="line">  <span class="attribute">-moz-appearance</span>:textfield;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=number]</span><span class="selector-pseudo">::-webkit-inner-spin-button</span>,</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=number]</span><span class="selector-pseudo">::-webkit-outer-spin-button</span> &#123;</span><br><span class="line">  <span class="attribute">-webkit-appearance</span>:none;</span><br><span class="line">  <span class="attribute">margin</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h5 id="28、ios-设置input-按钮样式会被默认样式覆盖"><a href="#28、ios-设置input-按钮样式会被默认样式覆盖" class="headerlink" title="28、ios 设置input 按钮样式会被默认样式覆盖"></a>28、ios 设置input 按钮样式会被默认样式覆盖</h5><p>解决方式如下：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span>,<span class="selector-tag">textarea</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>; </span><br><span class="line">  <span class="attribute">-webkit-appearance</span>: none; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>设置默认样式为none</p><h5 id="29、IOS键盘字母输入，默认首字母大写"><a href="#29、IOS键盘字母输入，默认首字母大写" class="headerlink" title="29、IOS键盘字母输入，默认首字母大写"></a>29、IOS键盘字母输入，默认首字母大写</h5><p>解决方案，设置如下属性</p><p><code>&lt;input type=&quot;text&quot;autocapitalize=&quot;off&quot;/&gt;</code></p><h5 id="30、select-下拉选择设置右对齐"><a href="#30、select-下拉选择设置右对齐" class="headerlink" title="30、select 下拉选择设置右对齐"></a>30、select 下拉选择设置右对齐</h5><p>设置如下：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">select</span> <span class="selector-tag">option</span> &#123;</span><br><span class="line">       <span class="attribute">direction</span>: rtl;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h5 id="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"><a href="#31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象" class="headerlink" title="31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象"></a>31、通过transform进行skew变形，rotate旋转会造成出现锯齿现象</h5><p>可以设置如下：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">-webkit-transform</span>: <span class="selector-tag">rotate</span>(<span class="selector-tag">-4deg</span>) <span class="selector-tag">skew</span>(10<span class="selector-tag">deg</span>) <span class="selector-tag">translateZ</span>(0);</span><br><span class="line"> <span class="selector-tag">transform</span>: <span class="selector-tag">rotate</span>(<span class="selector-tag">-4deg</span>) <span class="selector-tag">skew</span>(10<span class="selector-tag">deg</span>) <span class="selector-tag">translateZ</span>(0);</span><br><span class="line"> <span class="selector-tag">outline</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-tag">rgba</span>(255,255,255,0)</span><br></pre></td></tr></table></figure><h5 id="32、移动端点击300ms延迟"><a href="#32、移动端点击300ms延迟" class="headerlink" title="32、移动端点击300ms延迟"></a>32、移动端点击300ms延迟</h5><p>300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。</p><p>推荐两个js，一个是fastclick，一个是tap.js</p><p>关于300ms延迟，具体请看：<a href="http://thx.github.io/mobile/300ms-click-delay/" target="_blank" rel="noopener">http://thx.github.io/mobile/300ms-click-delay/</a></p><h5 id="33、移动端点透问题"><a href="#33、移动端点透问题" class="headerlink" title="33、移动端点透问题"></a>33、移动端点透问题</h5><p>案例如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"haorooms"</span>&gt;</span>点头事件测试<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"www.baidu.net"</span>&gt;</span>www.baidu.com<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></p><p>div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#haorooms'</span>).on(<span class="string">'tap'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">$(<span class="string">'#haorooms'</span>).hide();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。</p><p>原因：</p><p>touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。<br>解决：</p><p>（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。<br>（2）用fastclick，<a href="https://github.com/ftlabs/fastclick" target="_blank" rel="noopener">https://github.com/ftlabs/fastclick</a><br>（3）用preventDefault阻止a标签的click<br>（4）延迟一定的时间(300ms+)来处理事件 （不推荐）<br>（5）以上一般都能解决，实在不行就换成click事件。<br>下面介绍一下touchend事件，如下：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#haorooms"</span>).on(<span class="string">"touchend"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">   event.preventDefault();</span><br><span class="line"> &#125;);</span><br></pre></td></tr></table></figure><h5 id="34、消除-IE10-里面的那个叉号"><a href="#34、消除-IE10-里面的那个叉号" class="headerlink" title="34、消除 IE10 里面的那个叉号"></a>34、消除 IE10 里面的那个叉号</h5><p><code>input:-ms-clear{display:none;}</code></p><h5 id="35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等"><a href="#35、关于-iOS-与-OS-X-端字体的优化-横竖屏会出现字体加粗不一致等" class="headerlink" title="35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)"></a>35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)</h5><p>iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">-webkit-text-size-adjust</span><span class="selector-pseudo">:100</span>%;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">-ms-text-size-adjust</span><span class="selector-pseudo">:100</span>%;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">text-size-adjust</span><span class="selector-pseudo">:100</span>%;</span><br></pre></td></tr></table></figure><h5 id="36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"><a href="#36、关于-iOS-系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格" class="headerlink" title="36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格"></a>36、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格</h5><p>可以通过正则去掉</p><p><code>his.value = this.value.replace(/\u2006/g,&#39;&#39;);</code></p><h5 id="37、移动端-HTML5-audio-autoplay-失效问题"><a href="#37、移动端-HTML5-audio-autoplay-失效问题" class="headerlink" title="37、移动端 HTML5 audio autoplay 失效问题"></a>37、移动端 HTML5 audio autoplay 失效问题</h5><p>这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。</p><p>解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。</p><p>解决代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'touchstart'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">document</span>.getElementsByTagName(<span class="string">'audio'</span>)[<span class="number">0</span>].play();</span><br><span class="line">  <span class="built_in">document</span>.getElementsByTagName(<span class="string">'audio'</span>)[<span class="number">0</span>].pause();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h5 id="38、移动端-HTML5-input-date-不支持-placeholder-问题"><a href="#38、移动端-HTML5-input-date-不支持-placeholder-问题" class="headerlink" title="38、移动端 HTML5 input date 不支持 placeholder 问题"></a>38、移动端 HTML5 input date 不支持 placeholder 问题</h5><p>这个我感觉没有什么好的解决方案，用如下方法</p><p><a href="">复制代码</a>代码如下:</p><p><code>&lt;input placeholder=&quot;Date&quot; class=&quot;textbox-n&quot; type=&quot;text&quot; onfocus=&quot;(this.type=&#39;date&#39;)&quot;  id=&quot;date&quot;&gt;</code></p><p>有的浏览器可能要点击两遍！</p><h5 id="39、部分机型存在type为search的input，自带close按钮样式修改方法"><a href="#39、部分机型存在type为search的input，自带close按钮样式修改方法" class="headerlink" title="39、部分机型存在type为search的input，自带close按钮样式修改方法"></a>39、部分机型存在type为search的input，自带close按钮样式修改方法</h5><p>有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#Search</span><span class="selector-pseudo">::-webkit-search-cancel-button</span>&#123;</span><br><span class="line">  <span class="attribute">display</span>:none; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。</p><h5 id="40、唤起select的option展开"><a href="#40、唤起select的option展开" class="headerlink" title="40、唤起select的option展开"></a>40、唤起select的option展开</h5><p>zepto方式:</p><p><code>$(sltElement).trrgger(&quot;mousedown&quot;);</code></p><p>原生js方式:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">functionshowDropdown(sltElement) &#123;</span><br><span class="line">  <span class="keyword">var</span> event;</span><br><span class="line">  event = <span class="built_in">document</span>.createEvent(<span class="string">'MouseEvents'</span>);</span><br><span class="line">  event.initMouseEvent(<span class="string">'mousedown'</span>,<span class="literal">true</span>,<span class="literal">true</span>, <span class="built_in">window</span>);</span><br><span class="line">  sltElement.dispatchEvent(event);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>文章转载：<a href="http://www.jb51.net/article/84973.html" target="_blank" rel="noopener">http://www.jb51.net/article/84973.html</a> 已修改~</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题，&lt;/p&gt;
&lt;h5 id=&quot;1、安卓浏览器看背景图片，有些设备会模糊。&quot;&gt;&lt;a href=&quot;#1、安卓浏览器看背景图片，有些设备会模糊。&quot; class=&quot;headerlink&quot; title=&quot;1、安卓浏览器看背景图片，有些设备会模糊。&quot;&gt;&lt;/a&gt;1、安卓浏览器看背景图片，有些设备会模糊。&lt;/h5&gt;&lt;p&gt;用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？&lt;/p&gt;
&lt;p&gt;经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960 &lt;em&gt; 640分辨率，在网页里只显示了480 &lt;/em&gt; 320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。&lt;/p&gt;
    
    </summary>
    
    
      <category term="移动端" scheme="http://loeuy.cn/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>2017年前端面试题整理汇总100题</title>
    <link href="http://loeuy.cn/100question.html"/>
    <id>http://loeuy.cn/100question.html</id>
    <published>2017-06-14T10:04:45.000Z</published>
    <updated>2018-05-27T13:52:21.952Z</updated>
    
    <content type="html"><![CDATA[<h4 id="一些开放性题目"><a href="#一些开放性题目" class="headerlink" title="一些开放性题目"></a>一些开放性题目</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。</span><br><span class="line"></span><br><span class="line">2.项目介绍</span><br><span class="line"></span><br><span class="line">3.如何看待前端开发？</span><br><span class="line"></span><br><span class="line">4.平时是如何学习前端开发的？</span><br><span class="line"></span><br><span class="line">5.未来三到五年的规划是怎样的？</span><br></pre></td></tr></table></figure><a id="more"></a><h4 id="position的值，-relative和absolute分别是相对于谁进行定位的？"><a href="#position的值，-relative和absolute分别是相对于谁进行定位的？" class="headerlink" title="position的值， relative和absolute分别是相对于谁进行定位的？"></a>position的值， relative和absolute分别是相对于谁进行定位的？</h4><ul><li><code>absolute</code> :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。</li><li><code>fixed</code> （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。</li><li><code>relative</code> 生成相对定位的元素，相对于其在普通流中的位置进行定位。</li><li><code>static</code> 默认值。没有定位，元素出现在正常的流中</li><li><code>sticky</code> 生成粘性定位的元素，容器的位置根据正常文档流计算得出</li></ul><h4 id="如何解决跨域问题"><a href="#如何解决跨域问题" class="headerlink" title="如何解决跨域问题"></a>如何解决跨域问题</h4><blockquote><p>JSONP：</p></blockquote><p>原理是：动态插入<code>script</code>标签，通过<code>script</code>标签引入一个<code>js</code>文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的<code>json</code>数据作为参数传入。</p><p>由于同源策略的限制，<code>XmlHttpRequest</code>只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过<code>script</code>标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。</p><p>优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。</p><p><code>JSONP</code>：<code>json+padding</code>（内填充），顾名思义，就是把JSON填充到一个盒子里</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    function createJs(sUrl)&#123;</span><br><span class="line"></span><br><span class="line">        var oScript = document.createElement(&apos;script&apos;);</span><br><span class="line">        oScript.type = &apos;text/javascript&apos;;</span><br><span class="line">        oScript.src = sUrl;</span><br><span class="line">        document.getElementsByTagName(&apos;head&apos;)[0].appendChild(oScript);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    createJs(&apos;jsonp.js&apos;);</span><br><span class="line"></span><br><span class="line">    box(&#123;</span><br><span class="line">       &apos;name&apos;: &apos;test&apos;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    function box(json)&#123;</span><br><span class="line">        alert(json.name);</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;12345678910111213141516171819</span><br></pre></td></tr></table></figure><blockquote><p>CORS</p></blockquote><p>服务器端对于<code>CORS</code>的支持，主要就是通过设置<code>Access-Control-Allow-Origin</code>来进行的。如果浏览器检测到相应的设置，就可以允许<code>Ajax</code>进行跨域的访问。</p><blockquote><p>通过修改document.domain来跨子域</p></blockquote><p>将子域和主域的<code>document.domain</code>设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用<code>document.domain</code>进行跨域</p><p>主域相同的使用<code>document.domain</code></p><blockquote><p>使用window.name来进行跨域</p></blockquote><p><code>window</code>对象有个<code>name</code>属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个<code>window.name</code>的，每个页面对<code>window.name</code>都有读写的权限，<code>window.name</code>是持久存在一个窗口载入过的所有页面中的</p><blockquote><p>使用<a href="http://lib.csdn.net/base/html5" target="_blank" rel="noopener">HTML5</a>中新引进的<code>window.postMessage</code>方法来跨域传送数据</p></blockquote><p>还有flash、在服务器上设置代理页面等跨域方式。个人认为<code>window.name</code>的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。</p><h4 id="XML和JSON的区别？"><a href="#XML和JSON的区别？" class="headerlink" title="XML和JSON的区别？"></a><code>XML</code>和<code>JSON</code>的区别？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">(1).数据体积方面。</span><br><span class="line"></span><br><span class="line">JSON相对于XML来讲，数据的体积小，传递的速度更快些。</span><br><span class="line"></span><br><span class="line">(2).数据交互方面。</span><br><span class="line"></span><br><span class="line">JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。</span><br><span class="line"></span><br><span class="line">(3).数据描述方面。</span><br><span class="line"></span><br><span class="line">JSON对数据的描述性比XML较差。</span><br><span class="line"></span><br><span class="line">(4).传输速度方面。</span><br><span class="line"></span><br><span class="line">JSON的速度要远远快于XML。123456789101112131415</span><br></pre></td></tr></table></figure><h4 id="谈谈你对webpack的看法"><a href="#谈谈你对webpack的看法" class="headerlink" title="谈谈你对webpack的看法"></a>谈谈你对webpack的看法</h4><p><code>WebPack</code> 是一个模块打包工具，你可以使用<code>WebPack</code>管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的<code>HTML、JavaScript、CSS</code>以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，<code>webpack</code>有对应的模块加载器。<code>webpack</code>模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。</p><p><code>webpack</code>的两大特色：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1.code splitting（可以自动完成）</span><br><span class="line"></span><br><span class="line">2.loader 可以处理各种类型的静态文件，并且支持串联操作</span><br></pre></td></tr></table></figure><p><code>webpack</code> 是以<code>commonJS</code>的形式来书写脚本滴，但对 <code>AMD/CMD</code> 的支持也很全面，方便旧项目进行代码迁移。</p><p><code>webpack</code>具有<code>requireJs</code>和<code>browserify</code>的功能，但仍有很多自己的新特性：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">1. 对 CommonJS 、 AMD 、ES6的语法做了兼容</span><br><span class="line"></span><br><span class="line">2. 对js、css、图片等资源文件都支持打包</span><br><span class="line"></span><br><span class="line">3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持</span><br><span class="line"></span><br><span class="line">4. 有独立的配置文件webpack.config.js</span><br><span class="line"></span><br><span class="line">5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间</span><br><span class="line"></span><br><span class="line">6. 支持 SourceUrls 和 SourceMaps，易于调试</span><br><span class="line"></span><br><span class="line">7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活</span><br><span class="line"></span><br><span class="line">8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快123456789101112131415</span><br></pre></td></tr></table></figure><h4 id="说说TCP传输的三次握手四次挥手策略"><a href="#说说TCP传输的三次握手四次挥手策略" class="headerlink" title="说说TCP传输的三次握手四次挥手策略"></a>说说TCP传输的三次握手四次挥手策略</h4><p>为了准确无误地把数据送达目标处，<code>TCP</code>协议采用了三次握手策略。用TCP协议把数据包送出去后，<code>TCP</code>不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：<code>SYN</code>和<code>ACK</code>。</p><p>发送端首先发送一个带<code>SYN</code>标志的数据包给对方。接收端收到后，回传一个带有<code>SYN/ACK</code>标志的数据包以示传达确认信息。<br>最后，发送端再回传一个带<code>ACK</code>标志的数据包，代表“握手”结束。<br>若在握手过程中某个阶段莫名中断，<code>TCP</code>协议会再次以相同的顺序发送相同的数据包。</p><blockquote><p>断开一个TCP连接则需要“四次握手”：</p></blockquote><ul><li>第一次挥手：主动关闭方发送一个<code>FIN</code>，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。</li><li>第二次挥手：被动关闭方收到<code>FIN</code>包后，发送一个<code>ACK</code>给对方，确认序号为收到序号<code>+1</code>（与<code>SYN</code>相同，一个<code>FIN</code>占用一个序号）。</li><li>第三次挥手：被动关闭方发送一个<code>FIN</code>，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。</li><li>第四次挥手：主动关闭方收到<code>FIN</code>后，发送一个<code>ACK</code>给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。</li></ul><h4 id="TCP和UDP的区别"><a href="#TCP和UDP的区别" class="headerlink" title="TCP和UDP的区别"></a>TCP和UDP的区别</h4><p><code>TCP</code>（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个<code>TCP</code>连接必须要经过三次“对话”才能建立起来</p><p><code>UDP</code>（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！<br>UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。</p><h4 id="说说你对作用域链的理解"><a href="#说说你对作用域链的理解" class="headerlink" title="说说你对作用域链的理解"></a>说说你对作用域链的理解</h4><p>作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到<code>window</code>对象即被终止，作用域链向下访问变量是不被允许的。</p><h4 id="创建ajax过程"><a href="#创建ajax过程" class="headerlink" title="创建ajax过程"></a>创建ajax过程</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.</span><br><span class="line"></span><br><span class="line">(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.</span><br><span class="line"></span><br><span class="line">(3)设置响应HTTP请求状态变化的函数.</span><br><span class="line"></span><br><span class="line">(4)发送HTTP请求.</span><br><span class="line"></span><br><span class="line">(5)获取异步调用返回的数据.</span><br><span class="line"></span><br><span class="line">(6)使用JavaScript和DOM实现局部刷新.1234567891011</span><br></pre></td></tr></table></figure><h4 id="渐进增强和优雅降级"><a href="#渐进增强和优雅降级" class="headerlink" title="渐进增强和优雅降级"></a>渐进增强和优雅降级</h4><p>渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</p><p>优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</p><h4 id="常见web安全及防护原理"><a href="#常见web安全及防护原理" class="headerlink" title="常见web安全及防护原理"></a>常见web安全及防护原理</h4><blockquote><p>sql注入原理</p></blockquote><p>就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。</p><p>总的来说有以下几点：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双&quot;-&quot;进行转换等。</span><br><span class="line"></span><br><span class="line">2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。</span><br><span class="line"></span><br><span class="line">3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。</span><br><span class="line"></span><br><span class="line">4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。12345678</span><br></pre></td></tr></table></figure><blockquote><p>XSS原理及防范</p></blockquote><p>Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 <code>html</code>标签或者<code>JavaScript</code>代码。比如：攻击者在论坛中放一个</p><p>看似安全的链接，骗取用户点击后，窃取<code>cookie</code>中的用户私密信息；或者攻击者在论坛中加一个恶意表单，</p><p>当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。</p><blockquote><p>XSS防范方法</p></blockquote><p>首先代码里对用户输入的地方和变量都需要仔细检查长度和对<code>”&lt;”,”&gt;”,”;”,”’”</code>等字符做过滤；其次任何内容写到页面之前都必须加以<code>encode</code>，避免不小心把<code>html tag</code> 弄出来。这一个层面做好，至少可以堵住超过一半的<code>XSS</code> 攻击。</p><p>首先，避免直接在<code>cookie</code> 中泄露用户隐私，例如email、密码等等。</p><p>其次，通过使<code>cookie</code> 和系统<code>ip</code> 绑定来降低<code>cookie</code> 泄露后的危险。这样攻击者得到的<code>cookie</code> 没有实际价值，不可能拿来重放。</p><p>如果网站不需要再浏览器端对<code>cookie</code> 进行操作，可以在<code>Set-Cookie</code> 末尾加上<code>HttpOnly</code> 来防止<code>javascript</code> 代码直接获取<code>cookie</code> 。</p><p>尽量采用<code>POST</code> 而非<code>GET</code> 提交表单</p><blockquote><p>XSS与CSRF有什么区别吗？</p></blockquote><p><code>XSS</code>是获取信息，不需要提前知道其他用户页面的代码和数据包。<code>CSRF</code>是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。</p><p>要完成一次<code>CSRF</code>攻击，受害者必须依次完成两个步骤：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">登录受信任网站A，并在本地生成Cookie。</span><br><span class="line"></span><br><span class="line">在不登出A的情况下，访问危险网站B。123</span><br></pre></td></tr></table></figure><blockquote><p>CSRF的防御</p></blockquote><ul><li>服务端的<code>CSRF</code>方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。</li><li>通过验证码的方法</li></ul><h4 id="Web-Worker-和webSocket"><a href="#Web-Worker-和webSocket" class="headerlink" title="Web Worker 和webSocket"></a>Web Worker 和webSocket</h4><blockquote><p>worker主线程:</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。</span><br><span class="line"></span><br><span class="line">2.通过worker.postMessage( data ) 方法来向worker发送数据。</span><br><span class="line"></span><br><span class="line">3.绑定worker.onmessage方法来接收worker发送过来的数据。</span><br><span class="line"></span><br><span class="line">4.可以使用 worker.terminate() 来终止一个worker的执行。1234567</span><br></pre></td></tr></table></figure><p><code>WebSocket</code>是<code>Web</code>应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个<code>Html5</code>协议，<code>WebSocket</code>的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。</p><h4 id="HTTP和HTTPS"><a href="#HTTP和HTTPS" class="headerlink" title="HTTP和HTTPS"></a>HTTP和HTTPS</h4><p><code>HTTP</code>协议通常承载于TCP协议之上，在<code>HTTP</code>和<code>TCP</code>之间添加一个安全协议层（<code>SSL</code>或<code>TSL</code>），这个时候，就成了我们常说的HTTPS。</p><p>默认HTTP的端口号为80，<code>HTTPS</code>的端口号为443。</p><h4 id="为什么HTTPS安全"><a href="#为什么HTTPS安全" class="headerlink" title="为什么HTTPS安全"></a>为什么<code>HTTPS</code>安全</h4><p>因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用<code>HTTPS</code>，密钥在你和终点站才有。<code>https</code>之所以比<code>http</code>安全，是因为他利用<code>ssl/tls</code>协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性</p><h4 id="对前端模块化的认识"><a href="#对前端模块化的认识" class="headerlink" title="对前端模块化的认识"></a>对前端模块化的认识</h4><blockquote><p>AMD 是 <code>RequireJS</code> 在推广过程中对模块定义的规范化产出。</p><p>CMD 是 <code>SeaJS</code> 在推广过程中对模块定义的规范化产出。</p></blockquote><p><code>AMD</code> 是提前执行，<code>CMD</code> 是延迟执行。</p><p><code>AMD</code>推荐的风格通过返回一个对象做为模块对象，<code>CommonJS</code>的风格通过对<code>module.exports</code>或<code>exports</code>的属性赋值来达到暴露模块对象的目的。</p><blockquote><p>CMD模块方式</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">define(function(require, exports, module) &#123;</span><br><span class="line"></span><br><span class="line">  // 模块代码</span><br><span class="line"></span><br><span class="line">&#125;);12345</span><br></pre></td></tr></table></figure><h4 id="Javascript垃圾回收方法"><a href="#Javascript垃圾回收方法" class="headerlink" title="Javascript垃圾回收方法"></a>Javascript垃圾回收方法</h4><blockquote><p>标记清除（mark and sweep）</p></blockquote><p>这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。</p><p>垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了</p><blockquote><p>引用计数(reference counting)</p></blockquote><p>在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。</p><p>在IE中虽然<code>JavaScript</code>对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，<br>也就是说只要涉及<code>BOM</code>及DOM就会出现循环引用问题。</p><h4 id="你觉得前端工程的价值体现在哪"><a href="#你觉得前端工程的价值体现在哪" class="headerlink" title="你觉得前端工程的价值体现在哪"></a>你觉得前端工程的价值体现在哪</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">为简化用户使用提供技术支持（交互部分）</span><br><span class="line"></span><br><span class="line">为多个浏览器兼容性提供支持</span><br><span class="line"></span><br><span class="line">为提高用户浏览速度（浏览器性能）提供支持</span><br><span class="line"></span><br><span class="line">为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持</span><br><span class="line"></span><br><span class="line">为展示数据提供支持（数据接口）</span><br></pre></td></tr></table></figure><h4 id="谈谈性能优化问题"><a href="#谈谈性能优化问题" class="headerlink" title="谈谈性能优化问题"></a>谈谈性能优化问题</h4><p>代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。</p><p>缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等</p><p>请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。</p><p>请求带宽：压缩文件，开启GZIP，</p><blockquote><p>代码层面的优化</p></blockquote><ul><li>用<code>hash-table</code>来优化查找</li><li>少用全局变量</li><li>用<code>innerHTML</code>代替<code>DOM</code>操作，减少<code>DOM</code>操作次数，优化<code>javascript</code>性能</li><li>用<code>setTimeout</code>来避免页面失去响应</li><li>缓存DOM节点查找的结果</li><li>避免使用CSS Expression</li><li>避免全局查询</li><li>避免使用with(with会创建自己的作用域，会增加作用域链长度)</li><li>多个变量声明合并</li><li>避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率</li><li>尽量避免写在HTML标签中写Style属性</li></ul><h4 id="移动端性能优化"><a href="#移动端性能优化" class="headerlink" title="移动端性能优化"></a>移动端性能优化</h4><ul><li>尽量使用css3动画，开启硬件加速。</li><li>适当使用<code>touch</code>事件代替<code>click</code>事件。</li><li>避免使用<code>css3</code>渐变阴影效果。</li><li>可以用<code>transform: translateZ(0)</code>来开启硬件加速。</li><li>不滥用Float。Float在渲染时计算量比较大，尽量减少使用</li><li>不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。</li><li>合理使用requestAnimationFrame动画代替setTimeout</li><li>CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加</li><li>PC端的在移动端同样适用</li></ul><blockquote><p>相关阅读：<a href="https://github.com/cssmagic/blog/issues/20" target="_blank" rel="noopener">如何做到一秒渲染一个移动页面</a></p></blockquote><h4 id="什么是Etag？"><a href="#什么是Etag？" class="headerlink" title="什么是Etag？"></a>什么是Etag？</h4><p>当发送一个服务器请求时，浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。</p><p>情景一：若没有过期，则不向服务器发送请求，直接使用缓存中的结果，此时我们在浏览器控制台中可以看到 <code>200 OK</code>(from cache) ，此时的情况就是完全使用缓存，浏览器和服务器没有任何交互的。</p><p>情景二：若已过期，则向服务器发送请求，此时请求中会带上①中设置的文件修改时间，和<code>Etag</code></p><p>然后，进行资源更新判断。服务器根据浏览器传过来的文件修改时间，判断自浏览器上一次请求之后，文件是不是没有被修改过；根据<code>Etag</code>，判断文件内容自上一次请求之后，有没有发生变化</p><p>情形一：若两种判断的结论都是文件没有被修改过，则服务器就不给浏览器发<code>index.html</code>的内容了，直接告诉它，文件没有被修改过，你用你那边的缓存吧—— <code>304 Not Modified</code>，此时浏览器就会从本地缓存中获取<code>index.html</code>的内容。此时的情况叫协议缓存，浏览器和服务器之间有一次请求交互。</p><p>情形二：若修改时间和文件内容判断有任意一个没有通过，则服务器会受理此次请求，之后的操作同①</p><p>① 只有get请求会被缓存，post请求不会</p><h4 id="Expires和Cache-Control"><a href="#Expires和Cache-Control" class="headerlink" title="Expires和Cache-Control"></a>Expires和Cache-Control</h4><p><code>Expires</code>要求客户端和服务端的时钟严格同步。<code>HTTP1.1</code>引入<code>Cache-Control</code>来克服Expires头的限制。如果max-age和Expires同时出现，则max-age有更高的优先级。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Cache-Control: no-cache, private, max-age=0</span><br><span class="line"></span><br><span class="line">ETag: abcde</span><br><span class="line"></span><br><span class="line">Expires: Thu, 15 Apr 2014 20:00:00 GMT</span><br><span class="line"></span><br><span class="line">Pragma: private</span><br><span class="line"></span><br><span class="line">Last-Modified: $now // RFC1123 format123456789</span><br></pre></td></tr></table></figure><h4 id="ETag应用"><a href="#ETag应用" class="headerlink" title="ETag应用:"></a>ETag应用:</h4><p><code>Etag</code>由服务器端生成，客户端通过<code>If-Match</code>或者说<code>If-None-Match</code>这个条件判断请求来验证资源是否修改。常见的是使用<code>If-None-Match</code>。请求一个文件的流程可能如下：</p><p>====第一次请求===</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1.客户端发起 HTTP GET 请求一个文件；</span><br><span class="line"></span><br><span class="line">2.服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如&quot;2e681a-6-5d044840&quot;)(假设服务器支持Etag生成和已经开启了Etag).状态码200</span><br></pre></td></tr></table></figure><p>====第二次请求===</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">客户端发起 HTTP GET 请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d0448402.服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存；流程很简单，问题是，如果服务器又设置了Cache-Control:max-age和Expires呢，怎么办</span><br></pre></td></tr></table></figure><p>答案是同时使用，也就是说在完全匹配<code>If-Modified-Since</code>和<code>If-None-Match</code>即检查完修改时间和<code>Etag</code>之后，</p><p>服务器才能返回304.(不要陷入到底使用谁的问题怪圈)</p><p>为什么使用Etag请求头?</p><p>Etag 主要为了解决 <code>Last-Modified</code> 无法解决的一些问题。</p><h4 id="栈和队列的区别"><a href="#栈和队列的区别" class="headerlink" title="栈和队列的区别?"></a>栈和队列的区别?</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。</span><br><span class="line"></span><br><span class="line">队列先进先出，栈先进后出。</span><br><span class="line"></span><br><span class="line">栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除</span><br></pre></td></tr></table></figure><h4 id="栈和堆的区别？"><a href="#栈和堆的区别？" class="headerlink" title="栈和堆的区别？"></a>栈和堆的区别？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">栈区（stack）—   由编译器自动分配释放   ，存放函数的参数值，局部变量的值等。</span><br><span class="line"></span><br><span class="line">堆区（heap）   —   一般由程序员分配释放，   若程序员不释放，程序结束时可能由OS回收。</span><br><span class="line"></span><br><span class="line">堆（数据结构）：堆可以被看成是一棵树，如：堆排序；</span><br><span class="line"></span><br><span class="line">栈（数据结构）：一种先进后出的数据结构。</span><br></pre></td></tr></table></figure><h4 id="快速-排序的思想并实现一个快排？"><a href="#快速-排序的思想并实现一个快排？" class="headerlink" title="快速 排序的思想并实现一个快排？"></a>快速 排序的思想并实现一个快排？</h4><p>“快速排序”的思想很简单，整个排序过程只需要三步：</p><p>　　（1）在数据集之中，找一个基准点</p><p>　　（2）建立两个数组，分别存储左边和右边的数组</p><p>　　（3）利用递归进行下次比较</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line"></span><br><span class="line">    function quickSort(arr)&#123;</span><br><span class="line">        if(arr.length&lt;=1)&#123;</span><br><span class="line">            return arr;//如果数组只有一个数，就直接返回；</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        var num = Math.floor(arr.length/2);//找到中间数的索引值，如果是浮点数，则向下取整</span><br><span class="line"></span><br><span class="line">        var numValue = arr.splice(num,1);//找到中间数的值</span><br><span class="line">        var left = [];</span><br><span class="line">        var right = [];</span><br><span class="line"></span><br><span class="line">        for(var i=0;i&lt;arr.length;i++)&#123;</span><br><span class="line">            if(arr[i]&lt;numValue)&#123;</span><br><span class="line">                left.push(arr[i]);//基准点的左边的数传到左边数组</span><br><span class="line">            &#125;</span><br><span class="line">            else&#123;</span><br><span class="line">               right.push(arr[i]);//基准点的右边的数传到右边数组</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        return quickSort(left).concat([numValue],quickSort(right));//递归不断重复比较</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;12345678910111213141516171819202122232425262728</span><br></pre></td></tr></table></figure><h4 id="你觉得jQuery或zepto源码有哪些写的好的地方"><a href="#你觉得jQuery或zepto源码有哪些写的好的地方" class="headerlink" title="你觉得jQuery或zepto源码有哪些写的好的地方"></a>你觉得jQuery或zepto源码有哪些写的好的地方</h4><p>(答案仅供参考)</p><p><code>jQuery</code>源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当<code>jQuery</code>中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问<code>window</code>对象。同样，传入<code>undefined</code>参数，可以缩短查找undefined时的作用域链。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">(function( window, undefined ) &#123;</span><br><span class="line"></span><br><span class="line">     //用一个函数域包起来，就是所谓的沙箱</span><br><span class="line"></span><br><span class="line">     //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局</span><br><span class="line"></span><br><span class="line">     //把当前沙箱需要的外部变量通过函数参数引入进来</span><br><span class="line"></span><br><span class="line">     //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数</span><br><span class="line"></span><br><span class="line">    window.jQuery = window.$ = jQuery;</span><br><span class="line"></span><br><span class="line">&#125;)( window );12345678910111213</span><br></pre></td></tr></table></figure><p>jquery将一些原型属性和方法封装在了<code>jquery.prototype</code>中，为了缩短名称，又赋值给了<code>jquery.fn</code>，这是很形象的写法。</p><p>有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。</p><p><code>jquery</code>实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。</p><h4 id="ES6的了解"><a href="#ES6的了解" class="headerlink" title="ES6的了解"></a>ES6的了解</h4><p>新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值<code>Inputs=&gt;outputs</code>。）、<code>for-of</code>（用来遍历数据—例如数组中的值。）<code>arguments</code>对象可被不定参数和默认参数完美代替。<code>ES6</code>将<code>promise</code>对象纳入规范，提供了原生的<code>Promise</code>对象。增加了<code>let</code>和<code>const</code>命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，<code>var</code>命令和<code>function</code>命令声明的全局变量，属于全局对象的属性；<code>let</code>命令、<code>const</code>命令、<code>class</code>命令声明的全局变量，不属于全局对象的属性。。还有就是引入<code>module</code>模块的概念</p><h4 id="js继承方式及其优缺点"><a href="#js继承方式及其优缺点" class="headerlink" title="js继承方式及其优缺点"></a>js继承方式及其优缺点</h4><blockquote><p>原型链继承的缺点</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。</span><br></pre></td></tr></table></figure><blockquote><p>借用构造函数（类式继承）</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承</span><br></pre></td></tr></table></figure><blockquote><p>组合式继承</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。</span><br></pre></td></tr></table></figure><h4 id="关于Http-2-0-你知道多少？"><a href="#关于Http-2-0-你知道多少？" class="headerlink" title="关于Http 2.0 你知道多少？"></a>关于Http 2.0 你知道多少？</h4><p><code>HTTP/2</code>引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。</p><p><code>HTTP/2</code>提供更多的加密支持</p><p><code>HTTP/2</code>使用多路技术，允许多个消息在一个连接上同时交差。</p><p>它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的<code>header</code>都只会占用很小比例的带宽。</p><h4 id="defer和async"><a href="#defer和async" class="headerlink" title="defer和async"></a>defer和async</h4><blockquote><p>defer并行加载js文件，会按照页面上script标签的顺序执行<br>async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行</p></blockquote><h4 id="谈谈浮动和清除浮动"><a href="#谈谈浮动和清除浮动" class="headerlink" title="谈谈浮动和清除浮动"></a>谈谈浮动和清除浮动</h4><p>浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。</p><h4 id="如何评价AngularJS和BackboneJS"><a href="#如何评价AngularJS和BackboneJS" class="headerlink" title="如何评价AngularJS和BackboneJS"></a>如何评价AngularJS和BackboneJS</h4><p><code>backbone</code>具有依赖性，依赖<code>underscore.js</code>。<code>Backbone + Underscore + jQuery(or Zepto)</code> 就比一个<code>AngularJS</code> 多出了2 次HTTP请求.</p><p><code>Backbone</code>的<code>Model</code>没有与UI视图数据绑定，而是需要在View中自行操作DOM来更新或读取UI数据。<code>AngularJS</code>与此相反，Model直接与UI视图绑定，<code>Model</code>与UI视图的关系，通过<code>directive</code>封装，<code>AngularJS</code>内置的通用<code>directive</code>，就能实现大部分操作了，也就是说，基本不必关心<code>Model</code>与UI视图的关系，直接操作Model就行了，UI视图自动更新。</p><p><code>AngularJS</code>的<code>directive</code>，你输入特定数据，他就能输出相应UI视图。是一个比较完善的前端MVW框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令。</p><h4 id="用过哪些设计模式？"><a href="#用过哪些设计模式？" class="headerlink" title="用过哪些设计模式？"></a>用过哪些设计模式？</h4><blockquote><p>工厂模式：</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。</span><br><span class="line"></span><br><span class="line">    工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法 搞清楚他们到底是哪个对象的实例。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">function createObject(name,age,profession)&#123;//集中实例化的函数var obj = new Object();</span><br><span class="line">    obj.name = name;</span><br><span class="line">    obj.age = age;</span><br><span class="line">    obj.profession = profession;</span><br><span class="line">    obj.move = function () &#123;</span><br><span class="line">        return this.name + &apos; at &apos; + this.age + &apos; engaged in &apos; + this.profession;</span><br><span class="line">    &#125;;</span><br><span class="line">    return obj;</span><br><span class="line">&#125;</span><br><span class="line">var test1 = createObject(&apos;trigkit4&apos;,22,&apos;programmer&apos;);//第一个实例var test2 = createObject(&apos;mike&apos;,25,&apos;engineer&apos;);//第二个实例</span><br></pre></td></tr></table></figure><blockquote><p>构造函数模式</p></blockquote><p>使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.构造函数方法没有显示的创建对象 (new Object());</span><br><span class="line"></span><br><span class="line">2.直接将属性和方法赋值给 this 对象;</span><br><span class="line"></span><br><span class="line">3.没有 renturn 语句。</span><br></pre></td></tr></table></figure><h4 id="说说你对闭包的理解"><a href="#说说你对闭包的理解" class="headerlink" title="说说你对闭包的理解"></a>说说你对闭包的理解</h4><p>使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念</p><p>闭包有三个特性：</p><blockquote><p>1.函数嵌套函数</p><p>2.函数内部可以引用外部的参数和变量</p><p>3.参数和变量不会被垃圾回收机制回收</p></blockquote><h4 id="请你谈谈Cookie的弊端"><a href="#请你谈谈Cookie的弊端" class="headerlink" title="请你谈谈Cookie的弊端"></a>请你谈谈Cookie的弊端</h4><p><code>cookie</code>虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。</p><p>第一：每个特定的域名下最多生成20个<code>cookie</code></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.IE6或更低版本最多20个cookie</span><br><span class="line"></span><br><span class="line">2.IE7和之后的版本最后可以有50个cookie。</span><br><span class="line"></span><br><span class="line">3.Firefox最多50个cookie</span><br><span class="line"></span><br><span class="line">4.chrome和Safari没有做硬性限制</span><br></pre></td></tr></table></figure><p><code>IE</code>和<code>Opera</code> 会清理近期最少使用的<code>cookie</code>，<code>Firefox</code>会随机清理<code>cookie</code>。</p><p><code>cookie</code>的最大大约为<code>4096</code>字节，为了兼容性，一般不能超过<code>4095</code>字节。</p><p>IE 提供了一种存储可以持久化用户数据，叫做<code>userdata</code>，从<code>IE5.0</code>就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。</p><blockquote><p>优点：极高的扩展性和可用性</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1.通过良好的编程，控制保存在cookie中的session对象的大小。</span><br><span class="line"></span><br><span class="line">2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。</span><br><span class="line"></span><br><span class="line">3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。</span><br><span class="line"></span><br><span class="line">4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。</span><br></pre></td></tr></table></figure><blockquote><p>缺点：</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。</span><br><span class="line"></span><br><span class="line">3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。</span><br></pre></td></tr></table></figure><h4 id="浏览器本地存储"><a href="#浏览器本地存储" class="headerlink" title="浏览器本地存储"></a>浏览器本地存储</h4><p>在较高版本的浏览器中，<code>js</code>提供了<code>sessionStorage</code>和<code>globalStorage</code>。在<code>HTML5</code>中提供了<code>localStorage</code>来取代<code>globalStorage</code>。</p><p><code>Html5</code>中的<code>Web Storage</code>包括了两种存储方式：<code>sessionStorage</code>和<code>localStorage</code>。</p><p><code>sessionStorage</code>用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此<code>sessionStorage</code>不是一种持久化的本地存储，仅仅是会话级别的存储。</p><p>而<code>localStorage</code>用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。</p><h4 id="web-storage和cookie的区别"><a href="#web-storage和cookie的区别" class="headerlink" title="web storage和cookie的区别"></a>web storage和cookie的区别</h4><p><code>Web Storage</code>的概念和<code>cookie</code>相似，区别是它是为了更大容量存储设计的。<code>Cookie</code>的大小是受限的，并且每次你请求一个新的页面的时候<code>Cookie</code>都会被发送过去，这样无形中浪费了带宽，另外<code>cookie</code>还需要指定作用域，不可以跨域调用。</p><p>除此之外，<code>Web Storage</code>拥有<code>setItem,getItem,removeItem,clear</code>等方法，不像<code>cookie</code>需要<a href="http://lib.csdn.net/base/javascript" target="_blank" rel="noopener">前端开发</a>者自己封装<code>setCookie，getCookie</code>。</p><p>但是<code>cookie</code>也是不可以或缺的：<code>cookie</code>的作用是与服务器进行交互，作为<code>HTTP</code>规范的一部分而存在 ，而<code>Web Storage</code>仅仅是为了在本地“存储”数据而生</p><p>浏览器的支持除了<code>IE７</code>及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的<code>userData</code>其实就是<code>javascript</code>本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持<code>web storage</code>。</p><p><code>localStorage</code>和<code>sessionStorage</code>都具有相同的操作方法，例如<code>setItem、getItem</code>和<code>removeItem</code>等</p><h4 id="cookie-和session-的区别："><a href="#cookie-和session-的区别：" class="headerlink" title="cookie 和session 的区别："></a>cookie 和session 的区别：</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">1、cookie数据存放在客户的浏览器上，session数据放在服务器上。</span><br><span class="line"></span><br><span class="line">2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗</span><br><span class="line"></span><br><span class="line">   考虑到安全应当使用session。</span><br><span class="line"></span><br><span class="line">3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能</span><br><span class="line"></span><br><span class="line">    考虑到减轻服务器性能方面，应当使用COOKIE。</span><br><span class="line"></span><br><span class="line">4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。</span><br><span class="line"></span><br><span class="line">5、所以个人建议：</span><br><span class="line"></span><br><span class="line">   将登陆信息等重要信息存放为SESSION</span><br><span class="line"></span><br><span class="line">   其他信息如果需要保留，可以放在COOKIE中</span><br></pre></td></tr></table></figure><blockquote><p><code>display:none</code>和<code>visibility:hidden</code>的区别？</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。</span><br><span class="line"></span><br><span class="line">visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。</span><br></pre></td></tr></table></figure><blockquote><p>CSS中<code>link</code> 和<code>@import</code>的区别是？</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">(1) link属于HTML标签，而@import是CSS提供的;</span><br><span class="line"></span><br><span class="line">(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;</span><br><span class="line"></span><br><span class="line">(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;</span><br><span class="line"></span><br><span class="line">(4) link方式的样式的权重 高于@import的权重.</span><br></pre></td></tr></table></figure><blockquote><p><code>position:absolute</code>和<code>float</code>属性的异同</p></blockquote><ul><li>共同点：对内联元素设置<code>float</code>和<code>absolute</code>属性，可以让元素脱离文档流，并且可以设置其宽高。</li><li>不同点：<code>float</code>仍会占据位置，<code>absolute</code>会覆盖文档流中的其他元素。</li></ul><blockquote><p>介绍一下box-sizing属性？</p></blockquote><p><code>box-sizing</code>属性主要用来控制元素的盒模型的解析模式。默认值是<code>content-box</code>。</p><ul><li><code>content-box</code>：让元素维持W3C的标准盒模型。元素的宽度/高度由<code>border + padding + content</code>的宽度/高度决定，设置<code>width/height</code>属性指的是<code>content</code>部分的宽/高</li><li><code>border-box</code>：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置<code>width/height</code>属性指的是<code>border + padding + content</code></li></ul><p>标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。</p><blockquote><p>CSS 选择符有哪些？哪些属性可以继承？优先级<a href="http://lib.csdn.net/base/datastructure" target="_blank" rel="noopener">算法</a>如何计算？ <a href="http://lib.csdn.net/base/css3" target="_blank" rel="noopener">CSS3</a>新增伪类有那些？</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">1.id选择器（ # myid）</span><br><span class="line"></span><br><span class="line">2.类选择器（.myclassname）</span><br><span class="line"></span><br><span class="line">3.标签选择器（div, h1, p）</span><br><span class="line"></span><br><span class="line">4.相邻选择器（h1 + p）</span><br><span class="line"></span><br><span class="line">5.子选择器（ul &gt; li）</span><br><span class="line"></span><br><span class="line">6.后代选择器（li a）</span><br><span class="line"></span><br><span class="line">7.通配符选择器（ * ）</span><br><span class="line"></span><br><span class="line">8.属性选择器（a[rel = &quot;external&quot;]）</span><br><span class="line"></span><br><span class="line">9.伪类选择器（a: hover, li:nth-child）1234567891011121314151617</span><br></pre></td></tr></table></figure><p>优先级为:</p><p><code>!important &gt; id &gt; class &gt; tag</code></p><p><code>important</code> 比 内联优先级高,但内联比 <code>id</code> 要高</p><blockquote><p><a href="http://lib.csdn.net/base/css3" target="_blank" rel="noopener">CSS3</a>新增伪类举例：</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">p:first-of-type 选择属于其父元素的首个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</span><br><span class="line"></span><br><span class="line">p:last-of-type  选择属于其父元素的最后 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</span><br><span class="line"></span><br><span class="line">p:only-of-type  选择属于其父元素唯一的 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</span><br><span class="line"></span><br><span class="line">p:only-child    选择属于其父元素的唯一子元素的每个 &lt;p&gt; 元素。</span><br><span class="line"></span><br><span class="line">p:nth-child(2)  选择属于其父元素的第二个子元素的每个 &lt;p&gt; 元素。</span><br><span class="line"></span><br><span class="line">:enabled  :disabled 控制表单控件的禁用状态。</span><br><span class="line"></span><br><span class="line">:checked        单选框或复选框被选中。12345678910111213</span><br></pre></td></tr></table></figure><blockquote><p>CSS3有哪些新特性？</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">CSS3实现圆角（border-radius），阴影（box-shadow），</span><br><span class="line"></span><br><span class="line">对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）</span><br><span class="line"></span><br><span class="line">transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜</span><br><span class="line"></span><br><span class="line">增加了更多的CSS选择器  多背景 rgba</span><br><span class="line"></span><br><span class="line">在CSS3中唯一引入的伪元素是::selection.</span><br><span class="line"></span><br><span class="line">媒体查询，多栏布局</span><br><span class="line"></span><br><span class="line">border-image</span><br></pre></td></tr></table></figure><p>CSS3中新增了一种盒模型计算方式：<code>box-sizing</code>。盒模型默认的值是<code>content-box</code>, 新增的值是<code>padding-box</code>和<code>border-box</code>，几种盒模型计算元素宽高的区别如下：</p><h4 id="content-box（默认）"><a href="#content-box（默认）" class="headerlink" title="content-box（默认）"></a><code>content-box（默认）</code></h4><p>布局所占宽度Width：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Width = width + padding-left + padding-right + border-left + border-right</span><br><span class="line">12</span><br></pre></td></tr></table></figure><p>布局所占高度Height:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Height = height + padding-top + padding-bottom + border-top + border-bottom</span><br><span class="line">12</span><br></pre></td></tr></table></figure><h4 id="padding-box"><a href="#padding-box" class="headerlink" title="padding-box"></a><code>padding-box</code></h4><p>布局所占宽度Width：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Width = width(包含padding-left + padding-right) + border-top + border-bottom</span><br><span class="line">12</span><br></pre></td></tr></table></figure><p>布局所占高度Height:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Height = height(包含padding-top + padding-bottom) + border-top + border-bottom</span><br><span class="line"></span><br><span class="line">123</span><br></pre></td></tr></table></figure><h4 id="border-box"><a href="#border-box" class="headerlink" title="border-box"></a><code>border-box</code></h4><p>布局所占宽度Width：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Width = width(包含padding-left + padding-right + border-left + border-right)1</span><br></pre></td></tr></table></figure><p>布局所占高度Height:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Height = height(包含padding-top + padding-bottom + border-top + border-bottom)1</span><br></pre></td></tr></table></figure><blockquote><p>对BFC规范的理解？</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">  BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。</span><br><span class="line"></span><br><span class="line">（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。</span><br></pre></td></tr></table></figure><h4 id="说说你对语义化的理解？"><a href="#说说你对语义化的理解？" class="headerlink" title="说说你对语义化的理解？"></a>说说你对语义化的理解？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构</span><br><span class="line"></span><br><span class="line">2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；</span><br><span class="line"></span><br><span class="line">3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；</span><br><span class="line"></span><br><span class="line">4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。</span><br></pre></td></tr></table></figure><h4 id="Doctype作用-严格模式与混杂模式如何区分？它们有何意义"><a href="#Doctype作用-严格模式与混杂模式如何区分？它们有何意义" class="headerlink" title="Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?"></a>Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?</h4><p>1）、<code>&lt;!DOCTYPE&gt;</code> 声明位于文档中的最前面，处于 <code>&lt;html&gt;</code> 标签之前。告知浏览器以何种模式来渲染文档。</p><p>2）、严格模式的排版和 <code>JS</code> 运作模式是 以该浏览器支持的最高标准运行。</p><p>3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。</p><p>4）、<code>DOCTYPE</code>不存在或格式不正确会导致文档以混杂模式呈现。</p><h4 id="你知道多少种Doctype文档类型？"><a href="#你知道多少种Doctype文档类型？" class="headerlink" title="你知道多少种Doctype文档类型？"></a>你知道多少种<code>Doctype</code>文档类型？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。</span><br><span class="line"></span><br><span class="line"> HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。</span><br><span class="line"></span><br><span class="line"> XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。</span><br><span class="line"></span><br><span class="line">Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks</span><br><span class="line"></span><br><span class="line"> （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。</span><br></pre></td></tr></table></figure><h4 id="HTML与XHTML——二者有什么区别"><a href="#HTML与XHTML——二者有什么区别" class="headerlink" title="HTML与XHTML——二者有什么区别"></a>HTML与XHTML——二者有什么区别</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">区别：</span><br><span class="line"></span><br><span class="line">1.所有的标记都必须要有一个相应的结束标记</span><br><span class="line"></span><br><span class="line">2.所有标签的元素和属性的名字都必须使用小写</span><br><span class="line"></span><br><span class="line">3.所有的XML标记都必须合理嵌套</span><br><span class="line"></span><br><span class="line">4.所有的属性必须用引号&quot;&quot;括起来</span><br><span class="line"></span><br><span class="line">5.把所有&lt;和&amp;特殊符号用编码表示</span><br><span class="line"></span><br><span class="line">6.给所有属性赋一个值</span><br><span class="line"></span><br><span class="line">7.不要在注释内容中使“--”</span><br><span class="line"></span><br><span class="line">8.图片必须有说明文字</span><br></pre></td></tr></table></figure><h4 id="常见兼容性问题？"><a href="#常见兼容性问题？" class="headerlink" title="常见兼容性问题？"></a>常见兼容性问题？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.</span><br><span class="line"></span><br><span class="line">浏览器默认的margin和padding不同。解决方案是加一个全局的*&#123;margin:0;padding:0;&#125;来统一。</span><br><span class="line"></span><br><span class="line">IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。</span><br><span class="line"></span><br><span class="line">浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）</span><br><span class="line"></span><br><span class="line">#box&#123; float:left; width:10px; margin:0 0 0 100px;&#125;</span><br><span class="line"></span><br><span class="line">这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入</span><br><span class="line">_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)</span><br><span class="line"></span><br><span class="line">渐进识别的方式，从总体中逐渐排除局部。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。</span><br><span class="line"></span><br><span class="line">  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。</span><br><span class="line"></span><br><span class="line">  css</span><br><span class="line"></span><br><span class="line">      .bb&#123;</span><br><span class="line"></span><br><span class="line">       background-color:#f1ee18;/*所有识别*/</span><br><span class="line"></span><br><span class="line">      .background-color:#00deff\9; /*IE6、7、8识别*/</span><br><span class="line"></span><br><span class="line">      +background-color:#a200ff;/*IE6、7识别*/</span><br><span class="line"></span><br><span class="line">      _background-color:#1e0bd1;/*IE6识别*/</span><br><span class="line"></span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发</span><br><span class="line">怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在</span><br><span class="line">可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`&lt;doctype html&gt;`</span><br></pre></td></tr></table></figure><blockquote><p>上下margin重合问题</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。</span><br><span class="line"></span><br><span class="line">解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。</span><br></pre></td></tr></table></figure><h4 id="解释下浮动和它的工作原理？清除浮动的技巧"><a href="#解释下浮动和它的工作原理？清除浮动的技巧" class="headerlink" title="解释下浮动和它的工作原理？清除浮动的技巧"></a>解释下浮动和它的工作原理？清除浮动的技巧</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">1.使用空标签清除浮动。</span><br><span class="line"></span><br><span class="line">   这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。</span><br><span class="line"></span><br><span class="line">2.使用overflow。</span><br><span class="line"></span><br><span class="line">   给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。</span><br><span class="line"></span><br><span class="line">3.使用after伪对象清除浮动。</span><br><span class="line"></span><br><span class="line">   该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；</span><br></pre></td></tr></table></figure><h4 id="浮动元素引起的问题和解决办法？"><a href="#浮动元素引起的问题和解决办法？" class="headerlink" title="浮动元素引起的问题和解决办法？"></a>浮动元素引起的问题和解决办法？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">浮动元素引起的问题：</span><br><span class="line"></span><br><span class="line">（1）父元素的高度无法被撑开，影响与父元素同级的元素</span><br><span class="line"></span><br><span class="line">（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后</span><br><span class="line"></span><br><span class="line">（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构</span><br></pre></td></tr></table></figure><blockquote><p>解决方法：</p></blockquote><p>使用<code>CSS</code>中的<code>clear:both</code>;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加<code>clearfix</code>样式：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.clearfix:after&#123;content: &quot;.&quot;;display: block;height: 0;clear: both;visibility: hidden;&#125;</span><br><span class="line"></span><br><span class="line">.clearfix&#123;display: inline-block;&#125; /* for IE/Mac */123</span><br></pre></td></tr></table></figure><p>清除浮动的几种方法：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">1，额外标签法，&lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）</span><br><span class="line"></span><br><span class="line">2，使用after伪类</span><br><span class="line"></span><br><span class="line">#parent:after&#123;</span><br><span class="line"></span><br><span class="line">    content:&quot;.&quot;;</span><br><span class="line"></span><br><span class="line">    height:0;</span><br><span class="line"></span><br><span class="line">    visibility:hidden;</span><br><span class="line"></span><br><span class="line">    display:block;</span><br><span class="line"></span><br><span class="line">    clear:both;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">3,浮动外部元素</span><br><span class="line"></span><br><span class="line">4,设置overflow为hidden或者auto12345678910111213141516171819202122</span><br></pre></td></tr></table></figure><h4 id="DOM操作——怎样添加、移除、移动、复制、创建和查找节点。"><a href="#DOM操作——怎样添加、移除、移动、复制、创建和查找节点。" class="headerlink" title="DOM操作——怎样添加、移除、移动、复制、创建和查找节点。"></a>DOM操作——怎样添加、移除、移动、复制、创建和查找节点。</h4><blockquote><p>1）创建新节点</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">createDocumentFragment()    //创建一个DOM片段</span><br><span class="line"></span><br><span class="line">createElement()   //创建一个具体的元素</span><br><span class="line"></span><br><span class="line">createTextNode()   //创建一个文本节点</span><br></pre></td></tr></table></figure><blockquote><p>2）添加、移除、替换、插入</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">appendChild()</span><br><span class="line"></span><br><span class="line">removeChild()</span><br><span class="line"></span><br><span class="line">replaceChild()</span><br><span class="line"></span><br><span class="line">insertBefore() //并没有insertAfter()</span><br></pre></td></tr></table></figure><blockquote><p>3）查找</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">getElementsByTagName()    //通过标签名称</span><br><span class="line"></span><br><span class="line">getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，</span><br><span class="line">会得到一个数组，其中包括id等于name值的)</span><br><span class="line"></span><br><span class="line">getElementById()    //通过元素Id，唯一性</span><br></pre></td></tr></table></figure><h4 id="html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分-HTML-和-HTML5？"><a href="#html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分-HTML-和-HTML5？" class="headerlink" title="html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？"></a>html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。</span><br><span class="line"></span><br><span class="line">拖拽释放(Drag and drop) API</span><br><span class="line"></span><br><span class="line">语义化更好的内容标签（header,nav,footer,aside,article,section）</span><br><span class="line"></span><br><span class="line">音频、视频API(audio,video)</span><br><span class="line"></span><br><span class="line">画布(Canvas) API</span><br><span class="line"></span><br><span class="line">地理(Geolocation) API</span><br><span class="line"></span><br><span class="line">本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；</span><br><span class="line"></span><br><span class="line">sessionStorage 的数据在浏览器关闭后自动删除</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">表单控件，calendar、date、time、email、url、search</span><br><span class="line"></span><br><span class="line">新的技术webworker, websocket, Geolocation</span><br></pre></td></tr></table></figure><blockquote><p>移除的元素</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">纯表现的元素：basefont，big，center，font, s，strike，tt，u；</span><br><span class="line"></span><br><span class="line">对可用性产生负面影响的元素：frame，frameset，noframes；</span><br></pre></td></tr></table></figure><blockquote><p>支持HTML5新标签：</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">IE8/IE7/IE6支持通过document.createElement方法产生的标签，</span><br><span class="line"></span><br><span class="line">可以利用这一特性让这些浏览器支持HTML5新标签，</span><br><span class="line"></span><br><span class="line">当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架</span><br><span class="line"></span><br><span class="line">   &lt;!--[if lt IE 9]&gt;</span><br><span class="line"></span><br><span class="line">   &lt;script&gt; src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">   &lt;![endif]--&gt;</span><br><span class="line"></span><br><span class="line">如何区分： DOCTYPE声明\新增的结构元素\功能元素1234567891011121314</span><br></pre></td></tr></table></figure><h4 id="如何实现浏览器内多个标签页之间的通信"><a href="#如何实现浏览器内多个标签页之间的通信" class="headerlink" title="如何实现浏览器内多个标签页之间的通信?"></a>如何实现浏览器内多个标签页之间的通信?</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">调用localstorge、cookies等本地存储方式1</span><br></pre></td></tr></table></figure><h4 id="什么是-FOUC（无样式内容闪烁）？你如何来避免-FOUC？"><a href="#什么是-FOUC（无样式内容闪烁）？你如何来避免-FOUC？" class="headerlink" title="什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？"></a>什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> FOUC - Flash Of Unstyled Content 文档样式闪烁</span><br><span class="line"></span><br><span class="line"> &lt;style type=&quot;text/css&quot; media=&quot;all&quot;&gt;@import &quot;../fouc.css&quot;;&lt;/style&gt;</span><br><span class="line"></span><br><span class="line">而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。</span><br><span class="line"></span><br><span class="line"> 解决方法简单的出奇，只要在&lt;head&gt;之间加入一个&lt;link&gt;或者&lt;script&gt;元素就可以了。1234567</span><br></pre></td></tr></table></figure><h4 id="null和undefined的区别？"><a href="#null和undefined的区别？" class="headerlink" title="null和undefined的区别？"></a>null和undefined的区别？</h4><p><code>null</code>是一个表示”无”的对象，转为数值时为0；<code>undefined</code>是一个表示”无”的原始值，转为数值时为<code>NaN</code>。</p><p>当声明的变量还未被初始化时，变量的默认值为<code>undefined</code>。</p><p><code>null</code>用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。</p><p><code>undefined</code>表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">（1）变量被声明了，但没有赋值时，就等于undefined。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">（3）对象没有赋值的属性，该属性的值为undefined。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">（4）函数没有返回值时，默认返回undefined。</span><br></pre></td></tr></table></figure><p><code>null</code>表示”没有对象”，即该处不应该有值。典型用法是：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">（1） 作为函数的参数，表示该函数的参数不是对象。</span><br><span class="line"></span><br><span class="line">（2） 作为对象原型链的终点。</span><br></pre></td></tr></table></figure><h4 id="new操作符具体干了什么呢"><a href="#new操作符具体干了什么呢" class="headerlink" title="new操作符具体干了什么呢?"></a>new操作符具体干了什么呢?</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">   1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。</span><br><span class="line"></span><br><span class="line">   2、属性和方法被加入到 this 引用的对象中。</span><br><span class="line"></span><br><span class="line">   3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">var obj  = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">obj.__proto__ = Base.prototype;</span><br><span class="line"></span><br><span class="line">Base.call(obj);</span><br></pre></td></tr></table></figure><h4 id="js延迟加载的方式有哪些？"><a href="#js延迟加载的方式有哪些？" class="headerlink" title="js延迟加载的方式有哪些？"></a>js延迟加载的方式有哪些？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js</span><br></pre></td></tr></table></figure><h4 id="call-和-apply-的区别和作用？"><a href="#call-和-apply-的区别和作用？" class="headerlink" title="call() 和 apply() 的区别和作用？"></a><code>call()</code> 和 <code>apply()</code> 的区别和作用？</h4><p>作用：动态改变某个类的某个方法的运行环境（执行上下文）。</p><p>区别参见：[JavaScript学习总结（四）function函数部分][3]</p><h4 id="哪些操作会造成内存泄漏？"><a href="#哪些操作会造成内存泄漏？" class="headerlink" title="哪些操作会造成内存泄漏？"></a>哪些操作会造成内存泄漏？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。</span><br><span class="line"></span><br><span class="line">垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。</span><br><span class="line"></span><br><span class="line">闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）</span><br></pre></td></tr></table></figure><p>详见：[详解js变量、作用域及内存][4]</p><h4 id="列举IE-与其他浏览器不一样的特性？"><a href="#列举IE-与其他浏览器不一样的特性？" class="headerlink" title="列举IE 与其他浏览器不一样的特性？"></a>列举IE 与其他浏览器不一样的特性？</h4><ul><li>IE支持<code>currentStyle</code>，FIrefox使用<code>getComputStyle</code></li><li>IE 使用<code>innerText</code>，Firefox使用<code>textContent</code></li><li>滤镜方面：IE:<code>filter:alpha(opacity= num)</code>；Firefox：<code>-moz-opacity:num</code></li><li>事件方面：IE：<code>attachEvent</code>：火狐是<code>addEventListener</code></li><li>鼠标位置：IE是<code>event.clientX</code>；火狐是<code>event.pageX</code></li><li>IE使用<code>event.srcElement</code>；Firefox使用<code>event.target</code></li><li>IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置<code>margin:0;padding:0以及list-style:none</code></li><li>CSS圆角：ie7以下不支持圆角</li></ul><h4 id="WEB应用从服务器主动推送Data到客户端有那些方式？"><a href="#WEB应用从服务器主动推送Data到客户端有那些方式？" class="headerlink" title="WEB应用从服务器主动推送Data到客户端有那些方式？"></a>WEB应用从服务器主动推送Data到客户端有那些方式？</h4><p>Javascript数据推送</p><ul><li><code>Commet</code>：基于HTTP长连接的服务器推送技术</li><li>基于<code>WebSocket</code>的推送方案</li><li><code>SSE</code>（Server-Send Event）：服务器推送数据新方式</li></ul><h4 id="对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？"><a href="#对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？" class="headerlink" title="对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？"></a>对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。</span><br><span class="line"></span><br><span class="line">    1、实现界面交互</span><br><span class="line"></span><br><span class="line">    2、提升用户体验</span><br><span class="line"></span><br><span class="line">    3、有了Node.js，前端可以实现服务端的一些事情</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> 参与项目，快速高质量完成实现效果图，精确到1px；</span><br><span class="line"></span><br><span class="line"> 与团队成员，UI设计，产品经理的沟通；</span><br><span class="line"></span><br><span class="line"> 做好的页面结构，页面重构和用户体验；</span><br><span class="line"></span><br><span class="line"> 处理hack，兼容、写出优美的代码格式；</span><br><span class="line"></span><br><span class="line"> 针对服务器的优化、拥抱最新前端技术。</span><br></pre></td></tr></table></figure><h4 id="一个页面从输入-URL-到页面加载显示完成，这个过程中都发生了什么？"><a href="#一个页面从输入-URL-到页面加载显示完成，这个过程中都发生了什么？" class="headerlink" title="一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？"></a>一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">    分为4个步骤：</span><br><span class="line"></span><br><span class="line">    （1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。</span><br><span class="line"></span><br><span class="line">    （2）， 浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。</span><br><span class="line"></span><br><span class="line">    （3），一旦`TCP/IP`连接建立，浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。</span><br><span class="line"></span><br><span class="line">    （4），此时，`Web`服务器提供资源服务，客户端开始下载资源。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">请求返回后，便进入了我们关注的前端模块</span><br><span class="line"></span><br><span class="line">简单来说，浏览器会解析`HTML`生成`DOM Tree`，其次会根据CSS生成CSS Rule Tree，而`javascript`又可以根据`DOM API`操作`DOM`</span><br></pre></td></tr></table></figure><p>详情：[从输入 URL 到浏览器接收的过程中发生了什么事情？][8]</p><h4 id="javascript对象的几种创建方式"><a href="#javascript对象的几种创建方式" class="headerlink" title="javascript对象的几种创建方式"></a>javascript对象的几种创建方式</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">1，工厂模式</span><br><span class="line"></span><br><span class="line">2，构造函数模式</span><br><span class="line"></span><br><span class="line">3，原型模式</span><br><span class="line"></span><br><span class="line">4，混合构造函数和原型模式</span><br><span class="line"></span><br><span class="line">5，动态原型模式</span><br><span class="line"></span><br><span class="line">6，寄生构造函数模式</span><br><span class="line"></span><br><span class="line">7，稳妥构造函数模式</span><br></pre></td></tr></table></figure><h4 id="javascript继承的6种方法"><a href="#javascript继承的6种方法" class="headerlink" title="javascript继承的6种方法"></a>javascript继承的6种方法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">1，原型链继承</span><br><span class="line"></span><br><span class="line">2，借用构造函数继承</span><br><span class="line"></span><br><span class="line">3，组合继承(原型+借用构造)</span><br><span class="line"></span><br><span class="line">4，原型式继承</span><br><span class="line"></span><br><span class="line">5，寄生式继承</span><br><span class="line"></span><br><span class="line">6，寄生组合式继承</span><br></pre></td></tr></table></figure><p>详情：[JavaScript继承方式详解][9]</p><h4 id="创建ajax的过程"><a href="#创建ajax的过程" class="headerlink" title="创建ajax的过程"></a>创建ajax的过程</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.</span><br><span class="line"></span><br><span class="line">(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.</span><br><span class="line"></span><br><span class="line">(3)设置响应`HTTP`请求状态变化的函数.</span><br><span class="line"></span><br><span class="line">(4)发送`HTTP`请求.</span><br><span class="line"></span><br><span class="line">(5)获取异步调用返回的数据.</span><br><span class="line"></span><br><span class="line">(6)使用JavaScript和DOM实现局部刷新.</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">var xmlHttp = new XMLHttpRequest();</span><br><span class="line"></span><br><span class="line">xmlHttp.open(&apos;GET&apos;,&apos;demo.php&apos;,&apos;true&apos;);</span><br><span class="line"></span><br><span class="line">xmlHttp.send()</span><br><span class="line"></span><br><span class="line">xmlHttp.onreadystatechange = function()&#123;</span><br><span class="line"></span><br><span class="line">    if(xmlHttp.readyState === 4 &amp; xmlHttp.status === 200)&#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;1234567891011121314151617181920212223242526</span><br></pre></td></tr></table></figure><p>详情：[JavaScript学习总结（七）Ajax和Http状态字][10]</p><h4 id="异步加载和延迟加载"><a href="#异步加载和延迟加载" class="headerlink" title="异步加载和延迟加载"></a>异步加载和延迟加载</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">1.异步加载的方案： 动态插入script标签</span><br><span class="line"></span><br><span class="line">2.通过ajax去获取js代码，然后通过eval执行</span><br><span class="line"></span><br><span class="line">3.script标签上添加defer或者async属性</span><br><span class="line"></span><br><span class="line">4.创建并插入iframe，让它异步执行js</span><br><span class="line"></span><br><span class="line">5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。</span><br></pre></td></tr></table></figure><h4 id="ie各版本和chrome可以并行下载多少个资源"><a href="#ie各版本和chrome可以并行下载多少个资源" class="headerlink" title="ie各版本和chrome可以并行下载多少个资源"></a>ie各版本和chrome可以并行下载多少个资源</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个</span><br><span class="line">Firefox，chrome也是6个</span><br></pre></td></tr></table></figure><h4 id="Flash、Ajax各自的优缺点，在使用中如何取舍？"><a href="#Flash、Ajax各自的优缺点，在使用中如何取舍？" class="headerlink" title="Flash、Ajax各自的优缺点，在使用中如何取舍？"></a><code>Flash</code>、<code>Ajax</code>各自的优缺点，在使用中如何取舍？</h4><ul><li><code>Flash</code>适合处理多媒体、矢量图形、访问机器；对<code>CSS</code>、处理文本上不足，不容易被搜索。</li></ul><p>-<code>Ajax</code>对<code>CSS</code>、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。</p><ul><li>共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM</li></ul><h4 id="请解释一下-JavaScript-的同源策略。"><a href="#请解释一下-JavaScript-的同源策略。" class="headerlink" title="请解释一下 JavaScript 的同源策略。"></a>请解释一下 JavaScript 的同源策略。</h4><p>概念:同源策略是客户端脚本（尤其是<code>Javascript</code>）的重要的安全度量标准。它最早出自<code>Netscape Navigator2.0</code>，其目的是防止某个文档或脚本从多个不同源装载。</p><p>这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。</p><p>指一段脚本只能读取来自同一来源的窗口和文档的属性。</p><h4 id="为什么要有同源限制？"><a href="#为什么要有同源限制？" class="headerlink" title="为什么要有同源限制？"></a>为什么要有同源限制？</h4><p>我们举例说明：比如一个黑客程序，他利用<code>Iframe</code>把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过<code>Javascript</code>读取到你的表单中<code>input</code>中的内容，这样用户名，密码就轻松到手了。</p><p>缺点：</p><p>现在网站的<code>JS</code> 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 <code>merge</code> 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。</p><h4 id="GET和POST的区别，何时使用POST？"><a href="#GET和POST的区别，何时使用POST？" class="headerlink" title="GET和POST的区别，何时使用POST？"></a>GET和POST的区别，何时使用POST？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">    GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符</span><br><span class="line"></span><br><span class="line">    POST：一般用于修改服务器上的资源，对所发送的信息没有限制。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，</span><br><span class="line"></span><br><span class="line">    也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">然而，在以下情况中，请使用 POST 请求：</span><br><span class="line"></span><br><span class="line">无法使用缓存文件（更新服务器上的文件或数据库）</span><br><span class="line"></span><br><span class="line">向服务器发送大量数据（POST 没有数据量限制）</span><br><span class="line"></span><br><span class="line">发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠</span><br></pre></td></tr></table></figure><h4 id="事件、IE与火狐的事件机制有什么区别？-如何阻止冒泡？"><a href="#事件、IE与火狐的事件机制有什么区别？-如何阻止冒泡？" class="headerlink" title="事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？"></a>事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。</span><br><span class="line"></span><br><span class="line">2. 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。；</span><br><span class="line"></span><br><span class="line">3. `ev.stopPropagation()`;注意旧ie的方法 `ev.cancelBubble = true`;</span><br></pre></td></tr></table></figure><h4 id="ajax的缺点和在IE下的问题？"><a href="#ajax的缺点和在IE下的问题？" class="headerlink" title="ajax的缺点和在IE下的问题？"></a>ajax的缺点和在IE下的问题？</h4><p>详情请见：[JavaScript学习总结（七）Ajax和Http状态字][14]</p><blockquote><p>ajax的缺点</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">1、ajax不支持浏览器back按钮。</span><br><span class="line"></span><br><span class="line">2、安全问题 AJAX暴露了与服务器交互的细节。</span><br><span class="line"></span><br><span class="line">3、对搜索引擎的支持比较弱。</span><br><span class="line"></span><br><span class="line">4、破坏了程序的异常机制。</span><br><span class="line"></span><br><span class="line">5、不容易调试。</span><br></pre></td></tr></table></figure><blockquote><p>IE缓存问题</p></blockquote><p>在IE浏览器下，如果请求的方法是<code>GET</code>，并且请求的<code>URL</code>不变，那么这个请求的结果就会被缓存。解决这个问题的办法可以通过实时改变请求的<code>URL</code>，只要URL改变，就不会被缓存，可以通过在URL末尾添加上随机的时间戳参数(<code>&#39;t&#39;= + new Date().getTime()</code>)</p><p>或者：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">open(&apos;GET&apos;,&apos;demo.php?rand=+Math.random()&apos;,true);//1</span><br></pre></td></tr></table></figure><blockquote><p>Ajax请求的页面历史记录状态问题</p></blockquote><p>可以通过锚点来记录状态，<code>location.hash</code>。让浏览器记录Ajax请求时页面状态的变化。</p><p>还可以通过<code>HTML5</code>的<code>history.pushState</code>，来实现浏览器地址栏的无刷新改变</p><h4 id="谈谈你对重构的理解"><a href="#谈谈你对重构的理解" class="headerlink" title="谈谈你对重构的理解"></a>谈谈你对重构的理解</h4><p>网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，<br>在扩展的同时保持一致的UI。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">对于传统的网站来说重构通常是：</span><br><span class="line"></span><br><span class="line">表格(table)布局改为DIV+CSS</span><br><span class="line"></span><br><span class="line">使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)</span><br><span class="line"></span><br><span class="line">对于移动平台的优化</span><br><span class="line"></span><br><span class="line">针对于SEO进行优化</span><br><span class="line"></span><br><span class="line">深层次的网站重构应该考虑的方面</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">减少代码间的耦合</span><br><span class="line"></span><br><span class="line">让代码保持弹性</span><br><span class="line"></span><br><span class="line">严格按规范编写代码</span><br><span class="line"></span><br><span class="line">设计可扩展的API</span><br><span class="line"></span><br><span class="line">代替旧有的框架、语言(如VB)</span><br><span class="line"></span><br><span class="line">增强用户体验</span><br><span class="line"></span><br><span class="line">通常来说对于速度的优化也包含在重构中</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">压缩JS、CSS、image等前端资源(通常是由服务器来解决)</span><br><span class="line"></span><br><span class="line">程序的性能优化(如数据读写)</span><br><span class="line"></span><br><span class="line">采用CDN来加速资源加载</span><br><span class="line"></span><br><span class="line">对于JS DOM的优化</span><br><span class="line"></span><br><span class="line">HTTP服务器的文件缓存</span><br></pre></td></tr></table></figure><h4 id="HTTP状态码"><a href="#HTTP状态码" class="headerlink" title="HTTP状态码"></a>HTTP状态码</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">    100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息</span><br><span class="line"></span><br><span class="line">    200  OK   正常返回信息</span><br><span class="line"></span><br><span class="line">    201  Created  请求成功并且服务器创建了新的资源</span><br><span class="line"></span><br><span class="line">    202  Accepted  服务器已接受请求，但尚未处理</span><br><span class="line"></span><br><span class="line">    301  Moved Permanently  请求的网页已永久移动到新位置。</span><br><span class="line"></span><br><span class="line">    302 Found  临时性重定向。</span><br><span class="line"></span><br><span class="line">    303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。</span><br><span class="line"></span><br><span class="line">    304  Not Modified  自从上次请求后，请求的网页未修改过。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。</span><br><span class="line"></span><br><span class="line">    401 Unauthorized  请求未授权。</span><br><span class="line"></span><br><span class="line">    403 Forbidden  禁止访问。</span><br><span class="line"></span><br><span class="line">    404 Not Found  找不到如何与 URI 相匹配的资源。</span><br><span class="line"></span><br><span class="line">    500 Internal Server Error  最常见的服务器端错误。</span><br><span class="line"></span><br><span class="line">    503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。</span><br><span class="line">123456789101112131415161718192021222324252627282930</span><br></pre></td></tr></table></figure><h4 id="说说你对Promise的理解"><a href="#说说你对Promise的理解" class="headerlink" title="说说你对Promise的理解"></a>说说你对Promise的理解</h4><p>依照 <code>Promise/A+</code> 的定义，<code>Promise</code> 有四种状态：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">pending: 初始状态, 非 fulfilled 或 rejected.</span><br><span class="line"></span><br><span class="line">fulfilled: 成功的操作.</span><br><span class="line"></span><br><span class="line">rejected: 失败的操作.</span><br><span class="line"></span><br><span class="line">settled: Promise已被fulfilled或rejected，且不是pending</span><br></pre></td></tr></table></figure><p>另外， <code>fulfilled</code> 与 <code>rejected</code> 一起合称 <code>settled</code>。</p><p><code>Promise</code> 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。</p><blockquote><p>Promise 的构造函数</p></blockquote><p>构造一个 <code>Promise</code>，最基本的用法如下：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var promise = new Promise(function(resolve, reject) &#123;</span><br><span class="line"></span><br><span class="line">    if (...) &#123;  // succeed</span><br><span class="line"></span><br><span class="line">        resolve(result);</span><br><span class="line"></span><br><span class="line">    &#125; else &#123;   // fails</span><br><span class="line"></span><br><span class="line">        reject(Error(errMessage));</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;);123456789101112</span><br></pre></td></tr></table></figure><p><code>Promise</code> 实例拥有 <code>then</code> 方法（具有 <code>then</code> 方法的对象，通常被称为 <code>thenable</code>）。它的使用方法如下：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">promise.then(onFulfilled, onRejected)1</span><br></pre></td></tr></table></figure><p>接收两个函数作为参数，一个在 <code>fulfilled</code> 的时候被调用，一个在 <code>rejected</code> 的时候被调用，接收参数就是 <code>future，onFulfilled</code>对应 <code>resolve</code>, <code>onRejected</code> 对应 <code>reject</code>。</p><h4 id="说说你对前端架构师的理解"><a href="#说说你对前端架构师的理解" class="headerlink" title="说说你对前端架构师的理解"></a>说说你对前端架构师的理解</h4><p>负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率；<br>带领团队完成研发工具及平台前端部分的设计、研发和维护；<br>带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先<br>负责<a href="http://lib.csdn.net/base/javascript" target="_blank" rel="noopener">前端开发</a>规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。</p><h4 id="实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制"><a href="#实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制" class="headerlink" title="实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制"></a>实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">Object.prototype.clone = function()&#123;</span><br><span class="line"></span><br><span class="line">        var o = this.constructor === Array ? [] : &#123;&#125;;</span><br><span class="line"></span><br><span class="line">        for(var e in this)&#123;</span><br><span class="line"></span><br><span class="line">                o[e] = typeof this[e] === &quot;object&quot; ? this[e].clone() : this[e];</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        return o;</span><br><span class="line">&#125;123456789101112</span><br></pre></td></tr></table></figure><h4 id="说说严格模式的限制"><a href="#说说严格模式的限制" class="headerlink" title="说说严格模式的限制"></a>说说严格模式的限制</h4><p>严格模式主要有以下限制：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">变量必须声明后再使用</span><br><span class="line"></span><br><span class="line">函数的参数不能有同名属性，否则报错</span><br><span class="line"></span><br><span class="line">不能使用with语句</span><br><span class="line"></span><br><span class="line">不能对只读属性赋值，否则报错</span><br><span class="line"></span><br><span class="line">不能使用前缀0表示八进制数，否则报错</span><br><span class="line"></span><br><span class="line">不能删除不可删除的属性，否则报错</span><br><span class="line"></span><br><span class="line">不能删除变量delete prop，会报错，只能删除属性delete global[prop]</span><br><span class="line"></span><br><span class="line">eval不会在它的外层作用域引入变量</span><br><span class="line"></span><br><span class="line">eval和arguments不能被重新赋值</span><br><span class="line"></span><br><span class="line">arguments不会自动反映函数参数的变化</span><br><span class="line"></span><br><span class="line">不能使用arguments.callee</span><br><span class="line"></span><br><span class="line">不能使用arguments.caller</span><br><span class="line"></span><br><span class="line">禁止this指向全局对象</span><br><span class="line"></span><br><span class="line">不能使用fn.caller和fn.arguments获取函数调用的堆栈</span><br><span class="line"></span><br><span class="line">增加了保留字（比如protected、static和interface）</span><br></pre></td></tr></table></figure><p>设立”严格模式”的目的，主要有以下几个：</p><ul><li>消除<code>Javascript</code>语法的一些不合理、不严谨之处，减少一些怪异行为;</li><li>消除代码运行的一些不安全之处，保证代码运行的安全；</li><li>提高编译器效率，增加运行速度；</li><li>为未来新版本的<code>Javascript</code>做好铺垫。</li></ul><p>注：经过<a href="http://lib.csdn.net/base/softwaretest" target="_blank" rel="noopener">测试</a><code>IE6,7,8,9</code>均不支持严格模式。</p><h4 id="如何删除一个cookie"><a href="#如何删除一个cookie" class="headerlink" title="如何删除一个cookie"></a>如何删除一个cookie</h4><blockquote><p>1.将时间设为当前时间往前一点。</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var date = new Date();</span><br><span class="line"></span><br><span class="line">date.setDate(date.getDate() - 1);//真正的删除123</span><br></pre></td></tr></table></figure><p><code>setDate()</code>方法用于设置一个月的某一天。</p><blockquote><p>2.expires的设置</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.cookie = &apos;user=&apos;+ encodeURIComponent(&apos;name&apos;)  + &apos;;expires = &apos; + new Date(0)1</span><br></pre></td></tr></table></figure><h4 id="lt-strong-gt-，-lt-em-gt-和-lt-b-gt-，-lt-i-gt-标签"><a href="#lt-strong-gt-，-lt-em-gt-和-lt-b-gt-，-lt-i-gt-标签" class="headerlink" title="&lt;strong&gt;，&lt;em&gt;和&lt;b&gt;，&lt;i&gt;标签"></a><code>&lt;strong&gt;</code>，<code>&lt;em&gt;</code>和<code>&lt;b&gt;</code>，<code>&lt;i&gt;</code>标签</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;strong&gt; 标签和 &lt;em&gt; 标签一样，用于强调文本，但它强调的程度更强一些。</span><br><span class="line"></span><br><span class="line">em 是 斜体强调标签，更强烈强调，表示内容的强调点。相当于html元素中的 &lt;i&gt;...&lt;/i&gt;;</span><br><span class="line"></span><br><span class="line">&lt; b &gt; &lt; i &gt;是视觉要素，分别表示无意义的加粗，无意义的斜体。</span><br><span class="line"></span><br><span class="line">em 和 strong 是表达要素(phrase elements)。1234567</span><br></pre></td></tr></table></figure><h4 id="说说你对AMD和Commonjs的理解"><a href="#说说你对AMD和Commonjs的理解" class="headerlink" title="说说你对AMD和Commonjs的理解"></a>说说你对AMD和Commonjs的理解</h4><p><code>CommonJS</code>是服务器端模块的规范，<a href="http://lib.csdn.net/base/nodejs" target="_blank" rel="noopener">Node.js</a>采用了这个规范。<code>CommonJS</code>规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。</p><p><code>AMD</code>推荐的风格通过返回一个对象做为模块对象，<code>CommonJS</code>的风格通过对<code>module.exports</code>或<code>exports</code>的属性赋值来达到暴露模块对象的目的。</p><h4 id="document-write-的用法"><a href="#document-write-的用法" class="headerlink" title="document.write()的用法"></a>document.write()的用法</h4><p><code>document.write()</code>方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。</p><p><code>document.write</code>只能重绘整个页面。<code>innerHTML</code>可以重绘页面的一部分</p><h4 id="编写一个方法-求一个字符串的字节长度"><a href="#编写一个方法-求一个字符串的字节长度" class="headerlink" title="编写一个方法 求一个字符串的字节长度"></a>编写一个方法 求一个字符串的字节长度</h4><p>假设：一个英文字符占用一个字节，一个中文字符占用两个字节</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"> function GetBytes(str)&#123;</span><br><span class="line"></span><br><span class="line">        var len = str.length;</span><br><span class="line"></span><br><span class="line">        var bytes = len;</span><br><span class="line"></span><br><span class="line">        for(var i=0; i&lt;len; i++)&#123;</span><br><span class="line"></span><br><span class="line">            if (str.charCodeAt(i) &gt; 255) bytes++;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        return bytes;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">alert(GetBytes(&quot;你好,as&quot;));1234567891011121314151617</span><br></pre></td></tr></table></figure><h4 id="git-fetch和git-pull的区别"><a href="#git-fetch和git-pull的区别" class="headerlink" title="git fetch和git pull的区别"></a>git fetch和git pull的区别</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git pull：相当于是从远程获取最新版本并merge到本地</span><br><span class="line"></span><br><span class="line">git fetch：相当于是从远程获取最新版本到本地，不会自动merge123</span><br></pre></td></tr></table></figure><h4 id="说说你对MVC和MVVM的理解"><a href="#说说你对MVC和MVVM的理解" class="headerlink" title="说说你对MVC和MVVM的理解"></a>说说你对MVC和MVVM的理解</h4><blockquote><p><code>MVC</code></p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">View 传送指令到 Controller</span><br><span class="line"></span><br><span class="line">Controller 完成业务逻辑后，要求 Model 改变状态</span><br><span class="line"></span><br><span class="line">Model 将新的数据发送到 View，用户得到反馈</span><br></pre></td></tr></table></figure><p>所有通信都是单向的。</p><p><code>Angular</code>它采用双向绑定（data-binding）：<code>View</code>的变动，自动反映在 <code>ViewModel</code>，反之亦然。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">组成部分Model、View、ViewModel</span><br><span class="line"></span><br><span class="line">View：UI界面</span><br><span class="line"></span><br><span class="line">ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；</span><br><span class="line"></span><br><span class="line">Model：数据访问层</span><br></pre></td></tr></table></figure><h4 id="请解释什么是事件代理"><a href="#请解释什么是事件代理" class="headerlink" title="请解释什么是事件代理"></a>请解释什么是事件代理</h4><p>事件代理（Event Delegation），又称之为事件委托。是 <code>JavaScript</code> 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是<code>DOM</code>元素的事件冒泡。使用事件代理的好处是可以提高性能。</p><h4 id="attribute和property的区别是什么？"><a href="#attribute和property的区别是什么？" class="headerlink" title="attribute和property的区别是什么？"></a>attribute和property的区别是什么？</h4><p><code>attribute</code>是<code>dom</code>元素在文档中作为<code>html</code>标签拥有的属性；</p><p><code>property</code>就是<code>dom</code>元素在<code>js</code>中作为对象拥有的属性。</p><p>所以：</p><p>对于<code>html</code>的标准属性来说，<code>attribute</code>和<code>property</code>是同步的，是会自动更新的，</p><p>但是对于自定义的属性来说，他们是不同步的，</p><h4 id="说说网络分层里七层模型是哪七层"><a href="#说说网络分层里七层模型是哪七层" class="headerlink" title="说说网络分层里七层模型是哪七层"></a>说说网络分层里七层模型是哪七层</h4><ul><li>应用层：应用层、表示层、会话层（从上往下）（<code>HTTP、FTP、SMTP、DNS</code>）</li><li>传输层（<code>TCP</code>和<code>UDP</code>）</li><li>网络层（<code>IP</code>）</li><li>物理和数据链路层（以太网）</li></ul><blockquote><p>每一层的作用如下：</p></blockquote><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）</span><br><span class="line">数据链路层：将比特组装成帧和点到点的传递（帧Frame）</span><br><span class="line">网络层：负责数据包从源到宿的传递和网际互连（包PackeT）</span><br><span class="line">传输层：提供端到端的可靠报文传递和错误恢复（段Segment）</span><br><span class="line">会话层：建立、管理和终止会话（会话协议数据单元SPDU）</span><br><span class="line">表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）</span><br><span class="line">应用层：允许访问OSI环境的手段（应用协议数据单元APDU）12345678</span><br></pre></td></tr></table></figure><blockquote><p>各种协议</p></blockquote><p><code>ICMP协议</code>： 因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。<br><code>TFTP协议</code>： 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。<br><code>HTTP协议</code>： 超文本传输协议，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。<br><code>DHCP协议</code>： 动态主机配置协议，是一种让系统得以连接到网络上，并获取所需要的配置参数手段。</p><h4 id="说说mongoDB和MySQL的区别"><a href="#说说mongoDB和MySQL的区别" class="headerlink" title="说说mongoDB和MySQL的区别"></a>说说mongoDB和MySQL的区别</h4><p><code>MySQL</code>是传统的关系型<a href="http://lib.csdn.net/base/mysql" target="_blank" rel="noopener">数据库</a>，<code>MongoDB</code>则是非关系型<a href="http://lib.csdn.net/base/mysql" target="_blank" rel="noopener">数据库</a></p><p><code>MongoDB</code>以<code>BSON</code>结构（二进制）进行存储，对海量数据存储有着很明显的优势。</p><p>对比传统关系型数据库,NoSQL有着非常显著的性能和扩展性优势，与关系型数据库相比，MongoDB的优点有：<br>①弱一致性（最终一致），更能保证用户的访问速度：<br>②文档结构的存储方式，能够更便捷的获取数据。</p><h4 id="讲讲304缓存的原理"><a href="#讲讲304缓存的原理" class="headerlink" title="讲讲304缓存的原理"></a>讲讲304缓存的原理</h4><p>服务器首先产生<code>ETag</code>，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。</p><p>304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件</p><p>客户端请求一个页面（A）。 服务器返回页面A，并在给<code>A</code>加上一个<code>ETag</code>。 客户端展现该页面，并将页面连同<code>ETag</code>一起缓存。 客户再次请求页面<code>A</code>，并将上次请求时服务器返回的<code>ETag</code>一起传递给服务器。 服务器检查该<code>ETag</code>，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应<code>304</code>（未修改——<code>Not Modified</code>）和一个空的响应体。</p><h4 id="什么样的前端代码是好的"><a href="#什么样的前端代码是好的" class="headerlink" title="什么样的前端代码是好的"></a>什么样的前端代码是好的</h4><p>高复用低耦合，这样文件小，好维护，而且好扩展。</p>]]></content>
    
    <summary type="html">
    
      &lt;h4 id=&quot;一些开放性题目&quot;&gt;&lt;a href=&quot;#一些开放性题目&quot; class=&quot;headerlink&quot; title=&quot;一些开放性题目&quot;&gt;&lt;/a&gt;一些开放性题目&lt;/h4&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;9&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2.项目介绍&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3.如何看待前端开发？&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4.平时是如何学习前端开发的？&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5.未来三到五年的规划是怎样的？&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
    
    </summary>
    
    
      <category term="移动端" scheme="http://loeuy.cn/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>ES6函数新增的特性</title>
    <link href="http://loeuy.cn/ES6_comfn.html"/>
    <id>http://loeuy.cn/ES6_comfn.html</id>
    <published>2017-06-14T06:09:53.000Z</published>
    <updated>2018-05-27T13:52:21.953Z</updated>
    
    <content type="html"><![CDATA[<h2 id="带默认参数的函数"><a href="#带默认参数的函数" class="headerlink" title="带默认参数的函数"></a>带默认参数的函数</h2><blockquote><p>JavaScript函数的最大的一个特点就是在传递参数的时候，参数的个数不受限制的。为了健壮性考虑，一般在函数内部需要做一些默认值的处理。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">makeRequest</span>(<span class="params">url, timeout, callback</span>) </span>&#123;</span><br><span class="line">    timeout = timeout || <span class="number">2000</span>;</span><br><span class="line">    callback = callback || <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><a id="more"></a><p>其实上面的默认值方法有个bug：当timeout是0的时候也会当做假值来处理，从而给赋值默认值2000.</p><blockquote><p>ES6从语言层面面上增加了 <strong>默认值的</strong> 支持。看下面的代码：</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//这个函数如果只传入第一个参数，后面两个不传入，则会使用默认值。如果后面两个也传入了参数，则不会使用默认值。</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">makeRequest</span>(<span class="params">url, timeout = <span class="number">2000</span>, callback = function(</span>) </span>&#123;&#125;) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 其余代码</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="默认参数对-arguments-对象的影响"><a href="#默认参数对-arguments-对象的影响" class="headerlink" title="默认参数对 arguments 对象的影响"></a>默认参数对 arguments 对象的影响</h2><blockquote><p>在非严格模式下，arguments总是能反映出命名参数的变化。看下面的代码：</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">        <span class="comment">//非严格模式</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">0</span>] === a); <span class="comment">//true</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">1</span>] === b); <span class="comment">//true</span></span><br><span class="line">        a = <span class="number">10</span>;</span><br><span class="line">        b = <span class="number">20</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">0</span>] === a); <span class="comment">//true</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">1</span>] === b); <span class="comment">//true</span></span><br><span class="line">    &#125;</span><br><span class="line">    foo(<span class="number">1</span>, <span class="number">2</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p><strong>在ES5的严格模式下</strong>，arguments只反映参数的初始值，而不再反映命名参数的变化！</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">        <span class="comment">//严格模式</span></span><br><span class="line"><span class="meta">        "use strict"</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">0</span>] === a); <span class="comment">//true</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">1</span>] === b); <span class="comment">//true</span></span><br><span class="line">        a = <span class="number">10</span>;</span><br><span class="line">        b = <span class="number">20</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">0</span>] === a); <span class="comment">//false。  修改a的值不会影响到arguments[0]的值</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">1</span>] === b); <span class="comment">//false</span></span><br><span class="line">    &#125;</span><br><span class="line">    foo(<span class="number">1</span>, <span class="number">2</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>当使用ES6参数默认值的时候，不管是否是在严格模式下，都和ES5的严格模式相同。看下面的代码：</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, b = <span class="number">30</span></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">0</span>] === a); <span class="comment">//true</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">1</span>] === b); <span class="comment">//true</span></span><br><span class="line">        a = <span class="number">10</span>;</span><br><span class="line">        b = <span class="number">20</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">0</span>]  === a); <span class="comment">//false。  由于b使用了默认值。虽然a没有使用默认值，但是仍然表现的和严格模式一样。</span></span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">1</span>] === b); <span class="comment">//false。  b使用了默认值，所以表现的和严格模式一样。</span></span><br><span class="line">    &#125;</span><br><span class="line">    foo(<span class="number">1</span>, <span class="number">2</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：如果这样调用foo(1),则 a == 1， b == 30， arguments[0] == 1, arguments[1] == undefined。也就是说默认值并不会赋值给arguments参数。</p></blockquote><h2 id="默认参数表达式-Default-Parameter-Expressions"><a href="#默认参数表达式-Default-Parameter-Expressions" class="headerlink" title="默认参数表达式 (Default Parameter Expressions)"></a>默认参数表达式 (<strong>Default Parameter Expressions</strong>)</h2><blockquote><p>参数的默认值，也可以是一个表达式或者函数调用等。看下面的代码</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">getValue</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">5</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">first, second = getValue(</span>)) </span>&#123; <span class="comment">//表示使用getValue这个函数的返回值作为second的默认值。</span></span><br><span class="line">        <span class="keyword">return</span> first + second;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">1</span>, <span class="number">1</span>));     <span class="comment">// 2.  调用add函数的时候，传入了第二个参数，则以传入的参数为准。</span></span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">1</span>));        <span class="comment">// 6。 调用add函数的时候，没有传入第二个参数，则会调用getValue函数。</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>有一点需要要注意：getValue()只会在调用add且不传入第二个参数的时候才会去调用。不是在解析阶段调用的。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="number">5</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">getValue</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> value++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">first, second = getValue(</span>)) </span>&#123;  <span class="comment">//</span></span><br><span class="line">        <span class="keyword">return</span> first + second;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">1</span>, <span class="number">1</span>));     <span class="comment">// 2</span></span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">1</span>));        <span class="comment">// 6。 </span></span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">1</span>));        <span class="comment">// 7</span></span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">1</span>));        <span class="comment">// 8</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>由于默认值可以表达式，所以我们甚至可以使用前面的参数作为后面参数的默认值。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">first, second = first</span>) </span>&#123;  <span class="comment">// 使用第一个参数作为第二个参数的默认值</span></span><br><span class="line">        <span class="keyword">return</span> first + second;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><blockquote><p>注意：可以把前面的参数作为后面参数的默认值，但是不能把后面的参数作为第一个参数的默认值。这可以前面说的let和const的暂存性死区一个意思。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">first = second, second</span>)) </span>&#123;  <span class="comment">// 这种写法是错误的</span></span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> first + second;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="未命名参数问题"><a href="#未命名参数问题" class="headerlink" title="未命名参数问题"></a>未命名参数问题</h2><blockquote><p>Javascript并不限制传入的参数的数量。在调用函数的时候，传入的实参的个数超过形参的个数的时候，超过的部分就成为了未命名参数。在ES5之前，我们一般可以通过arguments对象来获取到未命名参数的值。但是罗显繁琐。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(a);</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[<span class="number">1</span>])  <span class="comment">//取得传入的多余的参数。</span></span><br><span class="line">    &#125;</span><br><span class="line">    foo(<span class="number">2</span>, <span class="number">3</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>ES6，提供了一种更加优雅处理未命名参数的问题：<strong>剩余参数</strong>( <strong>Rest Parameters</strong> )</p><p>语法：function a(a, … b){ }   </p><p>剩余参数使用三个点( … )和变量名来表示。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a, ...b</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(a);</span><br><span class="line">        <span class="built_in">console</span>.log(b <span class="keyword">instanceof</span> <span class="built_in">Array</span>);  <span class="comment">//true  .多余的参数都被放入了b中。b其实就是一个数组。</span></span><br><span class="line">    &#125;</span><br><span class="line">    foo(<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">6</span>);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：</p></blockquote><ol><li>函数最多只能有一个剩余参数b。而且这个剩余参数必须位于参数列表的最后位置。</li><li>虽然有了剩余参数，但是arguments仍然存在，但是arguments完全无视了剩余参数的存在。</li><li>剩余参数是在函数声明的时候出现的。</li></ol><h2 id="函数中的扩展运算符"><a href="#函数中的扩展运算符" class="headerlink" title="函数中的扩展运算符"></a>函数中的扩展运算符</h2><blockquote><p>例如:Math中的max函数可以返回任意多个参数中的最大值。但是如果这些参数在一个数组中，则没有办法直接传入。以前通用的做法是使用applay方法。</p><p>看下面的代码：</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">let</span> values = [<span class="number">25</span>, <span class="number">50</span>, <span class="number">75</span>, <span class="number">100</span>]</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">Math</span>.max.apply(<span class="built_in">Math</span>, values));  <span class="comment">// 100</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>上面这种方法虽然可行，但是总是不是那么直观。</p><p>使用ES6提供的扩展运算符可以很容易的解决这个问题。在数组前加前缀 … (三个点)。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">let</span> values = [<span class="number">25</span>, <span class="number">50</span>, <span class="number">75</span>, <span class="number">100</span>]</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">Math</span>.max(...values));  <span class="comment">//使用扩展运算符。相当于拆解了数组了。</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.max(...values, <span class="number">200</span>));  <span class="comment">//也可以使用扩展运算符和参数的混用，则这个时候就有 5 个数参与比较了。</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p><strong>注意：剩余参数和扩展运算符都是 使用三个点作为前缀。但是他们使用的位置是不一样的。</strong></p><ol><li><em>**</em>剩余参数是用在函数的声明的时候的参数列表中，而且必须在参数列表的后面</li><li>扩展运算符是用在函数调用的时候作为实参来传递的，在实参中的位置没有限制。</li></ol></blockquote><h1 id="全新的函数：箭头函数（-gt-）"><a href="#全新的函数：箭头函数（-gt-）" class="headerlink" title="全新的函数：箭头函数（=&gt;）"></a>全新的函数：箭头函数（=&gt;）</h1><blockquote><p>ECMAScript 6 最有意思的部分之一就是箭头函数。正如其名，箭头函数由 “箭头”（=&gt;）这种新的语法来定义。</p><p>其实在别的语言中早就有了这种语法结构，不过他们叫拉姆达表达式。</p></blockquote><h2 id="箭头函数语法"><a href="#箭头函数语法" class="headerlink" title="箭头函数语法"></a>箭头函数语法</h2><blockquote><p>基本语法如下：</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(形参列表)=&gt;&#123;</span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><hr><blockquote><p>箭头函数可以赋值给变量，也可以像匿名函数一样直接作为参数传递。</p></blockquote><ul><li>示例1：</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> sum = <span class="function">(<span class="params">num1, num2</span>) =&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> num1 + num2;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(sum(<span class="number">3</span>, <span class="number">4</span>));</span><br><span class="line">    <span class="comment">//前面的箭头函数等同于下面的传统函数</span></span><br><span class="line">    <span class="keyword">var</span> add = <span class="function"><span class="keyword">function</span> (<span class="params">num1, num2</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> num1 + num2;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">2</span>, <span class="number">4</span>))</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><hr><blockquote><p>如果函数体内只有一行代码，则包裹函数体的 <strong>大括号</strong> ({ })完全可以省略。如果有return，return关键字也可以省略。</p><p>如果函数体内有多条语句，则 {} 不能省略。</p></blockquote><ul><li>示例2：</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> sum = <span class="function">(<span class="params">num1, num2</span>) =&gt;</span> num1 + num2;</span><br><span class="line">    <span class="built_in">console</span>.log(sum(<span class="number">5</span>, <span class="number">4</span>));</span><br><span class="line">    <span class="comment">//前面的箭头函数等同于下面的传统函数</span></span><br><span class="line">    <span class="keyword">var</span> add = <span class="function"><span class="keyword">function</span> (<span class="params">num1, num2</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> num1 + num2;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(add(<span class="number">2</span>, <span class="number">4</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">//如果这一行代码是没有返回值的，则方法的返回自也是undefined</span></span><br><span class="line"><span class="keyword">var</span> foo = <span class="function">(<span class="params">num1, num2</span>) =&gt;</span> <span class="built_in">console</span>.log(<span class="string">"aaa"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(foo(<span class="number">3</span>,<span class="number">4</span>));  <span class="comment">//这个地方的返回值就是undefined</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><hr><blockquote><p>如果箭头函数只有一个参数，则包裹参数的小括号可以省略。其余情况下都不可以省略。<strong>当然如果不传入参数也不可以省略</strong></p></blockquote><ul><li>示例3：</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> foo = <span class="function"><span class="params">a</span>=&gt;</span> a+<span class="number">3</span>; <span class="comment">//因为只有一个参数，所以()可以省略</span></span><br><span class="line">    <span class="built_in">console</span>.log(foo(<span class="number">4</span>)); <span class="comment">// 7</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><hr><blockquote><p>如果想直接返回一个js对象，而且还不想添加传统的大括号和return，则必须给整个对象添加一个<strong>小括号 ()</strong></p></blockquote><ul><li>示例4：</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> foo = <span class="function"><span class="params">()</span>=&gt;</span>(&#123;<span class="attr">name</span>:<span class="string">"lisi"</span>, <span class="attr">age</span>:<span class="number">30</span>&#125;);</span><br><span class="line">    <span class="built_in">console</span>.log(foo());</span><br><span class="line"><span class="comment">//等同于下面的；</span></span><br><span class="line"><span class="keyword">var</span> foo1 = <span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">          name:<span class="string">"lisi"</span>,</span><br><span class="line">          age : <span class="number">30</span></span><br><span class="line">      &#125;;</span><br><span class="line">&#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><h2 id="使用箭头函数实现函数自执行"><a href="#使用箭头函数实现函数自执行" class="headerlink" title="使用箭头函数实现函数自执行"></a>使用箭头函数实现函数自执行</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> person = (<span class="function"><span class="params">name</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">                name: name,</span><br><span class="line">                age: <span class="number">30</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    )(<span class="string">"zs"</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(person);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><h2 id="箭头函数中无this绑定-No-this-Binding"><a href="#箭头函数中无this绑定-No-this-Binding" class="headerlink" title="箭头函数中无this绑定(No this Binding)"></a>箭头函数中无this绑定(No this Binding)</h2><blockquote><p>在ES5之前this的绑定是个比较麻烦的问题，稍不注意就达不到自己想要的效果。因为this的绑定和定义位置无关，只和调用方式有关。</p><p><strong>在箭头函数中则没有这样的问题，在箭头函数中，this和定义时的作用域相关，不用考虑调用方式</strong></p><p>箭头函数没有 this 绑定，意味着 this 只能通过查找作用域链来确定。<strong>如果箭头函数被另一个不包含箭头函数的函数囊括，那么 this 的值和该函数中的 this 相等，否则 this 的值为 window。</strong></p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> PageHandler = &#123;</span><br><span class="line">        id: <span class="string">"123456"</span>,</span><br><span class="line">        init: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">document</span>.addEventListener(<span class="string">"click"</span>,</span><br><span class="line">                event =&gt; <span class="keyword">this</span>.doSomething(event.type), <span class="literal">false</span>); <span class="comment">// 在此处this的和init函数内的this相同。</span></span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        doSomething: <span class="function"><span class="keyword">function</span> (<span class="params">type</span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">"Handling "</span> + type + <span class="string">" for "</span> + <span class="keyword">this</span>.id);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    PageHandler.init();</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><p>看下面的一段代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> p = &#123;</span><br><span class="line">        foo:<span class="function"><span class="params">()</span>=&gt;</span><span class="built_in">console</span>.log(<span class="keyword">this</span>)   <span class="comment">//此处this为window</span></span><br><span class="line">    &#125;</span><br><span class="line">    p.foo();  <span class="comment">//输出为 window对象。   并不是我想要的。所以在定义对象的方法的时候应该避免使用箭头函数。</span></span><br><span class="line"><span class="comment">//箭头函数一般用在传递参数，或者在函数内部声明函数的时候使用。</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>说明：</p></blockquote><ol><li>箭头函数作为一个使用完就扔的函数，不能作为构造函数使用。也就是不能使用new 的方式来使用箭头函数。</li><li>由于箭头函数中的this与函数的作用域相关，所以不能使用call、apply、bind来重新绑定this。但是虽然this不能重新绑定，但是还是可以使用call和apply方法去执行箭头函数的。</li></ol><h2 id="无arguments绑定"><a href="#无arguments绑定" class="headerlink" title="无arguments绑定"></a>无arguments绑定</h2><blockquote><p>虽然箭头函数没有自己的arguments对象，但是在箭头函数内部还是可以使用它外部函数的arguments对象的。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">//这里的arguments是foo函数的arguments对象。箭头函数自己是没有 arguments 对象的。</span></span><br><span class="line">        <span class="keyword">return</span> <span class="function"><span class="params">()</span>=&gt;</span><span class="built_in">arguments</span>[<span class="number">0</span>]; <span class="comment">//箭头函数的返回值是foo函数的第一个参数</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> arrow = foo(<span class="number">4</span>, <span class="number">5</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(arrow()); <span class="comment">// 4</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;带默认参数的函数&quot;&gt;&lt;a href=&quot;#带默认参数的函数&quot; class=&quot;headerlink&quot; title=&quot;带默认参数的函数&quot;&gt;&lt;/a&gt;带默认参数的函数&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;JavaScript函数的最大的一个特点就是在传递参数的时候，参数的个数不受限制的。为了健壮性考虑，一般在函数内部需要做一些默认值的处理。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figure class=&quot;highlight javascript&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;makeRequest&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;url, timeout, callback&lt;/span&gt;) &lt;/span&gt;&amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    timeout = timeout || &lt;span class=&quot;number&quot;&gt;2000&lt;/span&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    callback = callback || &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;&amp;#123;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
    
    </summary>
    
    
      <category term="JavaScript" scheme="http://loeuy.cn/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>ES6块级作用域</title>
    <link href="http://loeuy.cn/ES6_let.html"/>
    <id>http://loeuy.cn/ES6_let.html</id>
    <published>2017-06-14T05:51:45.000Z</published>
    <updated>2018-05-27T13:52:21.953Z</updated>
    
    <content type="html"><![CDATA[<h2 id="块级作用域绑定"><a href="#块级作用域绑定" class="headerlink" title="块级作用域绑定"></a>块级作用域绑定</h2><blockquote><p>在ES5之前，不存在块级作用域，在编程的时候很多时候会带来很多的不便，ES6新增了块级作用域，补足了这方面的缺陷。</p></blockquote><p>块级声明指的是该声明的变量无法被代码块外部访问。块作用域，又被称为词法作用域（lexical scopes），可以在如下的条件下创建：</p><ul><li>函数内部</li><li>在代码块（即 {  }）内部</li></ul><p>块级作用域是很多类C语言的工作机制，ECMAScript 6 引入块级声明的目的是增强 JavaScript 的灵活性，同时又能与其它编程语言保持一致。</p><a id="more"></a><h2 id="let声明"><a href="#let声明" class="headerlink" title="let声明"></a>let声明</h2><blockquote><p>使用let声明变量的语法和使用var声明的语法是一样的。<strong>但是let声明的变量的作用域会限制在当前的代码块中。这是let与var的最大区别</strong>。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line">    <span class="keyword">if</span>(a &gt; <span class="number">5</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(b); <span class="comment">//用let声明的变量没有声明提前这一特性，所以此处也访问不到（报错）</span></span><br><span class="line">        <span class="keyword">let</span> b = <span class="number">20</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(b);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(b); <span class="comment">//由于b是在if块中使用let声明的，所以此处无法访问到。（报错）</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：</p></blockquote><ol><li>用 let 声明的变量具有块级作用域，只能在声明的块中访问，在块外面无法访问</li><li>用let声明的变量也没有声明提前这一特性。</li><li>在同一个块中，let声明的变量也不能重复声明。</li><li>在声明变量的时候尽量使用let，慢慢的抛弃var</li></ol><h2 id="const声明-Constant-Declarations"><a href="#const声明-Constant-Declarations" class="headerlink" title="const声明(Constant Declarations)"></a>const声明(Constant Declarations)</h2><blockquote><p>在  ES6 使用const来声明的变量称之为常量。这意味着它们不能再次被赋值。由于这个原因，所有的 const 声明的变量都必须在声明处初始化。const声明的常量和let变量一样也是具有块级作用域的特性。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">20</span>;</span><br><span class="line">    <span class="keyword">if</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> b = <span class="number">20</span>;</span><br><span class="line">        b = <span class="number">30</span>;  <span class="comment">//错误! 常量不能重新赋值</span></span><br><span class="line">        <span class="keyword">const</span> c; <span class="comment">//错误！ 常量声明的同时必须赋值。</span></span><br><span class="line">    &#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>注意：</p></blockquote><ol><li>const的特性除了声明的是常量为，其他与let一样。</li><li>在let和const声明前的这段区域称之为暂存性死区（<strong>The Temporal Dead Zone</strong> —TDZ)。</li><li>使用let和const声明的变量和常量不再是window的属性。  也就是说通过window.a是无法访问到的。</li></ol><h2 id="循环中的块级绑定"><a href="#循环中的块级绑定" class="headerlink" title="循环中的块级绑定"></a>循环中的块级绑定</h2><blockquote><p>使用var声明的循环变量在循环结束后仍然可以访问到。   使用let声明的循环变量，在循环结束之后会立即销毁。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">3</span>; i++)&#123; <span class="comment">// 循环结束之后会立即销毁 i</span></span><br><span class="line">        <span class="built_in">console</span>.log(i);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(i);  <span class="comment">//此处无法访问到 i 。</span></span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><h2 id="循环中的函数"><a href="#循环中的函数" class="headerlink" title="循环中的函数"></a>循环中的函数</h2><blockquote><p>看下面的代码，是输出10个10，而不是0，1，2，…</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> funcs = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">        funcs.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    funcs.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">func</span>) </span>&#123;</span><br><span class="line">        func();     <span class="comment">// 输出 "10" 共10次</span></span><br><span class="line">    &#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>解决办法需要使用函数的自执行特性。</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> funcs = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">    funcs.push((<span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(value);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;(i)));</span><br><span class="line">&#125;</span><br><span class="line">funcs.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">    func();     <span class="comment">// 输出 0，1，2 ... 9</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p><strong>如果使用let声明变量，则完全可以避免前面的问题。 这是ES6规范中专门定义的特性。在for … in和for … of循环中也适用</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="keyword">var</span> funcs = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">        funcs.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    funcs.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">func</span>) </span>&#123;</span><br><span class="line">        func();     <span class="comment">// 输出 0，1，2 ... 9</span></span><br><span class="line">    &#125;)</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>说明：</p></blockquote><ol><li>let 声明使得每次迭代都会创建一个变量 i，所以循环内部创建的函数会获得各自的变量 i 的拷贝。每份拷贝都会在每次迭代的开始被创建并被赋值。</li></ol>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;块级作用域绑定&quot;&gt;&lt;a href=&quot;#块级作用域绑定&quot; class=&quot;headerlink&quot; title=&quot;块级作用域绑定&quot;&gt;&lt;/a&gt;块级作用域绑定&lt;/h2&gt;&lt;blockquote&gt;
&lt;p&gt;在ES5之前，不存在块级作用域，在编程的时候很多时候会带来很多的不便，ES6新增了块级作用域，补足了这方面的缺陷。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;块级声明指的是该声明的变量无法被代码块外部访问。块作用域，又被称为词法作用域（lexical scopes），可以在如下的条件下创建：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;函数内部&lt;/li&gt;
&lt;li&gt;在代码块（即 {  }）内部&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;块级作用域是很多类C语言的工作机制，ECMAScript 6 引入块级声明的目的是增强 JavaScript 的灵活性，同时又能与其它编程语言保持一致。&lt;/p&gt;
    
    </summary>
    
    
      <category term="JavaScript" scheme="http://loeuy.cn/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>Flex布局</title>
    <link href="http://loeuy.cn/Flex_layout.html"/>
    <id>http://loeuy.cn/Flex_layout.html</id>
    <published>2017-06-05T09:07:50.000Z</published>
    <updated>2018-05-27T13:52:21.954Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Flex布局是什么？"><a href="#Flex布局是什么？" class="headerlink" title="Flex布局是什么？"></a>Flex布局是什么？</h2><p>Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p><p>任何一个容器都可以指定为 Flex 布局。</p><a id="more"></a><h3 id="定义容器的display属性"><a href="#定义容器的display属性" class="headerlink" title="定义容器的display属性"></a>定义容器的display属性</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-flex;</span><br><span class="line">  <span class="attribute">dispaly</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*行内样式*/</span></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-inline-flex;</span><br><span class="line">  <span class="attribute">display</span>: inline-flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="容器样式"><a href="#容器样式" class="headerlink" title="容器样式"></a>容器样式</h3><p><strong>主轴方向（flex-direction）</strong></p><table><thead><tr><th>属性值</th><th>属性的含义</th></tr></thead><tbody><tr><td>row</td><td>左到右（默认）</td></tr><tr><td>row-reverse</td><td>右到左</td></tr><tr><td>column</td><td>上到下</td></tr><tr><td>column-reverse</td><td>下到上</td></tr></tbody></table><p><strong>换行（flex-wrap）</strong></p><table><thead><tr><th>属性值</th><th>属性的含义</th></tr></thead><tbody><tr><td>nowrap</td><td>不换行（默认）</td></tr><tr><td>wrap</td><td>换行</td></tr><tr><td>wrap-reverse</td><td>换行并第一行在下方</td></tr></tbody></table><p><strong>主轴方向和换行简写</strong></p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">flew-flow:&lt;flex-direction&gt;||&lt;flex-wrap&gt;</span><br></pre></td></tr></table></figure><p><strong>主轴对齐方式（justify-content）</strong></p><table><thead><tr><th>属性值</th><th>属性的含义</th></tr></thead><tbody><tr><td>flex-start</td><td>左对齐（默认）</td></tr><tr><td>flex-end</td><td>右对齐</td></tr><tr><td>center</td><td>居中对齐</td></tr><tr><td>space-between</td><td>两端对齐</td></tr><tr><td>space-around</td><td>平均分布</td></tr></tbody></table><p><strong>交叉轴对齐方式（align-items）</strong></p><table><thead><tr><th>属性值</th><th>属性的含义</th></tr></thead><tbody><tr><td>flex-start</td><td>顶部对齐</td></tr><tr><td>flex-end</td><td>底部对齐</td></tr><tr><td>center</td><td>居中对齐</td></tr><tr><td>baseline</td><td>文本基线对齐</td></tr><tr><td>stretch</td><td>如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）</td></tr></tbody></table><h3 id="子元素属性"><a href="#子元素属性" class="headerlink" title="子元素属性"></a>子元素属性</h3><p><strong>排序（order：<number>）</number></strong>：排序，数值越小，越排前，默认为0</p><p><strong>放大（flex-grow: <number>）</number></strong>：放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）</p><p><strong>缩小（flex-shrink:<number>）</number></strong>：缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。</p><p><strong>固定大小（flex-basis:<length> | auto）</length></strong>:固定大小：默认为0，可以设置px值，也可以设置百分比大小</p><p><strong>flex:none | [ &lt;’flex-grow’&gt; &lt;’flex-shrink’&gt;? || &lt;’flex-basis’&gt; ]</strong>：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。</p><p><strong>单独对齐方式（align-self）</strong></p><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>auto</td><td>自动（默认）</td></tr><tr><td>flex-start</td><td>顶部对齐</td></tr><tr><td>flex-end</td><td>底部对齐</td></tr><tr><td>center</td><td>居中对齐</td></tr><tr><td>baseline</td><td>文本基线对齐</td></tr><tr><td>stretch</td><td>上下对齐并铺满</td></tr></tbody></table>]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;Flex布局是什么？&quot;&gt;&lt;a href=&quot;#Flex布局是什么？&quot; class=&quot;headerlink&quot; title=&quot;Flex布局是什么？&quot;&gt;&lt;/a&gt;Flex布局是什么？&lt;/h2&gt;&lt;p&gt;Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。&lt;/p&gt;
&lt;p&gt;任何一个容器都可以指定为 Flex 布局。&lt;/p&gt;
    
    </summary>
    
    
      <category term="css3" scheme="http://loeuy.cn/tags/css3/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript常用函数汇总</title>
    <link href="http://loeuy.cn/js_comfn.html"/>
    <id>http://loeuy.cn/js_comfn.html</id>
    <published>2017-03-15T03:00:20.000Z</published>
    <updated>2018-05-27T13:52:21.956Z</updated>
    
    <content type="html"><![CDATA[<blockquote><p>在很多传统语言（C/C++/Java/C#等）中，函数都是作为一个二等公民存在，你只能用语言的关键字声明一个函数然后调用它，如果需要把函数作为参数传给另一个函数，或是赋值给一个本地变量，又或是作为返回值，就需要通过函数指针(function pointer)、代理(delegate)等特殊的方式周折一番。而在JavaScript世界中函数却是一等公民，它不仅拥有一切传统函数的使用方式（声明和调用），而且可以做到像简单值一样赋值、传参、返回，这样的函数也称之为第一级函数（First-class Function）。不仅如此，JavaScript中的函数还充当了类的构造函数的作用，同时又是一个Function类的实例(instance)。这样的多重身份让JavaScript的函数变得非常重要。</p></blockquote><a id="more"></a><h2 id="1-原生JavaScript实现字符串长度截取"><a href="#1-原生JavaScript实现字符串长度截取" class="headerlink" title="1.原生JavaScript实现字符串长度截取"></a>1.原生JavaScript实现字符串长度截取</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cutstr</span>(<span class="params">str, len</span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> temp;</span><br><span class="line">      <span class="keyword">var</span> icount = <span class="number">0</span>;</span><br><span class="line">      <span class="keyword">var</span> patrn = <span class="regexp">/[^\x00-\xff]/</span>;</span><br><span class="line">      <span class="keyword">var</span> strre = <span class="string">""</span>;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; str.length; i++) &#123;</span><br><span class="line">          <span class="keyword">if</span> (icount &lt; len - <span class="number">1</span>) &#123;</span><br><span class="line">              temp = str.substr(i, <span class="number">1</span>);</span><br><span class="line">              <span class="keyword">if</span> (patrn.exec(temp) == <span class="literal">null</span>) &#123;</span><br><span class="line">                  icount = icount + <span class="number">1</span></span><br><span class="line">              &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                  icount = icount + <span class="number">2</span></span><br><span class="line">              &#125;</span><br><span class="line">              strre += temp</span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">              <span class="keyword">break</span></span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> strre + <span class="string">"..."</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><h2 id="2-原生JavaScript获取域名主机"><a href="#2-原生JavaScript获取域名主机" class="headerlink" title="2.原生JavaScript获取域名主机"></a>2.原生JavaScript获取域名主机</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getHost</span>(<span class="params">url</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> host = <span class="string">"null"</span>;</span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">typeof</span> url == <span class="string">"undefined"</span>|| <span class="literal">null</span> == url) &#123;</span><br><span class="line">            url = <span class="built_in">window</span>.location.href;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">var</span> regex = <span class="regexp">/^\w+\:\/\/([^\/]*).*/</span>;</span><br><span class="line">        <span class="keyword">var</span> match = url.match(regex);</span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">typeof</span> match != <span class="string">"undefined"</span> &amp;&amp; <span class="literal">null</span> != match) &#123;</span><br><span class="line">            host = match[<span class="number">1</span>];</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> host;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="3-原生JavaScript元素显示的通用方法"><a href="#3-原生JavaScript元素显示的通用方法" class="headerlink" title="3.原生JavaScript元素显示的通用方法"></a>3.原生JavaScript元素显示的通用方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">$</span>(<span class="params">id</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> !id ? <span class="literal">null</span> : <span class="built_in">document</span>.getElementById(id);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">display</span>(<span class="params">id</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> obj = $(id);</span><br><span class="line">        <span class="keyword">if</span>(obj.style.visibility) &#123;</span><br><span class="line">            obj.style.visibility = obj.style.visibility == <span class="string">'visible'</span> ? <span class="string">'hidden'</span> : <span class="string">'visible'</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            obj.style.display = obj.style.display == <span class="string">''</span> ? <span class="string">'none'</span> : <span class="string">''</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure><h2 id="4-原生JavaScript实现checkbox全选与全不选"><a href="#4-原生JavaScript实现checkbox全选与全不选" class="headerlink" title="4.原生JavaScript实现checkbox全选与全不选"></a>4.原生JavaScript实现checkbox全选与全不选</h2><pre><code>function checkAll() {    var selectall = document.getElementById(&quot;selectall&quot;);    var allbox = document.getElementsByName(&quot;allbox&quot;);    if (selectall.checked) {        for (var i = 0; i &lt; allbox.length; i++) {            allbox[i].checked = true;        }    } else {        for (var i = 0; i &lt; allbox.length; i++) {            allbox[i].checked = false;        }    }}</code></pre><h2 id="5-原生JavaScript完美判断是否为网址"><a href="#5-原生JavaScript完美判断是否为网址" class="headerlink" title="5.原生JavaScript完美判断是否为网址"></a>5.原生JavaScript完美判断是否为网址</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">IsURL</span>(<span class="params">strUrl</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> regular = <span class="regexp">/^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&amp;?=+,.!\/~%\$]*)?)$/i</span></span><br><span class="line">    <span class="keyword">if</span> (regular.test(strUrl)) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="6-原生JavaScript获得URL中GET参数值"><a href="#6-原生JavaScript获得URL中GET参数值" class="headerlink" title="6.原生JavaScript获得URL中GET参数值"></a>6.原生JavaScript获得URL中GET参数值</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用法：如果地址是 test.htm?t1=1&amp;t2=2&amp;t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">get_get</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">  querystr = <span class="built_in">window</span>.location.href.split(<span class="string">"?"</span>)</span><br><span class="line">  <span class="keyword">if</span>(querystr[<span class="number">1</span>])&#123;</span><br><span class="line">    GETs = querystr[<span class="number">1</span>].split(<span class="string">"&amp;"</span>)</span><br><span class="line">    GET =<span class="keyword">new</span> <span class="built_in">Array</span>()</span><br><span class="line">    <span class="keyword">for</span>(i=<span class="number">0</span>;i&lt;GETs.length;i++)&#123;</span><br><span class="line">      tmp_arr = GETs[i].split(<span class="string">"="</span>)</span><br><span class="line">      key=tmp_arr[<span class="number">0</span>]</span><br><span class="line">      GET[key] = tmp_arr[<span class="number">1</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> querystr[<span class="number">1</span>];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="7-原生JavaScript跨浏览器添加事件"><a href="#7-原生JavaScript跨浏览器添加事件" class="headerlink" title="7.原生JavaScript跨浏览器添加事件"></a>7.原生JavaScript跨浏览器添加事件</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addEvt</span>(<span class="params">oTarget,sEvtType,fnHandle</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(!oTarget)&#123;<span class="keyword">return</span>;&#125;</span><br><span class="line">    <span class="keyword">if</span>(oTarget.addEventListener)&#123;</span><br><span class="line">        oTarget.addEventListener(sEvtType,fnHandle,<span class="literal">false</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(oTarget.attachEvent)&#123;</span><br><span class="line">        oTarget.attachEvent(<span class="string">"on"</span> + sEvtType,fnHandle);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        oTarget[<span class="string">"on"</span> + sEvtType] = fnHandle;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="8-原生JavaScript实现返回顶部的通用方法"><a href="#8-原生JavaScript实现返回顶部的通用方法" class="headerlink" title="8.原生JavaScript实现返回顶部的通用方法"></a>8.原生JavaScript实现返回顶部的通用方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">backTop</span>(<span class="params">btnId</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(btnId);</span><br><span class="line">    <span class="keyword">var</span> d = <span class="built_in">document</span>.documentElement;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="built_in">document</span>.body;</span><br><span class="line">    <span class="built_in">window</span>.onscroll = set;</span><br><span class="line">    btn.style.display = <span class="string">"none"</span>;</span><br><span class="line">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        btn.style.display = <span class="string">"none"</span>;</span><br><span class="line">        <span class="built_in">window</span>.onscroll = <span class="literal">null</span>;</span><br><span class="line">        <span class="keyword">this</span>.timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            d.scrollTop -= <span class="built_in">Math</span>.ceil((d.scrollTop + b.scrollTop) * <span class="number">0.1</span>);</span><br><span class="line">            b.scrollTop -= <span class="built_in">Math</span>.ceil((d.scrollTop + b.scrollTop) * <span class="number">0.1</span>);</span><br><span class="line">            <span class="keyword">if</span> ((d.scrollTop + b.scrollTop) == <span class="number">0</span>) clearInterval(btn.timer, <span class="built_in">window</span>.onscroll = set);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="number">10</span>);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">set</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        btn.style.display = (d.scrollTop + b.scrollTop &gt; <span class="number">100</span>) ? <span class="string">'block'</span>: <span class="string">"none"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">backTop(<span class="string">'goTop'</span>);</span><br></pre></td></tr></table></figure><h2 id="9-原生JavaScript实现全选通用方法"><a href="#9-原生JavaScript实现全选通用方法" class="headerlink" title="9.原生JavaScript实现全选通用方法"></a>9.原生JavaScript实现全选通用方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">checkall</span>(<span class="params">form, prefix, checkall</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> checkall = checkall ? checkall : <span class="string">'chkall'</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; form.elements.length; i++) &#123;</span><br><span class="line">        <span class="keyword">var</span> e = form.elements[i];</span><br><span class="line">        <span class="keyword">if</span>(e.type==<span class="string">"checkbox"</span>)&#123;</span><br><span class="line">            e.checked = form.elements[checkall].checked;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="10-原生JavaScript实现全部取消选择通用方法"><a href="#10-原生JavaScript实现全部取消选择通用方法" class="headerlink" title="10.原生JavaScript实现全部取消选择通用方法"></a>10.原生JavaScript实现全部取消选择通用方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">uncheckAll</span>(<span class="params">form</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;form.elements.length;i++)&#123;</span><br><span class="line">        <span class="keyword">var</span> e = form.elements[i];</span><br><span class="line">        <span class="keyword">if</span> (e.name != <span class="string">'chkall'</span>)</span><br><span class="line">        e.checked=!e.checked;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="11-原生JavaScript获取单选按钮的值"><a href="#11-原生JavaScript获取单选按钮的值" class="headerlink" title="11.原生JavaScript获取单选按钮的值"></a>11.原生JavaScript获取单选按钮的值</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">get_radio_value</span>(<span class="params">field</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(field&amp;&amp;field.length)&#123;    </span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;field.length;i++)&#123;        </span><br><span class="line">            <span class="keyword">if</span>(field[i].checked)&#123;            </span><br><span class="line">                <span class="keyword">return</span> field[i].value;                                </span><br><span class="line">            &#125;            </span><br><span class="line">        &#125;        </span><br><span class="line">    &#125;<span class="keyword">else</span> &#123;        </span><br><span class="line">        <span class="keyword">return</span> ;                </span><br><span class="line">    &#125;    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="12-原生JavaScript获取复选框的值"><a href="#12-原生JavaScript获取复选框的值" class="headerlink" title="12.原生JavaScript获取复选框的值"></a>12.原生JavaScript获取复选框的值</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">get_checkbox_value</span>(<span class="params">field</span>)</span>&#123;    </span><br><span class="line">    <span class="keyword">if</span>(field&amp;&amp;field.length)&#123;    </span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;field.length;i++)&#123;            </span><br><span class="line">            <span class="keyword">if</span>(field[i].checked &amp;&amp; !field[i].disabled)&#123;</span><br><span class="line">                <span class="keyword">return</span> field[i].value;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;        </span><br><span class="line">    &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;            </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="13-原生JavaScript判断变量是否空值"><a href="#13-原生JavaScript判断变量是否空值" class="headerlink" title="13.原生JavaScript判断变量是否空值"></a>13.原生JavaScript判断变量是否空值</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 判断变量是否空值</span></span><br><span class="line"><span class="comment"> * undefined, null, '', false, 0, [], &#123;&#125; 均返回true，否则返回false</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">empty</span>(<span class="params">v</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (<span class="keyword">typeof</span> v)&#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'undefined'</span> : <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'string'</span>    : <span class="keyword">if</span>(trim(v).length == <span class="number">0</span>) <span class="keyword">return</span> <span class="literal">true</span>; <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'boolean'</span>   : <span class="keyword">if</span>(!v) <span class="keyword">return</span> <span class="literal">true</span>; <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'number'</span>    : <span class="keyword">if</span>(<span class="number">0</span> === v) <span class="keyword">return</span> <span class="literal">true</span>; <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'object'</span>    : </span><br><span class="line">            <span class="keyword">if</span>(<span class="literal">null</span> === v) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">            <span class="keyword">if</span>(<span class="literal">undefined</span> !== v.length &amp;&amp; v.length==<span class="number">0</span>) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">            <span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> v)&#123;<span class="keyword">return</span> <span class="literal">false</span>;&#125; <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="14-后记"><a href="#14-后记" class="headerlink" title="14.后记"></a>14.后记</h2><p>本文转自<a href="http://www.jianshu.com/u/5a2fd0b8fb30" target="_blank" rel="noopener">MR_LP___李鹏</a>参考于 <a href="https://zhuanlan.zhihu.com/p/24205965" target="_blank" rel="noopener">小萧ovo</a> 的码农在线，感谢作者。</p>]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;在很多传统语言（C/C++/Java/C#等）中，函数都是作为一个二等公民存在，你只能用语言的关键字声明一个函数然后调用它，如果需要把函数作为参数传给另一个函数，或是赋值给一个本地变量，又或是作为返回值，就需要通过函数指针(function pointer)、代理(delegate)等特殊的方式周折一番。而在JavaScript世界中函数却是一等公民，它不仅拥有一切传统函数的使用方式（声明和调用），而且可以做到像简单值一样赋值、传参、返回，这样的函数也称之为第一级函数（First-class Function）。不仅如此，JavaScript中的函数还充当了类的构造函数的作用，同时又是一个Function类的实例(instance)。这样的多重身份让JavaScript的函数变得非常重要。&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
    
      <category term="JavaScript" scheme="http://loeuy.cn/tags/JavaScript/"/>
    
  </entry>
  
</feed>