动态性在编程中的应用

一、JavaScript中的动态性

1、动态绑定事件

<button id="btn">点击我</button>
<script>
document.getElementById('btn').addEventListener('click', function(){
    alert('动态绑定事件');
});
</script>

2、动态添加、删除DOM元素

<div id="container">
  <p>这是一段文本。</p>
</div>
<script>
//添加
var p = document.createElement('p');
p.innerHTML = '这里是新添加的内容';
document.getElementById('container').appendChild(p);
//删除
var p = document.getElementsByTagName('p')[0];
document.getElementById('container').removeChild(p);
</script>

3、动态改变CSS样式

<button id="color-btn">改变颜色</button>
<script>
document.getElementById('color-btn').addEventListener('click', function(){
    document.body.style.backgroundColor = 'red';
});
</script>

二、Python中的动态性

1、动态类型

a = 'hello' #a是字符串类型
a = [1, 2, 3] #a变成列表类型
a = {'name': 'Tom', 'age': 18} #a变成字典类型

2、动态属性

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age
p = Person('Tom', 18)
p.sex = 'male' #动态添加属性
print(p.sex)

3、动态导入模块

import importlib
module_name = 'module1'
module = importlib.import_module(module_name)

三、动态页面的实现

1、使用Vue.js框架

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
    <button @click="add">添加</button>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        list: ['第一项', '第二项']
    },
    methods: {
        add: function(){
            this.list.push('新添加的项');
        }
    }
})
</script>

2、使用WebSocket实时更新数据

var socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('message', function(event) {
    console.log('接收到消息:', event.data);
    //更新页面数据
});

四、JavaScript中的异步编程

1、回调函数

function getData(callback){
    setTimeout(function(){
        callback('这是回调函数返回的数据');
    }, 1000);
}
getData(function(data){
    console.log(data);
});

2、Promise

function getData(){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve('这是Promise返回的数据');
        }, 1000);
    });
}
getData().then(function(data){
    console.log(data);
});

3、async/await

async function getData(){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve('这是async/await返回的数据');
        }, 1000);
    });
}
(async function(){
    var data = await getData();
    console.log(data);
})();