麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何構建自己的調查并使用自定義JavaScript擴展它們

如何構建自己的調查并使用自定義JavaScript擴展它們

來源:千鋒教育
發布人:syq
時間: 2022-09-15 15:23:09 1663226589

  關于如何使用自己的JS函數的入門書,以增強ScinessJS附帶的條件邏輯和驗證器。

使用自定義JavaScript擴展

  想要編寫自定義 JavaScript 函數,以便您的調查可以自動檢測用戶設備?請繼續閱讀!

  在調查中最大化投資回報率方面,無論是新廣告活動的市場研究,衡量客戶滿意度還是患者病史采集,最大的差異因素都是相關性。 簡單地說,不要浪費他們的時間。

  您的受訪者不必看到不適用于他們的問題或與他們已經提供的信息相矛盾的樣板問題。

  這就是為什么為調查實施條件分支(更廣為人知的“跳過邏輯”)至關重要的原因。您需要確保受訪者始終獲得最相關的問題 - 因為這就是為您帶來更高完成率和更大數據樣本量的原因。此外,使用條件邏輯,您可以根據以前問題的答案確定問題,所有這些都可以為您提供更好的分析,并為利益相關者提供更準確的預測和指數。

  SurveyJS是一個免費的開源(在MIT許可證下)JavaScript庫,它不僅可以讓你做到這一點,而且還更進一步,允許你用自己的JavaScript代碼擴展你的條件邏輯和輸入驗證,做一些單純的調查庫無法單獨做的事情。

  讓我們構建我們自己的條件和驗證器 - 完全堅持使用普通的JavaScript - 看看這是多么容易,無論你使用的是什么樣的框架。

  請隨時在此處查看成品;自定義函數,模式,所有爵士樂。

  自定義條件邏輯

  對于一個非人為的真實示例,假設您正在設計一個數字使用情況調查,并希望以一種將問題放在一個頁面上,將移動用戶的問題放在另一個頁面上的方式進行分類,兩者在可見性方面都是相互排斥的。

如何構建自己的調查并使用自定義 JavaScript 擴展它們75

  現在,SurveyJS 為您提供了幾個內置的客戶端條件可見性選項和觸發器,以幫助您實現分支和跳過邏輯 — 例如,可見的If、enableIf 和必需的 If 屬性包括:

  a. 在調查架構 (JSON) 本身中設置,

  b. 直觀地接受布爾表達式,以及

  c. 可以應用于問題、面板,甚至整個頁面。

如何構建自己的調查并使用自定義 JavaScript 擴展它們2278

  從這里看一下調查。第二個問題(理想的團隊規模)是可見的,當且僅當前一個問題(之前的團隊經驗)有一個肯定的“是”答案。

  但是,在我們現在正在討論的設備使用情況調查中,如果沒有一個額外的起始問題,這種內置的條件評估就無法幫助我們,該問題會問:“您當前使用的是哪種設備?這是無關緊要的,會占用時間,受訪者可能更希望自動檢測。

  所以現在,你可能會想,“好吧,天哪,如果我能......編寫一個JS函數,自動檢測我的受訪者是在計算機還是在移動設備上,并有條件地顯示兩個頁面之一。

  如果你是,拍拍自己的后背,因為你可以做到這一點。

如何構建自己的調查并使用自定義 JavaScript 擴展它們2727

  順便說一句,這都是普通的 JavaScript。對于較舊的/不受支持的網絡瀏覽器,請嘗試使用 matchMedia() 組合填充。

  這是我們的第一步。編寫一個函數,該函數使用 matchMedia API 運行 CSS 媒體查詢,并在返回的對象上運行一個函數,該函數根據查詢是否匹配給我們一個 或 值 — 非常適合我們,因為當然,我們確實希望在調查中為條件邏輯提供布爾值!matches true false

  我們的函數檢查受訪者的設備,只要它至少有一個細粒度指針(即鼠標或觸摸板),就會返回。如果不是,那么,您的受訪者可能正在使用移動設備。true

  當然,邊緣情況是存在的,但這是一種快速而骯臟的方法來檢查不需要外部庫(如UAParser.js)的設備使用情況,并且可以很好地為我們的示例提供服務。

  自定義函數的下一步是“注冊”它們,如下所示。

如何構建自己的調查并使用自定義 JavaScript 擴展它們3573

  寄存器函數的參數是:

  函數名稱(字符串)

  函數本身

和一個布爾值來指示這是否是異步函數(在這種情況下,庫將期望回調而不是常規的返回語句 - 記住這個,我們稍后會回來討論它!)

  最后,在 JSON 架構中包含函數名稱作為要檢查的條件,這樣就可以了。

