Question

我制作了一个我需要在不同实例中使用的页面。简而言之，它用于填充脚本的不同部分，然后在页面上显示所述脚本以供用户复制。

下面这个脚本处理作业的主要部分，从HTML获取一个字段，然后我可以调用html中的结果进行显示。

var urlField = document.getElementById('urlField').value;
var resultUrl = document.getElementById('resultUrl');
resultUrl.textContent = urlField;

问题：有不同的领域，例如。 url，startdate，enddate，adschedule等等所以我希望有一个可重复使用的脚本，只是说获取相应的字段并得到在html中分配给它的值。

我能以某种方式这样做吗？我在javascript中研究了“this”这个函数，但对于我目前的知识来说它太复杂了。请记住，我只处于一个非常基本的层面。

您可以在此处找到整个codepen以更好地了解问题：https://codepen.io/kmb5/pen/GxZbZq

Answer 1

将参数添加到可重复使用的功能中，然后在需要使用它时调用它。使用javascript获取所需数据并将其作为参数传递。

reusable.js：

function myFuncWithParameters(parm1, parm2, parm3){

}

可替换地：

function myFuncWithParameters(myObject){
    //access properties from the object: myObject.parm1, myObject.parm2, myObject.parm3
}

使用对象路径可能会更容易，因为属性的顺序与参数无关。无论采用哪种方法，您都必须验证输入。

在你的html页面中，你需要一些更多的JavaScript和HTML来引入JS并调用它。

<html>
    <head>
        <title>my page</title>
        <script scr="path to reusable js"></script>
        <script src="path to this path's js"></script>
    </head>
    <body>
        my page
    </body>
</html>

如果您查看脚本标记，通过导入可重用的js，您可以在javascript中使用它，该javascript是在页面中进一步编写/导入的。

为了确保您可以访问导入的功能，您可以检查是否定义了您需要的功能：

if(typeof(myFuncWithParameters) !== 'undefined' && typeof(myFuncWithParameters) == typeof(Function){
    //myFuncWithParameters will definitely be defined and is a function, if we get in here
}else{
    //myFuncWithParameters is not defined and/or is not a function
}

在你的html页面中调用可重复使用的功能......

var parm1 = value;
var parm2 = value;
var parm3 = value;
myFuncWithParameters(parm1, parm2, parm3);

您决定使用该对象：

var myObject = {
    'parm1' : 4,
    'parm2' : 6
}
//myObject.parm1 == 4
myFuncWithParameters(myObject);

创建可重用的javascript函数而不是复制/粘贴

1 个答案: