自學 TypeScript 第五天，手把手項目搭建 TS 篇

来源:https://www.cnblogs.com/LiuSan/archive/2022/11/23/16915033.html
-Advertisement-
Play Games

前言： 昨天咱們已經把貪吃蛇的頁面寫好了，今天咱們來寫 TS 部分 TS 我們要用面向對象的形式去編寫我們的功能，所以我們要以一個功能去定義一個對象 把這個項目分成幾個模塊，也就是幾個對象功能 Food類（食物類）： 寫對象的前提，我們要去定義類，用類去創建對象 首先我們直接 class 一個 Fo ...


前言：

昨天咱們已經把貪吃蛇的頁面寫好了，今天咱們來寫 TS 部分

TS 我們要用面向對象的形式去編寫我們的功能，所以我們要以一個功能去定義一個對象

把這個項目分成幾個模塊，也就是幾個對象功能

Food類（食物類）：

寫對象的前提，我們要去定義類，用類去創建對象

首先我們直接 class 一個 Food 類，由於我們的食物是一個 div 所以我們的 Food 類裡面必須有一個屬性來存放我們的元素

// 食物 Food 類
class Food{
    element:HTMLElement;
    constructor(){
        // 拿到元素 id
        this.element = document.getElementById('food')!;
    }
}

元素有了，現在我們想食物還有哪些功能？

我們的食物被蛇吃掉以後是不是要消失啊，那怎麼確定我的蛇吃到食物了呢，看代碼

    // 獲取食物 x 軸坐標的方法
    get x(){
        return this.element.offsetLeft
    }
    // 獲取食物 y 軸坐標的方法
    get y(){
        return this.element.offsetTop
    }

如果我們蛇的坐標和食物的坐標一樣了，是不是就證明我們吃到了食物，所以我們在 Food 類裡面直接寫倆 get 方法 獲取 offsetTop/Left 就獲取到了 x y 軸坐標

 坐標有了，但我們現在食物的位置是固定的，那能固定嗎？我們的蛇吃完食物，食物的位置是不是要改變，所以我們的食物一定是隨機一個位置

    // 修改食物位置
    change(){
        // 生成一個隨機的位置  食物的位置 最小是 0 最大是 290
        // 蛇移動一次是一格，一格大小是 10 所以要求食物的坐標必須是整 10
        let top = Math.round(Math.random() * 29) * 10        
        let left = Math.round(Math.random() * 29) * 10        
        this.element.style.left = left + 'px'
        this.element.style.top = top + 'px'
    }

因為我們的盒子是 300 我們的食物是 10 所以我們食物的位置最大是290，最小是0

而且我們設計蛇移動一次是一格也就是 10 所以我們食物的坐標必須是10的倍數

這樣我們食物的 Food 類就完成了

計分板，ScorePanel 類：

接下來我們再寫一個簡單的，我們的計分板，我們的計分板有兩個值，一個是積分一個是等級

還是同理，首先先獲取元素

// 計分板 定義一個 ScorePanel 類
class ScorePanel{
    // 積分
    score = 0
    lecel = 0
    // 元素
    scoreSpan:HTMLElement
    lecelSpan:HTMLElement
    constructor(){
        this.scoreSpan = document.getElementById('score')!;
        this.lecelSpan = document.getElementById('lecel')!;
    }
}

獲取完元素之後，我們的分數和等級是不是要進行一個增加

    addScore(){
        // this.score++
        this.scoreSpan.innerHTML = ++this.score + '';
        // 判斷我們多少積分升一級
        if(this.score % 10 === 0){
            this.lecelup();
        }
    }
    // 等級提升
    lecelup(){
        // 判斷是否到達最大等級
        if(this.lecel < 10){
            this.lecelSpan.innerHTML = ++this.lecel + '';
        }
    }

蛇類，Snake：

 蛇的類是我們這裡最主要的一個類也是最難寫的一個類，所以我們這裡先寫一個基礎

