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,通过观察,我们发现templatestyle都是字符串,我们完全可以独立为htmlcss,这样也方便在IDE更加丝滑的编写。

优化后的插件项目结构,如下所示:

image-20201024230551450
  • template变为了panel.html
<button class="btn">
    按钮
</button>
  • style变为了panel.css
.btn {
    width: 100px;
    height: 100px;
}
  • panel.jstemplaestyle改为通过读取文件获取
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教程大家可以自行搜索学习。

我个人使用的idewebstorm,对less支持的也非常好,这里我就分享下在webstorm中配置less

  • 电脑需要安装nodejs,然后全局安装less

    npm install -g less

  • 在webstorm中设置实时监听less文件,并转换为css,详细设置自行搜索相关教程,这里不再赘述image-20201024232510263

经过以上改造,项目结构如下:

image-20201024232754342

终于可以爽快的开撸代码了!!!

当然还有更多的web前沿技术等着大家在creator3d插件中解锁,期待大家的分享。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xu_yanfeng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值