vue引⼊外部脚本（将脚本单独放在⼀个js⽂件中，避免vue⽂
件臃肿）
.vue⽂件可以很好的模块化，但是对于从纯js前端转变过来的⼈可能会有点困难，尤其是习惯了html引⼊js脚本，在vue⽂件中，通常将脚本放在method中，但是有的时候如果⽅法过多，造成vue⽂件过⼤不利于管理，尤其是这些⽅法可能就是纯数据处理，对于组件关系不⼤，⽐如⽇期转换，⼤⼩写转换等，可以将其放在⼀个js⽂件中，export出去，然后在.vue⽂件中调⽤。
demo：
表⽰基于风速和风向计算其⽅向和代号值：
/**
*
* 功能：基于站点风的⾓度值获取⽅位，如东北、东偏北等
* 参数：@param {float} degree  站点的⾓度值
* @return {String}
*/
function getWindDirection(degree) {
var d = "";
if (11.25 <= parseInt(degree) && parseInt(degree) < 33.75) {
d = "北偏东";
} else if (33.75 < parseInt(degree) && parseInt(degree) < 56.25) {
d = "东北";
} else if (56.25 < parseInt(degree) && parseInt(degree) < 78.75) {
d = "东偏北";
} else if ((78.75 <= parseInt(degree) && parseInt(degree) < 101.25)) {
d = "东";
} else if (101.25 <= parseInt(degree) && parseInt(degree) < 123.75) {
d = "东偏南";
} else if (123.75 < parseInt(degree) && parseInt(degree) < 146.25) {
d = "东南";
} else if (146.25 < parseInt(degree) && parseInt(degree) < 168.75) {
d = "南偏东";
} else if ((168.75 <= parseInt(degree) && parseInt(degree) < 191.25)) {
d = "南";
} else if (191.25 <= parseInt(degree) && parseInt(degree) < 213.75) {
d = "南偏西";
} else if (213.75 < parseInt(degree) && parseInt(degree) < 236.25) {
d = "西南";
} else if (236.25 < parseInt(degree) && parseInt(degree) < 258.75) {
d = "西偏南";
} else if ((258.75 <= parseInt(degree) && parseInt(degree) < 281.25)) {
d = "西";
} else if (281.25 <= parseInt(degree) && parseInt(degree) < 303.75) {
d = "西偏北";
} else if (303.75 < parseInt(degree) && parseInt(degree) < 326.25) {
d = "西北";
js脚本开发} else if (326.25 < parseInt(degree) && parseInt(degree) < 348.75) {
d = "北偏西";
} else {
d = "北";
}
return d;
}
/**
*
* 功能：基于站点风的风⼒值和⾓度获得风的key("w-1-2")构造字符串
* 参数：@param {float} value  站点的风⼒值
* 参数：@param {float} degree  站点的⾓度值
* @returns
*/
*/
function getWindKey(value, degree) {
var s, d;
if (value < 2) {
s = 0;
} else if (value >= 2 && value < 3) {
s = 1;
} else if (value >= 3 && value < 5) {
s = 2;
} else if (value >= 5 && value < 7) {
s = 3;
} else if (value >= 7 && value < 13) {
s = 4;
} else if (value >= 13 && value < 19) {
s = 5;
} else if (value >= 19 && value < 21) {
s = 6;
} else {
s = 7;
}
if (11.25 <= parseInt(degree) && parseInt(degree) < 33.75) {
d = "1";
} else if (33.75 < parseInt(degree) && parseInt(degree) < 56.25) {
d = "2";
} else if (56.25 < parseInt(degree) && parseInt(degree) < 78.75) {
d = "3";
} else if ((78.75 <= parseInt(degree) && parseInt(degree) < 101.25)) {
d = "4";
} else if (101.25 <= parseInt(degree) && parseInt(degree) < 123.75) {
d = "5";
} else if (123.75 < parseInt(degree) && parseInt(degree) < 146.25) {
d = "6";
} else if (146.25 < parseInt(degree) && parseInt(degree) < 168.75) {
d = "7";
} else if ((168.75 <= parseInt(degree) && parseInt(degree) < 191.25)) {
d = "8";
} else if (191.25 <= parseInt(degree) && parseInt(degree) < 213.75) {
d = "9";
} else if (213.75 < parseInt(degree) && parseInt(degree) < 236.25) {
d = "10";
} else if (236.25 < parseInt(degree) && parseInt(degree) < 258.75) {
d = "11";
} else if ((258.75 <= parseInt(degree) && parseInt(degree) < 281.25)) {
d = "12";
} else if (281.25 <= parseInt(degree) && parseInt(degree) < 303.75) {
d = "13";
} else if (303.75 < parseInt(degree) && parseInt(degree) < 326.25) {
d = "14";
} else if (326.25 < parseInt(degree) && parseInt(degree) < 348.75) {
d = "15";
} else {
d = "0";
}
return "w-" + s + "-" + d;
}
export {
getWindDirection,
getWindKey
};
使⽤时，在需要的.vue⽂件中，先import
import {getWindDirection,getWindKey} from "../tempFunc/index.js"; //引⼊临时脚本地址
然后直接调⽤⽅法
obj1.direct=getWindDirection(list[i][arrEle[6]]);
obj1.value=[obj1.lon,obj1.lat,obj1.windValue],
var key=getWindKey(obj1.windValue,obj1.directValue);
这样既可以了，这种⽅式可以对常⽤的函数放在⼀起管理，重复使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。