ltinyho's Blog

今天在知乎上看到一篇文章里面提到对收入的影响,风险 > 资本 > 劳动。

风险

投资行业风险最高的天使轮投资,为idea买单,当然成功收益也很高。这个需要资本。

资本

资本，通过资本收益，比如：房租，利息等被动收入。创办公司，自己当老板。

劳动

劳动，需要掌握一定的技能，通过出售自己的技能，时间来获得收入。当然，这种风险是较小的。公司的大部分收入是员工来创造的，但是公司老板的收入是最高的。
当企业经营不善时，员工是没有任何风险的，大不了公司倒闭换个公司继续工作，而老板承担的风险是最高的，他的资本投入都会赔掉。

总结

通过劳动实现财富的原始积累，通过资本的被动收入实现财务自由。

好久没写东西啦，懒癌犯了。。。

问题

单页面应用，用户使用wifi打开过一个视频后，即使销毁了video，甚至播放页面都关闭的情况下，微信浏览器仍然会在后台继续加载视频，这会浪费很多流量。
最开始以为使用销毁vidoe标签后，视频即会停止加载，事实上在大部分浏览器上确实如此，但是微信内置浏览器在这方面表现不一致。
在使用流量的情况下，退出播放页面后视频确实停止加载了，但是在wifi下，视频会在后台继续下载，除非退出当前单页面应用。

解决问题

• 1、最开始在组件 destroy 的 hook 时，dispose videojs 实例，无效，视频继续后台下载。
• 2、后来想让videojs 加载一个空的视频资源地址欺骗微信浏览器，videojs.src("")，无效，视频还是会继续加载。
• 3、 空的字符串不生效，加载一个无效的视频资源地址，再销毁videojs实例，成功解决视频后台下载的问题。

主要代码如下:

1
2
3
4
5
6
7
8
9
10
11

destroyed() {
      // 组件销毁时,用一个假的播放视频地址,欺骗微信浏览器,使其加载其他的视频,不继续加载我们的视频同时销毁videojs
      this.player.src({
        src: "http://124.160.184.108/live/5/45/3bfabc1fe16a4282b50ea095928c1f60.m3u8",
        type: 'application/x-mpegURL',
        withCredentials: false
      })
      setTimeout(()=>{
        this.player.dispose()
      },1500)
    }

用vue开发的webapp，在性能差的android微信首屏加载时间过长，模拟app启动页减少用户的等待时间过长的感觉。

实现思路

通过sessionStorage存储项目是否被加载过,只在第一次加载显示启动页，在跳出外链回来时不再显示启动页。
主要实现的方案：

index.html入口文件

1

<div id="app"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

if (!sessionStorage.getItem('isLoaded')) {
  var app        = document.getElementById('app')
  var loadingStr = '数据加载中' 
  app.innerHTML  = '<a id="img_wrap" href=""><img id="start_img" src="./static/start-img-2.gif"><span id="count"><i id="count_num">2</i> S</span></a>'
  var TIME       = 2 // 倒计时
  var countNum   = document.getElementById('count_num')
  var timer      = setInterval(function () {
    if (TIME >= 1) {
      countNum.innerText = --TIME
    } else {
      clearInterval(timer)
      app.innerHTML = loadingStr // 防止倒计时结束vue还没挂载
    }
  }, 1000)
  
  // 解决点击后没有挂载
  document.getElementById('img_wrap').addEventListener('click',function (e) {
    sessionStorage.setItem('isLoaded', true)
  })
}

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const mounted = function () {
  return function () {
    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }
    })
  }
}()

if (sessionStorage.getItem('isLoaded')) {
  mounted()
} else {
  setTimeout(() => {
    mounted()
    sessionStorage.setItem('isLoaded', true)
  }, 2000)
}

以上实现方法是比较简单的，如果要对iphone加载快的设备不显示启动页的话只需加个设备判断。

swiper中文官网
swiper英文官网

在开发中经常要用到轮播图插件，swiper官方文档全，功能强大，但在使用中有一些问题，在此记录。

swiper被隐藏后slider的索引被初始化

可以将隐藏改为高度为0，这样就不会触发初始化了。
或者再显示时调用mySwiper.slideTo(index, speed, runCallbacks)
文档中有个observer选项，但是并没有生效。

启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新。

vue-awesome-swiper 循环较多时会很卡

参考vue2+vue-router 在loop下会刷新页面的问题

由于swiper官方并未修复loop模式下附带的一些bug，此问题的解决方法，只能由手动控制点击事件，即为组件绑定点击事件方法，事件发生时获取当前活动状态的slide组建的下标，进行既定操作，此问题暂时关闭。

要自己手动触发切换，同时并且要使用v-once，绑定@click.native事件

1
2
3
4
5
6

 <swiper v-once :options="swiperOption" ref="mySwiper" class="lesson-lists">
  <swiper-slide v-for="(_item,index) in items":key="_item.id"
                @click.native="study(_item),slideTo(index)">
    <!--内容-->
  </swiper-slide>
</swiper>

需求分析

在日常项目中，会有几个项目共同的组件或者工具函数库。这些代码如果在各个项目中都copy一份的话，如果有需要改动的话，oh，要累死去。
本着DPR的原则，需要一种可以管理公用代码的方法。并且代码中有些是公司内部业务逻辑，这肯定不能发布成公用包。所以需要一种私有包管理方案。

可选方案

• 1、npm官方私有包，需要收费，pass
• 2、搭建npm私有服务器，还没有这个必要，pass
• 3、使用 npm 安装 git 仓库 简单便利
• 4、使用 git 的 submodule，在主仓库中嵌套子仓库

npm 安装 git 仓库

因为github私有仓库需要收费，这里我使用码云创建免费私有 git 仓库。
在项目中直接 npm 安装私有仓库，示例：

1

npm install git+ssh://git@github.com:ltinyho/test.git 

可以使用npm install --help查看install命令(npm@5.3.0)

1
2
3
4
5
6
7
8
9
10

npm install (with no args, in package dir)
npm install [<@scope>/]<pkg>
npm install [<@scope>/]<pkg>@<tag>
npm install [<@scope>/]<pkg>@<version>
npm install [<@scope>/]<pkg>@<version range>
npm install <folder>
npm install <tarball file>
npm install <tarball url>
npm install <git:// url>
npm install <github username>/<github project>

从git安装可以选择标签|分支|commit，最好更该代码后修改仓库中package.json版本信息

1

npm install <github username>/<github project>#<tag|branch|commit>

git submodule 仓库嵌套

1
2

git submodule add <仓库地址> <文件路径>
在项目根目录生成`.gitmodules`文件，记录子模块的信息

新项目安装或者更新

1
2

git submodule init 
git submodule update