十二月, 2018 | 噩梦甜甜

pwa简单说明

什么是pwa

PWA全称Progressive Web App，即渐进式WEB应用。
本质上是一个网页，通过2种新技术可以运行在本地（手机端和桌面端）
- App Manifest 使网页程序可以在没有记录url的使用在桌面上访问，可以实现加载动画。
- Service Worker 是网页拥有了离线运行的基础，本质是离线缓存资源与请求数据。
- Service Worker 实现了消息推送

大致实现方式

使用Manifest添加程序到主屏

index.html

<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="icon" href="/e.png" type="image/png" />
</head>

manifest.json

{
  "name": "Minimal PWA", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示，如果没有设置，则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标，是一个数组
    {
    "src": "icon/lowres.webp",
    "sizes": "48x48",  // 以空格分隔的图片尺寸
    "type": "image/webp"  // 帮助userAgent快速排除不支持的类型
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
  ]
}

service worker简介

service worker 是chrome 团队提出的一个web api,提供可持续的后台处理能力（类似与axios）
特点：
- 在页面中注册并安装成功后，运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。
- 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
- 运行于浏览器后台，可以控制打开的作用域范围下所有的页面请求
- 单独的作用域范围，单独的运行环境和执行线程（这个比较重要，不然一直是一个阻塞模式）
- 不能操作页面 DOM。但可以通过事件机制来处理
- 事件驱动型服务线程
浏览器支持情况
- chrome 和 firefox支持其他基本不支持

优缺点

优点

app快速开发，桌面全屏运行
能够做到部分源生应用功能，可以离线使用
消息推送
本质是网页，方便更新。（没有原生app的各种启动条件，快速响应用户指令）

缺点

支持率不高:现在ios手机端不支持pwa，IE也暂时不支持（这点就已经让这个技术pass了）
Chrome在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低
各大厂商还未明确支持pwa （这点就已经让这个技术pass了）
依赖的GCM服务在国内无法使用（这点就已经让这个技术pass了）
微信小程序的竞争

尽管有上述的一些缺点，PWA技术仍然有很多可以使用的点。

service worker技术实现离线缓存，可以将一些不经常更改的静态文件放到缓存中，提升用户体验。
service worker实现消息推送，使用浏览器推送功能，吸引用户
渐进式开发，尽管一些浏览器暂时不支持，可以利用上述技术给使用支持浏览器的用户带来更好的体验。

参考链接

Manifest参考文档
 chrome工程师讲解Manifest
pwa详细说明及实现方式

es6 实现私有关键字 private

es6 没有在class中实现私有关键字 private

私有属性的特征

class内部不同方法间可以使用，因此this要指向实例化对象（必须）
不能被外部访问，因此实例化对象$person.name既不能获得值，也不能设定值（必须）
不能被继承，因此extends后子类不具备该属性，但理论上可以重新手工添加（必须）
约定为前面有下划线的this._name形式（备选）

暂时需要自己实现,一般有2种实现方法

使用weakmap

const _mytimeOpts = new WeakMap()
class mytime {

  constructor () {
    let opts = {'startTime': '', 'endTime': ''}
    _mytimeOpts.set(this, opts)
  }

  strat () {
    let startTime = Date.now()
    _mytimeOpts.get(this).startTime = startTime
  }

  end () {
    let endTime = Date.now()
    _mytimeOpts.get(this).endTime = endTime
  }

  getTime () {
    return _mytimeOpts.get(this).endTime - _mytimeOpts.get(this).startTime
  }

  test () {
    console.log('right')
  }
}

使用symbol

const _startTime = Symbol('startTime')
const _endTime = Symbol('endTime')

class mytime1 {

  constructor () {
    this[_startTime] = ''
    this[_endTime] = ''
  }

  strat () {
    this[_startTime] = Date.now()
  }

  end () {
    this[_endTime] = Date.now()
  }

  getTime () {
    return this[_endTime] - this[_startTime]
  }

}

总结
- weakmap模式符合所有的私有特性
- symbol只能保证在外部不能被发现但是调用Reflect.ownkeys还是可以看到这些属性
- 最终选择 weakmap
参考链接
weakmap优点
 weakmap和symbol对比

sublimetext3 markdown 配置说明

安装包管理器 packagecontrol

按下 commadn+sift+P 出现插件管理输入 pack ins 查找对应的包

安装MarkdownEditing markdown 编辑器

mdi +tab 添加图片
mdl +tab 添加链接
更多查看key-bindings

在要生成目录的地方输入 [toc]
设置{“default_list_bullets”: “-+*”} 不然只会读取标题
默认深度为2 可以根据需要修改

安装OmniMarkupPreviwer 实时预览和导出

command+ option + o 预览
command + option + x 导出html

git换行符问题

起因

在跨平台项目中，经常会出现windows和linux，Macos,unix 等平台，
在当前windows平台中的文件换行符为（0x0d0a）crlf,
其他平台都是（0x0a）lf，
在git项目中如果不注意就会出现windows拉取后不修改提交，
仍然显示有改动的问题。

解决办法

git中给出了一个自动切换的方式（code.autoclrf=true）
但是有bug不能使用(在有中文的文件中无法自动转换)
pass（这里的pass 就是不通过的意思）
到底咋用我也不知道 pass到底啥意思

最终解决办法是
编译器不对代码做任何改动
每次提交的时候拒绝提交包含crlf的代码
git config –global core.autocrlf false
git config –global core.safecrlf true
完美解决

