C/C++指针笔记

POINTER/pointer/css/index.css

@@ -0,0 +1,36 @@
+#app > .row > div:first-child {
+  border: 1px solid gainsboro;
+}
+
+.item {
+  border: 1px solid gainsboro;
+}
+
+.btn {
+  margin: auto 10px auto 10px;
+}
+
+.card, .code-table {
+  font-size: 22px;
+}
+
+.memory {
+  height: 100vh;
+  overflow-y: scroll;
+  padding-top: 10px;
+  padding-bottom: 50px;
+}
+
+
+code {
+  height: 300px;
+  overflow-y: scroll;
+}
+
+.font-sm {
+  font-size: 18px;
+}
+
+.btn-struct:hover {
+  background-color: beige;
+}

POINTER/pointer/index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/bootstrap.min.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <script src="js/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
+    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/monokai.min.css">
+    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script>
+    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/cpp.min.js"></script>
+   
+    <title>栈内存演示(MinGW)</title>
+  </head>
+  <body>
+    <div id="app" class="container-fluid">
+      <div class="row">
+        <div class="col-4">
+          <div class="card">
+            <div class="card-header">
+              类型
+            </div>
+            <div class="card-body">
+              <div class="form-check form-check-inline" v-for="(value, typeName) in typeSize" :key="typeName">
+                <input class="form-check-input" type="radio" name="type" :id="typeName" :value="typeName" v-model="checkedType">
+                <label class="form-check-label" :for="typeName">{{typeName}}</label>
+              </div>
+            </div>
+          </div>
+          
+          <div class="card mt-3">
+            <div class="card-header">
+              声明
+            </div>
+            <div class="card-body">
+              <button class="btn-success btn btn-sm" @click="handleOpration('var')">变量</button>
+              <button class="btn-success btn btn-sm" @click="handleOpration('pointer')">指针</button>
+              <button class="btn-success btn btn-sm" @click="handleOpration('struct')">结构体</button>
+              <button class="btn-success btn btn-sm" @click="handleOpration('arr')">数组</button>
+              <div class="row mt-3">
+                <div class="card  col-6">
+                  <div class="card-header font-sm">
+                    结构体编辑
+                  </div>
+                  <div class="card-body">
+                    <div>
+                      <table class="table table-bordered font-sm text-center" >
+                        <tr>
+                          <th>类型</th>
+                          <th>名称</th>
+                          <th>&nbsp;&nbsp;&nbsp;</th>
+                        </tr>
+                        <tr v-for="(item, index) in struct.fields">
+                          <td>{{item.type}}</td>
+                          <td>{{item.name}}</td>
+                          <td>
+                            <button class="btn w-100 h-100 btn-struct m-0 p-0" @click="handleStructDel(index)">-</button>
+                          </td>
+                        </tr>
+                      </table>
+                    </div>
+                    <div class="text-center">
+                      <button class="btn  w-100 btn-struct" @click="handleStructAdd">+</button>
+                    </div>
+                  </div>
+                </div>
+                
+                <div class="card col-6">
+                  <div class="card-header" style="font-size: 18px;">
+                    数组
+                  </div>
+                  <div class="card-body">
+                    <div class="form-group row">
+                      <div class="form-check form-check-inline col-4">
+                        <input class="form-check-input" type="radio" name="dim" id="dim-1" value="1" v-model="arr.dim">
+                        <label class="form-check-label" for="dim-1">一维</label>
+                      </div> 
+                      <div class="col-4">
+                        <input type="number" class="form-control" min="1" v-model="arr.dim1" />
+                      </div>
+                    </div>
+                    <div class="form-group row mt-2">
+                      <div class="form-check form-check-inline col-4">
+                        <input class="form-check-input" type="radio" name="dim" id="dim-2" value="2" v-model="arr.dim">
+                        <label class="form-check-label" for="dim-2">二维</label>
+                      </div> 
+                      <div class="col-6 d-flex">
+                        <input type="number" class="form-control" min="1" max="9" v-model="arr.dim2.row" />
+                        <input type="number" class="form-control" min="1" max="9" v-model="arr.dim2.col"/>
+                      </div>
+                      
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="card mt-3">
+            <div class="card-header">
+              运算
+            </div>
+            <div class="card-body">
+              <div>指针当前位置：{{posHexStr}}&nbsp;&nbsp;&nbsp;&nbsp;移动字节数：{{steps}}</div>
+              <div class="input-group mt-3 row">
+                <label for="step" class="form-label col-2">步长：</label>
+                <div class="col-3">
+                  <input type="number" min="1" class="form-control" id="step" v-model="step">
+                </div>
+                <div class="col-7">
+                  <button class="btn btn-info" @click="handleMove('add')">+</button>
+                  <button class="btn btn-info" @click="handleMove('minus')">-</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-4 text-center memory">
+          <div class="row" v-for="pt in pointers.list" :key="pt.id">
+            <div class="col item">{{pt.id}}</div>
+            <div class="col item" :style="{backgroundColor: pt.color}" contenteditable="true"></div>
+            <div class="col text-start p-0">
+              <img src="img/pointer.png" v-show="pt.id == posHexStr" class="h-100" />
+            </div>
+          </div>
+        </div>
+        <div class="col-4 memory code-table">
+          <pre>
+            <code class="language-cpp" ref="code" contenteditable="true">
+              {{code}}
+            </code>
+          </pre>
+          <table class="table table-bordered text-center">
+            <tr>
+              <th>变量</th>
+              <th>&返回地址</th>
+            </tr>
+            <tr v-for="item in vars.list" :key="item.addr">
+              <td>{{item.name}}</td>
+              <td>{{item.addr}}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

