sheng00 的所有文章

网页适配 iPhoneX，就是这么简单（转载）

2018年6月12日前端iphonexsheng00

前言

iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。

笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：

适配之前需要了解的几个新知识

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：

也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。

更详细说明，参考文档：Human Interface Guidelines – iPhoneX

viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

更详细说明，参考文档：viewport-fit-descriptor

env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。

在这之前，笔者使用的是 constant()，后来，官方文档加了这么一段注释（坑）：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

更详细说明，参考文档：Designing Websites for iPhone X

如何适配

了解了以上所说的几个知识点，接下来我们适配的思路就很清晰了。

第一步：设置网页在可视窗口的布局方式

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

前面也有提到过，只有设置了 viewport-fit=cover，才能使用 env()。

第二步：页面主体内容限定在安全区域内

这一步根据实际页面场景选择，如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况。

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的适配

类型一：fixed 完全吸底元素（bottom = 0），比如下图这两种情况：

可以通过加内边距 padding 扩展高度：

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

或者通过计算函数 calc 覆盖原来高度：

{
  height: calc(60px(假设值) + constant(safe-area-inset-bottom));
  height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

注意，这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。

还有一种方案就是，可以通过新增一个新的元素（空的颜色块，主要用于小黑条高度的占位），然后吸底元素可以不改变高度只需要调整位置，像这样：

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

空的颜色块：

{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  background-color: #fff;
}

类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

像这种只是位置需要对应向上调整，可以仅通过外边距 margin 来处理：

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

或者，你也可以通过计算函数 calc 覆盖原来 bottom 值：

{
  bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));
  bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}

你也可以使用 @supports 隔离兼容样式

写到这里，我们常见的两种类型的 fixed 元素适配方案已经了解了吧。如果我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 来隔离兼容样式，当然这个处理对页面展示实际不会有任何影响：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  div {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }
}

写在最后

以上几种方案仅供参考，笔者认为，现阶段适配处理起来是有点折腾，但是至少能解决，具体需要根据页面实际场景，在不影响用户体验与操作的大前提下不断尝试与探索，才能更完美的适配。

通过修改react-scripts来自定义create-react-app的模板

2018年6月9日reactcreate-react-app、react、react-scriptssheng00

create-react-app是一个无需任何配置就能轻松创建react应用使用的命令行工具，它主要是使用react-scripts来配置需要的webpack、babel等一系列工具。

react-scripts创建的应用可以满足大部分的需求，但是有时候我们需要修改或者创建自己的配置项。react-scripts提供了一个命令eject，使用eject命令可以将react-scripts内置的各种配置项暴露出来，这时候我们就可以通过更改配置文件。

eject可以让你自定义所有配置项。但是如果有很多相似的项目，建议fork一份react-scripts和其他需要的packges，做一个自己的模板使用。

自定义create-react-app的模板

Fork create-react-app

打开create-react-app，fork出自己的一份create-react-app

建议fork一个稳定的分支，master不是稳定的。

在packages目录里，有一个目录react-scripts。react-scripts这个目录里包含了build、test、start你的react app的脚本。

修改配置

把我们fork好的create-react-app clone到本地，checkout一个稳定版的tag，打开react-scripts/scripts/init.js这个文件。

在里面加一行console.log('Hello world.');

把我们自定义的`react-scripts`发布到NPM

先把react-scripts目录下的package.json文件里的name等字段的值改成我们自己的。

现在从命令行切换到react-scripts目录里，使用npm publish命令行进行发布。如果npm提示你登陆，就登陆上自己的npm账号。

测试我们自己的`react-scripts`

在命令行中使用我们自己的模板创建一个react-app

create-react-app test-app --scripts-version shengoo-react-scripts

可以看到，我们的增加的那行console.log生效了。

接下来就可以通过修改react-scripts增加我们自己需要的功能了。

css实现响应式正方形或固定宽高比

2018年5月19日前端sheng00

代码如下
HTML:

<div class="square">
  <div class="content">
    Hello!
  </div>
</div>

css:

.square {
  position: relative;
  width: 50%;
  border: 4px solid red;
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

See the Pen jxXeEB by Qing Sheng (@shengoo) on CodePen.

原理如下

在.square中创建一个伪元素，使用padding-bottom: 100%;，伪元素会用父级节点的宽度来计算100%，所以高度就是父级的宽度，这样就能实现正方形来。
同理，需要固定宽高比的情况下，都可以使用这种方式。

使用create-react-app生成react多页面应用

2018年5月12日reactsheng00

初始化react app
```
npx create-react-app multiple-page-app
```
eject(eject前要commit)
```
yarn eject
```
在src文件夹里新建一个about.css(假如我们要做的另一个页面是about.html)
```
body{
    background-color: yellow;
}
```

在src文件夹里新建一个about.js

import React from 'react';
import ReactDOM from 'react-dom';
import './about.css';
ReactDOM.render(<div>about</div>, document.getElementById('root'));

增加入口配置，config/webpack.config.dev.js

entry: {
    index:[
        require.resolve('./polyfills'),
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appIndexJs
    ],
    about: [
        require.resolve('./polyfills'),
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appSrc + "/about.js",
    ]
},

修改输出配置output选项

filename: 'static/js/[name].bundle.js',

增加HtmlWebpackPlugin

new HtmlWebpackPlugin({
    inject: true,
    chunks: ["index"],
    template: paths.appHtml,
}),
new HtmlWebpackPlugin({
    inject: true,
    chunks: ["about"],
    template: paths.appHtml,
    filename: 'about.html',
}),

效果如下
然后按照对dev.js的修改，同样修改好prod.js，就可以build出两个页面了。

完整代码可以在github上看到：
https://github.com/shengoo/react-demo/tree/master/multiple-page-app

在create-react-app中使用Code Splitting

2018年4月28日reactcode splitting、react、webpacksheng00

在create-react-app中使用Code Splitting实现按需加载js

为了减少HTTP请求，我们会把代码打包到一个文件里。
Code splitting可以把打包的文件分割成不同的块，并实现按需加载。
下面是在create-react-app中使用方法。

简单示例

创建项目
```
npx create-react-app code-splitting
```

在src文件夹里创建文件texts.js

const hello = 'Hello World!';
export { hello };

修改App.js

class App extends Component {
    constructor(props){
        super(props);
        this.state = {};
    }
    componentDidMount(){
        import('./texts')
            .then(({hello}) => {
                this.setState({
                    msg: hello,
                })
            })
            .catch(err => {
            });
    }
    render() {
        return (
            <div className="App">
                <div>{this.state.msg || 'loading...'}</div>
            </div>
        );
    }
}
export default App;

Chrome中network

分割react的组件

使用React Loadable分割，React Loadable还能创建 loading states, error states, timeouts, preloading,等状态。
原来的引用方式：

import OtherComponent from './OtherComponent';
const MyComponent = () => (
    <OtherComponent/>
);

使用React Loadable启用了Code splitting的方式：

import Loadable from 'react-loadable';
const LoadableOtherComponent = Loadable({
    loader: () => import('./OtherComponent'),
    loading: () => <div>Loading...</div>,
});
const MyComponent = () => (
    <LoadableOtherComponent/>
);

例子：

添加依赖
yarn add react-loadable

新建一个组件Hello.js

import React from 'react';
export default () => (
    <div>Hello world.</div>
)

在App.js中引用Hello

import Loadable from 'react-loadable';
const LoadableOtherComponent = Loadable({
    loader: () => import('./Hello'),
    loading: () => <div>Loading...</div>,
});
const Hello = () => (
    <LoadableOtherComponent/>
);

在render函数里渲染
从network里可以看到又多了一个js文件

根据路由分割

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
const Loading = () => <div>Loading...</div>;
const Home = Loadable({
  loader: () => import('./routes/Home'),
  loading: Loading,
});
const About = Loadable({
  loader: () => import('./routes/About'),
  loading: Loading,
});
const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </Switch>
  </Router>
);

安装依赖
yarn add react-router-dom

创建路由页面
routes/Home.js

import React from 'react';
export default () => (
    <div>Home</div>
)

routes/About.js

import React from 'react';
export default () => (
    <div>About</div>
)

在App.js中引用路由页面

const Loading = () => <div>Loading...</div>;
const Home = Loadable({
    loader: () => import('./routes/Home'),
    loading: Loading,
});
const About = Loadable({
    loader: () => import('./routes/About'),
    loading: Loading,
});

配置路由

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
...
render() {
    return (
        <Router>
            <div>
                <div>{this.state.msg || 'hello'}</div>
                <Hello/>
                <div>
                    <Link to={'/'}>home</Link>
                    <Link to={'/about'}>about</Link>
                </div>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/about" component={About}/>
                </Switch>
            </div>
        </Router>
    );
}

在Chrome中查看network，可以看到第一次点击about的时候，浏览器会异步加载about组件的js

完整代码可以在github上看到：
https://github.com/shengoo/react-demo/tree/master/code-splitting

http304是怎么产生的。（选自《图解HTTP》-上野宣）

2018年3月30日未分类sheng00

该状态码表示客户端发送附带条件的请求（附带条件的请求是指采用GET方法的请求报文中包含If-Match,If-Modified-Since,If-None-Match,If-Range,If-Unmodified-Since中任一首部。）时，服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304 Not Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）。304状态码返回时，不包含任何响应的主体部分。304虽然被划分在3XX类别中，但是和重定向没有关系。

附带条件请求

形如If-xxx这种样式的请求首部字段，都可称为条件请求。服务器接收到附带条件的请求后，只有判断指定条件为真时，才会执行请求。

If-Modified-Since

