2022年4月4日

一、了解swich去替代if else

swich(i){
case 10:
console.log("i是10");
break
case 20:
console.log("i是20");
break
defualt:
consle.log("i是其它值")
break
}

替代

function sum(){
if(i＝＝10){
console.log("i是10")
}
 else if(i＝＝20){
console.log("i是20") ) 
 }else{
consle.log("i是其它值")
 }
 
}

二、函数传参是按值传递的:举如下列子如果将i放在函数体外面+=的话是会是其内存中的i变成20的，但是放在函数体内的话，则不会影响到内存的i值

let  i =10 ;
function addNum(i){
    i +=10;
    return i
}
console.log(i)//10
i+=20;
let number =addNum(i);
console.log(i)//30
console.log(number)//40

2022年4月5日:

一、每一个执行环境即相当于一个对象函数的执行环境，当执行流进入一个函数的时候，函数的环境就会被推入一个环境栈当中，而在函数执行之后，栈将其环境弹出，把控制权返回到之前的执行环境当中。

2022年4月13日

一、简单创建一个服务器，进行测试

一、安装

npm install express-generator -g
express -e server
cd server
npm install
npm start 二、在浏览器中打开http://localhost:3000/ ，如下代表服务器创建成功。

三、接着，将html文件放到server根目录的public目录下，如下

二、需求：在a站点用iframe标签引入b站点，等在iframe标签内操作完之后自动关闭a站点的iframe标签

一、a站点使用iframe

 <div class="midCon" id="GIS" v-if="iframeShow">
      <i class="el-icon-close" @click="closeIframe"></i>
      <!-- :src="`/workOrder/#/createWorkOrder?orderContent=` + showObject" -->
      <!-- :src="`http://localhost:9555/#/createWorkOrder?orderContent=` + showObject" -->
      <iframe
        id="myframe"
        :src="`/workOrder/#//createWorkOrder?orderContent=` + showObject"
        frameborder="0"
        style="width: 100%; height: 100%"
      ></iframe>
    </div>

二、a站点给b站点传参且打开iframe标签

// 点击开始处置
    startDeal(item) {
      let vm = this;
      this.address = vm.showObject.Address;
      this.content = vm.showObject.AlarmContent;
      vm.showObject = JSON.stringify(vm.showObject); //把字符串作为 URI 组件进行编码。
      if (!this.address) {
        this.address = "";
      }
      this.iframeShow = true;

      vm.getWarnShow();
    },

三、a站点关闭iframe标签的方法

 closeIframe() {
      let vm = this;
      vm.iframeShow = false;
    },

四、b站点完成操作之后给a站点发送内容以及触发事件

    // 给父页面一个触发事件以便于当前页面完成流程之后触发发页面关闭iframe标签
              parent.postMessage({ msg: "MessageFromIframePage" }, "*");

五、a站点监听触发事件

  let vm = this;
    // 当在iframe标签当中使用 parent.postMessage({ msg: "MessageFromIframePage" }, "*");
    // 时就会触发receiveMessageFromIframePage方法，从而实现
    function receiveMessageFromIframePage(event) {
      // 通过v-if的方式去关闭iframe标签
      vm.closeIframe();
      console.log("关闭iframe标签");
    }
    //监听message事件
    window.addEventListener("message", receiveMessageFromIframePage, false);

2022年6月25日

一、需求：将一维数组的每条数据转换成属性结构数据

  //数据类型
  dispatchData: [
        {
          Id: 0,
          name: "根元素",
        },
        {
          Id: 1231,
          name: "二级节点",
          ParentId: 0,
        },
        {
          Id: 122,
          name: "二级节点",
          ParentId: 0,
        },
        {
          Id: 1233121,
          name: "三级节点",
          ParentId: 122,
        },
        {
          Id: 1223121,
          name: "三级节点",
          ParentId: 122,
        },
        {
          Id: 12331,
          name: "三级节点",
          ParentId: 1231,
        },
        {
          Id: 1222,
          name: "二节点",
          ParentId: "三级节点",
        },
        {
          Id: 12321331,
          name: "四级节点",
          ParentId: 1222,
        },
        {
          Id: 231123,
          name: "四级节点",
          ParentId: 1222,
        },
      ],
      
      //方法
        mounted() {
        1et vm = this;
       let transData = vm.appenddata(vm.dispatchData);
  },
   methods: {
     appenddata(data) {
      let treeData = [{}];
      var arr = [...data];
      var tree = arr.filter((v) => v.ParentId == 0);
      let array = this.recursion(arr, tree);
      // if (!treeData[0].children) treeData[0].children = [];
      treeData[0].name = "根元素";
      treeData[0].Id = 0;
      treeData[0].children = array;
      console.log(treeData, "treeData");
      return treeData;
    },

    recursion(arr, tree) {
      tree.map((item) => {
        // item.title = item.DeptName;
        // item.id = item.Id;
        item.children = arr.filter(({ ParentId }) => ParentId == item.Id);
        // if(item.children.)
        if (item.children.length == 0) {
          // 如何children属性没有值的话就删除该对象的children属性
          delete item.children;
        } else {
          // 如果大于0则需要递归
          item.expanded = true;
          this.recursion(arr, item.children);
        }
        return item;
      });
      return tree;
    },
   }

二、webpack打包优化

①、优化之前包数据大小

打包优化之前.png

①、优化之后包数据大小步骤如下：

一、安装uglifyjs-webpack-pluginc插件

 npm  install   uglifyjs-webpack-plugin

QQ图片20220625212932.png 二、在vue.config.js文件当中配置webpack

const UglifyjsPlugin = require("uglifyjs-webpack-plugin")
let isProduction = process.env.NODE_ENV;
module.exports = {
    publicPath: "./",
    lintOnSave: false,//注释警告
    devServer: {
        compress: false,
        open: true,//热启动
        // proxy: {
        //     '/sys': {
        //         target: 'http://localhost:3000',
        //         changeOrigin: true,
        //     }
        // },
    },
    // css:{
    //     loderOptions:{
    //         sass:{
    //             prependData:"@import ''"
    //         }
    //     },
    // },
    //以下就是打包优化的代码
    configureWebpack: config => {
       // 生产环境相关配置
        if (isProduction == "production") {
        //    代码压缩
            config.plugins.push(
                new UglifyjsPlugin({
                    uglifyOptions: {
                        // 生产环境自动删除console
                        warnings: false,
                        compress: {
                            drop_debugger: true,
                            drop_console: true,
                            pure_funcs: ['console.log'],
                        },
                    },
                    sourceMap:false,
                    parallel:true,
                })
            )
        }
    }
}

2022.9.7(push认知---->类似于浅拷贝）

      // push是直接影响原数组所以不能再次复制，否则该数组会变成number类型
          vm.mapList.push(params.data);
          // 以下的vm.mapList 就不再是数组了
          vm.mapList = vm.mapList.push(params.data);

每日学习（涉及创建微服务；通过iFrame标签实现不同站点的双向通讯）