Ku-Le-Yu-Xuan
2020-04-11T18:45:09.985Z
http://yoursite.com/hexolog/
kuleyu
Hexo
前端编码风格规范(4) 之 CSS 和 Sass (SCSS)
http://yoursite.com/hexolog/post/40468678.html
2018-04-23T00:10:16.000Z
2020-04-11T18:45:09.985Z
<blockquote>
<p>英文原文:<a href="http://newimg88.b0.upaiyun.com/newimg88/2015/01/web-styleguide-4.jpg" target="_blank" rel="noopener">Web Styleguide – Style guide to harmonize HTML, Javascript and CSS / SASS coding style</a></p>
</blockquote>
<h2 id="css-and-sass-scss-style-rules"><a class="markdownIt-Anchor" href="#css-and-sass-scss-style-rules"></a> CSS and Sass (SCSS) style rules</h2>
<hr />
<h3 id="id-and-class-naming"><a class="markdownIt-Anchor" href="#id-and-class-naming"></a> ID and class naming</h3>
<p>ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。</p>
<p>应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小。</p>
<p>通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义。<br />
区分他们,使他们具有特殊意义,通常需要为"帮手"。</p>
<p>尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义,<br />
语义化的名称 通常是正确的选择,因为它们所代表的信息含义,不包含表现的限制。</p>
前端编码风格规范(2) 之 HTML 规范
http://yoursite.com/hexolog/post/64839f25.html
2018-04-23T00:09:52.000Z
2020-04-11T18:45:09.985Z
<h2 id="文档类型"><a class="markdownIt-Anchor" href="#文档类型"></a> 文档类型</h2>
<p>推荐使用 HTML5 的文档类型申明: <code><!DOCTYPE html></code>.</p>
<p>(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 <code>application/xhtml+xml</code>在浏览器中的应用支持与优化空间都十分有限)。</p>
<p>HTML 中最好不要将无内容元素(主要包括:<code>area</code>, <code>base</code>, <code>br</code>, <code>col</code>, <code>command</code>, <code>embed</code>, <code>hr</code>, <code>img</code>, <code>input</code>, <code>keygen</code>, <code>link</code>, <code>meta</code>, <code>param</code>, <code>source</code>, <code>track</code>, <code>wbr</code>)的标签闭合,例如:使用 <code><br></code> 而非 <code><br /></code>.</p>
<hr />
<h2 id="html-验证"><a class="markdownIt-Anchor" href="#html-验证"></a> HTML 验证</h2>
<p>一般情况下,建议使用能通过标准规范验证的 HTML 代码,除非在性能优化和控制文件大小上不得不做出让步。</p>
<p>使用诸如 W3C HTML validator 这样的工具来进行检测。</p>
<p>规范化的 HTML 是显现技术要求与局限的显著质量基线,它促进了 HTML 被更好地运用。</p>
前端编码风格规范(1) 之 一般规范
http://yoursite.com/hexolog/post/226a05d8.html
2018-04-23T00:09:41.000Z
2020-04-11T18:45:09.981Z
<blockquote>
<p>英文原文:<a href="https://github.com/gionkunz/chartist-js/blob/develop/CODINGSTYLE.md" target="_blank" rel="noopener">Web Styleguide – Style guide to harmonize HTML, Javascript and CSS / SASS coding style</a></p>
</blockquote>
<p>这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道,当一个团队开始指定并实行编码规范的话,错误就会变得更加显而易见。如果一段特定的代码不符合规范的话,它有可能只是代码风格错误,而也有可能会是 bug。早期指定规范就使得代码审核得以更好的开展,并且可以更精确的地定位到错误。只要开发者们能够保证源代码源文件都严格遵循规范,那接下去所使用的混淆、压缩和编译工具则可投其所好不尽相同。</p>
前端编码风格规范(3) 之 JavaScript
http://yoursite.com/hexolog/post/87ab92a0.html
2018-04-22T23:33:38.000Z
2020-04-11T18:45:09.985Z
<blockquote>
<p>英文原文:<a href="https://github.com/gionkunz/chartist-js/blob/develop/CODINGSTYLE.md" target="_blank" rel="noopener">Web Styleguide – Style guide to harmonize HTML, Javascript and CSS / SASS coding style</a></p>
</blockquote>
<h2 id="javascript-规范"><a class="markdownIt-Anchor" href="#javascript-规范"></a> JavaScript 规范</h2>
<hr />
<h3 id="全局命名空间污染与-iife"><a class="markdownIt-Anchor" href="#全局命名空间污染与-iife"></a> 全局命名空间污染与 IIFE</h3>
<p>总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。</p>
<p>IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改(i.e. 第三方库,window 引用,被覆盖的未定义的关键字等等)。</p>
<p><strong>不推荐</strong></p>
<pre><code>var x = 10,
y = 100;
// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ' ' + window.y);
</code></pre>
<p><strong>推荐</strong></p>
<pre><code>// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
'use strict';
var x = 10,
y = 100;
// Will output 'true true'
log((w.x === undefined) + ' ' + (w.y === undefined));
}(window.console.log, window));
</code></pre>
Ajax总结篇
http://yoursite.com/hexolog/post/d4e64c45.html
2018-04-19T00:54:16.000Z
2020-04-11T18:45:09.977Z
<blockquote>
<p>本文主要总结整理<code>Ajax</code>的一些常用的基础知识,适合初学者。</p>
</blockquote>
<h3 id="一-ajax简介-优劣势-应用场景以及技术"><a class="markdownIt-Anchor" href="#一-ajax简介-优劣势-应用场景以及技术"></a> 一、Ajax简介、优劣势、应用场景以及技术</h3>
<hr />
<ul>
<li>
<p>Ajax简介 :</p>
<ul>
<li><code>Asynchronous Javascript And XML</code> (异步的<br />
<code>JavaScript</code>和<code>XML</code>)</li>
<li>它并不是一种单一的技术,而是有机利用一系列交互式网页应用相关的技术所形成的结合体</li>
<li><code>AJAX</code> 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,<code>AJAX</code> 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。</li>
</ul>
</li>
<li>
<p>优点:</p>
<ul>
<li>页面无刷新,用户体验好。</li>
<li>异步通信,更加快的响应能力。</li>
<li>减少冗余请求,减轻了服务器负担</li>
<li>基于标准化的并被广泛支持的技术,不需要下载插件或者小程序</li>
</ul>
</li>
<li>
<p>缺点:</p>
<ul>
<li><code>ajax</code>干掉了<code>back</code>按钮,即对浏览器后退机制的破坏。</li>
<li>存在一定的安全问题。</li>
<li>对搜索引擎的支持比较弱。</li>
<li>破坏了程序的异常机制。</li>
<li>无法用<code>URL</code>直接访问</li>
</ul>
</li>
<li>
<p><code>ajax</code>应用场景</p>
<ul>
<li>场景 1. 数据验证</li>
<li>场景 2. 按需取数据</li>
<li>场景 3. 自动更新页面</li>
</ul>
</li>
<li>
<p><code>AJAX</code> 包含以下五个部分:<br />
<code>ajax</code>并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。</p>
<ul>
<li>使用<code>CSS</code>和<code>XHTML</code>来表示。</li>
<li>使用<code>DOM</code>模型来交互和动态显示。</li>
<li>数据互换和操作技术,使用<code>XML</code>与<code>XSLT</code></li>
<li>使用<code>XMLHttpRequest</code>来和服务器进行异步通信。</li>
<li>使用<code>javascript</code>来绑定和调用。</li>
</ul>
</li>
</ul>
<p>在上面几中技术中,除了<code>XmlHttpRequest</code>对象以外,其它所有的技术都是基于<code>web</code>标准并且已经得到了广泛使用的,<code>XMLHttpRequest</code>虽然目前还没有被<code>W3C</code>所采纳,但是它已经是一个事实的标准,因为目前几乎所有的主流浏览器都支持它</p>
Javascript常用方法函数收集
http://yoursite.com/hexolog/post/30fd5d95.html
2018-04-18T12:54:15.000Z
2020-04-11T18:45:09.981Z
<h2 id="字符串及数组类"><a class="markdownIt-Anchor" href="#字符串及数组类"></a> 字符串及数组类</h2>
<h3 id="判断一个字符串中出现次数最多的字符统计这个次数"><a class="markdownIt-Anchor" href="#判断一个字符串中出现次数最多的字符统计这个次数"></a> 判断一个字符串中出现次数最多的字符,统计这个次数</h3>
<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><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">"zhaochucichuzuiduodezifu"</span>;</span><br><span class="line"><span class="keyword">var</span> o = {};</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, length = str.length; i < length; i++) {</span><br><span class="line"><span class="comment">// var char = str[i];</span></span><br><span class="line"> <span class="keyword">var</span> char = str.charAt(i);</span><br><span class="line"> <span class="keyword">if</span> (o[char]) { <span class="comment">//char就是对象o的一个属性,o[char]是属性值,o[char]控制出现的次数</span></span><br><span class="line"> o[char]++; <span class="comment">//次数加1</span></span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> o[char] = <span class="number">1</span>; <span class="comment">//若第一次出现,次数记为1</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(o); <span class="comment">//输出的是完整的对象,记录着每一个字符及其出现的次数</span></span><br><span class="line"><span class="comment">//遍历对象,找到出现次数最多的字符和次数</span></span><br><span class="line"><span class="keyword">var</span> max = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> maxChar = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> o) {</span><br><span class="line"> <span class="keyword">if</span> (max < o[key]) {</span><br><span class="line"> max = o[key]; <span class="comment">//max始终储存次数最大的那个</span></span><br><span class="line"> maxChar = key; <span class="comment">//那么对应的字符就是当前的key</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"最多的字符是"</span> + maxChar);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"出现的次数是"</span> + max);</span><br></pre></td></tr></table></figure>
<h3 id="字符串长度截取"><a class="markdownIt-Anchor" href="#字符串长度截取"></a> 字符串长度截取</h3>
Js作用域问题一步一步透彻理解
http://yoursite.com/hexolog/post/ae13e827.html
2018-04-01T02:09:34.000Z
2020-04-11T18:45:09.981Z
<h2 id="黄金守则第一条"><a class="markdownIt-Anchor" href="#黄金守则第一条"></a> <strong>黄金守则第一条</strong></h2>
<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><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="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">aaa</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(a);</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bbb</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">20</span>;</span><br><span class="line"> aaa();</span><br><span class="line">}</span><br><span class="line">bbb(); <span class="comment">// 10</span></span><br></pre></td></tr></table></figure>
Http协议相关
http://yoursite.com/hexolog/post/e8d53a5a.html
2018-04-01T00:54:16.000Z
2020-04-11T18:45:09.981Z
<h1 id="一-基础概念"><a class="markdownIt-Anchor" href="#一-基础概念"></a> 一 、基础概念</h1>
<h2 id="web-基础"><a class="markdownIt-Anchor"
Js变量提升、临时死区、作用域、立即执行函数
http://yoursite.com/hexolog/post/56be0507.html
2018-03-27T10:37:02.000Z
2020-04-11T18:45:09.981Z
<p>提到 JS 中声明变量的方式,必然提及var、let、const、function 四个关键词,其中 var、function 声明的变量会发生变量提升。</p>
<h3 id="var"><a class="markdownIt-Anchor"
js事件之event.preventDefault()与event.stopPropagation()用法区别
http://yoursite.com/hexolog/post/4f797af7.html
2018-03-27T10:35:37.000Z
2020-04-11T18:45:09.981Z
<h3 id="eventpreventdefault用法介绍"><a class="markdownIt-Anchor" href="#eventpreventdefault用法介绍"></a>
Css常见居中布局
http://yoursite.com/hexolog/post/daebb2da.html
2018-03-27T10:08:49.000Z
2020-04-11T18:45:09.981Z
<p>前端工程师的一门必修课程就是 CSS ( Cascading Style Sheet, 层叠样式表),CSS 是一门艺术,学好 CSS 需要投入大量的时间去实践。今天我们主要聊一聊工作中常用到的 CSS 布局套路。</p>
利用 Git-hook 自动配置不同仓库的用户信息
http://yoursite.com/hexolog/post/2426aa95.html
2018-03-26T19:50:50.000Z
2020-04-11T18:45:09.981Z
<p><a href="https://www.jianshu.com/p/69849461c38d" target="_blank" rel="noopener" title="Permalink to 利用 Git-hook 自动配置不同仓库的用户信息 - 简书">出自简书</a></p>
<blockquote>
<p>问题的起因来自于某天一位同学的问题:"我给一个知名开源项目提交了代码,也被合并了,为什么 <code>contributors</code> 里面没有我?"其实,这多是因为提交代码时本地仓库的<code>user.name</code>、<code>user.email</code>与GitHub账号不匹配导致,只有提交代码时的用户设置与自己的 <code>GitHub</code> 账号相匹配时,各项数据才会被 <code>GitHub</code> 计入统计。如下图所示,这样的 <code>commit</code> 记录便来自于一个用户设置和我 <code>GitHub</code> 账号不匹配的本地仓库。</p>
</blockquote>
javascript 字符串及数组操作方法
http://yoursite.com/hexolog/post/b0e2f0cd.html
2018-03-23T04:51:49.000Z
2020-04-11T18:45:09.981Z
<p>这里总结一下 js 中字符串及数组的操作方法</p>
<h3 id="字符串操作方法"><a class="markdownIt-Anchor" href="#字符串操作方法"></a> 字符串操作方法</h3>
<blockquote>
<ul>
<li><strong><code>charAt()</code></strong> 返回在指定位置的字符</li>
<li><strong><code>charCodeAt()</code></strong> 返回在指定的位置的字符的 Unicode 编码</li>
<li><strong><code>fromCharCode()</code></strong> 从字符编码创建一个字符串</li>
<li><strong><code>slice()</code></strong> 提取字符串的片断,并在新的字符串中返回被提取的部分</li>
<li><strong><code>split()</code></strong> 把字符串分割为字符串数组</li>
<li><strong><code>concat()</code></strong> 连接字符串</li>
<li><strong><code>indexOf()</code></strong> 检索字符串</li>
<li><strong><code>lastIndexOf()</code></strong> 从后向前搜索字符串。</li>
<li><strong><code>match()</code></strong> 找到一个或多个正则表达式的匹配</li>
<li><strong><code>replace()</code></strong> 替换与正则表达式匹配的子串</li>
<li><strong><code>search()</code></strong> 检索与正则表达式相匹配的值(大小写敏感),未找到输出-1</li>
</ul>
</blockquote>
css 浮动与清除浮动
http://yoursite.com/hexolog/post/3a176a24.html
2018-03-19T09:41:48.000Z
2020-04-11T18:45:09.981Z
<p>最好用的—:after伪元素法:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span
javascript 变量提升相关
http://yoursite.com/hexolog/post/a33deebd.html
2018-03-19T09:40:41.000Z
2020-04-11T18:45:09.981Z
<h3 id="什么是变量提升"><a class="markdownIt-Anchor" href="#什么是变量提升"></a> 什么是变量提升?</h3>
<p><b>变量提升</b>:把变量声明提升到<code>当前执行环境</code>的最顶端。按照js代码解析原则,js引擎在读取js代码时分两个步骤,第一个步骤是解释,第二个步骤是执行。所谓解释就是会先通篇扫描所有的Js代码,<code>然后把所有声明提升到顶端</code>;而执行就是操作一类的,依次执行解释完的代码。</p>
<h3 id="变量提升大致可分为两类"><a class="markdownIt-Anchor" href="#变量提升大致可分为两类"></a> 变量提升大致可分为两类:</h3>
<ul>
<li><code>var 声明的变量的提升</code>。只将变量声明语句提升至当前执行环境的顶端,初始化语句(若有)则依然处于原位置不动。</li>
<li><code>function 声明的函数的提升</code>。将整个函数声明语句块提升至当前执行环境顶端,同时函数在声明时就已经将函数名初始化了。若有多个,则依次往下排,即先声明的位于最前。</li>
</ul>
卡片
http://yoursite.com/hexolog/post/7edad275.html
2018-03-04T10:21:30.000Z
2020-04-11T18:45:09.985Z
<blockquote>
<p>该站<code>https://bbs.qn.img-space.com/</code>图片无法在其他站正常加载显示或单击右键跳转单独打开;只能复制链接单独在浏览器窗口打开。同时,打开后,浏览器有了缓存,又可以在其他站加载显示了。</p>
<ul>
JAMstack与CMS
http://yoursite.com/hexolog/post/edc048fb.html
2018-02-27T16:23:30.000Z
2020-04-11T18:45:09.981Z
<blockquote>
<p>找到了几个比较有意思的网站:<a href="https://headlesscms.org/" target="_blank" rel="noopener">headlesscms.org</a>、<a
2017 前端大事件和趋势回顾,2018 何去何从?
http://yoursite.com/hexolog/post/f9211a6.html
2018-02-27T16:13:20.000Z
2020-04-11T18:45:09.977Z
<p><a href="https://mp.weixin.qq.com/s/GhCdntYKN_9Y9tk6ENRFDg" target="_blank" rel="noopener" title="Permalink to 2017 前端大事件和趋势回顾,2018 何去何从?">Source</a></p>
<h1 id="2017-前端大事件和趋势回顾2018-何去何从"><a class="markdownIt-Anchor" href="#2017-前端大事件和趋势回顾2018-何去何从"></a> 2017 前端大事件和趋势回顾,2018 何去何从?</h1>
<blockquote>
<p>2017年,前端开发继续飞速发展。以下是在过去的一年中非常值得关注的十大事件整理,主要参考了国内外的一些报道和文章,希望能对大家在思考 2018 年的趋势和走向上有所帮助。欢迎指正、评论和补充。</p>
</blockquote>
<h3 id="1-react-16-和-mit-许可证"><a class="markdownIt-Anchor" href="#1-react-16-和-mit-许可证"></a> <strong>1、React 16 和 MIT 许可证</strong></h3>
<p>2017年,React 继续在前端领域占据主导地位,备受期待的 React 16 也正式发布。该版本包含可实现异步 UI 渲染的 fiber 架构,以及更便捷的错误管理。</p>
<p>不过,React 更引人关注的不是其新特性,而是开源许可证的更改。Facebook 放弃了导致很多企业拒绝使用其开源项目的 BSD+专利许可模式,并采用了对用户友好的 MIT 许可证。同时,Jest、Flow、Immutable.js 和 GraphQL 等项目也更改为了 MIT 许可证。</p>
css grid 网格布局完整介绍
http://yoursite.com/hexolog/post/30c1a0ec.html
2018-01-29T04:38:41.000Z
2020-04-11T18:45:09.981Z
<blockquote>
<p>英文原文:<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">A Complete Guide to Grid</a>,感谢<a href="https://github.com/zhaozhiming" target="_blank" rel="noopener">zhaozhiming</a>的翻译。</p>
</blockquote>
<h2 id="介绍"><a class="markdownIt-Anchor" href="#介绍"></a> 介绍</h2>
<p>CSS Grid 布局(又叫“Grid”),是一个基于网格的二维布局系统,目的是为了完全改变我们基于网格设计用户界面的方式。CSS 可以用来做我们的网页布局,但它在这一方面做的不是很好。开始的时候我们使用<code>tables</code>, 然后使用<code>floats</code>,<code>positioning</code>和<code>inline-block</code>,但这些方法本质上都是 hack 的方法并缺少一些重要功能(比如<code>垂直居中</code>)。<code>Flexbox</code>帮助我们解决了问题,但它是简单的一维布局,而不是复杂的二维布局(实际上 Flexbox 和 Grid 可以很好地组合起来使用)。Grid 是第一个专门为了解决那些我们一直使用 hack 手段而导致的页面布局问题而创建的 CSS 模块。</p>
优质资源整理收藏
http://yoursite.com/hexolog/post/5d70cfef.html
2018-01-26T14:17:20.000Z
2020-04-11T18:45:09.981Z
<blockquote>
<p>📌 推荐一些实用的好资源</p>
</blockquote>
<h3 id="电子书籍"><a class="markdownIt-Anchor" href="#电子书籍"></a>