javascript ，从mozilla 官方网站学习语法，非常不错

版权声明：本文为博主原创文章，未经博主允许不得转载。博主地址：http://blog.csdn.net/freewebsys https://blog.csdn.net/freewebsys/article/details/81153733

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81153733

博主地址是：http://blog.csdn.net/freewebsys

1，关于mozilla 开发者

---

https://developer.mozilla.org/zh-CN/
还有这么一个开发者中心呢，上面搜索写JavaScript的东西也相当的全面。
开始是使用 firefox，现在使用了 chrome就再也不看 mozilla 的东西了。
但是人家有个号东西也去学习。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction
学习javascript

2，学习

---

虽然写javascript好多年，但是一些高级的用法不会。
造成代码感觉上冗余的多，不优美。
比如昨天写的CURD 项目设置属性为空，就相当难看的代码：

filters: {
          id: '',
          userName: '',
          password: '',
          nickName: '',
          role: '',
          status: '',
          type: '',
        },
        loading: false,
        dataForm: {//编辑界面数据
          id: '',
          userName: '',
          password: '',
          nickName: '',
          role: '',
          status: '',
          type: '',
          createTime: '',
          updateTime: '',
        },

感觉上肯定有啥高级的用法，能将属性的默认值设置空啥的。
或者使用啥foreach的函数。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

拼接字符串：

let tmpDataForm = this.dataForm //赋值变量
          Object.keys(tmpDataForm).forEach(function(key){
            data += "&"+key+"=" + tmpDataForm[key]
          })
进行filter查询：
let query = ""
        let tmpFilters = this.filters //赋值变量
        Object.keys(tmpFilters).forEach(function(key){
          query += "&"+key+"=" + tmpFilters[key]
        })

3，代码优化

---

昨天的curd优化：
https://blog.csdn.net/freewebsys/article/details/81112630

<template>
 <section>

  <!--工具条-->
  <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
   <el-form :inline="true" :model="filters">
    <el-form-item><el-button type="primary" @click="editFunc">新建</el-button></el-form-item>
    <el-form-item><el-input v-model="filters.id" placeholder="id"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.userName" placeholder="用户名"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.password" placeholder="密码"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.nickName" placeholder="昵称"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.role" placeholder="角色"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.status" placeholder="状态"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.type" placeholder="类型"></el-input></el-form-item>
    <el-form-item>
     <el-button type="primary" v-on:click="listFunc">查询</el-button>
    </el-form-item>
   </el-form>
  </el-col>

  <!--列表-->
  <template>
   <el-table :data="dataList" v-loading="loading" style="width: 100%;">

    <el-table-column prop="id" label="id"/>
    <el-table-column prop="userName" label="用户名"/>
    <el-table-column prop="password" label="密码"/>
    <el-table-column prop="nickName" label="昵称"/>
    <el-table-column prop="role" label="角色"/>
    <el-table-column prop="status" label="状态"/>
    <el-table-column prop="type" label="类型"/>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column prop="updateTime" label="更新时间"/>
    <el-table-column label="操作" width="150">
     <template slot-scope="scope"><el-button-group>
      <el-button type="primary" size="mini" @click="editFunc(scope.$index, scope.row)">编辑</el-button>
      <el-button type="danger" size="mini" @click="deleteFunc(scope.$index, scope.row)">删除</el-button>
      </el-button-group></template>
    </el-table-column>
   </el-table>
  </template>
  <el-col style="text-align:right;padding-top: 30px;">
   <el-pagination @current-change="pageChangeFunc" background="" layout="prev, pager, next" :total="totalCount">
   </el-pagination>
  </el-col>

  <!--编辑弹出页面-->
  <el-dialog title="用户编辑" :visible.sync="dialogVisible">
   <el-input v-model="dataForm.id" placeholder="id" type="hidden"/>
   <el-form label-width="100px" :rules="dataFormRules" ref="dataForm">
    <el-form-item label="用户名" prop="userName"><el-input/></el-form-item>
    <el-form-item label="密码" prop="password"><el-input/></el-form-item>
    <el-form-item label="昵称" prop="nickName"><el-input v-model="dataForm.nickName"/></el-form-item>
    <el-form-item label="角色" prop="role"><el-input v-model="dataForm.role"/></el-form-item>
    <el-form-item label="状态" prop="status"><el-input v-model="dataForm.status"/></el-form-item>
    <el-form-item label="类型" prop="type"><el-input v-model="dataForm.type"/></el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveFunc">确 定</el-button>
    </span>
  </el-dialog>

 </section>
</template>

<script>
export default {
    data() {
      return {
        filters: {
          id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '',
        },
        loading: false,
        dataForm: {//编辑界面数据
          id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '', createTime: '', updateTime: '',
        },
        dataFormRules: {//编辑界面校验规则
          userName: [{required: true, message: '请输入用户名', trigger: 'blur' } ],
          password: [{required: true, message: '请输入密码', trigger: 'blur' } ],
          nickName: [{required: true, message: '请输入昵称', trigger: 'blur' } ],
          role: [{required: true, message: '请输入角色', trigger: 'blur' } ],
          status: [{required: true, message: '请输入状态', trigger: 'blur' } ],
          type: [{required: true, message: '请输入类型', trigger: 'blur' } ],
        },
        dialogVisible: false,
        dataList: [], //列表数据
        totalCount: 0,
        currentPage: 1
      }
    },
    methods: {
      editFunc: function(index, row) {//新建&编辑
        if (row == undefined) {
          let tmpDataForm = this.dataForm //赋值变量，修改tmpDataForm即可
          Object.keys(tmpDataForm).forEach(function(key){
            tmpDataForm[key] = ''
          })
          this.dialogVisible = true
        } else {
          this.$axios.get('/userInfo/get?id=' + row.id)
          .then(resp => {//数据直接赋值
              this.dataForm = resp.data.data
            }).finally(() => {
            this.loading = false
            this.dialogVisible = true
          })
      }},
      saveFunc: function() {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) { return false }
          let data = ""
          let tmpDataForm = this.dataForm //赋值变量
          Object.keys(tmpDataForm).forEach(function(key){
            data += "&"+key+"=" + tmpDataForm[key]
          })
          this.$axios.post('/userInfo/save?' + data)
          .finally(() => {
            this.dialogVisible = false
            this.listFunc()
          })
        })
      },
      deleteFunc: function(index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.$axios.delete('/userInfo/delete?id=' + row.id)
          .finally(() => {
            this.listFunc()
          })
        })
      },
      listFunc: function() {
        this.loading = true
        let query = ""
        let tmpFilters = this.filters //赋值变量
        Object.keys(tmpFilters).forEach(function(key){
          query += "&"+key+"=" + tmpFilters[key]
        })
        this.$axios.get('/userInfo/list?page=' + this.currentPage + query)
        .then(resp => {
          this.dataList = resp.data.data
          this.totalCount = resp.data.totalCount
        }).finally(() => {
          this.loading = false
        })
      },
      pageChangeFunc: function(idx) {
        this.currentPage = idx
        this.listFunc()
      }
    },
    created: function() {
      this.listFunc()
    }
  };
</script>

4，总结

---

js代码中出现大量的 set 代码其实是冗余的本来就是动态语言，不能像java那样去写：this.xxx = xxx 这样不优雅。
要用 forEach去写：

let tmpDataForm = this.dataForm //赋值变量，修改tmpDataForm即可
          Object.keys(tmpDataForm).forEach(function(key){
            tmpDataForm[key] = ''
          })

这个要是大表单数据，十几个 也没有啥意义。

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81153733

博主地址是：http://blog.csdn.net/freewebsys