還是跟前面的一樣，我們先獲取元素，但是蛇這裡我們會麻煩一點，因為蛇是一個容器，我們要給他分為蛇頭和蛇身子

// 設置我們的蛇類
class Snake{
    // 蛇的容器
    element:HTMLElement
    // 蛇的頭部
    head:HTMLElement
    // 蛇的身體(包括蛇頭的) HTMLCollection 是一個集合，特點：它是會實時的刷新的
    bodies:HTMLCollection
    constructor(){
        // 容器元素
        this.element = document.getElementById('snake')!;
        // 獲取蛇頭的元素也就是我們元素裡面的第一個 div
        this.head = document.querySelector('#snake > div')! as HTMLElement;
        // 獲取容器裡面的所有 div
        this.bodies = this.element.getElementsByTagName('div')
    }
}

獲取完蛇元素之後，我們還需要獲取到蛇的位置，也就是蛇頭部的位置。蛇身子暫不考慮

    // 獲取我們的蛇的坐標（蛇頭）
    get x(){
       return this.head.offsetLeft
    }
    get y(){
        return this.head.offsetTop
    }
    // 設置我們蛇頭的坐標
    set x(value:number){
        this.head.style.left = value + ''
    }
    set y(value:number){
        this.head.style.top = value + ''
    }

這樣就獲取到了，設置蛇的坐標我們現在先寫一個簡單的，等會再完善

現在我們先寫一個吃完食物蛇的身子增加的方法，其實這個增加就是向元素里添加 div

    // 蛇增加身體的一個方法
    addBody(){
        // 向 element 中添加 div
        this.element.insertAdjacentHTML('beforeend','<div></div>')
    }

這樣一個基礎的模型就寫好了，但卻還有問題，我們的坐標還沒有完善，而我們蛇還不能動

整合：

到現在誰把三個類都放到一個 TS 裡面了 ？

看起來不多嗎，修改起來太墨跡了，所以我們要把這三個類差分，放到不同的 TS 文件里，然後每一個文件都作為一個模塊暴露出去

首先再 src 下邊創建一個 modules 的文件夾，然後創建三個 TS 文件

然後每一個 TS 都作為模塊暴露出去，代碼為

export default class類名;

都弄完了以後我們還需要一個 TS 文件來把我們這三個 TS 進行一個整合

新建一個 GameControl.ts 它現在就是我們的游戲控制器，控制其他的所有類

GameControl，游戲控制類：

首先先引入其他的類，然後來定義，方便使用，同時 GameControl 這個 TS 也是當一個模塊去暴露出去的，給到我們最終的 index.ts

// 引入其他類
import Food from './Food' // 食物類 Food
import ScorePanel from './ScorePanel' // 記分類 ScorePanel 
import Snake from './Snake' // 蛇 Snake
// 游戲控制器，控制其他的所有類
class GameControl{
    // 定義三個屬性
    food:Food // 食物
    scorepanel:ScorePanel // 記分類
    snake:Snake // 蛇
    constructor(){
        this.food = new Food();
        this.scorepanel = new ScorePanel();
        this.snake = new Snake();
　　　   this.init();
    }
}
export default GameControl;

定義完之後，肯定要有一個游戲的開始，或者一個游戲的初始化方法

那第一件事就是讓我們的蛇可以動，首先綁定一個鍵盤事件

// 創建一個屬性來存儲我們的按鍵,蛇的移動方向
　 direction:string = ''
 // 游戲初始化方法，調用之後游戲開始
    init(){
        // 鍵盤摁下的事件
        document.addEventListener('keydown',this.keydomnHandler.bind(this))
    }
    // ArrowUp
    // ArrowDown
    // ArrowLeft
    // ArrowRight
    // 創建一個鍵盤按下的響應
    keydomnHandler(event:KeyboardEvent){
        // 用戶是否合法，用了正確的摁鍵
        // 觸發按下 修改值
        // console.log(event.key)
        this.direction = event.key
    }

