Web App 相关技术
往前推2到3年，前端工程师还在忧心忡忡地想，移动互联网时代下，前端是不是没有生存空间了。但今天一看，在我们团队，前端工程师超过一半的工作都是在做移动端的Web或者APP的开发。移动Web或者APP在技术本质上是和做桌面端Web没有本质区别，但是移动端的坑那是非常的多，通过学习这部分内容，让你成为一名桌面移动通吃的前端开发工程师。
概念
- 参考： 移动 Web 开发入门
上面这个 slide 资料讲的非常好，算是一个入门的介绍吧。带我们建立基本的移动 web 开发知识体系和常见问题的实践。包含以下几个方面：
基本概念
Native
本地应用 使用 Java \ Objective-C \ Swift 开发
WebApp
网页应用 html5 开发
Hybrid
混合应用 ooxx(native, web)
对比
视觉
- 设备的像素
- 文字单位使用 rem
- viewport 属性
- 横屏竖屏
- Flex 伸缩布局
- 响应式设计
- 软键盘
- 隐藏地址栏
- 苹果设备添加到主屏图标
- 交互
- Touch
- click 延迟
- Scroll
- Gestures(hammer —A javascript library for multi-touch gestures)
- 手指友好设计
- HTML5 APIS（图像，摇动，声音等）
- 实践
- 屏蔽点击元素时的阴影
- 图像（像素、矢量图标、base64 减少请求、lazyload）
- CSS3（合理使用渐变/圆角/阴影、代替 js 动画、translate3d、解决动画闪烁）
- localStorage
- 避免（iframe、fixed + input）
- SPA 或 Multi page
- can I use
- 压缩合并
- @G/3G 下建立连接时间
调试
- 浏览器自己的调试工具，模拟手机设备
weinre
关于 weinre 我写了一篇博客介绍它。Weinre —WebApp 调试工具
head 标签
参考：
上面的链接详细的讲解了：
- DOCTYPE
- charset
- lang属性
- 优先使用 IE 最新版本和 Chrome
- 360 使用Google Chrome Frame
- SEO 优化部分：页面标题
标签(head 头部必须)，页面关键词 keywords，页面描述内容 description，定义网页作者 author，网页搜索引擎索引方式</li> <li><p>为移动设备添加 viewport</p> <p> <code>viewport</code> 可以让布局在移动浏览器上显示的更好。 通常会写</p> </li> </ul> <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"><<span class="name">meta</span> <span class="attr">name</span> =<span class="string">"viewport"</span> <span class="attr">content</span> =<span class="string">"initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"</span>></span></span><br><span class="line"><span class="comment"><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --></span></span><br></pre></td></tr></table></figure> <ul> <li><p>content 参数：</p> <ul> <li>width viewport 宽度(数值/device-width)</li> <li>height viewport 高度(数值/device-height)</li> <li>initial-scale 初始缩放比例</li> <li>maximum-scale 最大缩放比例</li> <li>minimum-scale 最小缩放比例</li> <li>user-scalable 是否允许用户缩放(yes/no)</li> </ul> </li> <li><p>ios 设备，iOS 图标，Android，Windows 8</p> </li> </ul> <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><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><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="keyword">html</span>></span> <span class="comment"><!-- 使用 HTML5 doctype，不区分大小写 --></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-cmn-Hans"</span>></span> <span class="comment"><!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="comment"><!-- 声明文档使用的字符编码 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">'utf-8'</span>></span></span><br><span class="line"> <span class="comment"><!-- 优先使用 IE 最新版本和 Chrome --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge,chrome=1"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 页面描述 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"description"</span> <span class="attr">content</span>=<span class="string">"不超过150个字符"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 页面关键词 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"keywords"</span> <span class="attr">content</span>=<span class="string">""</span>/></span></span><br><span class="line"> <span class="comment"><!-- 网页作者 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"author"</span> <span class="attr">content</span>=<span class="string">"name, email@gmail.com"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 搜索引擎抓取 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"index,follow"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 为移动设备添加 viewport --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"</span>></span></span><br><span class="line"> <span class="comment"><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- iOS 设备 begin --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-title"</span> <span class="attr">content</span>=<span class="string">"标题"</span>></span></span><br><span class="line"> <span class="comment"><!-- 添加到主屏后的标题（iOS 6 新增） --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-capable"</span> <span class="attr">content</span>=<span class="string">"yes"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-itunes-app"</span> <span class="attr">content</span>=<span class="string">"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"</span>></span></span><br><span class="line"> <span class="comment"><!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-status-bar-style"</span> <span class="attr">content</span>=<span class="string">"black"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 设置苹果工具栏颜色 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"format-detection"</span> <span class="attr">content</span>=<span class="string">"telphone=no, email=no"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 忽略页面中的数字识别为电话，忽略email识别 --></span></span><br><span class="line"> <span class="comment"><!-- 启用360浏览器的极速模式(webkit) --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"renderer"</span> <span class="attr">content</span>=<span class="string">"webkit"</span>></span></span><br><span class="line"> <span class="comment"><!-- 避免IE使用兼容模式 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>></span></span><br><span class="line"> <span class="comment"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"HandheldFriendly"</span> <span class="attr">content</span>=<span class="string">"true"</span>></span></span><br><span class="line"> <span class="comment"><!-- 微软的老式浏览器 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"MobileOptimized"</span> <span class="attr">content</span>=<span class="string">"320"</span>></span></span><br><span class="line"> <span class="comment"><!-- uc强制竖屏 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"screen-orientation"</span> <span class="attr">content</span>=<span class="string">"portrait"</span>></span></span><br><span class="line"> <span class="comment"><!-- QQ强制竖屏 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"x5-orientation"</span> <span class="attr">content</span>=<span class="string">"portrait"</span>></span></span><br><span class="line"> <span class="comment"><!-- UC强制全屏 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"full-screen"</span> <span class="attr">content</span>=<span class="string">"yes"</span>></span></span><br><span class="line"> <span class="comment"><!-- QQ强制全屏 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"x5-fullscreen"</span> <span class="attr">content</span>=<span class="string">"true"</span>></span></span><br><span class="line"> <span class="comment"><!-- UC应用模式 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"browsermode"</span> <span class="attr">content</span>=<span class="string">"application"</span>></span></span><br><span class="line"> <span class="comment"><!-- QQ应用模式 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"x5-page-mode"</span> <span class="attr">content</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="comment"><!-- windows phone 点击无高光 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"msapplication-tap-highlight"</span> <span class="attr">content</span>=<span class="string">"no"</span>></span></span><br><span class="line"> <span class="comment"><!-- iOS 图标 begin --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon-precomposed"</span> <span class="attr">href</span>=<span class="string">"/apple-touch-icon-57x57-precomposed.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon-precomposed"</span> <span class="attr">sizes</span>=<span class="string">"114x114"</span> <span class="attr">href</span>=<span class="string">"/apple-touch-icon-114x114-precomposed.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-icon-precomposed"</span> <span class="attr">sizes</span>=<span class="string">"144x144"</span> <span class="attr">href</span>=<span class="string">"/apple-touch-icon-144x144-precomposed.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- Retina iPad，144x144 像素，可以没有，但推荐有 --></span></span><br><span class="line"> <span class="comment"><!-- iOS 图标 end --></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- iOS 启动画面 begin --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">sizes</span>=<span class="string">"768x1004"</span> <span class="attr">href</span>=<span class="string">"/splash-screen-768x1004.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPad 竖屏 768 x 1004（标准分辨率） --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">sizes</span>=<span class="string">"1536x2008"</span> <span class="attr">href</span>=<span class="string">"/splash-screen-1536x2008.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPad 竖屏 1536x2008（Retina） --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">sizes</span>=<span class="string">"1024x748"</span> <span class="attr">href</span>=<span class="string">"/Default-Portrait-1024x748.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPad 横屏 1024x748（标准分辨率） --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">sizes</span>=<span class="string">"2048x1496"</span> <span class="attr">href</span>=<span class="string">"/splash-screen-2048x1496.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPad 横屏 2048x1496（Retina） --></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">href</span>=<span class="string">"/splash-screen-320x480.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">sizes</span>=<span class="string">"640x960"</span> <span class="attr">href</span>=<span class="string">"/splash-screen-640x960.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"apple-touch-startup-image"</span> <span class="attr">sizes</span>=<span class="string">"640x1136"</span> <span class="attr">href</span>=<span class="string">"/splash-screen-640x1136.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --></span></span><br><span class="line"> <span class="comment"><!-- iOS 启动画面 end --></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- iOS 设备 end --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"msapplication-TileColor"</span> <span class="attr">content</span>=<span class="string">"#000"</span>/></span></span><br><span class="line"> <span class="comment"><!-- Windows 8 磁贴颜色 --></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"msapplication-TileImage"</span> <span class="attr">content</span>=<span class="string">"icon.png"</span>/></span></span><br><span class="line"> <span class="comment"><!-- Windows 8 磁贴图标 --></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"alternate"</span> <span class="attr">type</span>=<span class="string">"application/rss+xml"</span> <span class="attr">title</span>=<span class="string">"RSS"</span> <span class="attr">href</span>=<span class="string">"/rss.xml"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 添加 RSS 订阅 --></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"shortcut icon"</span> <span class="attr">type</span>=<span class="string">"image/ico"</span> <span class="attr">href</span>=<span class="string">"/favicon.ico"</span>/></span></span><br><span class="line"> <span class="comment"><!-- 添加 favicon icon --></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>标题<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure> <h2 id="页面切换动画"><a href="#页面切换动画" class="headerlink" title="页面切换动画"></a>页面切换动画</h2><ul> <li><a target="_blank" rel="noopener" href="http://www.w3cplus.com/mobile/mobile-terminal-refactoring-slider.html">移动端重构系列13——页面切换</a></li> <li><a target="_blank" rel="noopener" href="http://www.w3cplus.com/css3/css3-3d-transform.html">CSS3 3D Transform</a></li> </ul> <p>关于 HammerJS 的一个中文文档</p> <ul> <li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/iamlilinfeng/p/4239957.html">Hammer.js</a></li> </ul> <hr> <h2 id="CSS-Processing"><a href="#CSS-Processing" class="headerlink" title="CSS Processing"></a>CSS Processing</h2><blockquote> <p>CSS语言由于其自身语言设计的问题，加上一些浏览器兼容性问题，往往会使得我们在写它的时候，要写很多冗余代码，或者为了兼容性对同一个样式设定写好几遍。针对这些问题，诞生了CSS预处理和后处理的概念及相关方法、工具。</p> <p>这些工具和方法帮助我们能够更加高效地书写可维护性更强的CSS代码。</p> </blockquote> <p>这里我尝试使用了 Sass，果然很好用。下面记录几个 sass 教程。</p> <ul> <li><a target="_blank" rel="noopener" href="http://www.w3cplus.com/sassguide/">Sass入门-w3cplus</a></li> <li><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2012/06/sass.html">SASS用法指南-阮一峰</a></li> </ul> <h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>首先要有 ruby 环境。</p> <p>由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的 <a target="_blank" rel="noopener" href="https://rubygems.org">https://rubygems.org</a> 源，然后添加淘宝的源 <a target="_blank" rel="noopener" href="https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入">https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入</a> sass 安装命令 <code>gem install sass</code> 了。</p> <pre><code>$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 请确保只有 ruby.taobao.org $ gem install sass </code></pre><h3 id="编译"><a href="#编译" class="headerlink" title="编译"></a>编译</h3><pre><code>sass --watch style.scss:style.css --style expanded </code></pre><hr> <h3 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h3><p><strong><code>rem</code></strong></p> <p>字体单位使用 rem，用户在手机上设置了字体大小时，不会打破布局，造成混乱。</p> <ul> <li><a target="_blank" rel="noopener" href="http://www.w3cplus.com/css3/define-font-size-with-css3-rem">CSS3的REM设置字体大小-w3cplus</a></li> <li><a target="_blank" rel="noopener" href="http://www.iyunlu.com/view/css-xhtml/76.html">响应式十日谈第一日：使用 rem 设置文字大小-一丝</a></li> </ul> <hr> <h2 id="安全"><a href="#安全" class="headerlink" title="安全"></a>安全</h2><blockquote> <p>安全是大家经常容易忽视，但其实一旦出现影响会非常大的问题，尤其对于没有经历过企业开发，或者没有踩过坑的同学，如果等到公司工作，做实际项目后非常容易发生安全问题。</p> </blockquote> <h3 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h3><p>WEB基本攻击大致可以分为三大类：“资源枚举”、“参数操纵” 和 “其它攻击”</p> <ul> <li>资源枚举</li> <li>参数操纵<ul> <li>SQL注入</li> <li>XPath注入</li> <li>cgi命令执行</li> <li>XXS（cross-site scripting跨域脚本攻击）其重点是“跨域”和“客户端执行”<ul> <li>Reflected XSS ——基于反射的XSS攻击。主要依靠站点服务端返回脚本，在客户端触发执行从而发起WEB攻击。</li> <li>DOM-based or local XSS——基于DOM或本地的XSS攻击</li> <li>Stored XSS——基于存储的XSS攻击</li> </ul> </li> <li>会话劫持</li> </ul> </li> <li>其它攻击<ul> <li>CSRF（cross-site request forgery）跨站请求伪造</li> <li>钓鱼攻击指的是网站的伪造，比如ta0bao.com，然后在其中应用XSS等方式发起攻击。</li> <li>拒绝服务（DoS）指的是向网站发起洪水一样的请求（Traffic Floor），导致服务器超负荷并关闭，处理方法常规是采用QoS（Quality of Service）的软硬件解决方案。</li> </ul> </li> </ul> <h3 id="关于-XSS"><a href="#关于-XSS" class="headerlink" title="关于 XSS"></a>关于 XSS</h3><blockquote> <p><strong>跨网站脚本</strong>（Cross-site scripting，通常简称为XSS或跨站脚本或跨站脚本攻击）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。</p> <p>XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java， VBScript， ActiveX， Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。</p> <p>——维基百科</p> </blockquote> <h3 id="XSS-防护"><a href="#XSS-防护" class="headerlink" title="XSS 防护"></a>XSS 防护</h3><ol> <li><p>浏览器解析顺序：</p> <p> HTML Parser >> CSS Parser >> JavaScript Parser</p> </li> <li><p>浏览器解码顺序：</p> <p> HTML Decoding >> URL Decoding >> JavaScript Decoding</p> </li> <li><p>具体的防护方式：</p> <ul> <li>验证输入并且基于语境和按照正确的顺序转义不可信数据<ul> <li>HTML 中的字符串</li> <li>HTML 属性中的字符串</li> <li>事件句柄属性和 JavaScript 中的字符串</li> <li>HTML 属性中的 URL 路径</li> <li>HTML 风格属性和 CSS 中的字符串</li> <li>JavaScript 中的 HTML</li> </ul> </li> <li>始终遵循白名单优于黑名单的做法</li> <li>使用 UTF-8 为默认的字符编码以及设置 content 为 text/html</li> <li>不要将用户可以控制的文本放在<meta>标签前。通过使用不同的字符集注射可以导致 XSS。</li> <li>使用 <!DOCTYPE html></li> <li>使用推荐的 HTTP 响应头进行 XSS 防护</li> <li>防止 CRLF 注入/HTTP 响应拆分</li> <li>禁止 TRACE 和其他非必要方法</li> </ul> </li> </ol> <p>对于 innerHTML 的方式输出的，我们可以采用如下的方式转码</p> <figure class="highlight js"><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">/**</span></span><br><span class="line"><span class="comment"> * 转码 XSS 防护</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">String</span>} str 用户输入的字符串</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> {<span class="type">String</span>} 转码后的字符串</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">changeCode</span>(<span class="params">str</span>) {</span><br><span class="line"> str = str.<span class="title function_">replace</span>(<span class="regexp">/&/g</span>, <span class="string">"&"</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/</g</span>, <span class="string">"<"</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/>/g</span>, <span class="string">">"</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/"/g</span>, <span class="string">"""</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/'/g</span>, <span class="string">"'"</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/\//g</span>, <span class="string">"/"</span>);</span><br><span class="line"> <span class="keyword">return</span> str;</span><br><span class="line">}</span><br></pre></td></tr></table></figure> <hr> <p>参考：</p> <ul> <li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/vajoy/p/4176908.html">浅谈WEB安全性（前端向）</a></li> <li><a target="_blank" rel="noopener" href="http://www.freebuf.com/articles/web/40520.html">XSS的原理分析与解剖</a></li> <li><a target="_blank" rel="noopener" href="http://www.fooying.com/chinese-translationthe-ultimate-xss-protection-cheatsheet-for-developers/">原创翻译：给开发者的终极XSS防护备忘录</a></li> </ul> <hr> <h2 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h2><blockquote> <p>在自己做一些小项目时，可能是学校的一些网站项目，流量可能日均都不超过500，而且大多是校园局域网内访问；或者是开发一些实验室的MIS系统，这辈子你都不会去使用你开发的这个系统。在这样一些项目中，性能优化往往会被你忽略。</p> <p>但是如果你是做一个日均PV数万、数十万、甚至更大的量级，开发的页面会被全国各地，不同网络条件的用户来进行访问。这个时候，性能问题就无法忽视了。在当今的网络条件下，如果你的页面3秒都无法完成首屏渲染，一定会让你的网站流失很多用户。</p> <p>整个网站的性能优化有很多的环节和工作，大多数时候，不是前端工程师单独就能完成的，尤其在职能划分明确的公司中，往往需要前后端、运维、DBA等多个职位协同完成。所以，在我们的课程中，主要让你了解整个性能优化都涉及哪些方面的工作，同时，我们会专注介绍一些在前端领域可以重点关注的技术点。</p> </blockquote> <p>这里就是网页的打开速度，如果你的网页打开速度很慢，那么一定会有用户的流失。所以性能优化很重要。</p> <ul> <li>网页内容<ul> <li>减少http请求次数</li> <li>减少DNS查询次数</li> <li>避免页面跳转</li> <li>缓存Ajax</li> <li>延迟加载</li> <li>提前加载</li> <li>减少DOM元素数量</li> <li>根据域名划分内容</li> <li>减少iframe数量</li> <li>避免404</li> </ul> </li> <li>服务器<ul> <li>使用CDN</li> <li>添加Expires 或Cache-Control报文头</li> <li>Gzip压缩传输文件</li> <li>配置ETags</li> <li>尽早flush输出</li> <li>使用GET Ajax请求</li> <li>避免空的图片src</li> </ul> </li> <li>Cookie<ul> <li>减少Cookie大小</li> <li>页面内容使用无cookie域名</li> </ul> </li> <li>CSS<ul> <li>将样式表置顶</li> <li>避免CSS表达式</li> <li>用\<link>代替@import</li> <li>避免使用Filters</li> </ul> </li> <li>Javascript<ul> <li>将脚本置底</li> <li>使用外部Javascirpt和CSS文件</li> <li>精简Javascript和CSS</li> <li>去除重复脚本</li> <li>减少DOM访问</li> <li>使用智能事件处理</li> </ul> </li> <li>图片<ul> <li>优化图像</li> <li>优化CSS Sprite</li> <li>不要在HTML中缩放图片</li> <li>使用小且可缓存的favicon.ico</li> </ul> </li> <li>移动客户端<ul> <li>保持单个内容小于25KB</li> <li>打包组建成符合文档</li> </ul> </li> </ul> <p>具体细节参考文章：</p> <ul> <li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html">毫秒必争，前端网页性能最佳实践</a></li> </ul> <p>我在 ToDo 这个任务中主要使用了 CDN 来加载静态资源。比如我使用了 <a target="_blank" rel="noopener" href="http://cdn.code.baidu.com/">百度静态资源公共库</a>。引用了里面的 fontawesome，速度果然比在 GitHub 仓库里快很多。下一步是压缩我自己写的静态资源。</p> <p>其他参考资料：</p> <ul> <li><a target="_blank" rel="noopener" href="http://www.oschina.net/translate/front-end-performance-for-web-designers-and-front-end-developers#section:maximising-parallelisation">给网页设计师和前端开发者看的前端性能优化</a></li> <li><a target="_blank" rel="noopener" href="http://www.zhangxinxu.com/wordpress/?p=3152">梳理：提高前端性能方面的处理以及不足</a></li> <li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/mofish/archive/2010/10/12/1849062.html">css sprite原理优缺点及使用</a></li> <li><a target="_blank" rel="noopener" href="http://www.qianduan.net/css-sprites-useful-technique-or-potential-nuisance/">CSS Sprites：鱼翅还是三鹿？</a></li> <li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/leefreeman/p/3998757.html">大型网站的灵魂——性能</a></li> <li><a target="_blank" rel="noopener" href="http://web.jobbole.com/35339/">编写高效的 CSS 选择器</a></li> </ul> <hr> <h2 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h2><blockquote> <p>对于一个复杂项目，特别是多人协作的复杂项目，如何合理划分模块，如何更加方便地进行模块加载，如何管理模块之间的依赖，是一个项目团队都会面临的问题，目前业界已经有了一些较为普遍的解决方案，如AMD。这个部分希望你能够通过学习JavaScript的模块化，学习如何合理地规划项目模块，合理使用模块化工具来优化你的项目代码结构。</p> </blockquote> <p>一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了。</p> <p>根据AMD规范，我们可以使用 <code>define</code> 定义模块，使用 <code>require</code> 调用模块。</p> <p>目前，通行的 js 模块规范主要有两种：<code>CommonJS</code> 和 <code>AMD</code>。</p> <h3 id="AMD规范"><a href="#AMD规范" class="headerlink" title="AMD规范"></a>AMD规范</h3><p>AMD 即 Asynchronous Module Definition，中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范，服务器端的规范是 CommonJS</p> <p>模块将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。</p> <p>AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。</p> <p>详细 API 如下：</p> <ul> <li><a target="_blank" rel="noopener" href="https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88">AMD（中文版）</a>)</li> </ul> <hr> <h3 id="CommonJS规范"><a href="#CommonJS规范" class="headerlink" title="CommonJS规范"></a>CommonJS规范</h3><p>CommonJS 是服务器端模块的规范，Node.js 采用了这个规范。Node.JS 首先采用了 js 模块化的概念。</p> <p>根据 CommonJS 规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为 global 对象的属性。</p> <p>输出模块变量的最好方法是使用 module.exports 对象。</p> <hr> <h3 id="为什么要用-requireJS"><a href="#为什么要用-requireJS" class="headerlink" title="为什么要用 requireJS"></a>为什么要用 requireJS</h3><p>试想一下，如果一个网页有很多的js文件，那么浏览器在下载该页面的时候会先加载js文件，从而停止了网页的渲染，如果文件越多，浏览器可能失去响应。其次，要保证js文件的依赖性，依赖性最大的模块（文件）要放在最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。</p> <p>RequireJS就是为了解决这两个问题而诞生的：</p> <blockquote> <p>（1）实现js文件的异步加载，避免网页失去响应；<br>（2）管理模块之间的依赖性，便于代码的编写和维护。</p> </blockquote> <h4 id="requireJS"><a href="#requireJS" class="headerlink" title="requireJS"></a>requireJS</h4><ul> <li><a target="_blank" rel="noopener" href="http://requirejs.org/">requireJS 官网</a></li> <li><a target="_blank" rel="noopener" href="http://www.requirejs.cn/">requireJS 中文网</a></li> </ul> <hr> <h3 id="AMD和CMD"><a href="#AMD和CMD" class="headerlink" title="AMD和CMD"></a>AMD和CMD</h3><p>CMD（Common Module Definition） 通用模块定义。该规范明确了模块的基本书写格式和基本交互规则。该规范是在国内发展出来的。AMD是依赖关系前置，CMD是按需加载。</p> <blockquote> <p>AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。<br>CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。</p> </blockquote> <ul> <li><a target="_blank" rel="noopener" href="https://github.com/seajs/seajs/issues/242">CMD 模块定义规范</a></li> </ul> <p>对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。</p> <blockquote> <p>AMD:提前执行（异步加载：依赖先执行）+延迟执行<br>CMD:延迟执行（运行到需加载，根据顺序执行）</p> </blockquote> <hr> <h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><ul> <li><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2012/10/javascript_module.html">Javascript模块化编程（一）：模块的写法—阮一峰</a></li> <li><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html">Javascript模块化编程（二）：AMD规范</a></li> <li><a target="_blank" rel="noopener" href="http://www.ruanyifeng.com/blog/2012/11/require_js.html">Javascript模块化编程（三）：require.js的用法</a></li> <li><a target="_blank" rel="noopener" href="http://segmentfault.com/a/1190000000733959">详解 JavaScript 模块开发</a></li> <li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/jinguangguo/archive/2013/04/06/3002515.html?utm_source=tuicool">浅谈模块化的JavaScript</a></li> <li><a target="_blank" rel="noopener" href="http://div.io/topic/430">再谈 SeaJS 与 RequireJS 的差异</a></li> <li>玩转AMD系列 by erik@EFE<ul> <li><a target="_blank" rel="noopener" href="http://efe.baidu.com/blog/dissecting-amd-preface/">玩转AMD - 写在前面</a></li> <li><a target="_blank" rel="noopener" href="http://efe.baidu.com/blog/dissecting-amd-what/">玩转AMD - 设计思路</a></li> <li><a target="_blank" rel="noopener" href="http://efe.baidu.com/blog/dissecting-amd-how/">玩转AMD - 应用实践</a></li> <li><a target="_blank" rel="noopener" href="http://efe.baidu.com/blog/dissecting-amd-loader/">玩转AMD - Loader</a> </li> </ul> </li> </ul> <hr> <h2 id="前端工程化"><a href="#前端工程化" class="headerlink" title="前端工程化"></a>前端工程化</h2><blockquote> <p>业界目前有非常多的前端开发工具，完成一些开发过程中可以自动化完成的工作，提高研发效率，并且可以提高多人协作时的开发过程一致性，提高整个项目的运维效率。</p> <p>在EFE日常工作中，我们是基于EDP，完成项目开发过程中的项目构建、包管理、调试、单测、静态检测、打包、压缩、优化、项目部署等一系列所有工作。</p> </blockquote> <p>注：</p> <p>如果网络不好，可以使用 <a target="_blank" rel="noopener" href="http://npm.taobao.org/">淘宝 NPM 镜像</a>。</p> <h3 id="参考-1"><a href="#参考-1" class="headerlink" title="参考"></a>参考</h3><ul> <li><a target="_blank" rel="noopener" href="http://div.io/topic/439">前端工程与模块化框架</a></li> <li><a target="_blank" rel="noopener" href="http://mweb.baidu.com/p/baidusearch-front-end-road.html">手机百度前端工程化之路</a></li> <li><a target="_blank" rel="noopener" href="http://www.infoq.com/cn/articles/yunlong-on-fis">对话百度前端工程师张云龙：F.I.S与前端工业化</a></li> <li><a target="_blank" rel="noopener" href="https://github.com/ecomfe/edp">EDP</a></li> <li><a target="_blank" rel="noopener" href="http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html">Grunt教程——初涉Grunt</a></li> <li><a target="_blank" rel="noopener" href="http://www.open-open.com/lib/view/open1417068223049.html">gulp入门指南</a></li> <li><a target="_blank" rel="noopener" href="http://www.w3ctech.com/topic/134">Gulp开发教程（翻译）</a></li> <li><a target="_blank" rel="noopener" href="http://www.gulpjs.com.cn/">Gulp 中文网</a></li> <li><a target="_blank" rel="noopener" href="https://github.com/ericdum/mujiang.info/issues/6">npm的package.json中文文档</a></li> </ul> <hr> <h2 id="最终作品"><a href="#最终作品" class="headerlink" title="最终作品"></a>最终作品</h2><p>在任务三中，做了一个 PC 端的 ToDo 应用。任务四是将它优化，以适应移动端设备。</p> <h3 id="ToDo-WebApp-Version"><a href="#ToDo-WebApp-Version" class="headerlink" title="ToDo WebApp Version"></a>ToDo WebApp Version</h3><ul> <li><a target="_blank" rel="noopener" href="https://github.com/baidu-ife/ife/tree/master/task/task0004">任务四要求</a></li> <li><a target="_blank" rel="noopener" href="https://github.com/Gaohaoyang/ToDo-WebApp">源代码</a></li> <li><a target="_blank" rel="noopener" href="http://gaohaoyang.github.io/ToDo-WebApp/">在线 demo</a></li> <li><p>手机查看 ↓ 二维码 ↓</p> <p> <img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="http://7q5cdt.com1.z0.glb.clouddn.com/task4-code-todoWebApp.png" alt="todoWebApp"></p> </li> <li><p><a target="_blank" rel="noopener" href="http://gaohaoyang.github.io">我的博客 XuShiJie</a></p> </li> </ul> <h3 id="Details"><a href="#Details" class="headerlink" title="Details"></a>Details</h3><ul> <li><p><strong>数据存储</strong></p> <p> 以 JSON 模拟数据表的形式存储于 LocalStorage 中</p> <pre><code> 使用数据库的思想，构建3张表。 cateJson 分类 childCateJson 子分类 taskJson 任务 分类表 cate ---------------------- id* | name | child(FK) ---------------------- 子分类表 childCate -------------------------------- id* | pid(FK) | name | child(FK) -------------------------------- 任务表 task ---------------------------------------------- id* | pid(FK) | finish | name | date | content ---------------------------------------------- </code></pre></li> <li><p><strong>使用 <code>Sass</code> 重构了 CSS 代码</strong></p> <p> 使用分块、继承等方式，使得代码更加清晰明了。</p> </li> <li><p><strong>响应式布局</strong></p> <p> 针对手机端细节做了很多调整，更符合手机上的视觉交互习惯。</p> </li> <li><p><strong>加入页面切换效果</strong></p> <p> 使用 <code>translate3d()</code>，纯 CSS3 切换动画效果。</p> </li> <li><p><strong>处理了 XSS 防护</strong></p> <p> 对可能造成破坏的字符进行转码。</p> </li> <li><p><strong>性能优化</strong></p> <p> 使用 CDN 处理静态资源 fontAwesome，压缩静态资源等</p> </li> <li><p><strong>模块化</strong></p> <p> 使用 requireJS 模块化 JavaScript 代码。重构 JavaScript 代码。优化之前写的耦合性高的绑定事件，重新绑定事件，降低耦合性。期间根据具体需求重写了事件代理的代码。</p> </li> <li><p><strong>前端工程化</strong></p> <p> 使用 gulp，自动编译 Sass，压缩 CSS 和 JavaScript 代码。并且配置了自动流程。</p> </li> </ul> <hr> <h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><h3 id="webkit-tap-highlight-color-属性"><a href="#webkit-tap-highlight-color-属性" class="headerlink" title="-webkit-tap-highlight-color 属性"></a><code>-webkit-tap-highlight-color</code> 属性</h3><p>感谢 <a target="_blank" rel="noopener" href="https://github.com/fiona23">fiona</a> 指出。</p> <p>safari移动端点击的时候会闪一下加上 <code>-webkit-tap-highlight-color: transparent;</code> 就不会闪了。</p> <p>参考：</p> <ul> <li><a target="_blank" rel="noopener" href="http://www.css88.com/webkit/-webkit-tap-highlight-color/"><code>-webkit-tap-highlight-color</code> css88</a></li> <li><a target="_blank" rel="noopener" href="http://ued.ctrip.com/webkitcss/prop/tap-highlight-color.html"><code>-webkit-tap-highlight-color</code> 属性</a></li> </ul> <hr> <h3 id="textarea-标签-disabled-颜色"><a href="#textarea-标签-disabled-颜色" class="headerlink" title="textarea 标签 disabled 颜色"></a>textarea 标签 disabled 颜色</h3><ul> <li><p>为什么用 disabled 属性？</p> <p> 因为我发现仅仅使用 readonly 属性，在 IE 下是显示光标的。于是使用 disabled。</p> </li> <li><p>出现的问题</p> <p> 各家浏览器对于 disabled 属性有自己的样式设定，比如 IE 下是灰色的。苹果设备下也是。改变这些样式的方法也不是统一的。如果要兼容 Safari 必须加上</p> </li> </ul> <figure class="highlight plaintext"><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: #fff;</span><br><span class="line">-webkit-text-fill-color: rgba(0, 0, 0, 1);</span><br><span class="line">-webkit-opacity: 1;</span><br></pre></td></tr></table></figure> <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><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">textarea</span><span class="selector-pseudo">:disabled</span> {</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#000</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line"> -webkit-text-fill-<span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">1</span>);</span><br><span class="line"> -webkit-<span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure> <ul> <li>参考：<a target="_blank" rel="noopener" href="http://stackoverflow.com/a/4648315">Disabled input text color 中的评论</a></li> </ul> </article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://blog.xushijie.top">虚世界</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://blog.xushijie.top/2015/06/17/2015-06-17-web-app/">https://blog.xushijie.top/2015/06/17/2015-06-17-web-app/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://blog.xushijie.top" target="_blank">虚世界的博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JavaScript/">JavaScript</a></div><div class="post_share"><div class="social-share" data-image="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/f59149dffc674654b6a49d3d1ac98a1d.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2015/06/18/2015-06-18-weinre/"><img class="prev-cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/eebc004167914634b483024d267fb6e6.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Weinre --WebApp 调试工具</div></div></a></div><div class="next-post pull-right"><a href="/2015/06/15/2015-06-15-JavaScript-Object-Oriented/"><img class="next-cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/2243510cb87847bf9e81e1c31e87f20a.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">JavaScript 面向对象</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2015/04/06/2015-04-06-arrays-similar/" title="判断两个数组是否相似 (arraysSimilar)"><img class="cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/8f1031c9882e11ebb6edd017c2d2eca2.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-04-06</div><div class="title">判断两个数组是否相似 (arraysSimilar)</div></div></a></div><div><a href="/2015/05/20/2015-05-20-scope/" title="JavaScript 作用域和作用域链"><img class="cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/bb07e6e2e3f4468695163051120d1cf6.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-05-20</div><div class="title">JavaScript 作用域和作用域链</div></div></a></div><div><a href="/2015/06/01/2015-06-01-lenovo-front-end-interview/" title="联想服务前端实习面试经历"><img class="cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/a9f0f25258404a01bdab603fba28c660.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-06-01</div><div class="title">联想服务前端实习面试经历</div></div></a></div><div><a href="/2015/06/11/2015-06-11-JavaScript-function/" title="JavaScript 函数"><img class="cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/b4453269d38c4d35b9ba6456e3c9c651.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-06-11</div><div class="title">JavaScript 函数</div></div></a></div><div><a href="/2015/06/12/2015-06-12-JavaScript-this/" title="JavaScript 中的 this"><img class="cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/83b2bbfbcb2e49d08a11846b3129cdfd.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-06-12</div><div class="title">JavaScript 中的 this</div></div></a></div><div><a href="/2015/06/14/2015-06-14-JavaScript-closure/" title="JavaScript 中的闭包"><img class="cover" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/501b64f5584d40218cb08f23856beca8.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-06-14</div><div class="title">JavaScript 中的闭包</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">虚世界</div><div class="author-info__description">人生海海，山山而川，不过尔尔</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">40</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">13</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">16</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">欢迎光临本站,本站已从Jekyll重构至Hexo！</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5"><span class="toc-number">1.</span> <span class="toc-text">概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#head-%E6%A0%87%E7%AD%BE"><span class="toc-number">2.</span> <span class="toc-text">head 标签</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/09/28/2018-06-01-animation/" title="提升用户体验的前端动画"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/5313f6e8882211ebb6edd017c2d2eca2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="提升用户体验的前端动画"/></a><div class="content"><a class="title" href="/2022/09/28/2018-06-01-animation/" title="提升用户体验的前端动画">提升用户体验的前端动画</a><time datetime="2022-09-28T07:30:24.880Z" title="发表于 2022-09-28 15:30:24">2022-09-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/09/28/2018-10-10-vscode-plugin-schedule/" title="vscode 插件 markdown-schedule-snippet"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/93c6df602a0d431590b700260599c691.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="vscode 插件 markdown-schedule-snippet"/></a><div class="content"><a class="title" href="/2022/09/28/2018-10-10-vscode-plugin-schedule/" title="vscode 插件 markdown-schedule-snippet">vscode 插件 markdown-schedule-snippet</a><time datetime="2022-09-28T07:30:24.880Z" title="发表于 2022-09-28 15:30:24">2022-09-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/09/28/2018-09-10-lottie/" title="从设计师和开发的角度使用 lottie"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/295c6e44ce304e7b81445f1d087e05cb.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="从设计师和开发的角度使用 lottie"/></a><div class="content"><a class="title" href="/2022/09/28/2018-09-10-lottie/" title="从设计师和开发的角度使用 lottie">从设计师和开发的角度使用 lottie</a><time datetime="2022-09-28T07:30:24.880Z" title="发表于 2022-09-28 15:30:24">2022-09-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/09/28/2016-06-14-how-to-use-babel/" title="如何使用 babel"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/833819801f084016a1242873ca8895bf.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="如何使用 babel"/></a><div class="content"><a class="title" href="/2022/09/28/2016-06-14-how-to-use-babel/" title="如何使用 babel">如何使用 babel</a><time datetime="2022-09-28T07:30:24.879Z" title="发表于 2022-09-28 15:30:24">2022-09-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/09/28/2016-07-07-git-clone-not-master-branch/" title="Git 如何 clone 非 master 分支的代码"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/71961840ea4d4ddcb7eebecc04ddfe16.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Git 如何 clone 非 master 分支的代码"/></a><div class="content"><a class="title" href="/2022/09/28/2016-07-07-git-clone-not-master-branch/" title="Git 如何 clone 非 master 分支的代码">Git 如何 clone 非 master 分支的代码</a><time datetime="2022-09-28T07:30:24.879Z" title="发表于 2022-09-28 15:30:24">2022-09-28</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2020 - 2022 By 虚世界</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{ const init = () => { twikoo.init(Object.assign({ el: '#twikoo-wrap', envId: 'https://kwikoo.xushijie.top/', region: '', onCommentLoaded: function () { btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)')) } }, null)) } const getCount = () => { const countELement = document.getElementById('twikoo-count') if(!countELement) return twikoo.getCommentsCount({ envId: 'https://kwikoo.xushijie.top/', region: '', urls: [window.location.pathname], includeReply: false }).then(function (res) { countELement.innerText = res[0].count }).catch(function (err) { console.error(err); }); } const runFn = () => { init() GLOBAL_CONFIG_SITE.isPost && getCount() } const loadTwikoo = () => { if (typeof twikoo === 'object') { setTimeout(runFn,0) return } getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(runFn) } if ('Twikoo' === 'Twikoo' || !true) { if (true) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo) else loadTwikoo() } else { window.loadOtherComment = () => { loadTwikoo() } } })()</script></div><script src="https://cdn.staticfile.org/twikoo/1.6.4/twikoo.all.min.js"></script> <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script> <script type="text/javascript" src="/js/nav.js"></script> <script type="text/javascript" src="/js/title.js"></script> <div class="aplayer no-destroy" data-id="1708664797" data-server="tencent" data-type="playlist" data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div>include random.pug<!-- hexo injector body_end start --><script data-pjax> function butterfly_clock_injector_config(){ var parent_div_git = document.getElementsByClassName('sticky_layout')[0]; var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>'; console.log('已挂载butterfly_clock') parent_div_git.insertAdjacentHTML("afterbegin",item_html) } var elist = 'null'.split(','); var cpage = location.pathname; var epage = 'all'; var flag = 0; for (var i=0;i<elist.length;i++){ if (cpage.includes(elist[i])){ flag++; } } if ((epage ==='all')&&(flag == 0)){ butterfly_clock_injector_config(); } else if (epage === cpage){ butterfly_clock_injector_config(); } </script><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script data-pjax src="https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.js"></script><script data-pjax> function butterfly_footer_beautify_injector_config(){ var parent_div_git = document.getElementById('footer-wrap'); var item_html = '<div id="workboard"></div><div id="ghbdages" style="overflow:hidden;max-height:90px;height:auto;text-align:center;margin-top:10px"><div class="swiper-wrapper"><div class="swiper-slide"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" title="博客框架为Hexo_v5.4.0"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" alt=""/></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" title="主题版本Butterfly_v3.8.2"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" alt=""/></a><a class="github-badge" target="_blank" href="https://www.jsdelivr.com/" style="margin-inline:5px" title="本站使用JsDelivr为静态资源提供CDN加速"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" alt=""/></a></div><div class="swiper-slide"><a class="github-badge" target="_blank" href="https://vercel.com/" style="margin-inline:5px" title="本站采用双线部署，默认线路托管于Vercel"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel" alt=""/></a><a class="github-badge" target="_blank" href="https://vercel.com/" style="margin-inline:5px" title="本站采用双线部署，联通线路托管于Coding"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" alt=""/></a><a class="github-badge" target="_blank" href="https://github.com/" style="margin-inline:5px" title="本站项目由Github托管"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" alt=""/></a></div><div class="swiper-slide"><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" alt=""/></a></div></div></div><style>a.github-badge:hover:before {display:none}</style>'; console.log('已挂载butterfly_footer_beautify') parent_div_git.insertAdjacentHTML("beforeend",item_html) } var elist = 'null'.split(','); var cpage = location.pathname; var epage = 'all'; var flag = 0; for (var i=0;i<elist.length;i++){ if (cpage.includes(elist[i])){ flag++; } } if ((epage ==='all')&&(flag == 0)){ butterfly_footer_beautify_injector_config(); } else if (epage === cpage){ butterfly_footer_beautify_injector_config(); } </script><script async src="https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js"></script><script async src="/js/ali_font.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item'); for(var i = 0;i<arr.length;i++){ arr[i].classList.add('wow'); arr[i].classList.add('animate__zoomIn'); arr[i].setAttribute('data-wow-duration', '500ms'); arr[i].setAttribute('data-wow-delay', '200ms'); arr[i].setAttribute('data-wow-offset', '30'); arr[i].setAttribute('data-wow-iteration', '1'); }</script><script async="async">var arr = document.getElementsByClassName('card-widget'); for(var i = 0;i<arr.length;i++){ arr[i].classList.add('wow'); arr[i].classList.add('animate__zoomIn'); arr[i].setAttribute('data-wow-duration', ''); arr[i].setAttribute('data-wow-delay', '100ms'); arr[i].setAttribute('data-wow-offset', ''); arr[i].setAttribute('data-wow-iteration', ''); }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card'); for(var i = 0;i<arr.length;i++){ arr[i].classList.add('wow'); arr[i].classList.add('animate__flipInY'); arr[i].setAttribute('data-wow-duration', '600s'); arr[i].setAttribute('data-wow-delay', ''); arr[i].setAttribute('data-wow-offset', ''); arr[i].setAttribute('data-wow-iteration', ''); }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card'); for(var i = 0;i<arr.length;i++){ arr[i].classList.add('wow'); arr[i].classList.add('animate__animated'); arr[i].setAttribute('data-wow-duration', '600s'); arr[i].setAttribute('data-wow-delay', ''); arr[i].setAttribute('data-wow-offset', ''); arr[i].setAttribute('data-wow-iteration', ''); }</script><script async="async">var arr = document.getElementsByClassName('article-sort-item'); for(var i = 0;i<arr.length;i++){ arr[i].classList.add('wow'); arr[i].classList.add('animate__slideInRight'); arr[i].setAttribute('data-wow-duration', '300ms'); arr[i].setAttribute('data-wow-delay', ''); arr[i].setAttribute('data-wow-offset', ''); arr[i].setAttribute('data-wow-iteration', ''); }</script><script async="async">var arr = document.getElementsByClassName('site-card'); for(var i = 0;i<arr.length;i++){ arr[i].classList.add('wow'); arr[i].classList.add('animate__flipInY'); arr[i].setAttribute('data-wow-duration', '600s'); arr[i].setAttribute('data-wow-delay', ''); arr[i].setAttribute('data-wow-offset', ''); arr[i].setAttribute('data-wow-iteration', ''); }</script><script async="async">var arr = document.getElementsByClassName('site-card'); for(var i = 0;i<arr.length;i++){ arr[i].classList.add('wow'); arr[i].classList.add('animate__animated'); arr[i].setAttribute('data-wow-duration', '600s'); arr[i].setAttribute('data-wow-delay', ''); arr[i].setAttribute('data-wow-offset', ''); arr[i].setAttribute('data-wow-iteration', ''); }</script></div><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js"></script><script data-pjax> function butterfly_swiper_injector_config(){ var parent_div_git = document.getElementById('recent-posts'); var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2018/10/27/2018-10-27-Vue2.0 + webpack + TypeScript-build-project/" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/11e519530d4f4062848710c89955d366.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2018-10-27</span><a class="blog-slider__title" href="2018/10/27/2018-10-27-Vue2.0 + webpack + TypeScript-build-project/" alt="">webpack + TypeScript + Vue2.0 从零开始搭建项目 </a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" href="2018/10/27/2018-10-27-Vue2.0 + webpack + TypeScript-build-project/" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2018/11/05/2018-11-05-React-Introduction-to-the-knowledge/" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/011a847f4b2745dea1566915248357a5.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2018-11-05</span><a class="blog-slider__title" href="2018/11/05/2018-11-05-React-Introduction-to-the-knowledge/" alt="">React知识汇总</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" href="2018/11/05/2018-11-05-React-Introduction-to-the-knowledge/" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2019/03/20/2019-3-20-Hexo-cli-create-blog/" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/9ddc411c3efc46ab956758792e285828.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2019-03-20</span><a class="blog-slider__title" href="2019/03/20/2019-3-20-Hexo-cli-create-blog/" alt="">Hexo-cli + gihub 搭建个人博客</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" href="2019/03/20/2019-3-20-Hexo-cli-create-blog/" alt="">详情 </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2019/05/10/2019-05-10-swagger2.0-OpenAPI/" alt=""><img width="48" height="48" src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://xsj-tfs.oss-cn-hangzhou.aliyuncs.com/blog/3dd0f54418b14e67b852646e60c218ce.jpg" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2019-05-10</span><a class="blog-slider__title" href="2019/05/10/2019-05-10-swagger2.0-OpenAPI/" alt="">swagger2.0 swagger UI</a><div class="blog-slider__text">swagger2.0 swagger UI</div><a class="blog-slider__button" href="2019/05/10/2019-05-10-swagger2.0-OpenAPI/" alt="">详情 </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>'; console.log('已挂载butterfly_swiper') parent_div_git.insertAdjacentHTML("afterbegin",item_html) } var elist = 'undefined'.split(','); var cpage = location.pathname; var epage = 'all'; var flag = 0; for (var i=0;i<elist.length;i++){ if (cpage.includes(elist[i])){ flag++; } } if ((epage ==='all')&&(flag == 0)){ butterfly_swiper_injector_config(); } else if (epage === cpage){ butterfly_swiper_injector_config(); } </script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"left","width":145,"height":315},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body></html>