LY
LY
> [[译] 五个小技巧让你写出更好的 JavaScript 条件语句](https://zhuanlan.zhihu.com/p/46146427)
### 1. 说说React, 为什么选择React? #### (一) React特点 1. 高效、虚拟DOM, 最大限度地减少与DOM的交互 2. 服务器端渲染 3. 组件化编码 4. 声明式设计 5. 灵活 6. JSX 7. 单向响应的数据流 #### (二) 为什么选择React 1. 相比其他如 Vue、Angular的双向数据绑定的框架，个人比较喜欢这种比较流程化的单向数据流形式，因为可以更好地预测数据的变化； 2. React社区完善，Facebook支撑，并拥有强大的全家桶...
### 请详细说下你对vue生命周期的理解 vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。 ```text 创建前/后：在beforeCreate阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段,vue实例的数据对象data有了，$el还没有。 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 更新前/后：当data变化时，会触发beforeUpdate和updated方法。 销毁前/后：在执行destoryed方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。 ``` 生命周期图：  实例代码[查看代码源](https://github.com/sunseekers/Vue/blob/master/mounted.html)：  ### 谈谈你对vue的双向数据绑定的原理的理解 vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 具体步骤： ```text 第一步：通过Observer提供的接口，对需要observe的数据对象进行递归遍历，给对象的每个属性、子属性对象的属性，都加上setter和getter（都绑定了一个专用的 `Dep`对象，这里的状态对象主要指组件当中的`data`属性）。 这样的话，给这个对象的某个值赋值，就会触发setter,那么就能监听到了数据变化。 第二步：compile解析模版指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。 第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是： 1.在自身实例化时往属性订阅器(dep)里面添加自己 2.自身必须有一个update()方法 3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。 第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模版指令，最终利用Watcher搭起Observer和Compiler之间的通信桥梁，达到数据变化->视图更新；视图交互变化(input)->数据model变更的双向绑定效果。 ``` 对应下图： ...
**为什么要使用CSS预处理器？** Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。 **CSS有具体以下几个缺点：** - 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器； - 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。 这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，**提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。**大大提高了我们的开发效率。 但是，预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。 **Sass和Less的比较** 不同: **1、Less环境较Sass简单** Sass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中。 **2、Less使用较Sass简单** LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。只要你了解 CSS 基础就可以很容易上手。 **3、从功能出发，Sass较Less强大** ①sass有变量和作用域。 \- $variable，like...
# 如何写一个适配iPhoneX的底部导航 > 转自[如何写一个适配iPhoneX的底部导航](https://zhuanlan.zhihu.com/p/37989643) ## 引言 iPhoneX发布至今已经有将近一年的时间了，各类app都多多少少做了对iPhoneX的适配，那对于我们H5页面该做哪方面的适配呢？ 首先了解安全区域(safe area)的概念，它保证了内容在设备上的正确嵌入，不会被状态栏、导航栏等遮挡。 > *Apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the...
# Webpack 4 配置最佳实践 Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有了新版配置的文档。社区中一些开发者也已经成功试水，升级到了 Webpack 4，并且总结成了博客。所以我也终于去了解了 Webpack 4 的具体情况。以下就是我对迁移到 Webpack 4 的一些经验。 本文的重点在： * Webpack 4 在配置上带来了哪些便利？要迁移需要修改配置文件的哪些内容？ *...
> 转自: [移动端 适配.md](https://github.com/fairyly/front-end-summary/blob/gh-pages/1%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%20%E9%80%82%E9%85%8D.md) ## vw + rem 方案 > demo: [https://github.com/HuJiaoHJ/h5-layout](https://github.com/HuJiaoHJ/h5-layout) - 1、设置 html font-size 为 10vw ```css html { font-size: 10vw; } ``` - 2、以750px(iPhone6)设计稿为例，在css中，直接使用UI图上的长度值，单位设置为 `px` ```css .head...