綁定寫完了，我們現在來讓蛇動起來，也就是改蛇的 left 和 top ，向上 top 減少，向下 top 增加，left 同理

    // 創建一個屬性來存儲我們的按鍵,蛇的移動方向
    direction:string = ''
    init(){
        // 鍵盤摁下的事件
        document.addEventListener('keydown',this.keydomnHandler.bind(this));
        this.run();
    }
    run(){
        /**
         * 根據方向 this.direction 來讓我們的蛇改變
         * 向上 top 減少
         * 向下 top 增加
         * 向左 left 減少
         * 向右 left 增加
         */
        let x = this.snake.x
        let y = this.snake.y
        // 計算我們的 x y 值
        switch(this.direction){
            case "ArrowUp": 
            case "Up":
                y -= 10 
                break;
            case "ArrowDown": 
            case "Down":
                y += 10
                break;
            case "ArrowLeft": 
            case "Left":
                x -= 10
                break;
            case "ArrowRight": 
            case "Right":
                x += 10
                break;
        };
        // 修改蛇的 x y 值
        this.snake.x = x;
        this.snake.y = y;
        setTimeout(this.run.bind(this), 500 - (this.scorepanel.lecel -1) * 50); 
    }

setTinmeout 重覆執行我們的代碼，讓蛇一直動，500 的數值越大，蛇走的越慢，讓它隨著我們的等級來走，等級乘 50 就行

接下來我們來寫游戲失敗的方法，貪吃蛇失敗無疑就是撞牆或裝自己身體

而我們再寫 class 類的時候要註意，誰的事情，儘量讓誰去處理，蛇死了，是蛇自己的事情，所以我們在 Snake 也就是蛇類，去處理

