iscroll click設定對各html tag的動作影響

iscroll option的clcik設定值,預設為false
1.當click=true
  div與a ,click都會被觸發
  input radio或input checkbox則會變的無作用
  button則會被觸發兩次
2.當click=false
  div與a click皆不會被觸發
  input radio或input checkbox可以有作用
  button會正常被觸發一次

若要讓iscroll內既要讓div可以click
又要讓radio 可以使用
則需要將click設定為false
並必須設定
preventDefaultException= {tagName:/.*/}
但不建議使用
因為在一些硬體沒那麼好的mobile device上
效能變很差

修正nginx upstream後無法取得真正client ip

把nodejs服務放在nginx後面用upstream來跑
發現要取得client real ip常常都是取到127.0.0.1
修正方式
1.nginx設定
  在locate 區塊加上
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
2.ndojs用
  使用 req.headers['x-forwarded-for'] 取得client ip
 

Object.defineProperty 覆寫已存在屬性

利用 Object.defineProperty可以為指定的
物件加上自訂的屬性資料
但在較舊的瀏覽器上若對已經存在的屬性去做重新設定則會發生錯誤
例 要在fn物件加上一個name的屬性

Object.defineProperty(fn, "name", { value: 'testName'})

這在android 4.x版預設的瀏覽器上會發生錯誤
如果改用其他property name 則可正常運作
例

Object.defineProperty(fn, "fnName", { value: 'testName'})

使用pkg 建立nodejs執行檔

利用pkg可以把nodejs專案封裝成跨平台的執行檔案
就可以發布單一檔案給個測試平台
不過有幾點需要注意
1.es6轉換
  新版本的nodejs,可以直接運行es6
  不過要使用pkg須先透過babel轉成es5
2.透過pkg設定將其他的檔案封裝到執行檔內
  通常透過程式裡的require,會將相依的檔案封裝到
  應用程式內
  但若有其他如圖檔,css或其他js script要強制封裝進去
  可以透過在package.json內設定pkg來載入
  若設定了則需要透過pkg . 或 pkg package.json指令
  讓pkg知道要另外封裝這些檔案
pkg網址
package.json檔案範例

{
  "name": "simplesocket",
  "version": "1.0.0",
  "description": "build simple socket server excute file for web",
  "main": "lib/index.js",
  "bin": "lib/index.js",
  "scripts": {
    "start": "babel -s inline -d lib -w src | nodemon lib/index.js",
    "build": "pkg package.json --target node8-macos-x64,node8-win-x86 --out-dir output",
    "prepublish": "node_modules/babel-cli/bin/babel.js src --out-dir lib"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  "pkg": {
    "scripts":"node_modules/extra../**/*.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ozzysun/simpleSocket.git"
  },
  "keywords": [
    "socketio",
    "express",
    "pkg"
  ],
  "author": "ozzysun",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ozzysun/simpleSocket/issues"
  },
  "homepage": "https://github.com/ozzysun/simpleSocket#readme",
  "dependencies": {
    ...
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "nodemon": "^1.11.0"
  }
  
}

single file component 使用 vuelidate

validate提供了vue很方便的資料驗證功能
以下是使用在Single File Component上程序

一.在框架上載入vuelidate

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

二.元件上使用
1.以mixin方式使用mixin加入

import { validationMixin } from 'vuelidate'
mixins:[validationMixin],
此時就可以在元件內加入validations來設定相關要驗證的規則
validations可以是物件
validations:{

}
也可以是method
validations(){
  return {}
}

這時候在元件內就可以得到this.$v來操作相關
2.import所要用到的validator,

import { required, minLength,maxLength,numeric } from 'vuelidate/lib/validators'

3.透過$v.model名稱取得該model的即時狀態
  依照取得的model狀態,來決定畫面要做如何的處置

三.Sample

<template>
  <div>
    <input type="password" v-model.trim="pwd">
    <button v-if="isActiveForSend" @click="clickSendBtn">送出</button>
    <span>這欄位所有狀態{{$v.pwd}}</span>
  </div>
</template>
<script>  
import { validationMixin } from 'vuelidate'
import { required, minLength,maxLength,numeric } from 'vuelidate/lib/validators'
export default {
  mixins:[validationMixin],
  validations(){
    return {
      pwd:{
        required,
        numeric,
        minLength: minLength(6),
        maxLength:maxLength(6)
      }
    }
  },
  computed:{
    isActiveForSend(){
      return this.$v.pwd.required&&this.$v.pwd.numeric&&this.$v.pwd.minLength&&this.$v.pwd.maxLength
    }
  },
}
</script>