参考

git上的办法
 详细的说明和解决办法
 详细的说明和解决办法

nginx配置说明

安装nginx

修改nginx配置文件

server
{
    #转发端口
    listen 8002;
    #转发域名
    server_name localhost;
    #转发路径
    location / {
        #转发头缓存大小
        proxy_buffer_size 64k;
        proxy_buffers   32 32k;
        proxy_busy_buffers_size 128k;
        #被转发ip，端口隐藏
        proxy_redirect http://xxx.xxx.xxx/ http://blog.emengtt.com/;
        #被转发地址
        proxy_pass   http://xx.xxx.xxx/;
        }
    #日志
    access_log logs/show.log;
}

基本操作

windows
开始 nginx.exe
停止 nginx.exe -s stop
重新加载配置文件启动 nginx.exe -s reload
linux
开始 nginx
停止 nginx -s stop
重新加载配置文件启动 nginx -s reload
注：可能需要管理员权限
nginx 设置最大文件设置

client_max_body_size 20M;
nginx 设置超时时间
> proxy_connect_timeout 600s;
> proxy_send_timeout 600s;
> proxy_read_timeout 600s;

编译安装nginx并配置负载均衡

下载安装nginx
解压nginx tar -zxvf nginx-1.11.6.tar.gz
进入解压目录执行./configure（非阿里云需要自己安装gcc编译程序yum install gcc-c++）

查看缺少的组件一般缺少（pcre，pcre-devel，zlib，zlib-devel，openssl ，openssl-devel）
安装示例：yum install -y openssl openssl-devel（阿里云上的安装方式）
或者源码编译安装，安装示例：

./configure --prefix=/usr/local/nginx --with-zlib=../zlib-1.2.8 --with-pcre=../pcre-8.36   
make    
sudo make install
#如果新加模块
./configure –add-module=/data/software/ngx_http_google_filter_module
make 自动替换原来的nginx二进制
#查看已经编译的模块 V是大写的
nginx -V

默认安装位置

  nginx path prefix: "/usr/local/nginx"
  nginx binary file: "/usr/local/nginx/sbin/nginx"
  nginx modules path: "/usr/local/nginx/modules"
  nginx configuration prefix: "/usr/local/nginx/conf"
  nginx configuration file: "/usr/local/nginx/conf/nginx.conf"
  nginx pid file: "/usr/local/nginx/logs/nginx.pid"
  nginx error log file: "/usr/local/nginx/logs/error.log"
  nginx http access log file: "/usr/local/nginx/logs/access.log"
  nginx http client request body temporary files: "client_body_temp"
  nginx http proxy temporary files: "proxy_temp"
  nginx http fastcgi temporary files: "fastcgi_temp"
  nginx http uwsgi temporary files: "uwsgi_temp"
  nginx http scgi temporary files: "scgi_temp"

nginx 的负载均衡

  upstream  mis-tomcat { 
     #负载均衡配置为轮换分配
     #round-robin;
     #负载均衡配置为哪个链接少就分配到哪个
     #least_connected;
     # 集群mistomcat 配置
     # weight 权重相同 
     # max_fails 最大失败次数 
     # fail_timeout 每次超过最大失败次数停用时间
     # backup 所有其他服务器都挂了的话backup生效
     # down 服务器不启用
     # resolve 指定域名解析服务
     server 10.168.1.218:9080  weight=1 max_fails=1 fail_timeout=10;  
     server 10.168.1.218:10080 weight=1;
     server 10.168.1.219:8080 backup down resolve
     #负载均衡配置为根据ip值绑定，但是服务器不可用就会切换机器
     ip_hash; 
  }

上面3种是nginx自带的负载均衡策略还可以自定义策略
比如哈希一致性负载均衡策略哈希一致性负载均衡策略
比如fair fair下载
比如url_hash 1.7.2版本之后nginx内置 url_hash详细说明

nginx 的session共享
- 使用cookie储存session（代码部分配置和修改）（而且不安全cookie会被伪造）
- 使用数据库储存session (代码改动)（加大了数据库负担，切同步时间较慢）
- 使用memcache或redis (代码改动)（速度快，但是有内存压力，内存不足会溢出）
- nginx的ip_hash (nginx改动) （使用ip做hash来分配用户到固定机器）
  >有3个弊端:
  nginx服务器要在最前端能够获取真实ip,
  nginx分发之后不能再次分发否则session不起作用,
  如果大量用户在同一局域网访问负载均衡失效
- upstream_hash (nginx改动)（第三方模块）（和ip_hash差不多只是更改做hash的参数）
参考链接

nginx在linux上的编译安装
 ngxin在mac上的编译安装
 nginx常用配置
 nginx+tomcat负载均衡配置
 nginx负载均衡一致性哈希
 nginx负载均衡配置
 nginx和apache的比较
 nginx的session共享问题

月份：2018年12月

pwa简单说明

pwa简单说明

什么是pwa

大致实现方式

使用Manifest添加程序到主屏

service worker简介

优缺点

优点

缺点

尽管有上述的一些缺点，PWA技术仍然有很多可以使用的点。

参考链接

相关链接

es6 实现私有关键字 private

es6 没有在class中实现私有关键字 private

私有属性的特征

暂时需要自己实现,一般有2种实现方法

sublimetext3 markdown 配置说明

git换行符问题

起因

解决办法

参考

nginx配置说明

编译安装nginx并配置负载均衡