我們修改蛇的移動是調用了，Snake 里 set x 和 set y，所以只要給這倆前邊加一個限制

    // 設置我們蛇頭的坐標
    set X(value:number){
        // 新值和舊值相同，不會去改
        if(this.x === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        this.head.style.left =  value + "px" 
    }
    set Y(value:number){
        if(this.y === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        this.head.style.top = value + 'px'
    }

接下來就是如何吃到食物了

    checkEat(x:number,y:number){
        if(x === this.food.x && y === this.food.y){
            // 食物改變位置
            this.food.change()
            // 積分版
            this.scorepanel.addScore()
            // 蛇添加一節
            this.snake.addBody()
        }
    }

我們之前就都定義好了，直接拿來用就行了，剩下的就是我們的身體如何跟頭去移動，還有撞自己身體游戲結束的方法就完成了我們的貪吃蛇

    moveBody(){
        /**
         * 將我們後邊身體設置為前邊身體的位置，從後往前設置
         * 因為你要先設置前邊的，後邊的就找不到原來的值了
         */
        // 遍歷所有的身體
        for(let i=this.bodies.length-1;i>0;i--){
            // 獲取前邊身體的位置
            let x = (this.bodies[i-1] as HTMLElement).offsetLeft;
            let y = (this.bodies[i-1] as HTMLElement).offsetTop;

            (this.bodies[i] as HTMLElement).style.left = x + 'px';
            (this.bodies[i] as HTMLElement).style.top = y + 'px';
        }
    }

this.bodies 就是蛇的身體長度，那我們蛇怎麼前進呢，就是後邊 div 的位置等於前邊 div 的位置

這樣我們的蛇身子就動起來了，接下來我們寫蛇頭撞身子游戲結束

    checkHeadBody(){
        // 獲取所有的身體，檢查是否和我們的蛇頭的坐標發生重疊
        for(let i=1;i<this.bodies.length;i++){
            let bd = this.bodies[i] as HTMLElement
            if(this.x === bd.offsetLeft && this.y === bd.offsetTop){
                // 進入判斷說明撞了,游戲結束
                throw new Error("撞自己了")
            }
        }
    }

之後我們把這個方法寫到 set x、y裡面最後一段的位置調用

接下來我們固定一下左右，在 set 裡面寫

        // 修改 x 時候 是在修改水平坐標，蛇向左移動時候不能向右 反之同理
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
            console.log("水平掉頭了")
            if(value > this.y){
                // 新值 大於 x 舊值 掉頭 應該繼續走
                value = this.y - 10
            }else{
                value = this.y + 10 
            }
        }

y 軸是同理的

這樣下來我們整個一個貪吃蛇就完成了

 以下貼出所有代碼

Food.ts

// 食物 Food 類
class Food{
    element:HTMLElement;
    constructor(){
        // 拿到元素 id 直接賦值
        this.element = document.getElementById('food')!;
    }
    // 獲取食物 x 軸坐標的方法
    get x(){
        return this.element.offsetLeft
    }
    // 獲取食物 y 軸坐標的方法
    get y(){
        return this.element.offsetTop
    }
    // 修改食物位置
    change(){
        // 生成一個隨機的位置  食物的位置 最小是 0 最大是 290
        // 蛇移動一次是一格，一格大小是 10 所以要求食物的坐標必須是整 10
        let top = Math.round(Math.random() * 29) * 10        
        let left = Math.round(Math.random() * 29) * 10        
        this.element.style.left = left + 'px'
        this.element.style.top = top + 'px'
    }
}
export default Food;

ScorePanel.ts

// 計分板 定義一個 ScorePanel 類
class ScorePanel{
    // 用來記錄我們的分數和等級
    score = 0
    lecel = 1
    // 記住我們分數和等級 元素，再構造函數中初始化
    scoreSpan:HTMLElement
    lecelSpan:HTMLElement
    // 設置我們的等級最大值
    maxLevel:number
    // 設置多少積分升一級
    upScore:number
    constructor(maxLevel:number = 10,upScore:number = 10){
        this.scoreSpan = document.getElementById('score')!;
        this.lecelSpan = document.getElementById('lecel')!;
        this.maxLevel = maxLevel;
        this.upScore = upScore;
    }
    // 設置一個加分的方法
    addScore(){
        this.score++
        this.scoreSpan.innerHTML = this.score + '';
        // 判斷我們多少積分升一級
        if(this.score % this.upScore === 0){
            this.lecelup();
        }
    }
    // 等級提升
    lecelup(){
        // 判斷是否到達最大等級
        if(this.lecel < this.maxLevel){
            this.lecel++
            this.lecelSpan.innerHTML = this.lecel + '';
        }
    }
}
export default ScorePanel;

 

Snake.ts

// 設置我們的蛇類
class Snake{
    // 蛇的容器
    element:HTMLElement
    // 蛇的頭部
    head:HTMLElement
    // 蛇的身體(包括蛇頭的) HTMLCollection 是一個集合，特點：它是會實時的刷新的
    bodies:HTMLCollection
    constructor(){
        // 容器元素
        this.element = document.getElementById('snake')!;
        // 獲取蛇頭的元素也就是我們元素裡面的第一個 div
        this.head = document.querySelector('#snake > div')! as HTMLElement;
        // 獲取容器裡面的所有 div
        this.bodies = this.element.getElementsByTagName('div')!;
    }
    // 獲取我們的蛇的坐標（蛇頭）
    get x(){
       return this.head.offsetLeft
    }
    get y(){
        return this.head.offsetTop
    }
    // 設置我們蛇頭的坐標
    set X(value:number){
        // 新值和舊值相同，不會去改
        if(this.x === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        // 修改 x 時候 是在修改水平坐標，蛇向左移動時候不能向右 反之同理
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value){
            console.log("水平掉頭了")
            if(value > this.x){
                // 新值 大於 x 舊值 掉頭 應該繼續走
                value = this.x - 10
            }else{
                value = this.x + 10 
            }
        }
        this.moveBody();
        this.head.style.left =  value + "px" ;
        this.checkHeadBody()
    }
    set Y(value:number){
        if(this.y === value){
            return;
        }
        // x 值的合法範圍 也就是 0 - 290 之間
        if(value < 0 || value > 290){
            // 進入判斷說明我的蛇撞牆了
            throw new Error('蛇撞牆了!')
        }
        // 修改 x 時候 是在修改水平坐標，蛇向左移動時候不能向右 反之同理
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
            console.log("水平掉頭了")
            if(value > this.y){
                // 新值 大於 x 舊值 掉頭 應該繼續走
                value = this.y - 10
            }else{
                value = this.y + 10 
            }
        }
        this.moveBody();
        this.head.style.top = value + 'px';
        this.checkHeadBody()
    }
    // 蛇增加身體的一個方法
    addBody(){
        // 向 element 中添加 div
        this.element.insertAdjacentHTML('beforeend','<div></div>')
    }
    // 添加一個蛇身體移動的方法
    moveBody(){
        /**
         * 將我們後邊身體設置為前邊身體的位置，從後往前設置
         * 因為你要先設置前邊的，後邊的就找不到原來的值了
         */
        // 遍歷所有的身體
        for(let i=this.bodies.length-1;i>0;i--){
            // 獲取前邊身體的位置
            let x = (this.bodies[i-1] as HTMLElement).offsetLeft;
            let y = (this.bodies[i-1] as HTMLElement).offsetTop;

            (this.bodies[i] as HTMLElement).style.left = x + 'px';
            (this.bodies[i] as HTMLElement).style.top = y + 'px';
        }
    }
    checkHeadBody(){
        // 獲取所有的身體，檢查是否和我們的蛇頭的坐標發生重疊
        for(let i=1;i<this.bodies.length;i++){
            let bd = this.bodies[i] as HTMLElement
            if(this.x === bd.offsetLeft && this.y === bd.offsetTop){
                // 進入判斷說明撞了,游戲結束
                throw new Error("撞自己了")
            }
        }
    }
}
export default Snake;

