发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

node常用命令

进入、退出命令行

1
2
3
4
5
6
# 进入命令行
node
# 正常退出退出命令行
.exit
# 强制退出
ctrl + c # 两次

调试模式

谷歌浏览器内置了 node 的调试器，可以很方便的打断点，看 log , 我们需要以调试模式运行 node 程序

1
2
3
node --inspect index
# 也是以node --inspect的方式启动，只不过加了supervisor的保存即时生效
supervisor --inspect index

软连接全局 node 包

我们可以通过 npm install -g 包名 的方式全局安装第远程包，但对于没有在 node 仓库的包无能为力。这儿有另一种方法全局添加自己写的包

1
2
cd 文件夹
npm link

在全局的包仓库下引用了此仓库，原理类似于快捷方式。然后就可以全局使用自己的包命令了，不想用了的话删除软连接

1
npm unlink

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

自己对网页自适应有些不足，补充一下。另外区分一下 自适应 与 响应式 的区别。

  • 自适应是为了解决如何才能在不同大小的设备上呈现同样的网页
  • 响应式是自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动

技术选择

可知需要设置大小的样式： width 、 height 、 margin 、 padding 、font-size ，列出来方便思考。
可知技术方案： 百分比布局、媒体查询 、 rem 、 vw系列 、 flex 。每一项都有自己的优缺点，我们需要结合起来使用。以实验过程来说明一些问题：

  1. 只用百分比布局
  • 优点： 浏览器大小改变时布局不变。实现了 自适应网页
  • 缺点：
    • 如果屏幕过小，某个 div 内的内容可能过于拥挤，现在 PC 的屏幕不会太小，一般不会影响，但如果想要手机端或者平板访问此网页，效果可想而知。
    • 如果屏幕过大，某个 div 内的内容可能过于稀少，那么我们需要字体同步放大，需要图片或其他媒体资源同步放大

  1. 加上媒体查询

    百分比布局加上这个就可以实现 响应式布局，这儿 有很多案例

  • 优点： 可以根据 @media 查询设置不同的样式，甚至布局。这样移动端通过修改布局也可以得到好的体验。
  • 缺点： 要多写好几倍的 css

  1. 锦上添花

    理论上上面的两个已经可以解决布局问题，但现实中你可能没有时间写那么多的 css。那我们需要其他好东西。

  • rem ：根据网页的根元素来设置字体大小。现代浏览器默认的根元素字体大小是 font-size: 16px。
    设置这个可以让不同屏幕下的字体大小同步缩放，也可以设置给 width、 padding 、 margin。但不同的屏幕下需要给 html 节点 设定不同的 font-size 基准值。下面是几种方式：

    1. 配合 @media,例如： 网易新闻

      手机的屏幕宽度： iphone5 是 320px ， iphone6/7/8/X 是 375px ， iphone6/7/8 plus 是 414px ，下面是部分代码

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      @media screen and (max-width: 320px) {
          html {
              font-size:42.667px;
              font-size: 13.33333vw
          }
      }

      @media screen and (min-width: 361px) and (max-width:375px) {
          html {
              font-size:50px;
              font-size: 13.33333vw
          }
      }

      @media screen and (min-width: 413px) and (max-width:414px) {
          html {
              font-size:55.2px;
              font-size: 13.33333vw
          }
      }
      阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

注意是网页，而不是 App

常见国内移动端浏览器

手机浏览器内核基本都是 webkit，只不过国内的重新封装了一层，所以谷歌浏览器自带的 Inspect Device 检测不出国内浏览器。

  1. 微信内置、qq浏览器： X5内核 ，由腾讯开发的。
  • 一加自带浏览器： X5内核 037322GPU-M，目前我的是这个版本，问题好多， vue 已经用 babel 转了，但还是不支持，不知道为什么
  • QQ浏览器： X5内核 038615GPU-UU，目前我的是这个版本
  • UC浏览器： U4内核，由 UC 自主开发

由于移动端浏览器的五花八门，经常会遇到莫名其妙的 bug ， 我们需要好用的调试工具，看下文。

