<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>前端 &#8211; 张三太爷</title>
	<atom:link href="https://www.somedoc.net/tag/%E5%89%8D%E7%AB%AF/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.somedoc.net</link>
	<description>看前面，黑洞洞</description>
	<lastBuildDate>Tue, 31 Mar 2020 09:19:16 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.7.1</generator>

<image>
	<url>https://www.somedoc.net/wp-content/uploads/2016/12/cropped-dandycheung-1-32x32.jpg</url>
	<title>前端 &#8211; 张三太爷</title>
	<link>https://www.somedoc.net</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>HTML5 等前端知识精要</title>
		<link>https://www.somedoc.net/2020/03/31/html5-%e7%ad%89%e5%89%8d%e7%ab%af%e7%9f%a5%e8%af%86%e7%b2%be%e8%a6%81/</link>
					<comments>https://www.somedoc.net/2020/03/31/html5-%e7%ad%89%e5%89%8d%e7%ab%af%e7%9f%a5%e8%af%86%e7%b2%be%e8%a6%81/#respond</comments>
		
		<dc:creator><![CDATA[张三太爷]]></dc:creator>
		<pubDate>Tue, 31 Mar 2020 09:19:16 +0000</pubDate>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[备忘录]]></category>
		<category><![CDATA[技术]]></category>
		<category><![CDATA[前端]]></category>
		<guid isPermaLink="false">http://www.somedoc.net/?p=4417</guid>

					<description><![CDATA[主要取材于 https://blog.csdn.net/we <a href="https://www.somedoc.net/2020/03/31/html5-%e7%ad%89%e5%89%8d%e7%ab%af%e7%9f%a5%e8%af%86%e7%b2%be%e8%a6%81/" class="more-link">[&#8230;]</a>]]></description>
										<content:encoded><![CDATA[<p>主要取材于 https://blog.csdn.net/weixin_44392418/article/details/88806841，供我自己参考，方家忽略。</p>
<p>一、HTML5 新特性</p>
<ol>
<li>画布 canvas；</li>
<li>用以回放媒体的 video 和 audio 元素；</li>
<li>本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；</li>
<li>sessionStorage 的数据在浏览器关闭后自动删除；</li>
<li>语义化更好的内容元素，比如 article、footer、header、nav、section 等；</li>
<li>表单控件，calendar、date、time、email、url 等；</li>
<li>新的技术 webworker、websocket、geolocation 等；</li>
<li>移除的元素：
<ul>
<li>纯表现的元素：basefont、big、center、font 等；</li>
<li>产生负面影响的元素：frame、frameset 等；</li>
</ul>
</li>
<li>IE8/7/6 支持通过 document.createElemet 方法产生新的标签，可以利用这 一特性使其支持 HTML5 新标签。</li>
</ol>
<p>二、语义化的理解</p>
<ul>
<li>HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；</li>
<li>在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；</li>
<li>搜索引擎的爬虫依赖标记来确定上下文和各个关键字的权重，利于 SEO；</li>
<li>使阅读源代码的人更容易将网站分块，便于阅读维护理解。</li>
</ul>
<p>三、jQuery 与 jQuery UI 有啥区别？</p>
<ul>
<li>jQuery 是一个 js 库，主要提供的功能是选择器，属性修改和事件绑定等等。</li>
<li>jQuery UI 则是在 jQuery 的基础上，利用其扩展性设计的插件。提供了常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。</li>
</ul>
<p>四、闭包<br />
由于函数内部定义变量作用域问题，如果外部想用这个内部函数创建的一个变量；那就需要在这个函数内部在创建一个函数，创建的这个函数相当于一个桥梁把内部外部函数的变量抛出，这样就解决了不能访问这个变量的问题，那这个内部函数就称为闭包。</p>
<p>闭包的特性：</p>
<ul>
<li>函数内再嵌套函数</li>
<li>内部函数可以引用外层的参数和变量</li>
<li>参数和变量不会被垃圾回收机制回收</li>
</ul>
<p>概括的说，闭包就是能够读取其他函数内部变量的函数，在本质上，它是将函数内部和函数外部连接起来的一座桥梁。</p>
<p>五、typeof 的作用</p>
<ol>
<li>对于数字类型的操作数而言，<code>typeof</code> 返回的值是 <code>number</code>。比如说：<code>typeof(1)</code> 返回的值就是 <code>number</code>。对于非常规的数字类型而言，其结果返回的也是 <code>number</code>。比如 <code>typeof(NaN)</code>，<code>NaN</code> 在 JavaScript 中代表的是特殊非数字值，但它本身是一个数字类型。在 JavaScript 中，特殊的数字类型还有 <code>Infinity</code>，表示无穷大的特殊值；</li>
<li>对于字符串类型， <code>typeof</code> 返回的值是 <code>string</code>。比如 <code>typeof("123")</code> 返回的值是 <code>string</code>；</li>
<li>对于布尔类型，<code>typeof</code> 返回的值是 <code>boolean</code>。比如 <code>typeof(true)</code> 返回的值是 <code>boolean</code>；</li>
<li>对于对象、数组、<code>null</code> 返回的值是 <code>object</code> 。比如 <code>typeof(window)</code>、<code>typeof(document)</code>、<code>typeof(null)</code> 返回的值都是 <code>object</code>；</li>
<li>对于函数类型，返回的值是 <code>function</code>。比如 <code>typeof(eval)</code>、<code>typeof(Date)</code> 返回的值都是 <code>function</code>；</li>
<li>如果运算数是没有定义的（比如说不存在的变量、函数或者 <code>undefined</code>），将返回 <code>undefined</code>。比如：<code>typeof(sss)</code>、<code>typeof(undefined)</code> 都返回 <code>undefined</code>。</li>
</ol>
<p>六、常见的状态码分别表示什么</p>
<p>1**（信息类）：接受到请求并且继续处理</p>
<p>2**（响应成功）：表示动作被成功接受，理解和接受</p>
<ul>
<li><code>200</code> &#8211; 表示请求被成功完成，请求的资源发送回客户端</li>
<li><code>202</code> &#8211; 接受和处理，但处理未完成</li>
<li><code>203</code> &#8211; 返回信息不确定或不完整</li>
<li><code>204</code> &#8211; 请求收到，但返回信息为空</li>
</ul>
<p>3**（重定向）：为了完成指定的动作，必须接受进一步处理</p>
<ul>
<li><code>300</code> &#8211; 请求的资源可在多处得到；</li>
<li><code>301</code> &#8211; 本页面被永久性转移到另一个 URL；</li>
<li><code>304</code> -自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用；</li>
<li><code>305</code> &#8211; 请求的资源必须从服务器指定的地址得到。</li>
</ul>
<p>4**（客户端错误类）</p>
<ul>
<li><code>400</code> &#8211; 客户端请求语法错误，不能被服务器所理解；</li>
<li><code>403</code> &#8211; 禁止访问，服务器收到请求，但是拒绝提供服务；</li>
<li><code>404</code> &#8211; 服务器无法取得所请求的网页，请求资源不存在。</li>
</ul>
<p>七、JavaScript 异步加载方案</p><pre class="crayon-plain-tag">function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) { // IE
        script.onreadystatechange = function() {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {                 // Others: Firefox, Safari, Chrome, and Opera
        script.onload = function() {
            callback();
        };
    }
    script.src = url;
    document.body.appendChild(script);
}</pre><p>八，CSS 选择符有哪些，哪些属性可以继承</p>
<ol>
<li>id 选择器（<code>#myid</code>）</li>
<li>类选择器（<code>.myclassname</code>）</li>
<li>标签选择器（<code>div</code>, <code>h1</code>, <code>p</code>）</li>
<li>相邻选择器（<code>h1 + p</code>）</li>
<li>子选择器（<code>ul &gt; li</code>）</li>
<li>后代选择器（<code>li a</code>）</li>
<li>通配符选择器（<code>*</code>）</li>
<li>属性选择器（<code>a[rel = "external"]</code>）</li>
<li>伪类选择器（<code>a:hover, li:nth-child</code>）</li>
</ol>
<ul>
<li>可继承的样式：<code>font-size</code>、<code>font-family</code>、<code>color</code>、<code>UL</code>、<code>LI</code>、<code>DL</code>、<code>DD</code>、<code>DT</code>；</li>
<li>不可继承的样式：<code>border</code>、<code>padding</code>、<code>margin</code>、<code>width</code>、<code>height</code>。</li>
</ul>
]]></content:encoded>
					
					<wfw:commentRss>https://www.somedoc.net/2020/03/31/html5-%e7%ad%89%e5%89%8d%e7%ab%af%e7%9f%a5%e8%af%86%e7%b2%be%e8%a6%81/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>一次被迫的前端修补</title>
		<link>https://www.somedoc.net/2020/02/20/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e4%bf%ae%e8%a1%a5/</link>
					<comments>https://www.somedoc.net/2020/02/20/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e4%bf%ae%e8%a1%a5/#respond</comments>
		
		<dc:creator><![CDATA[张三太爷]]></dc:creator>
		<pubDate>Thu, 20 Feb 2020 05:19:40 +0000</pubDate>
				<category><![CDATA[备忘录]]></category>
		<category><![CDATA[技术]]></category>
		<category><![CDATA[问题解决]]></category>
		<category><![CDATA[前端]]></category>
		<guid isPermaLink="false">http://www.somedoc.net/?p=4339</guid>

					<description><![CDATA[团队采用 mindoc 作为文档平台已经好几年了，也为 mi <a href="https://www.somedoc.net/2020/02/20/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e4%bf%ae%e8%a1%a5/" class="more-link">[&#8230;]</a>]]></description>
										<content:encoded><![CDATA[<p>团队采用 mindoc 作为文档平台已经好几年了，也为 mindoc 的发展做了不少的改进，例如文档阅读时可以调整目录区与内容区区域的分割条，就是一例。</p>
<p>分隔条上有个手柄，用以控制将目录直接隐藏或者显示。平时不太注意的话，可能大家都不会发现，其实手柄的位置是有一点点问题：略微靠下。原因很简单，手柄元素的定位属性是 top，被设定为 50%，也即垂直方向的正中，然鹅，它自身是有高度的啊。去年曾让组内一个兄弟做调整，他最后给出的调整语句令人哭笑不得：把 50% 改成了 45%。</p>
<p>这种狗皮膏药式的修改显然太 low，于是三太爷只好自己偷个空来亲自解决它。用检查器看了下整个手柄元素的高度，取决于其中的一个子元素，为 30px。一开始尝试 vertical-align 以及 display 和 align-self 之类的属性组合，均没有成效。最后只好放弃让浏览器完全自适应自动进行计算的努力，把 margin-top 设定为上抬整体高度的一半，也即 -15px，果然立竿见影。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.somedoc.net/2020/02/20/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e4%bf%ae%e8%a1%a5/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>一次被迫的前端试手</title>
		<link>https://www.somedoc.net/2020/02/13/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e8%af%95%e6%89%8b/</link>
					<comments>https://www.somedoc.net/2020/02/13/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e8%af%95%e6%89%8b/#respond</comments>
		
		<dc:creator><![CDATA[张三太爷]]></dc:creator>
		<pubDate>Thu, 13 Feb 2020 03:53:46 +0000</pubDate>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[备忘录]]></category>
		<category><![CDATA[技术]]></category>
		<category><![CDATA[angular]]></category>
		<category><![CDATA[node]]></category>
		<category><![CDATA[前端]]></category>
		<guid isPermaLink="false">http://www.somedoc.net/?p=4321</guid>

					<description><![CDATA[去年小伙伴们在做一款产品的时候，有一个功能在上架商店时无奈砍 <a href="https://www.somedoc.net/2020/02/13/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e8%af%95%e6%89%8b/" class="more-link">[&#8230;]</a>]]></description>
										<content:encoded><![CDATA[<p>去年小伙伴们在做一款产品的时候，有一个功能在上架商店时无奈砍掉了。说起来很简单，就是要在画布上支持手绘一个闭合区域，并支持在成型后进行对轮廓线的手触调整。开始的时候找到一个第三方的 native 库的支持，可惜上架有 64 位的强制要求，而该 .so 已经不再更新，只好将这个小功能去除。</p>
<p>这个功能听起来不大，其实要想做好还是有很多要考虑的东西的。手触轨迹的平滑绘制、闭合图形的闭合检测、后期调整的平滑变换以及线条交叉检测等等，都要考虑在内。在 GitHub 上偶遇一个介绍是<a href="https://github.com/durhaya/vdCanvas">简单手绘程序的项目</a>，心说看看这里面有没有可以参照的东西。</p>
<p>git clone 是最简单的步骤，接下来就有些挠头。怎么才能运行起来呢？看到一个名为 ng-package.json 的文件，心想这大概是个 angular 项目。（不好意思，作为前端盲的老夫竟然知道 ng 是 angular 常用的简称是不是很神奇？）好吧，把 node（自带 npm）装上（于是有了昨天的 blog），下一步呢？查了下，是要 ng serve。结果是令人崩溃的，它说这个不是一个 angular 项目！这不科学啊！判定是不是 angular 项目的标准是什么，又得找，据说是 angular-cli.json。项目里没有这个文件，但有一个名字和它基本一样的，只不过最前面多了个句点。不管它，复制出一个来，ng serve 高冷依旧。又看资料，说最新版的 angular 已经不用 angular-cli.json，而是 angular.json。咱再改，这次 ng serve 很给面子，开始搭理我了，只不过报了个非常莫名其妙的错出来。</p>
<p>看了看信息，感觉超纲了。只好打扰一下小朋友了。兄弟一听，立刻开出良方：你只管 npm install 再 npm run start 就好。照办！为了恢复现场，把手动搞出来的 angular.json 删掉先。果然，npm 一派繁忙的景象。执行结束后，说有 39 个潜在风险，可以用 npm audit fix 尝试自动修复，如果不成，还可以用 npm audit 查看细节，引导手动修复，但无论哪种方式，都说可能会导致 breaking。自动修复了一下，修了两个，别的先扔着吧。因为除此以外，npm install 还报了很多必须手动安装的 module，逐个安装后 npm run start 终于显示出了已经监听在 localhost 某端口的信息。不过几秒后，立刻又出了两屏的红色错误，看的眼晕。硬着头皮看了看，说是 intl 怎么怎么，到源代码里看了下，那条语句写的是 import intl。感觉是项目组织的时候，把这个叫 intl 的模块依赖给遗漏了。手动 npm install intl 后再次 npm run start，果然成功运行。</p>
<p>有洁癖的我，最不愿见到的就是一团糟的环境，于是向人请教 npm 的模块安装位置。npm install 有个选项是 -g，也即全局之意。我的第一猜测是，带有 -g 标识则安装至全局路径，否则会安装到当前用户的路径下，如果当前工作目录是以一个项目的话，则安装至项目之中。高手的答复是，我猜想的第二种情况是不存在的，不加 -g 就是下载（也即安装）到当前目录，如果当前目录不是个项目，那就相当于下载了一堆垃圾。如此甚好，简单、直接、干净，我喜欢。</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.somedoc.net/2020/02/13/%e4%b8%80%e6%ac%a1%e8%a2%ab%e8%bf%ab%e7%9a%84%e5%89%8d%e7%ab%af%e8%af%95%e6%89%8b/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