如何構建自己的調查并使用自定義 JavaScript 擴展它們3701

  正如您已經猜到的那樣,對于您的 PC 特定頁面,可見的If 屬性需要改為“!ifMobile()”或“如果移動() = 假”。

  自定義輸入驗證 — 本地 *和* 服務器端。

  就像我們做自定義條件來實現跳過邏輯一樣簡單,我們可以進行自定義輸入驗證,以超越 SurveyJS 提供的開箱即用功能。

  在介紹這里令人興奮的部分之前,讓我們看一下自定義輸入驗證的基本示例。

  這是一個非常簡單的示例,它使用正則表達式模式來確保字段中不存在 HTML 代碼,作為防止潛在惡意腳本攻擊的安全措施。Comment

如何構建自己的調查并使用自定義 JavaScript 擴展它們3951

  在(或任何組件實例化并呈現您的調查)中,您可以注冊它,就像我們對自定義條件邏輯的函數所做的那樣。App.jsx

如何構建自己的調查并使用自定義 JavaScript 擴展它們4009

  不要忘記將此函數名稱作為驗證器包含在我們的 JSON 架構中,就像以前一樣。

如何構建自己的調查并使用自定義 JavaScript 擴展它們4050

  還記得 register 函數如何具有可選的布爾參數來指示是否要注冊需要回調的異步函數嗎?

如何構建自己的調查并使用自定義 JavaScript 擴展它們4186

  如果需要復習,下面是類型聲明。

  是的,你猜對了。接下來,我們將構建一個自定義輸入驗證器,該驗證器實際上調用外部的第三方REST API來驗證用戶提供的電子郵件地址,確保它實際上是可傳遞的,而不僅僅是有效的 - 非常有用,因為字段正則表達式只是愚蠢的模式,并且很容易被偽造但看起來正確的電子郵件地址所愚弄, 喜歡。

如何構建自己的調查并使用自定義 JavaScript 擴展它們4367

  我們在這里使用EVA,這是一個漂亮的小型公共API,可以快速為您進行電子郵件驗證,包括檢查可訪問性,網絡郵件狀態和垃圾郵件過濾。

  注冊,并將其作為驗證程序包含在您的 JSON 架構中...

如何構建自己的調查并使用自定義 JavaScript 擴展它們4553

如何構建自己的調查并使用自定義 JavaScript 擴展它們4555

  ...我們完成了!綜上所述,以下是我們的驗證代碼。

如何構建自己的調查并使用自定義 JavaScript 擴展它們4583

  無限潛力

  建筑調查是一項艱苦的工作,不要讓它更難。

  您的想象力和數據收集能力不應是平臺工具的功能,也不應受到您用于所述任務的庫的技術能力的限制。

  這就是使 SurveyJS 脫穎而出的原因 — 能夠使用完全自定義的 JavaScript 代碼來增強現有功能,以準確執行您想要的操作,無論您碰巧使用哪種框架。當然,提供的示例是使用 React 構建的,但沒有一個自定義條件邏輯或輸入驗證是特定于 React 的 — 我們只是使用與框架無關的 vanilla JavaScript 擴展了 SurveyJS。這給我們帶來的可能性之多,怎么強調都不為過。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區
  • 南昌校區
  • 哈爾濱校區
主站蜘蛛池模板: 日本护士恋夜视频免费列表| 色涩屋| 欧美人与牲动交xxxx| 水蜜桃视频在线免费观看| 啊轻点灬大ji巴太粗太长了h| 色婷婷激婷婷深爱五月小蛇| 久久亚洲私人国产精品va| 啊灬啊别停灬用力啊岳| 日本三级在线观看免费| 露脸国语对白视频| 全肉高h动漫在线看| 色国产精品一区在线观看| 精品国产福利久久久| 成人毛片在线观看| 美国式禁忌免费| 国产精品igao视频网网址| 中文字字幕在线精品乱码app | 欧美人与牲动交xxxx| 精品久久久久香蕉网| 果冻传媒麻豆影视在线观看免费版| 日本久久久久亚洲中字幕| 久草香蕉在线| 国产精品久久久久免费视频| 日本特黄特色aa大片免费| 日本高清免费不卡视频| 九色视频网址| 亚洲欧洲精品成人久久曰| 男人影院天堂网址| 被男按摩师添的好爽在线直播| 色综合视频一区二区三区| 女人张开腿让男人桶免费网站| 国语一级片| 亚洲va久久久噜噜噜久久天堂| 天天av天天翘天天综合网| 国产精品久久福利网站| 久操视频免费观看| 一二三四社区在线视频社区| 国产精品成人久久久久久久| 推拿电影完整未删减版资源| 欧美巨大bbbb| 黄色搞基网站|