js方法的封装 - 爱码网

封装是为了更好的调用，当我们很多页面都需要同一种方法的时候，为了避免每个页面都需要进行重写方法，增加工作量，这个时候就需要我们对部分公共的方法进行封装，这样便于更好的进行调用

我在写接口的时候用到了挺多方法，可能以后会需要进行重复使用，我就对代码进行了整改，把部分方法进行了封装，现在就来说说怎么封装和调用的

1.在写的方法中找到需要封装的部分

2.重建一个js文件，名字自己取，并在html中进行引入

例如：

3.在js中编写function 方法名（参数名，参数名）{

//方法体

}

注意：

在这个里面需要给方法起一个名字，最好是语义化比较好理解的，方便以后优化和查找各方面的

参数名就是方法里面需要的参数，可以看哪些是需要的就进行提取并且写到参数名的位置

一定要return 需要的值，不然会报错

使用的时候要注意和参数名字一一对应，并且保证是所对应的属性

放一个简单的例子：

###~js

/**拼接series中的内容
* @companys 公司名字，去重以后，这个是可以直接放在图表的legend图例中的变量
* @endDatePriceCompany 一个最终的价格数组，前面为空字符串,后面为empty空，长度和X轴时间轴一致
*/
function splicingSeries(companys,endDatePriceCompany) {
var series_content =[];
var jsonStr;
for (var h = 0; h < companys.length; h++) {
if (companys[h] != null) {
//格式一定要写对,比如:{"name":"公司"，"data":[1,2,3],"type":"line"}
// jsonStr = "{\"name\":" + "\"" + companys[h] + "\"" + "," + "\"type\":" + "\"line" + "\"" + "," +
// "\"data\":[" + endDatePriceCompany[h] + "]}"; //对series的内容进行拼接
jsonStr = "{" + "name" + ":" + "'" + companys[h] + "'" + "," + "type" + ":" + "'line'" + "," +
"data" + ":" + "[" + endDatePriceCompany[h] + "]" + "}"; //对series的内容进行拼接
//把拼接的内容string类型转为json对象类型
//这个方法拼接不是合格的字符串转化不了为json对象
// series_content.push(JSON.parse(jsonStr))
//用eval方法进行拼接
series_content.push(eval('(' + jsonStr + ')'))
}
}
return series_content;
}

调用的时候：

//需要在series中进行填充数据的变量
var series_content = splicingSeries(companys,endDatePriceCompany);

封装之前的参考：https://www.cnblogs.com/huchong-bk/p/11457834.html

封装以后放上源码供参考：

