超级超级好玩的东西： eval 与new Function的用法

Posted 2020-11-17 tabctrlshift

网上看到的，太丑陋了new Function可以参考参考：

var aa = "{name:‘cola‘,item:[{age:11},{age:22},{age:23},{age:23}]}"; 
    var now = new Date().getTime(); 
    for (var i = 0; i < 100000; i++) { 
        var a = eval("(" + aa + ")"); 
    } 
    var now1 = new Date().getTime(); 
    document.write("eval 时间为：" + (now1 - now) + "<br/>"); 
var now2 = new Date().getTime(); 
    for (var i = 0; i < 100000; i++) { 
        var fn = new Function("return" + aa); 
        fn(); 
    } 
    var now3 = new Date().getTime(); 
    document.write("new Function时间为：" + (now3 - now2) + "<br/>"); 
//经过测试结果 FF效果如下
        //eval 时间为：979
        //new Function时间为：1372
        //经过测试结果 IE8效果如下 
        //eval 时间为：913
        //new Function时间为：1037
        //经过测试结果 Chrome效果如下
        //eval 时间为：211
        //new Function时间为：251
        //经过测试结果 Opera
        //eval 时间为：384
        //new Function时间为：1024

项目中写的代码：

<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select class="filter-item" v-model="paramsName" placeholder="分类">
        <el-option v-for="item in colConfigs[colMap]" :key="item.prop" :label="item.label" :value="item.prop">
        </el-option>
      </el-select>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="关键字" v-model="paramsValue"> </el-input>
      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-if="true||btn_add" @click="handleCreate" type="primary" icon="edit">添加</el-button>
    </div>
    <el-table :data="list" v-loading.body="listLoading" height=420 border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" width="180"
        v-for="{ prop, label } in colConfigs[colMap]"
        :key="prop"
        :prop="prop"
        :label="label">
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="360"> 
        <template slot-scope="scope">
          <el-button v-if="colMap!==colOptions[2]" type="primary" size="small" @click="clickNext(scope.row)">{{ colCN[colMap].next }}</el-button>
          <el-button v-if="colMap!==colOptions[0]" type="primary" size="small" @click="clickPrev()">上一步</el-button>
          <el-button v-if="true||btn_edit" type="success" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button v-if="true||btn_del" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="eval(colMap+‘Form‘)" :rules="rules" ref="form" label-width="200px" size="mini">
        <el-form-item v-for="({ prop, label },index) in colConfigs[colMap]" :label="label" prop="prop" :key="prop">
          <el-input :model="eval(colMap+‘Form[‘+prop+‘]‘)" :disabled="(dialogStatus==‘create‘)?(index<colConfigs[colMap].length-2):(index<colConfigs[colMap].length-1)" :placeholder="‘请输入‘+label"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel(‘form‘)">取 消</el-button>
        <el-button v-if="dialogStatus==‘create‘" type="primary" @click="create(‘form‘)">确 定</el-button>
        <el-button v-else type="primary" @click="update(‘form‘)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
import {
  regionList, cityList, districtList,
  addRegion, addCity, addDistrict,
  getRegion, getcity, getDistrict,
  delRegion, delCity, delDistrict,
  putRegion, putCity, putDistrict } from ‘@/api/admin/region/index‘;