POINTER/pointer/js/index.js

@@ -0,0 +1,229 @@
+window.onload = () => {
+  Vue.createApp({
+    data() {
+      return {
+        msg: "Hello",
+        
+        
+        pointers: {
+          cur: 0,
+          list: []
+        },
+        pos: 1717565533,
+        step: 1,
+        steps: 0,
+        
+        typeSize: {
+          char: 1,
+          short: 2,
+          int: 4,
+          double: 8,
+        },
+        checkedType: 'char',
+        
+        vars: {
+          list: [],
+          char: {
+            name: 'c',
+            num: 0,
+          },
+          int: {
+            name: 'n',
+            num: 0
+          },
+          short: {
+            name: 't',
+            num: 0
+          },
+          double: {
+            name: 'd',
+            num: 0
+          },
+          arr: {
+            name: 'ar',
+            num: 0
+          },
+          struct: {
+            name: 'st',
+            num: 0
+          },
+          pointer: {
+            name: 'p',
+            num: 0
+          }
+        },
+        color: {
+          index: 0,
+          change: true,
+          colors: [
+            'antiquewhite',
+            'aqua',
+            'bisque',
+            'burlywood',
+            'cornflowerblue'
+          ]
+        },
+        
+        struct: {
+          index: 0,
+          fields: []
+        },
+        
+        arr: {
+          dim: 1,
+          dim1: 5,
+          dim2: {
+            row: 3,
+            col: 3
+          }
+        }
+      }
+      
+    },
+    created() {
+      for (let i = 50; i >= 0; i--) {
+        this.pointers.cur = 1717565532 - i
+        this.pointers.list.push({
+          id: '0X' + this.pointers.cur.toString(16).toUpperCase(),
+          color: null,
+        })
+      }
+    },
+    methods: {
+      handleMove(dr) {
+        this.color.change = false
+        if(dr == 'add') {
+          this.pos += this.typeSize[this.checkedType] * this.step
+        } else if (dr == 'minus') {
+          this.pos -= this.typeSize[this.checkedType] * this.step
+        }
+      },
+      handleOpration(op) {
+        switch (op){
+          case 'var':
+            this.pos -= this.typeSize[this.checkedType]
+            this.vars.list.push({
+              type: this.checkedType,
+              name: this.vars[this.checkedType]['name'] + this.vars[this.checkedType]['num']++,
+              addr: this.posHexStr
+            })
+            break;
+          case 'pointer':
+            this.pos -= this.typeSizeAll['pointer']
+            this.vars.list.push({
+              type: this.checkedType + '*',
+              name: this.vars['pointer']['name'] + this.vars[this.checkedType]['num']++,
+              addr: this.posHexStr
+            })
+            break
+          case 'struct':
+            this.pos -= this.structSize
+            this.vars.list.push({
+              type: 'struct S',
+              name: this.vars['struct']['name'] + this.vars['struct']['num']++,
+              addr: this.posHexStr
+            })
+            break
+          case 'arr':
+            this.pos -= this.arrSize
+            const name = this.arr.dim == 1 ? `${this.vars['arr']['name']}${this.vars['arr']['num']++}[${this.arr.dim1}]`
+              : `${this.vars['arr']['name']}${this.vars['arr']['num']++}[${this.arr.dim2.row}][${this.arr.dim2.col}]`
+            this.vars.list.push({
+              type: this.checkedType,
+              name: name,
+              addr: this.posHexStr
+            })
+            break
+          default:
+            break;
+        }
+        
+        this.color.change = true
+        this.$refs.code.removeAttribute('data-highlighted')
+        this.$nextTick(hljs.highlightAll)
+      },
+      
+      handleStructAdd() {
+        this.struct.fields.push({
+          type: this.checkedType,
+          name: 'f' + this.struct.index++
+        })
+      },
+      
+      handleStructDel(idx) {
+        this.struct.fields.splice(idx, 1)
+      }
+    },
+    computed: {
+      posHexStr() {
+        return '0X' + this.pos.toString(16).toUpperCase()
+      },
+      code() {
+        let structStr = this.struct.fields.reduce((acc, cur) => {
+          return acc + ` ${cur.type} ${cur.name};
+          `
+        }, ``)
+        let cstr = `
+        struct S
+        {
+          ${structStr}
+        };
+        `
+        
+        this.vars.list.forEach(item => {
+          cstr += `
+          ${item.type} ${item.name};`
+        })
+        return cstr
+      },
+      
+      typeSizeAll() {
+        return {
+          ...this.typeSize,
+          pointer: 8
+        }
+      },
+      structSize() {
+        return this.struct.fields.reduce((accumulator, currentValue) => {
+          console.log(accumulator, currentValue)
+          return accumulator + this.typeSizeAll[currentValue.type]
+        }, 0);
+      },
+      arrSize() {
+        if(this.arr.dim == 1) {
+          return parseInt(this.arr.dim1) * this.typeSize[this.checkedType]
+        } else {
+          return parseInt(this.arr.dim2.col * this.arr.dim2.row) * this.typeSize[this.checkedType]
+        }
+      }
+      
+    },
+    
+    watch: {
+      pos(val, oldVal) {
+        if (this.color.change) {
+          const coloraddrs = []
+          for (let i = val; i < oldVal; i++) {
+            coloraddrs.push('0X' + i.toString(16).toUpperCase())
+          }
+          const tocolor = this.pointers.list.filter((item) => coloraddrs.includes(item.id))
+          tocolor.forEach((item) => {
+            
+            item.color = this.color.colors[this.color.index]
+              
+          })
+          this.color.index = (this.color.index + 1) % this.color.colors.length
+        }
+        
+        this.steps = Math.abs(val - oldVal)
+        
+      },
+      code() {
+        this.$refs.code.removeAttribute('data-highlighted')
+        this.$nextTick(hljs.highlightAll)
+      }
+    }
+  }).mount("#app")
+  
+  hljs.highlightAll();
+}

README.md

@@ -4,4 +4,6 @@
 
 **C++ STD LIB**：C++标准库相关一些文档
 
-**SDL**：SDL一些学习笔记
+**SDL**：SDL一些学习笔记
+
+**POINTER**：C/C++指针专题笔记