如何简化JavaScript与PHP文件？附网站开发代码示例

嘿，结合你用jQuery做前端、PHP+MySQL做后端的网站场景，还有你给出的header.php片段，我来分享几个简化代码的实用方法，让你的代码更干净、易维护：

一、PHP代码简化与优化 #

1. 安全又简洁的数据库查询 #

你当前直接把$user拼进SQL里，不仅有SQL注入风险，写法也不够利落。换成PDO预处理语句，既安全又能简化代码：

// 替换原来的查询写法
$stmt = $pdo->prepare("SELECT isSeen FROM mail WHERE isSeen = 0 AND recipient = ?");
$stmt->execute([$user]);
// 如果是要统计未读数量，直接用fetchColumn更高效
$unreadCount = $stmt->fetchColumn();

不用手动拼接字符串，参数自动转义，安全又省心。

2. 视图层代码简化 #

在HTML和PHP混写的部分，能省则省：

• 用<?= ?>替代<?php echo ?>，少写一半字符：

<div id="history" class="gal1 <?= empty($user) ? 'mr-auto' : ''; ?>" data-toggle="modal" data-target="#dateModal">history</div>

• 把重复的条件判断抽成变量，避免视图里堆逻辑：

// 先在视图上方计算好类名
$historyClasses = 'gal1' . (empty($user) ? ' mr-auto' : '');
// 视图里直接用变量
<div id="history" class="<?= $historyClasses; ?>" ...>history</div>

3. 分离业务逻辑与视图 #

别把数据库查询这类逻辑直接写在header.php里，抽成独立的服务类，复用性更强：

// 新建一个MailService.php文件
class MailService {
    private $db;
    public function __construct(PDO $db) {
        $this->db = $db;
    }
    // 封装未读邮件查询逻辑
    public function getUnreadMailCount(string $userId): int {
        $stmt = $this->db->prepare("SELECT COUNT(*) FROM mail WHERE isSeen = 0 AND recipient = ?");
        $stmt->execute([$userId]);
        return (int)$stmt->fetchColumn();
    }
}

然后在header.php里只需要调用：

$mailService = new MailService($pdo);
$unreadCount = $mailService->getUnreadMailCount($user);

这样视图文件只负责渲染，逻辑都集中在服务类里，后续改需求也方便。

二、jQuery代码简化技巧 #

1. 缓存DOM元素，减少重复查询 #

如果你的JS里多次操作同一个DOM元素，先缓存起来，别每次都查一遍：

// 缓存常用节点，放在代码开头
const $today = $('#today');
const $history = $('#history');
const $dateModal = $('#dateModal');

// 后续直接用缓存的变量
$today.on('click', function() {
    // 处理点击逻辑
});
$history.click(() => $dateModal.modal('show'));

既提升性能，代码也更简洁。

2. 简化事件绑定与链式调用 #

用事件委托处理动态元素，同时多用链式调用减少代码行数：

// 事件委托：给父元素绑定一次，处理所有子元素的点击
$('.d-flex').on('click', '.gal1', function(e) {
    const $target = $(e.target);
    if ($target.is('#today')) {
        // 处理today的逻辑
    } else if ($target.is('#history')) {
        $dateModal.modal('show');
    }
});

// 链式调用：把多个操作连在一起写
$today.addClass('active').text('今日记录').fadeIn();

3. 简化AJAX请求与模块化 #

把重复的AJAX逻辑抽成函数，同时用模块化组织JS代码，避免全局变量污染：

// 封装AJAX请求函数
function sendAjax(url, data) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: data,
        dataType: 'json'
    });
}

// 用自执行函数封装模块，避免全局变量
(function($) {
    const MailHandler = {
        init: function() {
            this.bindEvents();
            this.loadUnreadCount();
        },
        bindEvents: function() {
            $history.click(this.openModal.bind(this));
        },
        loadUnreadCount: function() {
            sendAjax('api/get-unread.php', { user: currentUser })
                .done(res => console.log('未读数量：', res.count))
                .fail(err => console.error('加载失败：', err));
        },
        openModal: function() {
            $dateModal.modal('show');
        }
    };

    // 页面加载完成后初始化模块
    $(document).ready(() => MailHandler.init());
})(jQuery);

内容的提问来源于stack exchange，提问作者Gai Kuroda