久久久久久国产精品免费免费

日韩精品无码一本二本三本色 前端進階: 何如用 Javascript 存儲函數?

发布日期:2022-05-19 03:21    点击次数:97

日韩精品无码一本二本三本色

任何一家Saas企業都需要有我方的低代碼平臺.在可視化低代碼的前端研發過程中, 發現了许多专门旨风趣风趣的技術需求, 在解決這些需求的過程中, 经常也會給我方帶來许多收獲, 今天就來共享一下在研發Dooring過程中遭受的前端技術問題——javascript函數存儲.

配景介紹

我們都清亮要想搭建一個前端頁面基本需要如下3個身分:

元素(UI) 數據(Data) 事件/交互(Event)

在 數據驅動視圖 的時代, 這三個身分的關系经常如下圖所示:

趣談前端

可視化搭建平臺的設計条理经常亦然基于上头的過程展開的, 我們需要提供編輯器環境給用戶來創建視圖和交互, 最終用戶保存的產物可能是這樣的:

{ 日韩精品无码一本二本三本色    "name": "Dooring表單",     "bgColor": "#666",     "share_url": "http://xxx.cn",     "mount_event": [         {             "id": "123",             "func": () => {                 // 运行化邏輯                 GamepadHapticActuator();             },             "sourcedata": []         }     ],     "body": [         {             "name": "header",             "event": [                 {                     "id": "123",                     "type": "click",                     "func": () => {                         // 組件自定義交互邏輯                         showModal();                     }                 }             ]         }     ] } 

那么問題來了, json 字符串我們好保存(不错通過JSON.stringify序列化的方式), 然而何如將函數也通盘保存呢? 保存好了函數如安在頁面渲染的時候能当年讓 js 運行這個函數呢?

實現有策画思考

趣談前端

我們都清亮將 js 對象轉化為json 不错用 JSON.stringify 來實現, 然而它也會有局限性, 比如:

轉換值若是有 toJSON() 要领,那么由 toJson() 定義什么值將被序列化 非數組對象的屬性不成保證以特定的順序出現在序列化后的字符串中 布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值 undefined、自便的函數以及 symbol 值,在序列化過程中會被忽略(出現在非數組對象的屬性值中時)八成被轉換成 null(出現在數組中時)。函數、undefined 被單獨轉換時,會复返 undefined,如JSON.stringify(function(){}) or JSON.stringify(undefined) 扫数以 symbol 為屬性鍵的屬性都會被系数忽略掉,即便 replacer 參數中強制指定包含了它們 Date 日历調用了 toJSON() 將其轉換為了 string 字符串(同Date.toISOString()),因此會被當做字符串處理 NaN 和 Infinity 风光的數值及 null 都會被當做 null 其他類型的對象,包括 Map/Set/WeakMap/WeakSet,僅會序列化可枚舉的屬性

我們不错看到第4條, 若是我們序列化的對象中有函數, 它將會被忽略! 是以常理上我們使用JSON.stringify 是無法保存函數的, 那還有其他辦法嗎?

也許民众會猜测先將函數轉換成字符串, 再用 JSON.stringify 序列化后保存到后端, 终末在組件使用的時候再用 eval 八成 Function 將字符串轉換成函數. 约莫历程如下:

趣談前端

不錯, 梦想很美好, 然而現實很_______.

接下來我們就通盘分析一下關鍵環節 func2string 和 string2func 何如實現的.

js存儲函數有策画設計

老到 JSON API 的至交可能會清亮 JSON.stringify 营救3個參數, 第二個參數 replacer 不错是一個函數八成一個數組。作為函數,它有兩個參數,鍵(key)和值(value),它們都會被序列化。 函數需要复返 JSON 字符串中的 value, 如下所示:

若是复返一個 Number日韩精品无码一本二本三本色, 国产亚洲精品无码无需播放器 轉換成相應的字符串作為屬性值被添加入 JSON 字符串

若是复返一個 String, 該字符串作為屬性值被添加入 JSON 字符串

若是复返一個 Boolean, 則 "true" 八成 "false" 作為屬性值被添加入 JSON 字符串

若是复返任何其他對象,該對象遞歸地序列化成 JSON 字符串,對每個屬性調用 replacer 要领。除非該對象是一個函數,這種情況將不會被序列化成 JSON 字符

若是复返 undefined,該屬性值不會在 JSON 字符串中輸出

是以我們不错在第二個函數參數里對 value類型為函數的數據進行轉換。如下:

const stringify = (obj) => {     return JSON.stringify(obj, (k, v) => {       if(typeof v === 'function') {           return `${v}`       }       return v     }) } 

這樣我們看似就能把函數保存到后端了. 接下來我們望望何如反序列化帶函數字符串的 json.

因為我們將函數轉換為字符串了, 我們在反默契時就需要清亮哪些字符串是需要轉換成函數的, 若是不對函數做任何處理我們可能需要人肉識別.

人肉識別的缺點在于我們需要用正則把具有函數特征的字符串提炼出來, 然而函數寫法有许多, 我們要考慮很厚情況, 也不成保證具有函數特征的字符串一定是函數.

是以我換了一種簡單的方式, 不错无须寫復雜正則就能將函數提炼出來, 要领即是在函數序列化的時候注入標識符, 這樣我們就能清亮那些字符串是需要默契為函數了, 如下:

stringify: function(obj: any, space: number | string, error: (err: Error | unknown) => {}) {         try {             return JSON.stringify(obj,久久电影网 (k, v) => {                 if(typeof v === 'function') {                     return `${this.FUNC_PREFIX}${v}`                 }                 return v             }, space)         } catch(err) {             error && error(err)         } } 

this.FUNC_PREFIX 即是我們定義的標識符, 這樣我們在用 JSON.parse 的時候就能快速默契函數了. JSON.parse 也营救第二個參數, 他的用法和 JSON.stringify 的第二個參數類似, 我們不错對它進行轉換, 如下:

parse: function(jsonStr: string, error: (err: Error | unknown) => {}) {         try {             return JSON.parse(jsonStr, (key, value) => {                 if(value && typeof value === 'string') {                     return value.indexOf(this.FUNC_PREFIX) > -1 ? new Function(`return ${value.replace(this.FUNC_PREFIX, '')}`)() : value                 }                 return value             })         } catch(err) {             error && error(err)         }     } 

new Function 不错把字符串轉換成 js 函數, 它只罗致字符串參數,其可選參數為要领的入參,必填參數為要领體內容, 一個形象的例子:

趣談前端

我們上述的代碼中函數體的內容:

new Function(`return ${value.replace(this.FUNC_PREFIX, '')}`)()

自疫情爆发以来,很多企业都走在了抗“疫”一线,他们中有很多都是江淮轻卡的用户。他们或积极捐款捐物、或忙于物资运输,每一幅忙碌的画面背后,都是他们不懈的努力,为抗“疫”默默奉献。

全新一代路虎揽胜的上市发布会采用数字连线云直播形式,通过线上互动为全国媒体、车主和车迷呈现一场跨越时空的视听盛宴。著名指挥家、上海交响乐团音乐总监、捷豹路虎品牌大使余隆将交响乐与豪华汽车品牌的特质融会贯通,针对全新一代路虎揽胜的传承创新与美学魅力,为线上观众带来独到解读。“樊登读书”创始人、首席内容官樊登通过跨界对话,以创业家的睿智,洞见“胜为典范”这一主题的深层文化内涵。著名当代艺术家邬建安和陈彧君以颇具时代精神的艺术臻品呼应并诠释全新一代路虎揽胜的标志性设计理念及新现代豪华主义。男高音歌唱家戴玉强与实力新星马佳倾情献唱世界名曲《我的太阳》,一展“品位人生,奢享座驾”的至高愿景。

宝马集团董事长齐普策说:“全新BMW 7系是我们的巅峰之作,将引领潮流的颠覆设计与创新科技融为一体,科技魅力彰显无遗。而创新BMW i7是最强的7系,是宝马成功发展和坚定电动化转型的最新例证。”

除了极具诚意的定价外,为了给更多热血青年带来触手可及的赛道乐趣,星途凌云S还提供了“七重礼遇”购车方案:金融礼可享至高贴息8000元,置换礼可享至高补贴7000元(与金融礼二选一),与此同时,首任车主还可享受五免礼至高15000元用户综合权益,欢迎各位用户前往当地星途体验中心品鉴垂询。

负责中国市场的奥迪汽车股份公司管理董事会主席杜思曼(Markus Duesmann)表示:“为更贴近中国消费者,奥迪在北京与英戈尔施塔特两地的设计团队始终保持紧密合作,最终成功共同打造这款奥迪urbansphere概念车。”这也是中国消费者首次参与奥迪车辆设计过程,在与奥迪“创新共创”的设计理念中充分表达观点与建议,让奥迪urbansphere概念车更好满足用户对高端出行的需求。

宝马集团整车开发高级副总裁Florian Preuß表示:“为实现全系车型的碳减排,宝马集团不仅关注车辆的使用阶段,还非常重视生产过程的节能减排。创新材料的选择与整合,是宝马集团实现碳中和目标的关键一步。”

本次“72小时接力直播挑战赛”的首日竞赛中,凌云S创造85.9km/h的麋鹿测试SUV新纪录,并以6秒的零百加速成绩成为同级“最速燃油SUV”。经过血脉喷张的角逐,星途凌云S延续首日高能表现,定点绕圆31.3s、高速绕桩9.7s,强势的冲刺、平稳的操作让“赛道级性能SUV”的优秀品质再度彰显。

之是以要 return 是為了把原函數原封不動的還原, 民众也不错用 eval , 然而出于輿論還是謹慎使用.

以上有策画已經能實現前端存儲函數的功能了, 然而為了更工程化和健壯性還需要做许多額外的處理和優化, 這樣才气讓更多人開箱即用的使用你的庫.

终末

為了讓更多人能告成使用這個功能, 我將齐备版 json 序列化有策画封裝成了類庫, 营救功能如下:

stringify 在原生JSON.stringify 的基礎上营救序列化函數,錯誤回調

parse 在原生JSON.parse 的基礎上营救反序列化函數,錯誤回調

funcParse 將js對象中的函數一鍵序列化, 并保持js對象類型不變

安裝方式如下:

# or npm install xijs  yarn add xijs 

使用:

import { parser } from 'xijs';  const a = {     x: 12,     b: function() {       alert(1)     }  }    const json = parser.stringify(a);  const obj = parser.parse(json);  // 調用要领  obj.b(); 

本文轉載自微信公眾號「趣談前端」,不错通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。