javascript, learning grammar from the official mozilla website, is great

The link to the original text of this article is:
https://blog.csdn.net/freewebsys/article/details/81153733

The blogger's address is: http://blog.csdn.net/freewebsys

1, About mozilla developers

https://developer.mozilla.org/zh-CN/
There's also a developer center where searches for JavaScript writing are fairly comprehensive.
Starting with firefox, now with chrome you can no longer look at mozilla's stuff.
But people have something to learn.
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction
Learn javascript

2. Learning

Although javascript has been written for many years, some advanced uses are not available.
Causes code to feel redundant and unsightly.
For example, a CURD project written yesterday with an empty set property is pretty ugly code:

filters: {
          id: '',
          userName: '',
          password: '',
          nickName: '',
          role: '',
          status: '',
          type: '',
        },
        loading: false,
        dataForm: {//Edit interface data
          id: '',
          userName: '',
          password: '',
          nickName: '',
          role: '',
          status: '',
          type: '',
          createTime: '',
          updateTime: '',
        },

There must be some advanced use that feels like there is nothing to set the default value of an attribute.
Or use any function of foreach.

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

Split string:

let tmpDataForm = this.dataForm //Assignment variable
          Object.keys(tmpDataForm).forEach(function(key){
            data += "&"+key+"=" + tmpDataForm[key]
          })
//Make a filter query:
let query = ""
        let tmpFilters = this.filters //Assignment variable
        Object.keys(tmpFilters).forEach(function(key){
          query += "&"+key+"=" + tmpFilters[key]
        })

3, Code optimization

Yesterday's curd optimization:
https://blog.csdn.net/freewebsys/article/details/81112630

<template>
 <section>

  <!--Toolbar-->
  <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">Newly build</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="User name"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.password" placeholder="Password"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.nickName" placeholder="Nickname?"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.role" placeholder="role"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.status" placeholder="state"></el-input></el-form-item>
    <el-form-item><el-input v-model="filters.type" placeholder="type"></el-input></el-form-item>
    <el-form-item>
     <el-button type="primary" v-on:click="listFunc">query</el-button>
    </el-form-item>
   </el-form>
  </el-col>

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

    <el-table-column prop="id" label="id"/>
    <el-table-column prop="userName" label="User name"/>
    <el-table-column prop="password" label="Password"/>
    <el-table-column prop="nickName" label="Nickname?"/>
    <el-table-column prop="role" label="role"/>
    <el-table-column prop="status" label="state"/>
    <el-table-column prop="type" label="type"/>
    <el-table-column prop="createTime" label="Creation Time"/>
    <el-table-column prop="updateTime" label="Update Time"/>
    <el-table-column label="operation" width="150">
     <template slot-scope="scope"><el-button-group>
      <el-button type="primary" size="mini" @click="editFunc(scope.$index, scope.row)">edit</el-button>
      <el-button type="danger" size="mini" @click="deleteFunc(scope.$index, scope.row)">delete</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>

  <!--Edit Pop-up Page-->
  <el-dialog title="User Edit" :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="User name" prop="userName"><el-input/></el-form-item>
    <el-form-item label="Password" prop="password"><el-input/></el-form-item>
    <el-form-item label="Nickname?" prop="nickName"><el-input v-model="dataForm.nickName"/></el-form-item>
    <el-form-item label="role" prop="role"><el-input v-model="dataForm.role"/></el-form-item>
    <el-form-item label="state" prop="status"><el-input v-model="dataForm.status"/></el-form-item>
    <el-form-item label="type" prop="type"><el-input v-model="dataForm.type"/></el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="saveFunc">Determine</el-button>
    </span>
  </el-dialog>

 </section>
</template>

<script>
export default {
    data() {
      return {
        filters: {
          id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '',
        },
        loading: false,
        dataForm: {//Edit interface data
          id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '', createTime: '', updateTime: '',
        },
        dataFormRules: {//Edit Interface Check Rules
          userName: [{required: true, message: 'enter one user name', trigger: 'blur' } ],
          password: [{required: true, message: 'Please input a password', trigger: 'blur' } ],
          nickName: [{required: true, message: 'Please enter a nickname', trigger: 'blur' } ],
          role: [{required: true, message: 'Please enter a role', trigger: 'blur' } ],
          status: [{required: true, message: 'Please enter status', trigger: 'blur' } ],
          type: [{required: true, message: 'Please enter a type', trigger: 'blur' } ],
        },
        dialogVisible: false,
        dataList: [], //List data
        totalCount: 0,
        currentPage: 1
      }
    },
    methods: {
      editFunc: function(index, row) {//New & Edit
        if (row == undefined) {
          let tmpDataForm = this.dataForm //Assign variables, modify tmpDataForm
          Object.keys(tmpDataForm).forEach(function(key){
            tmpDataForm[key] = ''
          })
          this.dialogVisible = true
        } else {
          this.$axios.get('/userInfo/get?id=' + row.id)
          .then(resp => {//Data direct assignment
              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 //Assignment variable
          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('Are you sure you want to delete this record??', 'Tips', {
          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 //Assignment variable
        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. Summary

The large amount of set code in js code is redundant and inherently dynamic, and cannot be written like java: this.xxx = xxx is not elegant.
To write with forEach:

let tmpDataForm = this.dataForm //Assign variables, modify tmpDataForm
          Object.keys(tmpDataForm).forEach(function(key){
            tmpDataForm[key] = ''
          })

If this is a big form of data, more than a dozen will be useless.

The link to the original text of this article is:
https://blog.csdn.net/freewebsys/article/details/81153733

The blogger's address is: http://blog.csdn.net/freewebsys

Tags: Javascript axios Firefox Attribute

Posted on Fri, 31 Jan 2020 22:41:20 -0500 by devman42