weex 0.7.0 新增了storage模塊，今天我們來讀一下storage類的源碼。
貼出storage.js全部代碼，為了沒有更新的小伙伴。
/* global localStorage */
'use strict'
const supportLocalStorage = typeof localStorage !== 'undefined'
const logger = require('../logger')
const SUCCESS = 'success'
const FAILED = 'failed'
const INVALID_PARAM = 'invalid_param'
const UNDEFINED = 'undefined'
const storage = {
/**
* When passed a key name and value, will add that key to the storage,
* or update that key's value if it already exists.
* @param {string} key
* @param {string} value
* @param {function} callbackId
*/
setItem: function (key, value, callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
if (!key || !value) {
sender.performCallback(callbackId, {
result: 'failed',
data: INVALID_PARAM
})
return
}
try {
localStorage.setItem(key, value)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
}
catch (e) {
// accept any exception thrown during a storage attempt as a quota error
sender.performCallback(callbackId, {
result: FAILED,
data: UNDEFINED
})
}
},
/**
* When passed a key name, will return that key's value.
* @param {string} key
* @param {function} callbackId
*/
getItem: function (key, callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
if (!key) {
sender.performCallback(callbackId, {
result: FAILED,
data: INVALID_PARAM
})
return
}
const val = localStorage.getItem(key)
sender.performCallback(callbackId, {
result: val ? SUCCESS : FAILED,
data: val || UNDEFINED
})
},
/**
*When passed a key name, will remove that key from the storage.
* @param {string} key
* @param {function} callbackId
*/
removeItem: function (key, callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
if (!key) {
sender.performCallback(callbackId, {
result: FAILED,
data: INVALID_PARAM
})
return
}
localStorage.removeItem(key)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
},
/**
* Returns an integer representing the number of data items stored in the Storage object.
* @param {function} callbackId
*/
length: function (callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
const len = localStorage.length
sender.performCallback(callbackId, {
result: SUCCESS,
data: len
})
},
/**
* Returns an array that contains all keys stored in Storage object.
* @param {function} callbackId
*/
getAllKeys: function (callbackId) {
if (!supportLocalStorage) {
logger.error('your browser is not support localStorage yet.')
return
}
const sender = this.sender
const _arr = []
for (let i = 0; i < localStorage.length; i++) {
_arr.push(localStorage.key(i))
}
sender.performCallback(callbackId, {
result: SUCCESS,
data: _arr
})
}
}
storage._meta = {
storage: [{
name: 'setItem',
args: ['string', 'string', 'function']
}, {
name: 'getItem',
args: ['string', 'function']
}, {
name: 'removeItem',
args: ['string', 'function']
}, {
name: 'length',
args: ['function']
}, {
name: 'getAllKeys',
args: ['function']
}]
}
module.exports = storage
1. 總體有所不同
我們可以看到整體與以往的模塊定義不同了，這次是直接采用了對象定義方法。即：
const storage={
setItem: function (key, value, callbackId) {}
,getItem: function (key, callbackId) {}
,removeItem: function (key, callbackId) {}
,length:function (callbackId) {}
,getAllKeys: function (callbackId) {}
}
我是比較推崇這種寫法的，我認為這種寫法是“一切皆對象”最好的闡釋。可能創(chuàng)作者也認可這種風格的寫法。
2.setItem
- 1.判斷瀏覽器是否支持
if (!supportLocalStorage) { logger.error('your browser is not support localStorage yet.') return }
- 2.判斷是否缺少參數(shù)
if (!key || !value) {
sender.performCallback(callbackId, {
result: 'failed',
data: INVALID_PARAM
})
return
}
如果缺少參數(shù)則返回INVALID_PARAM。
可以看到返回的數(shù)據(jù)是一個對象，包含result和data字段。
- 3.利用try-catch捕捉執(zhí)行的錯誤
try {
localStorage.setItem(key, value)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
}
catch (e) {
// accept any exception thrown during a storage attempt as a quota error
sender.performCallback(callbackId, {
result: FAILED,
data: UNDEFINED
})
}
我們可以看到無論執(zhí)行出錯還是執(zhí)行成功，data均返回UNDEFINED。
3.getItem
const val = localStorage.getItem(key)
sender.performCallback(callbackId, {
result: val ? SUCCESS : FAILED,
data: val || UNDEFINED
})
我們可以看到這個方法調(diào)用了localStorage.getItem方法，并對返回的結(jié)構(gòu)做了簡單的封裝。
4.removeItem
localStorage.removeItem(key)
sender.performCallback(callbackId, {
result: SUCCESS,
data: UNDEFINED
})
我們可以看到 調(diào)用了localStorage.removeItem方法。
5.length
const len = localStorage.length;sender.performCallback(callbackId, { result: SUCCESS, data: len })
僅僅調(diào)用了localStorage.length的值。
6.getAllKeys
const _arr = []
for (let i = 0; i < localStorage.length; i++) {
_arr.push(localStorage.key(i))
}
循環(huán)調(diào)用了localStorage.key(i)獲取所有l(wèi)ocalStorage的鍵。
weex官方，storage類在h5實現(xiàn)上，主要使用了瀏覽器的localstorage對象，從封裝的效果上看，閹割了localstorage的方法和屬性。而且改變了調(diào)用方式，有以前的同步調(diào)用，變?yōu)楝F(xiàn)在的異步調(diào)用。
