七弈智慧• 工作室

js项目如何统一管理接口

2025-05-21 21:14:11 阅读(195)

要在整个项目中管理公共接口,并且让不同的JavaScript文件能够互相调用和触发事件,您可以考虑以下几个步骤来组织和维护您的代码:

1. 集中管理接口

创建一个专门的文件来定义和暴露所有的公共接口。这个文件将作为您项目中所有公共函数和事件的中心点。

publicApi.js:

window.PublicApi = {
    chess: {
        // 声明接口,但暂不实现
        updateBoard: null // 或者一个函数占位符
    },
    // 其他模块的接口声明
};

2. 在具体实现中绑定接口

在具体的实现文件中,绑定相应的逻辑到这些接口。

chessboard.js:

// chessboard.js
document.addEventListener('DOMContentLoaded', function() {
    const pgnView = document.getElementById('pgnView');
    // ...其他代码...

    // 更新棋盘的实现函数
    function updateBoard(moves) {
        pgnView.innerHTML = '';
        moves.forEach((move, index) => {
            // 创建并添加棋谱元素
        });
    }

    // 将实现绑定到公共接口
    window.PublicApi.chess.updateBoard = updateBoard;
    
    // 初始化或其他逻辑...
});

3. 在其他文件中调用接口

在其他JavaScript文件中,通过公共API来调用这些接口。

otherScript.js:

// otherScript.js
// 假设有一组棋谱数据
const newMoves = [
    // ... 棋谱数据 ...
];

// 调用公共接口更新棋盘
window.PublicApi.chess.updateBoard(newMoves);

4. 使用事件触发器

如果需要跨文件触发事件,可以使用自定义事件。

eventManager.js:

// eventManager.js
window.EventManager = {
    trigger: function(eventName, detail) {
        const event = new CustomEvent(eventName, { detail: detail });
        document.dispatchEvent(event);
    }
};

chessboard.js:

// 在棋盘点击时触发事件
function toggleActive(element, className) {
    // ...切换激活状态的逻辑...
    // 触发自定义事件
    window.EventManager.trigger('chessMoveActivated', { move: getMoveDetail(element) });
}

otherScript.js:

// 监听棋盘点击事件
document.addEventListener('chessMoveActivated', function(e) {
    console.log('棋盘走法被激活:', e.detail.move);
    // 执行其他逻辑
});

5. 模块化您的代码

考虑使用模块化技术,如ES6模块、CommonJS或AMD,来组织您的代码。这有助于避免全局命名空间的污染,并提供更好的封装和重用性。

moduleExample.js (使用ES6模块示例):

// moduleExample.js
export function someSharedFunction() {
    // ...
}

export default class ChessApi {
    static updateBoard(moves) {
        // ...
    }
}

main.js (使用ES6模块导入示例):

// main.js
import ChessApi from './moduleExample.js';
import otherFunction from './otherModule.js';

// 使用导入的函数和类
ChessApi.updateBoard(someMoves);
otherFunction();

接口页面--全局数据:

site-> {"id":1,"name":"七弈智慧","domain":"doc.7yi.link","email":"13346163791@qq.com","wx":null,"icp":"浙ICP备2023022652号-1","code":"","json":{"siteSubtitle":"• 工作室"},"title":"七弈国象-连接七弈 智慧人生","keywords":"国际象棋,棋谱,pgn,","description":"国际象棋站","createdAt":null,"updatedAt":"2025-04-14T01:07:55.000Z","template":null,"appid":null,"secret":null}

111-->• 工作室

nav-> [{"id":13,"pid":0,"name":"日常工作杂记","pinyin":"richanggongzuozaji","path":"/richanggongzuozaji","sort":4,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/cmsgaijin/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/richanggongzuozaji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":18,"pid":0,"name":"国象练习","pinyin":"guoxianglianxi","path":"/guoxianglianxi","sort":3,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":19,"pid":0,"name":"信息公布","pinyin":"xinxigongbu","path":"/xinxigongbu","sort":6,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":20,"pid":19,"name":"业界消息","pinyin":"yejiexiaoxi","path":"/qiyiguoxiang/yejiexiaoxi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":21,"pid":19,"name":"七弈动态","pinyin":"qiyidongtai","path":"/xinxigongbu/qiyidongtai","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]}]

