如何將此NativeScript代碼提取為可重用的函數？

Question

問題概述

我試圖從我的NativeScript代碼隱藏文件中提取一些工作代碼，並從中創建一個可重用的函數。

有問題的代碼實際上是一個名為NativeScript Feedback的插件。

在繼續之前，我想提一下我是NativeScript的新手。

插件演示代碼是用TypeScript編寫的，我花了很長時間的試驗和錯誤才能讓它在我的核心應用程序中運行。

這是工作代碼：

// example-page.js
// +---------------------------------------------------------------------------+
// | ALCA IT SOLUTIONS - Preferred Blank NativeScript Templates                |
// +---------------------------------------------------------------------------+                                                                       |                              |
// | VIEW MODEL Variables                                                      |
// | To access properties within view-model from XML screen:                   |
// |    -- use double curly brackets {{ }}                                     |
// |       example:  <Label text="{{ username }}" />                           |
// |                 <Button text="tap me" tap="{{ myTapMethod }}"/>           |
// | To access functions OUTSIDE of view model from XML screen:                |
// |    -- omit double curly brackets                                          |
// |       example:  <Button text="tap me" tap="myGenericFunction" />          |                                 |                                                                             
// +---------------------------------------------------------------------------+
// | 1. IMPORT REQUIRED FILES                                                  |                                                                        |
// +---------------------------------------------------------------------------+
const  { app }         = require("tns-core-modules/application");
const  { fromObject }  = require("tns-core-modules/data/observable");
var frameModule = require("tns-core-modules/ui/frame");

// Feedback Testing
const  Color  = require("tns-core-modules/color");
const Feedback  = require("nativescript-feedback").Feedback;
const FeedbackType  = require("nativescript-feedback").FeedbackType;
const  FeedbackPosition  = require("nativescript-feedback").FeedbackPosition;
const isIOS  = require ("tns-core-modules/platform");

// +---------------------------------------------------------------------------+
// | 2. CREATE VIEW MODEL                                                      |                                                                        |
// +---------------------------------------------------------------------------+
const model = {

  /* Properties */
  username: "john",
  password: "12345",
  feedback: new Feedback(),
  feedbackPosition: FeedbackPosition,
  feedbackType: FeedbackType,

  /* Methods */
  onNavTap: function(args){
    const navBtn = args.object;
    const page = navBtn.page;
    const btnId = navBtn.id;

    switch(btnId) {
      case "btn-activity":
          //page.frame.navigate("./activity/bloodpressure/bloodpressure");
          break;
      case "btn-programs":
        // code block
          break;
      case "btn-messages":
          // code block
          break;

      case "btn-journal":
          // code block
          break;

      case "btn-community":
          // code block
          break;

    }

    //alert(`${navBtn.id} is the id of the button!`);
    //this.showSuccess();
    this.showError();
    //this.showWarning();
  },

  showSuccess: function() {
    this.feedback.success({
      title: "Successfully shown myself!",
      message: "I'm configured to hide after 2.5 seconds.",
      duration: 2500,
      // type: FeedbackType.Success, // no need to specify when using 'success' instead of 'show'
      onTap: () => {
        console.log("showSuccess tapped");
      }
    });
  },

  showError: function(){
    this.feedback.show({
      title: "Feature Incomplete",
      titleSize: 25.0,
      message: "The Health Conscious feature you are trying to view has not been completed yet. Please check back soon!",
      messageSize: 14.0,
      duration: 5000,
      position: this.feedbackPosition.Bottom,
      type: this.feedbackType.Error,
      onTap: () => {
        console.log("showErrorBottom tapped");
      }
    });
  },

  showWarning: function(){
    this.feedback.show({
      // title: "The warning title",
      message: "This one doesn't have a title, but a very long message so this baby will wrap. Showing off multi-line feedback. Woohoo!",
      duration: 4000,
      position: FeedbackPosition.Top,
      type: FeedbackType.Warning,
      onTap: () => {
        console.log("showWarning tapped");
      }
    });
  }

}

/* Set the binding context */
const bindingContext = fromObject(model);

// +---------------------------------------------------------------------------+
// | 3. OTHER FUNCTIONS ( Not bound to ViewModel )                             |                                                                        |
// +---------------------------------------------------------------------------+
function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = bindingContext;
}

function onDrawerButtonTap(args) {
  const sideDrawer = app.getRootView();
  sideDrawer.showDrawer();
}

// +---------------------------------------------------------------------------+
// | 4. EXPORT OTHER FUNCTIONS                                                 |                                                                        |
// +---------------------------------------------------------------------------+
exports.pageLoaded = pageLoaded;
exports.onDrawerButtonTap = onDrawerButtonTap;

如您所見，Feedback插件在此頁面中成功運行。

我試圖將它提取到自己的文件中，我試圖“要求”它。 沒有任何效果。

我如何將此反饋代碼提取到我可以調用的文件中？ 我希望能夠從我的應用程序中的任何頁面調用showSuccess，showWarning，showError - 這將是很棒的。 當然更好的是發送參數。

你能告訴我如何將這3個功能放在他們自己的文件中嗎？

我肯定會感謝你的幫助。 謝謝。

約翰

Answer 1

您需要創建新的js文件。 復制您的反饋要求和您的功能。 確保導出函數，然后您可以在任何其他文件中要求您的新文件（模塊），或者只需要函數，因為您已將它們聲明為可導出。 因此，您的模塊（新文件）可能是“feedback-util.js”，然后您使用該模塊的要求將是該文件的相對路徑。 假設您在新文件const f = require("./feedback-util");上的同一目錄中const f = require("./feedback-util"); 然后是f.showSuccess(arg, arg2)

要允許傳遞參數，只需在編寫函數時聲明參數參數。 那么當你調用該函數時，你會提供參數的值