最近有个项目要用到 uniapp 去开发跨端的小程序，在github上找了一个项目想看看人家源码，结果看到下面这行的时候就有点发懵。

Vue.prototype.StatusBar = e.statusBarHeight;

最近在项目开发的时候遇到一个问题，就是在 flex 布局的时候，设置了 flex 元素高度的时候，发现高度设置完没有生效，需要设置 flex 元素的 flex-shrink 属性为 0 才能生效，这是为啥？

想要理解这个问题，需要理解下面这三个 flex 元素的属性

• flex-grow：该元素获得（伸张）多少正可用空间（positive free space）？
• flex-shrink：该元素要消除（收缩）多少负可用空间（negative free space）？
• flex-basis：在该元素未伸张和收缩之前，它的大小是多少？

目前流行的几种方式如

Object构造函数创建

代码如下，但是这种作为初学者，我似乎用不到这种定义方式

var person = new Object();
person.name = 'Jason’;
person.age = 21;

JavaScript 开发业务的过程中肯定会引入很多第三方库，和别的语言类似，JS 也有一套引入第三方库的方式，即「模块」。

将代码拆分成独立的块，然后再把这些块连接起来可以通过模块模式来实现。这种模式背后的思想 很简单：把逻辑分块，各自封装，相互独立，每个块自行决定对外暴露什么，同时自行决定引入执行哪 些外部代码。不同的实现和特性让这些基本的概念变得有点复杂，但这个基本的思想是所有 JavaScript 模块系统的基础。

ES Module VS CommnJS Module

如果项目是 Node，那默认使用的是 CommonJS Module。 JS(ECMAScript) Module 就是官方标准的模块儿化系统。我最开始甚至都没有意识到这两种 Module System 的区别。

在应用的一些不重要的界面(比如功能的使用说明页面)上使用 HTML 进行开发可以在不降低用户体验的基础上，加快开发效率。

这篇文章尝试介绍一些这方面的实践。

加载本地HTML

我们在本地创建好一个名为 index.html 的文件后，将文件拖入到 iOS 项目的 Xcode 工程中。

iOS 加载本地 HTML 的方式如下：

let wkconfig = WKWebViewConfiguration.init()
webView = WKWebView.init(frame: view.frame, configuration: wkconfig)
var url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "")!
webView.loadFileURL(url, allowingReadAccessTo: url)
view.addSubview(webView)

客户端的项目不存在部署这个说法，一般打包生成 ipa 或者 apk 之后提交给商店，然后等待商店上架，用户就可以用手机在商店上下载到对应的应用了。

前端的项目一般最终都是以网页形式出现的（小程序有点特殊），那网页想要想要被用户看见的话，就需要放在一个云端的地方，这样所有人都能看见，这个云端的地方就是 Web 服务器。

Web 服务器最主要的功能就是托管前端项目构建后的静态资源文件，HTML、CSS、JS 以及图片，然后让用户通过 URL 访问到前端资源。

插个题外话，聊一下我最开始调试H5的几个误区和疑问

1. 有的时候浏览器不会执行 JS 代码。比如我直接建个文件夹，创建 html，CSS 和 JS 文件，在 html 文件里用 script 标签引入了同目录下的 js，然后用本地浏览器打开 html，我会纳闷为什么没有执行 JS 文件里代码。现在知道是因为浏览器的同源策略，导致没有办法加载 JS 文件内容导致的。

   现在再有这种简单的测试 Demo 的话，会用 Visual Studio Code 插件库中的 LiveServer 这个插件来搞定。LiveServer 本质上就是开了本地的开发服务器。而当我们使用 Vue 开发调试的时候，本质上是本地起了一个 node 服务器。

2. 浏览器是怎么知道应该渲染 html 还是显示 html 源文件内容呢？这部分其实是没有考虑 http 协议，html 在网络上传输就是用的 http 协议，而浏览器通过响应头中的 Content-Type 字段来判断服务器返回的内容是 HTML 还是 HTML 源文件。很简单不再赘述。

作为一个从客户端工程师，之前并没有接触过 Docker 这类工具只是听说过，现在做了一些前端项目之后发现很多前端项目是部署在 Docker 上的，于是给了学习 Docker 的契机，这篇文章就是初始 Docker 的一些过程和体会。

在 Docker 官网下载好对应的版本客户端版本，打开 Docker 客户端之后，会有默认的 Guide，这个 Guide 是个挺好的感受 Docker 的教程。

Docker 里面最重要的概念就是容器，我自己理解容器就像是个虚拟的系统一样，我们可以看它里面的文件结构，以及看这个「虚拟系统」运行时产生的日志，容器也向外暴露了自己的端口，让外部用户能够访问到它，像官方提供的这个例子里面容器暴露了 8088 端口，我们运行容器后，在浏览器访问 http://localhost:8088/ 就能访问容器内部署好的前端服务。

今天在实现一个前端效果的时候才发现 CSS 的盒子模型并不是只有一种，而且之前对盒模型也没有太深入了解过，盒子模型其实 CSS 布局的基础，不了解盒子模型的花，那 CSS 布局过程中一定会踩到很多坑，遇到很多不明白的现象。

什么是盒子模型？

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。整个 H5 页面就是由这些盒子模型组成的元素来构成。

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）

开发前准备

工程准备，因为前端项目是之前搭建好的，所以没什么前期准备工作。但是遇到一个问题就是编译 Vue 项目会报错，清空 node-modules 目录，以及 package-lock.json 文件之后，重新进行 npm install 之后，再运行 npm run dev 启动项目就好了。

开发

基础的体验部分没什么好说的，基本上就是 Vue 相关内容。我觉得相比微信小程序的开发，Vue 的开发体验更好一些，主要体现在 XML、JS 和 CSS 是放在一个文件里的，而微信小程序是把这三个模块儿拆成三个文件的，所以在开发的时候会反复在三个文件里跳，挺影响开发体验。

问题起源

前几天做前端 Vue 项目的时候发现一个有意思的事情，就是当我要设置一个瀑布流样式的视图的时候，类似下面这种样式，我怎么设置一个信息组件（带文字的小图片）的宽度是屏幕宽度的一半呢？有前端经验的小伙伴会说直接用 50vw 啊？但是如果考虑到两边的间距（比如容器标签有padding设置）的话，50vw 的设置可能会让一行只能展示出一个组件（展示两个就超出屏幕宽度了），那怎么设置这个小的信息组件的宽度就是个问题。

最后前端同事跟我说可以直接按照设计稿标注的组件的宽度进行设置，而且单位是px，当时我就懵了，那如果设备屏幕变大的话，不就有可能横向会展示三个信息组件了吗？前端同事嘿嘿一笑，说项目里有个库可以把 px 转化为 rem，rem 是什么鬼？