CocosCreator3D外掛教程(9)：如何優雅的編寫外掛皮膚程式碼

通過之前的學習，我們已經掌握瞭如何完整的編寫一個外掛皮膚。

我們先整理下panel.js程式碼：

exports.template = `
<button class="btn">
    按鈕
</button>`;

exports.style = `
.btn{
    width:100px;
    height:100px;
}`;

exports.$ = {
    btn: '.btn'
}

exports.ready = function () {
    this.$.btn.addEventListener('click', () => {
        console.log('點選按鈕')
    })
}

隨著外掛邏輯慢慢複雜，似乎所有邏輯都堆在了這個panel.js，通過觀察，我們發現template，style都是字串，我們完全可以獨立為html和css，這樣也方便在IDE更加絲滑的編寫。

優化後的外掛專案結構，如下所示：

• template變為了panel.html

<button class="btn">
    按鈕
</button>

• style變為了panel.css

.btn {
    width: 100px;
    height: 100px;
}

• panel.js的templae、style改為通過讀取檔案獲取

const Path = require('path');
const Fs = require('fs');
exports.template = Fs.readFileSync(Path.join(__dirname, 'panel.html'), 'utf-8');
exports.style = Fs.readFileSync(Path.join(__dirname, 'panel.css'), 'utf-8');

exports.$ = {
    btn: '.btn'
}

exports.ready = function () {
    this.$.btn.addEventListener('click', () => {
        console.log('點選按鈕')
    })
}

改造後的外掛結構，更加有利於IDE的智慧提示，同時也方便我們的程式碼管理。

CSS再優化

上述的優化已經比較方便程式碼編寫，但是如果介面元素比較多，樣式也就非常多，css編寫會越來越麻煩，到最後起名字可能都成了難題。

web技術發展非常快，新技術層出不窮，CSS預處理語言也就由此誕生，其中less就是一個解決方案，詳細的less教程大家可以自行搜尋學習。

我個人使用的ide是webstorm，對less支援的也非常好，這裡我就分享下在webstorm中配置less：

• 電腦需要安裝nodejs，然後全域性安裝less

  npm install -g less

• 在webstorm中設定實時監聽less檔案，並轉換為css，詳細設定自行搜尋相關教程，這裡不再贅述

經過以上改造，專案結構如下：

終於可以爽快的開擼程式碼了！！！

當然還有更多的web前沿技術等著大家在creator3d外掛中解鎖，期待大家的分享。