<!-- 根据每个公司所出现的次数的所在的日期，判断在这个日期前后的价格数据需不需要填充零
现在的问题是公司的价格数组会从第一天开始往后堆叠，有多少条数据就会在X轴显示多少条，不能和时间一一对应 -->
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/getParam.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/dark.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/macarons.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <select name="" id="sel">
            <option value="dark">dark</option>
            <option value="purple-passion">purple-passion</option>
            <option value="macarons">macarons</option>
        </select>
        <div id="main" style="width: 100%; height: 600px;"></div>
        <script type="text/javascript">
            
            function getAllGoodsByType() {
                var myChart = echarts.init(document.getElementById("main"),'dark');
                $.ajax({
                    url: "http://60.205.224.226:8080/selectSelective",
                    dataType: "json",
                    success: function(data) {
                        
                        var companys = [];
                        var todayPrice = [];
                        var jValue = [];
                        var option = null;
                        
                        // companys = getParamValues("company", data.nameAndDateTime);
                        // console.log(companys)
                        // 遍历data数据中的nameAndDateTime取出来key值
                        for (var key in data.nameAndDateTime) {
                            // console.log(key)//所有的公司名字,已经去重
                            companys.push(key);
                        }
                        // console.log(companys)//所有的公司名字数组

                        //图例展示为公司名字
                        var legendData = companys.map(String);
                        
                        //不能像之前的一样写,现在接口里面数据没有today_price这个字段了
                        // today_price = getParamValues("today_price", data.nameAndTodayPrice);
                        //得到全部时间,放到jValue数组里面
                        for (var item in data.nameAndDateTime) {
                            //item 表示Json串中的属性，如'name' 
                            jValue.push(data.nameAndDateTime[item]); //key所对应的value 
                        }
                        //console.log(jValue);//所有的时间,数组
                        
                        //取出所有的公司数组下标里面的时间精确到天
                        var jValue2 = new Array();
                        for(var i=0;i<jValue.length;i++){
                            jValue2[i] = new Array();
                            for(var j=0;j<jValue[i].length;j++){
                            jValue2[i].push(formatDateUntilDay(jValue[i][j]));
                            }
                        }
                        //打印的是所有公司数组下标去掉时分秒的格式
                         // console.log(jValue2)
                        //打印的是接口数据的公司名字加上时间的数组
                        // console.log(data.nameAndDateTime)
                        
                        
                        //现在需要把时间的时分秒去掉(结果为字符串形式)
                        //如果是下标里面有很多时间的话是不可以直接用formatDateUntilDay方法的
                        var jValue1 = [];
                        for (var i = 0; i < jValue.length; i++) {
                            for (var j = 0; j < jValue[i].length; j++) {
                                jValue1.push(formatDateUntilDay(jValue[i][j]));
                            }
                        }
                        // 想排序发现这样写不能实现
                        // jValue1=delDuplicateArrayItem(jValue1.sort());
                        //对时间进行去重
                        jValue1 = delDuplicateArrayItem(jValue1).reverse();
                        //去掉时分秒并且去重的时间数组(字符串类型)
                        // console.log(jValue1)
                        // console.log(typeof jValue1[0])//String
                        
                        
                        //循环对时间变成时间戳
                        for (var i = 0; i < jValue1.length; i++) {
                            jValue1[i] = (new Date(jValue1[i])).getTime();
                        }
                        //对其时间戳进行排序
                        jValue1 = jValue1.sort();
                        //时间戳(秒数)转换为日期,通过插件里面的方法
                        for (var i = 0; i < jValue1.length; i++) {
                            jValue1[i] = format(jValue1[i], 'yyyy-mm-dd');
                        }
                        //输出需要放在X轴的数组,日期
                        // console.log(jValue1);
                        
                        
                        //循环时间字符串对其月份和天格式化(加0)
                        for(var i=0;i<jValue2.length;i++){
                            for(var j=0;j<jValue2[i].length;j++){
                                jValue2[i][j]=changeSting(jValue2[i][j]);
                            }
                        }
                        
                        //得到全部的公司数据(字符串类型)
                        for (var dataset in data.nameAndTodayPrice) {
                            todayPrice.push(data.nameAndTodayPrice[dataset]);
                        }
                        console.log(todayPrice)
                         
                        //每个公司里面的数据在时间轴上出现的位置
                        var index=findIndex(jValue2,jValue1);

                        //声明数组,需要对之前的数组进行处理(改后的全部的价格数组,逗号已经改成0了)
                        var twoPrice = ChangeCommas(todayPrice);
                        
                        //声明一个最终的价格数组(前面为空字符串,后面为empty空)
                        var endDatePriceCompany = getEndPriceArray(jValue2,jValue1,index,twoPrice);
                        
                        //需要在series中进行填充数据的变量
                        var series_content = splicingSeries(companys,endDatePriceCompany);
                        
                        option = {
                            //标题名字
                            title: {
                                text: "第二个接口对接"
                            },
                            //图例展示,数据为legendData,滚轮形式,垂直,位置
                            legend: {
                                data: legendData,
                                type: "scroll",
                                orient: "vertical",
                                right: 10,
                                top: 40,
                                bottom: 20,
                            },
                            //坐标轴触发
                            tooltip: {
                                trigger: 'axis'
                            },
                            xAxis: {
                                type: 'category',
                                //两侧是否留白
                                boundaryGap: false,
                                x: "center",
                                y: "top",
                                gridIndex: 0,
                                nameGap: 5,
                                data: jValue1
                            },
                            yAxis: {
                                //当为类目轴的时候,会是一条竖直的线,这个地方应该用value类型
                                // type: 'category',
                                // data: resPrice1,
                                type:'value',
                                gridIndex: 0
                            },
                            //下面的滑动的轴,可以查看时间区间
                            dataZoom: [{
                                        type: 'slider',
                                        show: true,
                                        height: 20,
                                        left: '20%',
                                        right: '40%',
                                        bottom: '2%',
                                        start: 50,
                                        end: 100,
                                        textStyle: {
                                            color: '#d4ffff',
                                            fontSize: 11,
                                        },
                                    }, {
                                        type: 'inside'
                                    }
                                ],
                            grid: {
                                top: '6%', //图距离父容器div顶端的距离
                                left: '2%', //图距离父容器div左端的距离
                                right: '20%', //图距离父容器div右端的距离
                                bottom: '0%', //图距离父容器div底端的距离
                                containLabel: true //grid 区域是否包含坐标轴的刻度标签
                            },
                            series: series_content
                        }
                        myChart.setOption(option);
                    },
                });
                $('#sel').change(function(){
                    myChart.dispose();
                    let Theme = $(this).val();
                    // 基于准备好的dom，初始化echarts实例
                    myChart = echarts.init(document.getElementById('main'),Theme);
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                });
            }
            getAllGoodsByType();
        </script>
    </body>
</html>

demo.html