category-> [{"id":13,"pid":0,"name":"日常工作杂记","pinyin":"richanggongzuozaji","path":"/richanggongzuozaji","sort":4,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/cmsgaijin/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/richanggongzuozaji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/cmsgaijin/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/richanggongzuozaji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":18,"pid":0,"name":"国象练习","pinyin":"guoxianglianxi","path":"/guoxianglianxi","sort":3,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":19,"pid":0,"name":"信息公布","pinyin":"xinxigongbu","path":"/xinxigongbu","sort":6,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":20,"pid":19,"name":"业界消息","pinyin":"yejiexiaoxi","path":"/qiyiguoxiang/yejiexiaoxi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":21,"pid":19,"name":"七弈动态","pinyin":"qiyidongtai","path":"/xinxigongbu/qiyidongtai","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":20,"pid":19,"name":"业界消息","pinyin":"yejiexiaoxi","path":"/qiyiguoxiang/yejiexiaoxi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":21,"pid":19,"name":"七弈动态","pinyin":"qiyidongtai","path":"/xinxigongbu/qiyidongtai","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]

friendlink-> [{"id":1,"title":"七弈国象首页","link":"https://www.7yi.link","sort":0,"createdAt":"2023-07-22T14:59:55.000Z"}]

base_url-> /public/template/default

frag--->{"record":"<p style=\"text-align: center;\"><a href=\"http://beian.miit.gov.cn/\" target=\"_blank\" rel=\"noopener\">浙ICP备2023022652号-1</a></p>","footer-guanyu":"","footer-7yi":"","footer-chess":"","footer-fe":"","chanyue-introduce":"<p>七弈国象:专注于国际象棋开局与战术学习的网站</p>\n<ul>\n<li>国际象棋相关工具开发:<br>\n<ul>\n<li>记谱训练</li>\n<li>识谱工具</li>\n</ul>\n</li>\n<li>国象相关产品\n<ul>\n<li>记录本</li>\n</ul>\n</li>\n<li>电商网站\n<ul>\n<li>畅享一三</li>\n</ul>\n</li>\n<li>通用后台<br>\n<ul>\n<li>7Link通用后台开发系统&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>\n</ul>\n</li>\n</ul>","copyright":"<p style=\"text-align: center;\">杭州七弈智慧科技有限公司版权所有</p>","ad":"<p style=\"text-align: center;\"><a href=\"https://7yi.link/stock/chess/web-mobile/\" target=\"_blank\" rel=\"noopener\"> <img style=\"display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto;\" src=\"/public/uploads/default/2023/09/21/1695286791855_mceu_83563456911695286788809.png.png\"> </a></p>\n<p style=\"text-align: center;\"><a href=\"https://7yi.link/stock/chess/web-mobile/\" target=\"_blank\" rel=\"noopener\">开局树学习</a></p>"}

tag--->[{"id":8,"name":"双马防御","path":"shuangmafangyu"},{"id":7,"name":"开发","path":"kaifa"},{"id":6,"name":"伦敦体系","path":"lunduntixi"},{"id":5,"name":"俄罗斯防御","path":"eluosifangyu"},{"id":1,"name":"cms","path":"cms"}]

-----------

position------>[{"id":13,"pid":0,"name":"日常工作杂记","pinyin":"richanggongzuozaji","path":"/richanggongzuozaji","sort":4,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0","children":[{"id":14,"pid":13,"name":"前端","pinyin":"qianduan","path":"/cmsgaijin/qianduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":15,"pid":13,"name":"后端","pinyin":"houduan","path":"/cmsgaijin/houduan","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/richanggongzuozaji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":17,"pid":13,"name":"工作计划","pinyin":"gongzuojihua","path":"/cmsgaijin/gongzuojihua","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":22,"pid":13,"name":"炒股养棋","pinyin":"chaoguyangqi","path":"/chaoguyangqi","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":23,"pid":13,"name":"cx13","pinyin":"cx13","path":"/kaifariji/cx13","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":24,"pid":13,"name":"时限学堂","pinyin":"shixianxuetang","path":"/richanggongzuozaji/shixianxuetang","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},{"id":25,"pid":13,"name":"运营","pinyin":"yunying","path":"/richanggongzuozaji/yunying","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]},{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/richanggongzuozaji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"}]

navSub------>{"cate":{"id":16,"pid":13,"name":"总结","pinyin":"zongjie","path":"/richanggongzuozaji/zongjie","sort":0,"target":"0","status":"0","list_view":"list.html","article_view":"article.html","seo_title":"","seo_keywords":"","seo_description":"","type":"0"},"id":16}

article------>{"id":214,"cid":16,"sub_cid":"","title":"js项目如何统一管理接口","short_title":"","tag_id":"","attr":"","seo_title":"","seo_keywords":"","seo_description":"","source":"","author":"","description":"","img":"","content":"<p>要在整个项目中管理公共接口,并且让不同的JavaScript文件能够互相调用和触发事件,您可以考虑以下几个步骤来组织和维护您的代码:</p>\n<h3>1. 集中管理接口</h3>\n<p>创建一个专门的文件来定义和暴露所有的公共接口。这个文件将作为您项目中所有公共函数和事件的中心点。</p>\n<p><strong>publicApi.js</strong>:</p>\n<pre class=\"language-javascript\"><code>window.PublicApi = {\n chess: {\n // 声明接口,但暂不实现\n updateBoard: null // 或者一个函数占位符\n },\n // 其他模块的接口声明\n};</code></pre>\n<h3>2. 在具体实现中绑定接口</h3>\n<p>在具体的实现文件中,绑定相应的逻辑到这些接口。</p>\n<p><strong>chessboard.js</strong>:</p>\n<div class=\"MuiBox-root css-1a19m0d\"><button class=\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary copy-btn css-1eu2f56\" tabindex=\"0\" type=\"button\"></button>\n<pre><code class=\"language-javascript\"><span class=\"token\">// chessboard.js</span>\n<span class=\"token dom\">document</span><span class=\"token\">.</span><span class=\"token method property-access\">addEventListener</span><span class=\"token\">(</span><span class=\"token\">'DOMContentLoaded'</span><span class=\"token\">,</span> <span class=\"token\">function</span><span class=\"token\">(</span><span class=\"token\">)</span> <span class=\"token\">{</span>\n <span class=\"token\">const</span> pgnView <span class=\"token\">=</span> <span class=\"token dom\">document</span><span class=\"token\">.</span><span class=\"token method property-access\">getElementById</span><span class=\"token\">(</span><span class=\"token\">'pgnView'</span><span class=\"token\">)</span><span class=\"token\">;</span>\n <span class=\"token\">// ...其他代码...</span>\n\n <span class=\"token\">// 更新棋盘的实现函数</span>\n <span class=\"token\">function</span> <span class=\"token\">updateBoard</span><span class=\"token\">(</span><span class=\"token parameter\">moves</span><span class=\"token\">)</span> <span class=\"token\">{</span>\n pgnView<span class=\"token\">.</span><span class=\"token property-access\">innerHTML</span> <span class=\"token\">=</span> <span class=\"token\">''</span><span class=\"token\">;</span>\n moves<span class=\"token\">.</span><span class=\"token method property-access\">forEach</span><span class=\"token\">(</span><span class=\"token\">(</span><span class=\"token parameter\">move</span><span class=\"token parameter\">,</span><span class=\"token parameter\"> index</span><span class=\"token\">)</span> <span class=\"token arrow\">=&gt;</span> <span class=\"token\">{</span>\n <span class=\"token\">// 创建并添加棋谱元素</span>\n <span class=\"token\">}</span><span class=\"token\">)</span><span class=\"token\">;</span>\n <span class=\"token\">}</span>\n\n <span class=\"token\">// 将实现绑定到公共接口</span>\n <span class=\"token dom\">window</span><span class=\"token\">.</span><span class=\"token property-access maybe-class-name\">PublicApi</span><span class=\"token\">.</span><span class=\"token property-access\">chess</span><span class=\"token\">.</span><span class=\"token property-access\">updateBoard</span> <span class=\"token\">=</span> updateBoard<span class=\"token\">;</span>\n \n <span class=\"token\">// 初始化或其他逻辑...</span>\n<span class=\"token\">}</span><span class=\"token\">)</span><span class=\"token\">;</span></code></pre>\n</div>\n<h3>3. 在其他文件中调用接口</h3>\n<p>在其他JavaScript文件中,通过公共API来调用这些接口。</p>\n<p><strong>otherScript.js</strong>:</p>\n<div class=\"MuiBox-root css-1a19m0d\"><button class=\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary copy-btn css-1eu2f56\" tabindex=\"0\" type=\"button\"></button>\n<pre><code class=\"language-javascript\"><span class=\"token\">// otherScript.js</span>\n<span class=\"token\">// 假设有一组棋谱数据</span>\n<span class=\"token\">const</span> newMoves <span class=\"token\">=</span> <span class=\"token\">[</span>\n <span class=\"token\">// ... 棋谱数据 ...</span>\n<span class=\"token\">]</span><span class=\"token\">;</span>\n\n<span class=\"token\">// 调用公共接口更新棋盘</span>\n<span class=\"token dom\">window</span><span class=\"token\">.</span><span class=\"token property-access maybe-class-name\">PublicApi</span><span class=\"token\">.</span><span class=\"token property-access\">chess</span><span class=\"token\">.</span><span class=\"token method property-access\">updateBoard</span><span class=\"token\">(</span>newMoves<span class=\"token\">)</span><span class=\"token\">;</span></code></pre>\n</div>\n<h3>4. 使用事件触发器</h3>\n<p>如果需要跨文件触发事件,可以使用自定义事件。</p>\n<p><strong>eventManager.js</strong>:</p>\n<div class=\"MuiBox-root css-1a19m0d\"><button class=\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary copy-btn css-1eu2f56\" tabindex=\"0\" type=\"button\"></button>\n<pre><code class=\"language-javascript\"><span class=\"token\">// eventManager.js</span>\n<span class=\"token dom\">window</span><span class=\"token\">.</span><span class=\"token property-access maybe-class-name\">EventManager</span> <span class=\"token\">=</span> <span class=\"token\">{</span>\n <span class=\"token function-variable\">trigger</span><span class=\"token\">:</span> <span class=\"token\">function</span><span class=\"token\">(</span><span class=\"token parameter\">eventName</span><span class=\"token parameter\">,</span><span class=\"token parameter\"> detail</span><span class=\"token\">)</span> <span class=\"token\">{</span>\n <span class=\"token\">const</span> event <span class=\"token\">=</span> <span class=\"token\">new</span> <span class=\"token\">CustomEvent</span><span class=\"token\">(</span>eventName<span class=\"token\">,</span> <span class=\"token\">{</span> <span class=\"token literal-property\">detail</span><span class=\"token\">:</span> detail <span class=\"token\">}</span><span class=\"token\">)</span><span class=\"token\">;</span>\n <span class=\"token dom\">document</span><span class=\"token\">.</span><span class=\"token method property-access\">dispatchEvent</span><span class=\"token\">(</span>event<span class=\"token\">)</span><span class=\"token\">;</span>\n <span class=\"token\">}</span>\n<span class=\"token\">}</span><span class=\"token\">;</span></code></pre>\n</div>\n<p><strong>chessboard.js</strong>:</p>\n<div class=\"MuiBox-root css-1a19m0d\"><button class=\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary copy-btn css-1eu2f56\" tabindex=\"0\" type=\"button\"></button>\n<pre><code class=\"language-javascript\"><span class=\"token\">// 在棋盘点击时触发事件</span>\n<span class=\"token\">function</span> <span class=\"token\">toggleActive</span><span class=\"token\">(</span><span class=\"token parameter\">element</span><span class=\"token parameter\">,</span><span class=\"token parameter\"> className</span><span class=\"token\">)</span> <span class=\"token\">{</span>\n <span class=\"token\">// ...切换激活状态的逻辑...</span>\n <span class=\"token\">// 触发自定义事件</span>\n <span class=\"token dom\">window</span><span class=\"token\">.</span><span class=\"token property-access maybe-class-name\">EventManager</span><span class=\"token\">.</span><span class=\"token method property-access\">trigger</span><span class=\"token\">(</span><span class=\"token\">'chessMoveActivated'</span><span class=\"token\">,</span> <span class=\"token\">{</span> <span class=\"token literal-property\">move</span><span class=\"token\">:</span> <span class=\"token\">getMoveDetail</span><span class=\"token\">(</span>element<span class=\"token\">)</span> <span class=\"token\">}</span><span class=\"token\">)</span><span class=\"token\">;</span>\n<span class=\"token\">}</span></code></pre>\n</div>\n<p><strong>otherScript.js</strong>:</p>\n<div class=\"MuiBox-root css-1a19m0d\"><button class=\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary copy-btn css-1eu2f56\" tabindex=\"0\" type=\"button\"></button>\n<pre><code class=\"language-javascript\"><span class=\"token\">// 监听棋盘点击事件</span>\n<span class=\"token dom\">document</span><span class=\"token\">.</span><span class=\"token method property-access\">addEventListener</span><span class=\"token\">(</span><span class=\"token\">'chessMoveActivated'</span><span class=\"token\">,</span> <span class=\"token\">function</span><span class=\"token\">(</span><span class=\"token parameter\">e</span><span class=\"token\">)</span> <span class=\"token\">{</span>\n <span class=\"token console\">console</span><span class=\"token\">.</span><span class=\"token method property-access\">log</span><span class=\"token\">(</span><span class=\"token\">'棋盘走法被激活:'</span><span class=\"token\">,</span> e<span class=\"token\">.</span><span class=\"token property-access\">detail</span><span class=\"token\">.</span><span class=\"token property-access\">move</span><span class=\"token\">)</span><span class=\"token\">;</span>\n <span class=\"token\">// 执行其他逻辑</span>\n<span class=\"token\">}</span><span class=\"token\">)</span><span class=\"token\">;</span></code></pre>\n</div>\n<h3>5. 模块化您的代码</h3>\n<p>考虑使用模块化技术,如ES6模块、CommonJS或AMD,来组织您的代码。这有助于避免全局命名空间的污染,并提供更好的封装和重用性。</p>\n<p><strong>moduleExample.js</strong> (使用ES6模块示例):</p>\n<div class=\"MuiBox-root css-1a19m0d\"><button class=\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary copy-btn css-1eu2f56\" tabindex=\"0\" type=\"button\"></button>\n<pre><code class=\"language-javascript\"><span class=\"token\">// moduleExample.js</span>\n<span class=\"token module\">export</span> <span class=\"token\">function</span> <span class=\"token\">someSharedFunction</span><span class=\"token\">(</span><span class=\"token\">)</span> <span class=\"token\">{</span>\n <span class=\"token\">// ...</span>\n<span class=\"token\">}</span>\n\n<span class=\"token module\">export</span> <span class=\"token module\">default</span> <span class=\"token\">class</span> <span class=\"token\">ChessApi</span> <span class=\"token\">{</span>\n <span class=\"token\">static</span> <span class=\"token\">updateBoard</span><span class=\"token\">(</span><span class=\"token parameter\">moves</span><span class=\"token\">)</span> <span class=\"token\">{</span>\n <span class=\"token\">// ...</span>\n <span class=\"token\">}</span>\n<span class=\"token\">}</span></code></pre>\n</div>\n<p><strong>main.js</strong> (使用ES6模块导入示例):</p>\n<div class=\"MuiBox-root css-1a19m0d\"><button class=\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary copy-btn css-1eu2f56\" tabindex=\"0\" type=\"button\">复制</button>\n<pre><code class=\"language-javascript\"><span class=\"token\">// main.js</span>\n<span class=\"token module\">import</span> <span class=\"token imports maybe-class-name\">ChessApi</span> <span class=\"token module\">from</span> <span class=\"token\">'./moduleExample.js'</span><span class=\"token\">;</span>\n<span class=\"token module\">import</span> <span class=\"token imports\">otherFunction</span> <span class=\"token module\">from</span> <span class=\"token\">'./otherModule.js'</span><span class=\"token\">;</span>\n\n<span class=\"token\">// 使用导入的函数和类</span>\n<span class=\"token maybe-class-name\">ChessApi</span><span class=\"token\">.</span><span class=\"token method property-access\">updateBoard</span><span class=\"token\">(</span>someMoves<span class=\"token\">)</span><span class=\"token\">;</span>\n<span class=\"token\">otherFunction</span><span class=\"token\">(</span><span class=\"token\">)</span><span class=\"token\">;</span></code></pre>\n</div>","status":0,"pv":195,"link":"","createdAt":"2024-05-24 12:22:19","updatedAt":"2025-05-21 21:14:11","field":{},"tags":[]}

article.tags------>[]

news------>[{"id":259,"title":"七弈通用后台数据库配置文件规范","short_title":"","img":"","createdAt":"2024-12-31T10:32:53.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":258,"title":"书库系统更新记录","short_title":"","img":"","createdAt":"2024-12-28T09:33:18.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":254,"title":"用AI辅助帮朋友完成了一个45年同学聚会的视频","short_title":"","img":"","createdAt":"2024-12-05T00:50:11.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":253,"title":"一个很好用的视频格式转换网站","short_title":"","img":"","createdAt":"2024-11-27T10:37:40.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":246,"title":"运营准备","short_title":"","img":"","createdAt":"2024-07-19T14:14:01.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":245,"title":"教学视频","short_title":"","img":"","createdAt":"2024-07-05T00:47:41.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":242,"title":"6月30日工作总结","short_title":"","img":"","createdAt":"2024-06-30T12:03:02.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":241,"title":"今天工作总结","short_title":"","img":"","createdAt":"2024-06-28T10:23:17.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":237,"title":"6月19日工作记录","short_title":"","img":"","createdAt":"2024-06-18T23:57:11.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":236,"title":"我的棋局开发进度","short_title":"","img":"","createdAt":"2024-06-18T14:36:31.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"}]

hot------>[{"id":206,"title":"如何让wsl通过代理访问","path":"/kaifariji/zongjie"},{"id":148,"title":" stockfish中 elo与 skill之间的区别 ","path":"/kaifariji/zongjie"},{"id":81,"title":"禅悦cms系统上一个版本改动汇总","path":"/kaifariji/zongjie"},{"id":22,"title":"对cms系统修改记录","path":"/kaifariji/zongjie"},{"id":210,"title":"lichess的说明","path":"/kaifariji/zongjie"},{"id":172,"title":"解决 Stockfish 引擎在本地测试时的 SharedArrayBuffer 错误","path":"/kaifariji/zongjie"},{"id":49,"title":"一些有用的经验","path":"/kaifariji/zongjie"},{"id":145,"title":"小兔子阿斗的故事","path":"/kaifariji/zongjie"},{"id":108,"title":"纸张克数选择","path":"/kaifariji/zongjie"},{"id":201,"title":"lichess安装指南","path":"/kaifariji/zongjie"}]

imgs------>[{"id":145,"title":"小兔子阿斗的故事","short_title":"","img":"/public/uploads/default/2024/01/17/1705477492766_origin-mceclip0jpg","createdAt":"2024-01-17T07:44:22.000Z","description":"","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":97,"title":"搬迁服务器总结","short_title":"","img":"/public/uploads/default/2023/11/08/1699443000987_mceclip0.jpg.jpg","createdAt":"2023-11-08T10:02:59.000Z","description":"自8月份以来,我们决定将我们的业务入驻亚马逊,被吸引的原因之一是亚马逊提供的一年免费服务器,这似乎非常适合我们这些仍在进行产品测试的客户。","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":79,"title":"记录一下,如何让18年的笔记本支持21:9显示器","short_title":"","img":"/public/uploads/default/2023/11/01/1698876307181_mceclip0.png.png","createdAt":"2023-11-01T13:51:06.000Z","description":"借双十一,给工作站配置了一台带鱼屏34寸显示器,HKC的 曲率1000,京东各种打折下来1276元。原价 1699双11 -400红包 -4.33白条  -8加入hkc会员 -10应当把可以打折的优惠都拿了下来办公室安装 很顺利 直接usb扩展显示器接上就可以用了搬到家里,问题出来了,接hdmi扩展口 显示分辨率不支持21:9  最高只有16:9更新最新的intel 显卡控制中心,无效。。。办公室配熊猫的是采用自定义分辨率。现在系统找不到了。没办法。下载驱动精灵,刷新所有驱动,重启右键。。","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"},{"id":45,"title":"使用cocos creator 开发微信小程序","short_title":"","img":"/public/uploads/default/2023/10/03/1696300737570_mceclip0.png.png","createdAt":"2023-10-01T22:21:25.000Z","description":"一 帐号准备:\n开发者帐号:\n如果不是多端开发,即(网页,android app,ios app,小程序,或多项目,可以不用申请,年费 300元","pinyin":"zongjie","name":"总结","path":"/kaifariji/zongjie"}]

pre------>{"id":213,"title":"书房的项目","name":"总结","path":"/kaifariji/zongjie"}

next------>{"id":216,"title":"5月份工作总结与明天上线计划","name":"总结","path":"/kaifariji/zongjie"}

E