GameControl.ts

// 引入其他類
import Food from './Food' // 食物類 Food
import ScorePanel from './ScorePanel' // 記分類 ScorePanel 
import Snake from './Snake' // 蛇 Snake
// 游戲控制器，控制其他的所有類
class GameControl{
    // 定義三個屬性
    food:Food // 食物
    scorepanel:ScorePanel // 記分類
    snake:Snake // 蛇
    // 創建一個屬性來存儲我們的按鍵,蛇的移動方向
    direction:string = ''
    // 創建一個屬性來記錄我們游戲是否結束
    isLive = true
    constructor(){
        this.food = new Food();
        this.scorepanel = new ScorePanel();
        this.snake = new Snake();
        this.init();
    }
    // 游戲初始化方法，調用之後游戲開始
    init(){
        // 鍵盤摁下的事件
        console.log("執行")
        document.addEventListener('keydown',this.keydomnHandler.bind(this));
        this.run();
    }
    // ArrowUp
    // ArrowDown
    // ArrowLeft
    // ArrowRight
    // 創建一個鍵盤按下的響應
    keydomnHandler(event:KeyboardEvent){
        // 用戶是否合法，用了正確的摁鍵
        // 觸發按下 修改值
        console.log(event.key,1111)
        this.direction = event.key
    }
    // 創建蛇移動的方法
    run(){
        /**
         * 根據方向 this.direction 來讓我們的蛇改變
         * 向上 top 減少
         * 向下 top 增加
         * 向左 left 減少
         * 向右 left 增加
         */
        let x = this.snake.x
        let y = this.snake.y
        // 計算我們的 x y 值
        switch(this.direction){
            case "ArrowUp": 
            case "Up":
                y -= 10 
                break;
            case "ArrowDown": 
            case "Down":
                y += 10
                break;
            case "ArrowLeft": 
            case "Left":
                x -= 10
                break;
            case "ArrowRight": 
            case "Right":
                x += 10
                break;
        };
        // 檢查是否吃到了
        this.checkEat(x,y)
        // 修改蛇的 x y 值
        try{
            this.snake.X = x;
            this.snake.Y = y;
        }catch{
            // 捕獲異常，游戲結束
            alert('GAME OVER!')
            this.isLive = false
        }
        // isLive 開關 ture 的話重覆執行
        this.isLive && setTimeout(this.run.bind(this), 500 - (this.scorepanel.lecel -1) * 50); 
    }
    // 定義一個方法，用來檢查是否吃到食物
    checkEat(x:number,y:number){
        if(x === this.food.x && y === this.food.y){
            // 食物改變位置
            this.food.change()
            // 積分版
            this.scorepanel.addScore()
            // 蛇添加一節
            this.snake.addBody()
        }
    }
}
export default GameControl;