import { mapGetters } from ‘vuex‘;
export default {
  name: ‘region‘,
  data() {
    return {
      regionForm: { regionCode: ‘‘, regionName: ‘‘ },
      cityForm: { regionCode: ‘‘, cityCode: ‘‘, cityName: ‘‘ },
      districtForm: { regionCode: ‘‘, cityCode: ‘‘, districtCode: ‘‘, districtName: ‘‘ },
      colMap: ‘‘,
      colOptions: [‘Region‘, ‘City‘, ‘District‘],
      colCN: { region: { next: ‘城市‘ }, city: { next: ‘区/县‘ } },
      colConfigs: {
        region: [
          { prop: ‘regionCode‘, label: ‘省编码‘ },
          { prop: ‘regionName‘, label: ‘省名称‘ }
        ],
        city: [
          { prop: ‘regionCode‘, label: ‘省编码‘ },
          { prop: ‘cityCode‘, label: ‘城市编码‘ },
          { prop: ‘cityName‘, label: ‘城市名称‘ }
        ],
        district: [
          { prop: ‘regionCode‘, label: ‘省编码‘ },
          { prop: ‘cityCode‘, label: ‘城市编码‘ },
          { prop: ‘districtCode‘, label: ‘区/县编码‘ },
          { prop: ‘districtName‘, label: ‘区/县名称‘ }
        ]
      },
      rules: {
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        regionCode: ‘‘,
        cityCode: ‘‘
      },
      rowRegionCode: ‘‘,
      rowCityCode: ‘‘,
      dialogFormVisible: false,
      dialogStatus: ‘‘,
      btn_edit: false,
      btn_del: false,
      btn_add: false,
      paramsValue: undefined,
      paramsName: undefined,
      inputText: true,
      textMap: {
        update: ‘编辑‘,
        create: ‘创建‘
      }
    };
  },
  created() {
    this.colMap = this.colOptions[0];
    this.getList();
    this.btn_edit = this.elements[‘regionManager:btn_edit‘];
    this.btn_del = this.elements[‘regionManager:btn_del‘];
    this.btn_add = this.elements[‘regionManager:btn_add‘];
  },
  computed: {
    ...mapGetters([‘elements‘])
  },
  methods: {
    clickNext(row) {
      eval(‘this.colMap = ‘ + (this.colMap === this.colOptions[0]) ? this.colOptions[1] : this.colOptions[2]);
      eval(‘this.row‘ + this.colMap + ‘Code = row.‘ + this.colMap + ‘Code‘);
      this.resetQueryParams();
      this.getList();
    },
    clickPrev() {
      eval(‘this.colMap = ‘ + (this.colMap === this.colOptions[1]) ? this.colOptions[0] : this.colOptions[1]);
      eval(‘this.row‘ + this.colMap + ‘Code = ‘‘‘);
      this.resetQueryParams();
      this.getList();
    },
    getList() {
      this.resetListQuery();
      this.listLoading = true;
      switch (this.colMap) {
        case this.colOptions[0]:
          regionList(this.listQuery).then(response => {
            this.list = response;
            this.total = response.length;
            this.listLoading = false;
          });
          break;
        case this.colOptions[1]:
          cityList(this.listQuery).then(response => {
            this.list = response;
            this.total = response.length;
            this.listLoading = false;
          });
          break;
        case this.colOptions[2]:
          districtList(this.listQuery).then(response => {
            this.list = response;
            this.total = response.length;
            this.listLoading = false;
          });
          break;
      }
    },
    handleFilter() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = ‘create‘;
      this.dialogFormVisible = true;
    },
    handleUpdate(row) {
      this.resetTemp();
      let getObj = eval("get"+this.colMap);
      let rowId = eval("row."+ this.colMap.toLowerCase() +"Code");
      getObj(rowId).then(response => {
        this.form = response.data;
        this.dialogFormVisible = true;
        this.dialogStatus = ‘update‘;
      });
    },
    handleDelete(row) {
      this.$confirm(‘此操作将永久删除, 是否继续?‘, ‘提示‘, {
        confirmButtonText: ‘确定‘,
        cancelButtonText: ‘取消‘,
        type: ‘warning‘
      }).then(() => {
        let delObj = eval("del"+this.colMap);
        let rowId = eval("row."+ this.colMap.toLowerCase() +"Code");
        delObj(rowId).then(() => {
          this.$notify({
            title: ‘成功‘,
            message: ‘删除成功‘,
            type: ‘success‘,
            duration: 2000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    },
    create(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          let addObj = eval("add"+this.colMap);
          let addForm = eval("this."+ this.colMap.toLowerCase() +"Form");
          addObj(addForm).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: ‘成功‘,
              message: ‘创建成功‘,
              type: ‘success‘,
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      const set = this.$refs;
      set[formName].resetFields();
    },
    update(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          let putObj = eval("put"+this.colMap);
          let objId = eval("this."+this.colMap.toLowerCase()+"Form."+this.colMap.toLowerCase()+"Code");
          let objForm = eval("this."+this.colMap.toLowerCase()+"Form");
          putObj(objId, objForm).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: ‘成功‘,
              message: ‘创建成功‘,
              type: ‘success‘,
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    resetTemp() {
      switch (this.colMap) {
        case this.colOptions[0]:
          this.regionForm = { regionCode: ‘‘, regionName: ‘‘ };
          break;
        case this.colOptions[1]:
          this.cityForm = { regionCode: this.rowRegionCode, cityCode: ‘‘, cityName: ‘‘ };
          break;
        case this.colOptions[2]:
          this.districtForm = { regionCode: this.rowRegionCode, cityCode: this.rowCityCode, districtCode: ‘‘, districtName: ‘‘ };
          break;
      }
    },
    resetListQuery() {
      this.listQuery = {
        page: 1,
        limit: 20,
        regionCode: this.rowRegionCode,
        cityCode: this.rowCityCode
      }
      this.listQuery[this.paramsName] = this.paramsValue;
    },
    resetQueryParams() {
      this.paramsName = ‘‘;
      this.paramsValue = ‘‘;
    }
  }
};
</script>

 

 

附上赵偶像和阮偶像的连接

　　http://www.ruanyifeng.com/blog/2017/02/fp-tutorial.html

http://blog.zhaojie.me/2012/08/js-code-from-eval-benchmark.html