调试工具

  • BrowerSync： 可以同时在PC、平板、手机等设备下进项调试，需要电脑和手机在同一 wifi 下
  • Weinre : 功能与 Chrome DevTools 相似，需要在页面中插入一段 JS 脚本来实时调试页面 DOM 结构、样式、JS 等，另外它使用的是代理的方式，所以兼容性很好，无论是新老设备系统通吃。如果你的手机安装了 Chrome 浏览器，那么可以通过 USB 用 Chrome DevTools 调试，但是国内的手机用的浏览器在 Chrome DevTools 上无法识别，所以可以用过 Weinre 调试。详细可参考 这儿，利用此工具可以调试这些：
    • dom 元素
    • network 监听
    • source 打断点
    • console 查看日志
  • fiddle 等代理工具，通过 usb 连接。我没成功…
    阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

离开意味着新的开始，感叹下自己这离奇的9天

干货

  1. 程序员最好有一台自己的笔记本，这样环境只需要配一次，不用换个公司又重新配一遍环境。我没用过 Mac， 但我感觉 windows 和 linux 双系统也挺棒的

  2. 我也经历过好几家公司了，每家公司的网都不咋地。除了用本地局域网联调外，我决定其他的连手机热点，网速比这快多了。

  3. 作为一个中国程序员，每次装环境之后还需要额外设置一些东西：

    • node、yarn： 装完之后受限于国内的网络，设置镜像。有几个包还需要额外设置镜像仓库，比如大名鼎鼎的 node-sass，参考 这儿，设置一次 npm 和 yarn 同时生效，设置完之后可以通过 npm config list 和 yarn config list 查看。
    • git：基本配置查看 这儿

    • dokcer ： 同样设置镜像

      • linux 中在 /etc/docker/daemon.json 中写入如下内容（如果文件不存在请新建该文件）

        1
        2
        3
        4
        5
        {
            "registry-mirrors": [
                "https://registry.docker-cn.com"
            ]
        }

        之后重新启动服务。

        1
        2
        $ sudo systemctl daemon-reload
        $ sudo systemctl restart docke

      • Windows10 在系统右下角托盘 Docker 图标内右键菜单选择 Settings ，打开配置窗口后左侧导航菜单选择 Daemon 。在 Registry mirrors 一栏中填写加速器地址 https://registry.docker-cn.com ，之后点击 Apply 保存后 Docker 就会重启并应用配置的镜像地址了

    • vue :
      • 安装：npm install -g @vue/cli ， vue-cli 到 3 了，加了可视化配置，更新的好快
      • 初始化项目模板： vue create 项目名
    • react-native :
      • 安装： npm install -g react-native-cli
      • 初始化项目模板： react-native init AwesomeProject
    • android： 既然要用 react-native， 肯定要配置 android 与 ios 的环境，可惜我没 mac
      • jdk1.8： Android Studio 必须。 需手动配置环境变量 JAVA_HOME 与 Path
      • Android Studio 、 SDK 、 ANDROID_HOME: 可以帮助我们编译 Android 原生相关，用里面的 SDK Manager安装相关 sdk，配置环境变量 ANDROID_HOME
      • 手机模拟器： windows 下如果你装了 docker 就不能用 genymotion 了，原因看后面。 选择 Visual Studio Emulator for Android
    • 自动化工具： 这只是个工具，不应该将很多精力放在这上面
      • grunt: 已经很少用了，需全局安装： npm install -g grunt-cli
      • gulp: 有些还在用，也需全局安装： npm install gulp-cli -g
      • webpack: 很流行。 可以全局安装，也可以只在项目中安装
  4. 常用 IDE 的设置存到云盘：我常用的 vscode 、 webstorm （jetbrain 家 IDE 的配置可以通用）
    阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

一有离意便按耐不住自己，面试了一周半便确定了自己即将去的地方，不知道是不是太快了点…前后林林总总面了10家过一点，有5家给了我offer，有些问题没回答上来但还是通过了，还有些就没通过，再次根据回忆主要记录下, 问的太多了，所以下面的问题都是印象比较深刻的，印象深刻嘛，要嘛是不会的，要嘛是问了次数比较多的。对了，我是一个前端，主要的问题也都是针对前端，因为一直在做 vue 项目，所以很多问题也都跟 vue 相关