是这样产生304的

If-Match和ETag

上图中显示的200是不是应该是304啊？

使用react-native实现material design中的滑动头部效果

2018年3月23日react-nativesheng00

参考的material design效果

最终效果

完整代码：
https://github.com/shengoo/HeaderTransition

react-native中使用SafeAreaView保证iPhoneX兼容性

2018年3月16日react-nativesheng00

react-native从0.50.1开始，提供了SafeAreaView来确保iPhone X的兼容性，效果如下：

代码如下：

import {
  ...
  SafeAreaView
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#ddd'
  }
})

并且，SafeAreaView会在接打电话等需要调整状态栏高度的时候自动调整状态栏的高度：

jQuery()函数的4中调用方式

2018年3月9日JQuerysheng00

jQuery()函数的4中调用方式

选择元素

$(selector)
$(selector,context)

封装成jQuery对象

$(Element|Document|Window)

创建jQuery对象

$('<img/>')
$('<img/>',{
    src: url
})

传入函数，在文档加载完毕运行

DOMContentLoaded

jQuery(function(){});
$(document).ready(function(){});

使用ES6的Proxy实现简单的双向绑定

2018年3月2日JavaScriptsheng00

ES6的Proxy对象可以用来拦截一个Object对象的属性的修改，这次我们利用它来实现一个简单的双向绑定。
废话不多说，请看代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>View to model</title>
</head>
<body>
    <div>
        <!-- 使用'bind-to'的属性来标记这个输入框里的值会对Model里的属性进行修改 -->
        <input bind-to="name" />
        <input bind-to="name" />
    </div>
    <!-- 使用#属性名#来把Model里的值映射到DOM中 -->
    <span>#name#</span>
    <span>#name#</span>
    <button onclick="reset()">reset</button>
    <script type="text/javascript">
        var handler = {
            // 拦截属性的设置，触发试图的更新
            set: function(target, key, value, receiver) {
                target[key] = value;
                updateView(propertyName);
                return Reflect.set(target, key, value);
            },
        };
        // 双向绑定的对象
        var model = new Proxy({}, handler);
        // 双向绑定列表
        var inputs = {},views = {};
        var all = document.all;
        // 遍历所有DOM元素
        for(var i=0,l=all.length;i<l;i++){
            // 找到所有有bind-to的输入框
            if(all[i].getAttribute('bind-to')){
                var dom = all[i];
                var propertyName = dom.getAttribute('bind-to');
                inputs[propertyName] = inputs[propertyName] ? inputs[propertyName] : [];
                views[propertyName] = views[propertyName] ? views[propertyName] : [];
                inputs[propertyName].push(dom);
                dom.addEventListener('change',function function_name(e) {
                    var propertyName = e.target.getAttribute('bind-to');
                    model[propertyName] = e.target.value;
                })
            }
            // 找到所有model驱动的页面元素
            if(all[i].innerHTML && all[i].innerHTML.length>2 &&
                all[i].innerHTML[0] == '#' &&
                all[i].innerHTML[all[i].innerHTML.length-1] == '#'){
                var propertyName = all[i].innerHTML.slice(1,all[i].innerHTML.length-1);
                inputs[propertyName] = inputs[propertyName] ? inputs[propertyName] : [];
                views[propertyName] = views[propertyName] ? views[propertyName] : [];
                views[propertyName].push(all[i]);
            }
        }
        // 更新View
        function updateView(propertyName) {console.log('update ' + propertyName);
            if(views[propertyName]){
                for(var i = 0,l = views[propertyName].length;i < l;i++){
                    views[propertyName][i].innerText = model[propertyName];
                }
            }
            if(inputs[propertyName]){
                for(var i = 0,l = inputs[propertyName].length;i < l;i++){
                    inputs[propertyName][i].value = model[propertyName];
                }
            }
        }
        function reset() {
            for(var name in model){
                model[name] = '';
            }
        }
    </script>
</body>
</html>

前言

适配之前需要了解的几个新知识

安全区域

viewport-fit

env() 和 constant()

如何适配

第一步：设置网页在可视窗口的布局方式

第二步：页面主体内容限定在安全区域内

第三步：fixed 元素的适配

类型一：fixed 完全吸底元素（bottom = 0），比如下图这两种情况：

类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

你也可以使用 @supports 隔离兼容样式

写在最后

自定义create-react-app的模板

Fork create-react-app

修改配置

把我们自定义的react-scripts发布到NPM

测试我们自己的react-scripts

原理如下

在create-react-app中使用Code Splitting实现按需加载js

简单示例

分割react的组件

根据路由分割

附带条件请求

If-Modified-Since

If-Match和ETag

jQuery()函数的4中调用方式

选择元素

封装成jQuery对象

创建jQuery对象

传入函数，在文档加载完毕运行

把我们自定义的`react-scripts`发布到NPM

测试我们自己的`react-scripts`