<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[extendworld的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/extendworld</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; extendworld]]></copyright><item><title><![CDATA[console.log 打印的值不准确]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82709777</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82709777</guid><author>extendworld</author><pubDate>Fri, 14 Sep 2018 22:56:52 +0800</pubDate><description><![CDATA[console.log 不服预期

有些时候在使用·console.log() 打印对象的时候，打印出来的值不符合预期。这是为什么呢？

有一种说法是：console.log() 是一个异步的方法，浏览器在处理的时候对于这种读取 i/o 的操作一般会放到比较靠后的位置去处理。所以有些时候打印出来的值不符合预期。

还有一种说法是，当在打印一个对象的时候，由于对象中的值是引用的内存中的值，所以就会存...]]></description><category></category></item><item><title><![CDATA[angular 中父组件和子组件的相互控制]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82429218</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82429218</guid><author>extendworld</author><pubDate>Wed, 05 Sep 2018 19:23:10 +0800</pubDate><description><![CDATA[
获取标签元素：ViewChild 查询到子视图，ElementRef 引用标签，然后通过 nativeElement 获得标签对象进行操作。
父组件对子组件的控制：子组件的本质是一个类对象，对象拥有自己的方法，所以通过父组件触发的一些方法去调用子组件的方法来达到控制子组件的目的。子组件的获取通过 ViewChild 查询获得。
子组件向父组件传递状态和数据都是通过 Output 触发事件实现。
...]]></description><category></category></item><item><title><![CDATA[webstorm 使用技巧]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82390935</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82390935</guid><author>extendworld</author><pubDate>Tue, 04 Sep 2018 21:41:54 +0800</pubDate><description><![CDATA[快捷键自定义

（command+，）打开设置界面，点击 keymap，查找按键映射，找到需要设置的操作，移除原来的快捷键，然后添加新的快捷键。

文件修改自动保存和添加星号

提示星号： 
https://www.cnblogs.com/zheting/p/7594073.html

自动保存

设置和取消自动保存：https://blog.youkuaiyun.com/u010537398/article...]]></description><category></category></item><item><title><![CDATA[git revert]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82385281</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82385281</guid><author>extendworld</author><pubDate>Tue, 04 Sep 2018 16:05:57 +0800</pubDate><description><![CDATA[使用 git revert 撤销 merge

当使用 git revert 撤销一个 merge commit 时,如果除了 commit 号而不加任何其他参数将会报错。

error: commit 7462a7e0d4b577811c1ff7557ef1f1fd6ae03dcb is a merge but no -m option was given.
fatal: revert fail...]]></description><category></category></item><item><title><![CDATA[字体加粗造成文字抖动]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82353195</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82353195</guid><author>extendworld</author><pubDate>Mon, 03 Sep 2018 19:07:36 +0800</pubDate><description><![CDATA[解决思路：为文字预留宽度

&amp;amp;amp;amp;lt;ul&amp;amp;amp;amp;gt;
    &amp;amp;amp;amp;lt;li title=&amp;amp;amp;quot;title 1&amp;amp;amp;quot;&amp;amp;amp;amp;gt;title 1&amp;amp;amp;amp;lt;/li&amp;amp;amp;amp;gt;
    &amp;amp;amp;amp;lt;li title=&amp;amp;amp;quot;t]]></description><category></category></item><item><title><![CDATA[图片做背景切换时闪烁]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82345193</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82345193</guid><author>extendworld</author><pubDate>Mon, 03 Sep 2018 10:31:48 +0800</pubDate><description><![CDATA[图片做背景，在切换时会重新加载图片，所以第一次会出现闪烁的情况，后面在切换时，由于图片已经加载，所以不会出现闪烁。

解决办法：将这两张图拼成一张图，通过定位来实现图片的切换。...]]></description><category></category></item><item><title><![CDATA[百分比定位的相对值]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82343671</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82343671</guid><author>extendworld</author><pubDate>Mon, 03 Sep 2018 08:55:17 +0800</pubDate><description><![CDATA[相对自身：

注意：translate，border-radius，background-size，

TODO：border-image-width，clip-path，

相对父级元素宽度：

注意：margin，padding

width、left、right

max/min-width

相对父元素高度：

height，top，bottom

max/min-height...]]></description><category></category></item><item><title><![CDATA[WebStorm 重置配置]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82343584</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82343584</guid><author>extendworld</author><pubDate>Mon, 03 Sep 2018 08:40:39 +0800</pubDate><description><![CDATA[
关闭WebStorm
cd ~/Library/Preferences/ 
rm -rf WebStormXX 


WebStormXX 根据版本定。查看该文件夹全拼的办法。

ls | grep -i WebStorm


找到该文件夹的名字后执行第三步操作。完成之后重启 webstorm。所有的配置全部还原了。...]]></description><category></category></item><item><title><![CDATA[图片的居中定位和按钮定位]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82343537</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82343537</guid><author>extendworld</author><pubDate>Mon, 03 Sep 2018 08:32:11 +0800</pubDate><description><![CDATA[要求：

div 中一张图片，需要让这张图片的中心部分始置于这个div的中间。两边超出部分隐藏。

代码实现：

div{
    img {
        margin-left: 50%; /*相对父元素*/
        transform：translateX(-50%);/* 相对自身宽*/
    }
}


button 定位到一张图片上

当设计给的是一张大图，上面的按钮不能通...]]></description><category></category></item><item><title><![CDATA[router 和表单回顾]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82153944</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82153944</guid><author>extendworld</author><pubDate>Tue, 28 Aug 2018 20:18:55 +0800</pubDate><description><![CDATA[Router


Router（路由器）：为激活的 URL 显示应用组件。管理从一个组件到另一个组件的导航
RouterModule（路由器模块）：一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令
Routes（路由数组）：定义了一个路由数组，每一个都会把一个URL路径映射到一个组件
Route（路由）：定义路由器该如何根据URL模式（ pattern ...]]></description><category></category></item><item><title><![CDATA[git log 和 分支映射]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82141820</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82141820</guid><author>extendworld</author><pubDate>Tue, 28 Aug 2018 08:39:45 +0800</pubDate><description><![CDATA[git log –stat

常用：查看修改了哪些文件

查看提交日志的时候查看每次提交修改了哪些文件(只显示文件名)。

git log --name-only //仅在提交信息后显示已修改的文件清单。




查看某次提交的修改

git show commit_id
git show commit_id filename // 查看具体文件




查看每次提交做了哪些修改

一定会常用：d...]]></description><category></category></item><item><title><![CDATA[emmet 写法复习]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82050401</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82050401</guid><author>extendworld</author><pubDate>Sat, 25 Aug 2018 12:55:52 +0800</pubDate><description><![CDATA[元素的文本内容和属性的写法

div&amp;gt;p[class=&quot;p$&quot;]{非静无以成学，非学无以广才}*4

&amp;lt;div&amp;gt;
    &amp;lt;p class=&quot;p1&quot;&amp;gt;非静无以成学，非学无以广才&amp;lt;/p&amp;gt;
    &amp;lt;p class=&quot;p2&quot;&amp;gt;非静无以成学，非学无以广才&amp;lt;/p&amp;gt;
    &amp;lt;p class=]]></description><category></category></item><item><title><![CDATA[font-weight 小结]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/82049594</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/82049594</guid><author>extendworld</author><pubDate>Sat, 25 Aug 2018 11:23:34 +0800</pubDate><description><![CDATA[苹方字体的 CSS 设置

p {
    /*font-family: PingFangSC; 不能这样写，这么写不会应用上*/
    font-family: PingFangSC-Regular;/*常规体*/
    font-family: PingFangSC-Medium;/*中黑体*/
}




font-weight 字重对字体粗细的影响

100 — 900：

实践证明，...]]></description><category></category></item><item><title><![CDATA[阿里云 OSS 之图片处理]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/81989955</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/81989955</guid><author>extendworld</author><pubDate>Thu, 23 Aug 2018 23:42:18 +0800</pubDate><description><![CDATA[OSS

Object Storage Service： 海量、安全、低成本、高可靠的云存储服务。



图片处理服务

阿里云 OSS 图片处理服务 (Image Processing，简称 IMG), 将原始图片上传保存在OSS上，通过简单的 RESTful 接口，在任何时间、任何地点、任何互联网设备上对图片进行处理。

上传 —&amp;amp;amp;gt; 接口调用

图片服务基础功能


获取图片信息
图片格...]]></description><category></category></item><item><title><![CDATA[前端性能监控工具]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/81988731</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/81988731</guid><author>extendworld</author><pubDate>Thu, 23 Aug 2018 21:50:57 +0800</pubDate><description><![CDATA[Web 原生的 Performance API ]]></description><category></category></item><item><title><![CDATA[设备判断和平台判断]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/81975815</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/81975815</guid><author>extendworld</author><pubDate>Thu, 23 Aug 2018 10:20:18 +0800</pubDate><description><![CDATA[isAndroid = () =&amp;amp;gt; /Android/.test(navigator.userAgent);
isIphone = () =&amp;amp;gt; /iPhone|iPad/.test(navigator.userAgent);]]></description><category></category></item><item><title><![CDATA[offsetTop]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/81975190</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/81975190</guid><author>extendworld</author><pubDate>Thu, 23 Aug 2018 09:55:48 +0800</pubDate><description><![CDATA[定位参照点

offsetTop 的定位是相对于 offsetParent 元素的

offsetParent的定义：与当前元素最近的经过定位(position不等于static)的父级元素

类似于绝对定位的参照点。

三种情况：


position为fixed时，offsetParent为null，offsettop的值和top相等。此时元素是以视口来定位的。
position非fixed，...]]></description><category></category></item><item><title><![CDATA[window 对象的一些好用的方法（待追加）]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/81953568</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/81953568</guid><author>extendworld</author><pubDate>Thu, 23 Aug 2018 01:02:02 +0800</pubDate><description><![CDATA[
window.scrollTo()：实现页面的滚动(window.scroll())
window.matchMedia()：监听媒体查询的变化
window.fetch(): 抓取网络请求
window.scrollBy(): 滚动多少距离（to and by ，this is English）
...]]></description><category></category></item><item><title><![CDATA[跳转到某个页面时实现瞬间滚动到某个位置的实现]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/81953512</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/81953512</guid><author>extendworld</author><pubDate>Thu, 23 Aug 2018 00:51:12 +0800</pubDate><description><![CDATA[知识点：

window.scrollTo() 方法和查询参数 location.search

使用 angular4 的实现：



window.scrollTo() 方法

作用：滚到文档中的某个坐标

window.scrollTo(x-coord,y-coord )
window.scrollTo(options)
window.scrollTo({top:num,left:num,b...]]></description><category></category></item><item><title><![CDATA[viewport 和 meta]]></title><link>https://blog.youkuaiyun.com/extendworld/article/details/79185376</link><guid>https://blog.youkuaiyun.com/extendworld/article/details/79185376</guid><author>extendworld</author><pubDate>Sun, 28 Jan 2018 11:54:05 +0800</pubDate><description><![CDATA[PC 页面在移动设备的展示？ 
移动设备开发入门第一步就是了解 viewport。 
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewportviewport的概念移动设备上的viewport就是屏幕上能用来显示我们的网页的那一块区域，但 viewport 又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的vi]]></description><category></category></item></channel></rss>