一位腾讯大佬有这样的面试技巧（或者说招聘技巧）：看候选人 github 有个技巧，看他 activity 里 issue 区讨论、给知名开源项目的 PR、merged PR 数量和质量

被问到两次以上的

前端优化方案

涉及太多请自行谷歌

webpack相关

当你讲述你的项目经验的时候，当面试官听到你在用 vue 全家桶的时候，所有相关的问题都会问题， 其他的我都能说个123来，但 webpack 却没咋用，项目中都是别人构建的…也为后面的 thoughtwork 一道开放性作品题失败埋下了伏笔。面试官听到我不会也就没再问了，现在开始补 webpack 的知识

es6相关

你用了哪些 es6 的东西，都是啥，其中 箭头函数 与普通函数的区别最常被问

原型链相关：如何实现原型链继承，原型与构造函数的关系，new 对象的时候发生的过程

下面这张图可以清晰明白的帮助我们理解，如果还想深入理解，参考 这儿1 和 这儿2
原型链

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

route开启h5模式

路由里面加一个 mode: 'history'
作用: 实现页面后退时，还原滚动位置

vuex模块话

默认： 内部的 action 、 mutation 和 getter 是注册在全局命名空间的。不包括 state

所以，当 commit 一个子模块的 mutation 时，若还有其他子模块有相同的 mutation 时,
这两者都会触发。bug: 再次发现中，下一步的扫描时间初始化不是0，而是先变成了上一步的扫描时间，然后才变成0。因为点击下一步的时候触发了上一步的同名 mutation

解决方案： 给子模块添加 namespaced: true 让子模块成为命名空间模块，这样可以封装单独作用域

此时要 commit 一个子模块的 mutation 时，就需要this.$store.commit('子模块名/事件名')

tip: 不论是不是命名空间模块， state 的获取都是这样的： this.$store.state.子模块名.变量名
或者利用 mapState :

1
2
3
...mapState('子模块名', [
    '变量名'
])

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

记录下自己遇到的…

react-native 须知

React的每个组件里，必须import React

1
import React from 'react';

因为组件内部隐式的使用了React，比如jsx语法等

自定义组件

分为函数式组件和 class 组件，我们一般使用 class 组件。

  • 函数式组件：

    1
    2
    3
    4
    /* 接受的参数是 props */
    function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
    }

  • class 组件：

    1
    2
    3
    4
    5
    class Welcome extends React.Component {
        render() {
            return <h1>Hello, {this.props.name}</h1>;
        }
    }

注意： 组件名称必须以大写字母开头。

组件触发事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Toggle extends React.Component {
  render() {
    return (
        // 方法1. 在Render中使用bind绑定，此时方法的定义用es5的这种语法
        <Text onPress={this.handleClick1.bind(this)}>点击</Text>
        // 方法2. 定义类属性，使用es6的语法定义方法
        <Text onPress={this.handleClick2}>点击</Text>
    )
  }
  handleClick1() {
    // do something1
  }
  handleClick2 = () => {
    // do something2...  
  }
}

推荐使用方式2，简单明了，且没有副作用。详解请参看 官方文档

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

前段时间微信小程序很火，得闲时来写写小程序。本来想用豆瓣的 api ，但已经有人写了，好吧…那我就自己写个简单的 api 用用。程序已经写好了，但小程序要求后台必须是 https,好吧，那就给谷歌云搞个 https, 下面讲讲过程。万万没想到， 最后的结局是悲伤的，这个 api 最后还是用不成，因为小程序要求的接口域名必须是要经过备案的，而谷歌云无法备案，苦涩的哈哈哈… 。仅以此纪念学习这个的过程。

下载证书

首先在本地先试验下，用 openssl 生成了自签名证书，参考 这儿, 再修改下 nginx.conf 的配置，就可以访问 https://localhost 了，但放在谷歌云上却无法正确运行，不知道为什么…

