摘要:最近遇到一個,在調用的接口時,有一個接口需要傳遞函數名過去,在中我已經傳遞了函數名過去,但是在部分及以下的安卓手機以及上發現,并沒有收到我傳遞函數名,函數名為空,百思不得其解,后來瀏覽了上對的解釋后,修復了這個。
最近遇到一個bug,在調用APP的js接口時,有一個接口需要傳遞函數名過去,在js中我已經傳遞了函數名過去,但是在部分Android6.0及以下的安卓手機以及iOS 8上發現,APP并沒有收到我傳遞函數名,函數名為空,百思不得其解,后來瀏覽了MDN上對function.name的解釋后,修復了這個bug。
項目基于VUE2.X開發,語法大部分使用ES6。
具體如下:
//需要傳遞給APP的函數 let callbackFn = { fn: () => { //... } } //調用APP的js接口 nativeAPI.call(callbackFn.fn.name)
簡單的邏輯如上所示,但是在與安卓開發和iOS開發聯調時,他們告訴我,在低版本手機中,我傳過去的回調函數名稱callbackFn.fn.name值為空字符串!就是說我并有獲取到function的名字!
經過思考,嘗試了以下幾種辦法
1. 檢查webpack中babel-polyfill及babel的配置,使打包后的代碼兼容更多的設備經過檢查,webpack中確實引入了babel-polyfill
module.exports = { context: path.resolve(__dirname, "../"), entry: { app: ["babel-polyfill", "./src/main.js"] }, ...
.babelrc文件中配置如下
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }], "stage-0" ], "plugins": ["transform-vue-jsx", "transform-runtime"] }
結果:然而發現并沒有解決問題。
2.放棄es6的箭頭語法,手動改寫js函數將callbackFn改為
var callbackFn = { fn: function() { //... } }
結果:還是不行
3.將回調函數的js文件放到static文件夾中,不參與混淆打包因為js的混淆會改變變量名,為了避免可能發生的錯誤,將回調函數多帶帶挪到static文件夾中,不參與打包
結果:失敗
因為步驟3的失敗,讓我感覺問題可能沒有出在打包過程中,直覺告訴我,我獲取函數名的方法(function.name)可能有問題,于是去MDN搜索了一下,確實有所收獲。
Function.name - JavaScript | MDN
推斷函數名稱
變量和方法可以從句法位置推斷匿名函數的名稱(ECMAScript 2015中新增)。
var f = function() {}; var object = { someMethod: function() {} }; console.log(f.name); // "f" console.log(object.someMethod.name); // "someMethod"
注意描述:(ECMAScript 2015中新增)
這讓我極度懷疑,在函數名的傳遞過程中,可能瀏覽器并沒有幫我“推斷”,也許取到的還是匿名函數,所以我獲取函數名時,獲取的是空字符串,于是我開始手動改寫,代碼如下:
//聲明函數 function callbackFn() { //... } //獲取函數名稱 let callbackName = callbackFn.name //調用APP的js接口 nativeAPI.call(callbackName)
至此,這個問題解決了。
總結:
1.需要傳遞函數名的時候,最好顯式的聲明函數,否則依賴瀏覽器推斷函數名的話不可靠,瀏覽器種類眾多,不能確定是否實現了這個標準;
2.盡量避免使用傳遞函數名這種方式來做為回調函數,因為經過壓縮混淆時會改變函數名,這種做法不可靠。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98305.html
閱讀 2664·2021-11-24 09:38
閱讀 1979·2019-08-30 15:53
閱讀 1234·2019-08-30 15:44
閱讀 3229·2019-08-30 14:10
閱讀 3579·2019-08-29 16:29
閱讀 1800·2019-08-29 16:23
閱讀 1099·2019-08-29 16:20
閱讀 1472·2019-08-29 11:13