-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
93 lines (93 loc) · 24 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[安卓H5虚拟键盘出现挡住内容]]></title>
<url>%2FH5%2F2020%2F06%2F04%2F%E5%AE%89%E5%8D%93%E4%B8%8BH5-%E8%99%9A%E6%8B%9F%E9%94%AE%E7%9B%98%E5%87%BA%E7%8E%B0%E6%8C%A1%E4%BD%8F%E5%86%85%E5%AE%B9%EF%BC%88%E8%BE%93%E5%85%A5%E6%A1%86%E3%80%81%E6%8C%89%E9%92%AE%EF%BC%89.html</url>
<content type="text"><![CDATA[问题描述 我们在进行H5开发时，经常遇到这种情况：如果输入框或者按钮，在页面下方，当我们唤起软键盘时，系统弹出的虚拟键盘就会将输入框或按钮挡住。这个只有在Android 系统下会有这个问题，iOS 系统会自动将整个页面上移动。 解决办法 我们可以通过 Element.scrollIntoViewIfNeeded() 这个方法来解决这个问题。这个方法的作用是，将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。 代码示例 这样当输入框、按钮被点击，软键盘吊起后，调用它的 scrollIntoViewIfNeeded() 方法，保证输入框可见。（延迟一定的毫秒延迟是因为有些 Android 手机键盘出现的比较慢） 注意事项 值得注意的是，这个方法有兼容性问题，因为它不属于任何规范，是一种WebKit专有的方法。由于它是非标准方法，因此要慎重在生产环境使用。另外，此方法是标准的Element.scrollIntoView()方法的专有变体，因此更推荐使用Element.scrollIntoView()方法，有更好的兼容性。而且注意判断是不是在IOS系统，IOS系统执行这个方法， 页面会滚动，光标就不在输入框里了，所以需要做下判断不能是ios系统 补充scrollIntoViewIfNeeded方法虽然兼容性还不够好，但是基本所有H5支持，只要提前做下判断是否有这个方法就好了，所以scrollIntoView()和scrollIntoViewIfNeeded()都要调用好一些，而且注意一下函数的参数，展示会更加友好；el.scrollIntoView({ block: ‘center’ })typeof el.scrollIntoViewIfNeeded === ‘function’ && el.scrollIntoViewIfNeeded(true); 参考链接： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded]]></content>
<categories>
<category>H5</category>
</categories>
<tags>
<tag>H5</tag>
<tag>兼容性</tag>
</tags>
</entry>
<entry>
<title><![CDATA[CSS去掉元素间隙]]></title>
<url>%2Fcss%2F2020%2F03%2F23%2FCSS%E5%8E%BB%E6%8E%89inline-block%E5%85%83%E7%B4%A0%E9%97%B4%E9%9A%99%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95.html</url>
<content type="text"><![CDATA[CSS去掉inline-block元素间隙的几种方法？间隙是怎么来的：间隙是由换行或者回车导致的；只要把标签写成一行或者标签没有空格，就不会出现间隙；去除方法： 方法一：元素间的间隙出现的原因，是元素标签之间的空格，把空格去掉间隙就会消失。123<div> <span>l111</span><span>l2222</span></div> 方法二：利用HTML注释标签1234<div class="demo"> <span>l111</span><!-- --><span>l222</span></div> 方法三： 取消标签闭合123456<div class="demo"> <span>saf <span>1321h <span>35435 <span>32342</div> 方法四： 在父容器上使用font-size:0;可以消除间隙1234567<div class="demo"> <span>1111</span> <span>2222</span> <span>3333</span> <span>4444</span></div>.demo {font-size: 0;}]]></content>
<categories>
<category>css</category>
</categories>
<tags>
<tag>css</tag>
</tags>
</entry>
<entry>
<title><![CDATA[CSS Modules]]></title>
<url>%2Fcss%2F2020%2F03%2F23%2FCSS-Modules.html</url>
<content type="text"><![CDATA[CSS Modules1. 什么是CSS ModulesCSS模块化管理方案；它既不是官方标准，也不是浏览器的特性，而是在构建步骤（例如使用Webpack）中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。例如我们在buttons.js里引入buttons.css文件，并使用.btn的样式，在其他组件里是不会被.btn影响的，除非它也引入了buttons.css.2. CSS Modules的好处为什么我们需要CSS模块化。 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。现在我们说组件式开发，随着工程的页面数量和复杂度的提升，大家都遇到过样式冲突问题，一般我们会采用一下几种方法： class名写长点、写独特点，减少冲突可能性 添加父元素选择器，限制CSS选择范围 重新命名class，这样比较保险 上面这些办法应用后，带来更多的问题： 全局样式冲突、污染 css选择器嵌套过深 代码冗余； 为了解决这些问题，我们由js模块化想到，能不能把CSS也进行模块化管理。CSS模块化的方案，主要有以下几种： 1. 命名约定。比如BEM（Block Element Modifier），使用BEM规范来命名CSS，组织HTML中选择器的结构， 利于CSS代码的维护，使得代码结构更清晰，但是BEM也有不足，就是写出来的类名太长，看起来一大堆的不够优雅；没有打通js和css之间的选择器与变量(和CSS Modules相比)；我在项目中写的样式有很多BEM的思想 2. **CSS in JS**。不用CSS了，直接用JS写样式。代表是(styled-componentd)[https://github.com/styled-components/styled-components]。这种方式有很多好处，比如让CSS真正意义地写到JS里面、让标签更具有语意化、让样式也具备组件化思想等等，当然也有不够好的地方：样式代码大量重复、不能很好利用CSS预处理器以及，个人觉得CSS IN JS写起来很别扭，感觉很难受，我觉得css和js分离写起来才是最舒服的方式。 3. **用JS管理CSS**。利用JS编译CSS文件，让CSS也拥有模块化的便利，代表就是今天要说的CSS Modules。CM和第二点不一样，还是两者分离的形式，并且CM只需修改构建代码和使用模块依赖引入className的方式即可，还支持less和sass的语法，使用CSS Modules可以让组件className控制权转交给JS，我们不会去关心命名冲突污染等问题，同时可以灵活控制生成的命名。 3. 通过creact-react-app演示 基本使用：creact-react-app默认开启。（webpack.config.js）。css文件要以component.module.css命名，比如Button.module.css。 类名的使用：组件中的类名不会影响别的组件中的相同类名，比如在组件中（Button）可以使用像.button的名称来声明类名，而不必担心类名的冲突。渲染后的类名：Button_button__2LXQM，是一个随机hash值，用来确保具有相同名称的多个CSS Modules的唯一性。在Webpack的配置文件webpack.config.dev.js中，可以配置CSS Modules编译器如何重写类名，并且hash值是可选的。styles变量是一个JavaScript对象。另外styles下的类名必须上驼峰形式，比如className={styles.MyApp}，而className={styles.my-app}就会报错。有一点值得说的是，值得注意的是，如果你在CSS文件中编写了一些CSS，而在模板中没有使用它们（或错误的使用它们），Webpack将跳过生成输出任何未使用的CSS，从而能减少代码大小。 多类名的使用：通过模板字符串来写就行。也可以通过组合特性compose做到： composes: button; CSS Modules最大的特色之一就是“每个CSS代码都是应该用于特定的组件中，并且与项目的其他部分是隔离的”。那现在有个问题令，假如我要在多个地方使用相同的样式，怎么办，要写多次吗，怎么抽离和利用公共样式。方案就是刚刚的composes。比如在App.module.css中要引用Button.module.css中的.button中的样式代码、或者在组件中引用公共代码。可以把各个组件共用的样式放置在一个独立的文件中，比如common.css。然后在需要的地方调用。这么来看，composes是非常强大的，可以让你跳出CSS Modules局部作用域名的限制，在组件中调用共用样式，也就是在局部作用域调用全局作用域样式。 使用classnames： 虽然可以通过composes达到类名组合的效果，但是我就想写className=’primary white’，怎么办。也有办法，通过classnames 模块做到。npm install classnames –save。(classnames 官方文档)[https://github.com/JedWatson/classnames]。 组合选择器的使用 选择器的作用域： :local (局部作用域名，相当于组件中的本地选择器)、:global(全局作用域名)采用:global声明的全局选择器，和我们平时声明类名无差异，而且也不需要遵循CSS Modules的类名命名规则，并且在模板中调用的时候，也不需要使用styles.xxx这样的方式，可以直接在className中引用类名。比如示例中的className="app-logo"。还可以跨组件的使用，比如我们在Button组件的Button.module.css中使用:global声明了一个全局的.button样式 标签元素和属性选择器的使用:在CSS Modles中，类名是被限定在定义它的组件中使用（除非使用了:global标识的类），但对于HTML的标签元素和属性选择器是不受影响的。Button组件 CSS Modules中使用id声明的样式不会被运用到元素上. 4. 结语CM还有很多功能，比如依赖管理、共享变量、代码压缩方面都有很好的表现，但是由于我也没有在具体项目中全面应用CM，所以大家有兴趣可以自己去研究。]]></content>
<categories>
<category>css</category>
</categories>
<tags>
<tag>css</tag>
</tags>
</entry>
<entry>
<title><![CDATA[CSS实现毛玻璃效果]]></title>
<url>%2Fcss%2F2019%2F07%2F14%2FCSS%E5%AE%9E%E7%8E%B0%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C.html</url>
<content type="text"><![CDATA[在family一次版本迭代中，产品小哥给出了这样一个需求，更换头像背景的模糊效果，也就是所谓的毛玻璃效果。以前没做过这种，怎么办？当然是搜索引擎，不懂就去搜。 发现有个filter属性，给它设置blur(x)即可。 主要思路是给相关元素设置伪元素，然后设置伪元素的背景+filter：blur(x)。 html如下： <div class="main"> <button type="">点我</button> <div class="content"> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> <p>用CSS制作毛玻璃效果（高斯模糊效果）</p> </div> </div> CSS如下： <style> .main { position: relative; background: hsla(0, 0%, 100%, .3); overflow: hidden; width: 800px; height: 500px; } .main::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); background: url('./mmexport1546413607115.jpg') no-repeat; background-size: 100% 100%; margin: -30px; z-index: -1; } p { color: #fff; } </style> 效果如下： 但具体到需求，头像不是固定的图，没办法通过css设置伪元素背景（或者说我不知道怎么样动态给伪元素设置背景），这就头大了。无意间发现张鑫旭大神有文章讨论过这个，他文章里采用的方法是用两个img标签，然后设置模糊效果。原文链接：https://www.zhangxinxu.com/wordpress/2013/11/css-svg-image-blur/ 这样也能做到同样的效果，这里就不给出代码了，文章里有。]]></content>
<categories>
<category>css</category>
</categories>
<tags>
<tag>css</tag>
</tags>
</entry>
<entry>
<title><![CDATA[记芒果TV一次不成功的面试（1）-----性能优化]]></title>
<url>%2F%E9%9D%A2%E8%AF%95%2F2019%2F04%2F15%2F%E8%AE%B0%E8%8A%92%E6%9E%9CTV%E4%B8%80%E6%AC%A1%E4%B8%8D%E6%88%90%E5%8A%9F%E7%9A%84%E9%9D%A2%E8%AF%95%EF%BC%881%EF%BC%89-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.html</url>
<content type="text"><![CDATA[因为朋友内推，运气好有芒果TV的一面机会。但由于一年多没参加面试，自己平时的积累总结又不够，所以回答并不是很完善完整，一面感觉…. 不管怎样，下面针对面试内容，来回顾和总结下相关知识，为接下来的求职面试，做准备吧。 在这次面试中，面试官问到了前端性能优化、跨域、H5、组件编写能力等等，我会分篇记录。 性能优化的目的 从用户角度而言，优化能让页面加载更快、用户操作响应更及时、用户使用体验更好。 从服务器角度而言，优化能减少页面请求数、减少请求所占带宽、能够节省资源。 合理的优化能够改善和提升用户体验，节省资源成本。 前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。 一、页面级优化 减少HTTP请求数这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少 HTTP请求，那请求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 )，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。减少HTTP请求数的主要途径包括：（1）设计层面对界面进行简化（2）合理设置HTTP缓存（3）资源压缩与合并（4）CSS Sprites 将加载的内容在页面信息加载后再加载 异步执行页面脚本 Lazy Load Javascript CSS in HEAD 异步请求callback 减少不必要的HTTP跳转 避免重复请求 二、代码级优化 javascript（1）DOMDOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点：a. HTML Collection（HTML收集器，返回的是一个数组内容信息）。在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。b. Reflow & Repaint。除了上面一点之外， DOM操作还需要考虑浏览器的 Reflow和Repaint ，因为这些都是需要消耗资源的。（2）慎用with。 使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。 除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。（3）避免使用eval和Function。每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。（4）减少作用域链查找。 如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。 要减少作用域链查找还应该减少闭包的使用。（5）数据访问。 Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：a. 对任何对象属性的访问超过1次。b. 对任何数组成员的访问次数超过1次。另外要尽可能减少对象和数组的深度查找。（2） CSS选择符。（3）图片压缩。（4）代码压缩、去注释和多余代码。 三、其他优化 CDN Gzip压缩 多域名]]></content>
<categories>
<category>面试</category>
</categories>
<tags>
<tag>面试经历</tag>
<tag>性能优化</tag>
</tags>
</entry>
<entry>
<title><![CDATA[谈谈Object.create()]]></title>
<url>%2Fjavascript%E8%BF%9B%E9%98%B6%2F2019%2F04%2F08%2F%E8%B0%88%E8%B0%88Object-create.html</url>
<content type="text"><![CDATA[Object.create()一、首先放MDN上的定义： Object.create()方法创建一个新对象，使用现有的对象来提供新建对象的__proto__ 语法： 12> Object.create(proto, [propertiesObject])> 参数： proto ：新创建对象的原型对象。 propertiesObject 可选。如果没有指定为undefined ，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应的Object.defineProperties()的第二个参数。 返回值：一个新对象，带着指定的原型对象和属性。 例外：如果propertiesObject参数不是null或一个对象，则抛出一个TypeError异常。 二、个人理解Object.create(null)创建的是一个空对象，并且该对象上没有继承Object.prototype原型链上的属性或者方法，例如：toString(),hasOwnProperty()等方法。 三、MDN代码实践 var o; // 创建一个原型为null的空对象 o = Object.create(null); o = {} // 以字面量方式创建的空对象就相当于： o = Object.create(Object.prototype); o = Object.create(Object.prototype,{ // foo会成为所创建对象的数据属性 foo: { writeable: true, configurable: true, value: 'hello' }, // bar 会成为所创建对象的访问器属性 bar: { configurable: false, get: function() { return 10 }, set: function(value) { console.log(“Setting o.bar to “, value); } } }); function Constructor() {} o = new Constructor(); // 上面的一句就相当于： o = Object.create(Constructor.prototype); // 当然，如果在Constructor函数中有一些初始化代码，Object.create不能执行那些代码。 // 创建一个以另一个空对象为原型，且拥有一个属性p的对象 o = Object.create({}, { p: { value: 42 } }) // 省略了的属性特性默认为false，所以属性p是不可写、不可枚举、不可配置的： o.p = 24 o.p // 24 o.q = 12 for(var prop in o) { console.log(prop) } // “q” delete o.p // false // 创建一个可写的、可枚举的、可配置的属性p o2 = Object.create({}, { p: { value: 42, writeable: true, configurable: true } }) 四、Object.create(null)的使用场景为什么很多源码作者会使用Object.create(null)来初始化一个新对象呢？这是作者的习惯，还是一个最佳实践？ 其实都不是，这并不是作者不经思考随便用的，也不是javascript编程中的最佳实践，而是需要因地制宜，具体问题具体分析。 我们进一步比较一下Object.create(null)和{}创建控对象的区别： 在chrome打印如下： 从上图可以看到，使用create创建的对象，没有任何属性，显示No properties，我们可以把它当作一个非常纯净的map来使用，我们可以自己定义hasOwnProperty、toString方法，不管是有意还是不小心，我们完全不必担心会将原型链上的同名方法覆盖掉。举个例子： //Demo1: var a= {…省略很多属性和方法…}; //如果想要检查a是否存在一个名为toString的属性，你必须像下面这样进行检查： if(Object.prototype.hasOwnProperty.call(a,’toString’)){ … } //为什么不能直接用a.hasOwnProperty(‘toString’)? //因为你可能给a添加了一个自定义的hasOwnProperty //你无法使用下面这种方式来进行判断,因为原型上的toString方法是存在的： if(a.toString){} //Demo2: var a=Object.create(null) //你可以直接使用下面这种方式判断，因为存在的属性，都将定义在a上面，除非手动指定原型： if(a.toString){} 另一个使用create(null)的理由是，在我们使用for..in循环的时候会遍历对象原型链上的属性，使用create(null)就不必再对属性进行检查了，当然，我们也可以直接使用Object.keys[]。 五、总结 你需要一个非常干净且高度可定制的对象当作数据字典的时候； 想节省hasOwnProperty带来的一丢丢性能损失并且可以偷懒少些一点代码的时候; 用Object.create(null)吧！其他时候，请用{}。]]></content>
<categories>
<category>javascript进阶</category>
</categories>
<tags>
<tag>javascript</tag>
<tag>object</tag>
</tags>
</entry>
<entry>
<title><![CDATA[测试主题优化]]></title>
<url>%2Funcategorized%2F2019%2F04%2F08%2F%E6%B5%8B%E8%AF%95%E4%B8%BB%E9%A2%98%E4%BC%98%E5%8C%96.html</url>
<content type="text"></content>
</entry>
<entry>
<title><![CDATA[测试发布文章]]></title>
<url>%2Ftest%2F2019%2F04%2F08%2F%E6%B5%8B%E8%AF%95%E5%8F%91%E5%B8%83%E6%96%87%E7%AB%A0.html</url>
<content type="text"><![CDATA[新博客文章发布测试]]></content>
<categories>
<category>test</category>
</categories>
<tags>
<tag>test</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Hello World]]></title>
<url>%2Funcategorized%2F2019%2F02%2F12%2Fhello-world.html</url>
<content type="text"><![CDATA[Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment]]></content>
</entry>
</search>