那么，我们去买一个 https 证书来配置，==…发现有免费的，那自然用免费的，申请下载请参考 这儿，文章中阿里云的免费证书已经不可以申请了，所以我申请了腾讯云的免费证书，不枉我玩了那么多腾讯游戏…手动笑哭

修改nginx配置

免费的证书有 1 年的使用时间，下载下来的证书长这样：https腾讯云证书

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

参考链接：

  • 阮大神，有些介绍直接 copy 了阮大神的，因为阮大神写得很通俗易懂，嘿嘿

软件开发最大的麻烦事之一，就是环境配置。用户计算机的环境都不相同，你怎么知道自家的软件，能在那些机器跑起来？

用户必须保证两件事：操作系统的设置，各种库和组件的安装。只有它们都正确，软件才能运行。举例来说，安装一个 Python 应用，计算机必须有 Python 引擎，还必须有各种依赖，可能还要配置环境变量。

如果某些老旧的模块与当前环境不兼容，那就麻烦了。开发者常常会说：”它在我的机器可以跑了”（It works on my machine），言下之意就是，其他机器很可能跑不了。

环境配置如此麻烦，换一台机器，就要重来一次，旷日费时。很多人想到，能不能从根本上解决问题，软件可以带环境安装？也就是说，安装的时候，把原始环境一模一样地复制过来。

解决方案：

  1. 虚拟机（virtual machine）就是带环境安装的一种解决方案。它可以在一种操作系统里面运行另一种操作系统，比如在 Windows 系统里面运行 Linux 系统。应用程序对此毫无感知，因为虚拟机看上去跟真实系统一模一样，而对于底层系统来说，虚拟机就是一个普通文件，不需要了就删掉，对其他部分毫无影响。

    虽然用户可以通过虚拟机还原软件的原始环境。但是，这个方案有几个缺点。

    • 资源占用多:
      虚拟机会独占一部分内存和硬盘空间。它运行的时候，其他程序就不能使用这些资源了。哪怕虚拟机里面的应用程序，真正使用的内存只有 1MB，虚拟机依然需要几百 MB 的内存才能运行。
    • 冗余步骤多：
      虚拟机是完整的操作系统，一些系统级别的操作步骤，往往无法跳过，比如用户登录。
    • 启动慢：
      启动操作系统需要多久，启动虚拟机就需要多久。可能要等几分钟，应用程序才能真正运行。

  2. Linux 容器不是模拟一个完整的操作系统，而是对进程进行隔离。或者说，在正常进程的外面套了一个保护层。对于容器里面的进程来说，它接触到的各种资源都是虚拟的，从而实现与底层系统的隔离。

    由于容器是进程级别的，相比虚拟机有很多优势。

    • 启动快:
      容器里面的应用，直接就是底层系统的一个进程，而不是虚拟机内部的进程。所以，启动容器相当于启动本机的一个进程，而不是启动一个操作系统，速度就快很多。
    • 资源占用少：
      容器只占用需要的资源，不占用那些没有用到的资源；虚拟机由于是完整的操作系统，不可避免要占用所有资源。另外，多个容器可以共享资源，虚拟机都是独享资源。
    • 体积小：
      容器只要包含用到的组件即可，而虚拟机是整个操作系统的打包，所以容器文件比虚拟机文件要小很多。

总之，容器有点像轻量级的虚拟机，能够提供虚拟化的环境，但是成本开销小得多。

阅读全文 »

发表于 | 更新于： | 分类于 | 评论： | 阅读次数：

大多数时候，我们都用单文件.vue文件来实现功能。比如添加一个dialog，代码如下：

hello.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
    <div>
        <button @click="showDialog">显示一个弹框</button>
        <dialog v-if="dialogFlag"></dialog>
    </div>
</template>
<script>
    import Dialog from './Dialog.vue';
    export default {
        data() {
            return {
                dialogFlag: false
            }
        },
        methods: {
            showDialog() {
                this.dialogFlag = true
            }
        },
        components: { Dialog }
    }
</script>

点击按钮即可显示弹框。很简单明了，功能划分也清晰，表示很开心。下面列出动态创建弹框的代码，可以跟上面的比较一下有啥优缺点，在不同的情景下选用不同的方案：

阅读全文 »