index.ts

import "./style/index.less"

import GameControl from './modules/GameControl'

new GameControl();

這裡是六扇有伊人，我們有緣再見

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android網路請求(終) 網路請求框架Retrofit
    Android網路請求(終) 網路請求框架Retrofit Retrofit底層是由OkHttp封裝的，Retrofit對於註解的使用十分頻繁，所以不瞭解註解的同學們可以去查查資料什麼的。 這裡有一個小細節，要使用Retrofit至少需要jdk1.8以上和Android API 21以上 Andro ...
  • Android網路請求(4) 網路請求框架Volley
    Android網路請求(4) 網路請求框架Volley Volley是Google在2013年5月15日到17日在舊金山Moscone中心舉辦網路開發者年會中推出的Android非同步網路載入框架和圖片載入框架，它特別適合數據體量小且通訊頻繁的網路操作場景，而Android開發中大多數場景都是這樣的， ...
  • AI賦能音樂創作，人人都是音視頻創作者
    華為HMS Core音頻編輯服務（Audio Editor Kit）依托自身AI技術的研發優勢，上線全新的歌聲合成音色及伴奏，給音視頻創作者提供更多的創作可能。在短視頻場景中，用戶自定義歌詞的歌聲結合視頻讓用戶感受到身臨其境，自由表達自己的情緒；在虛擬偶像場景中，歌聲合成功能賦予虛擬歌手們演唱風格各 ...
  • 我的Vue之旅 11 Vuex 實現購物車
    Vue CartView.vue script 數組的filter函數需要return顯式返回布爾值，該方法得到一個新數組。 使用Vuex store的modules方式，註意讀取狀態的方式 this.$store.state.cart.items 刷新頁面後state狀態還原，需要用session ...
  • vue 指令與過濾器
    vue 指令與過濾器 內容渲染指令 內容渲染指令是用來輔助開發者渲染 DOM 元素的文本內容。常用的內容渲染指令有3種。 v-text 示例 <div id="app"> <!-- 把 username 對應的值，渲染到第一個 p 標簽中 --> <p v-text="username"></p> ...
  • vue3和vue2 的區別，vue3和vu2到底哪個好呢？
    vue3 正式發佈有兩年多了，之前也做過一些學習和研究。vue3 發佈後給某培訓機構開發了一套vue3課程課件，自己也開源了一套基於vue3的後臺管理系統（因為個人懶的原因，半年後才上傳到gitHub，且到目前為止一直沒有更新過）。 附上網址：https://github.com/gegestst1 ...
  • vue 中使用 this 更新數據的一次大坑
    情景說明： 之前用 vue 做數據綁定更新時，發現一個莫名奇妙的問題。 我在 vue 實例中聲明瞭一個數組屬性如 books: []，在非同步請求的回調函數中使用 this.books = res.data.data; 進行數據更新，更新步驟後面緊跟著列印了 console.log(this.book ...
  • webpack調優技巧
    webpack優化主要有三個方面：1.提高構建速度，2.減少打包體積，3.優化用戶體驗 提高構建速度： 啟用多線程 thread-loader 使用thread-loader插件可以啟用多線程進行構建。 使用緩存 cache-loader 使用cache-loader插件可以對構建進行緩存，加快後續 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類