JavaScript框架如何获取控制权并调用自定义主代码？实现方式解析

核心问题 #

框架（尤其是JavaScript框架）是如何获取控制权并调用自定义主代码的？框架是否总是先于我的代码执行？

对库的理解 #

我认为库是定义各类函数的代码集合，开发者可按需调用，控制权完全在自定义代码手中，由我们主动调用库的功能。

示例代码 #

index.html

<html>
 <head>
  <script src="URL to jQuery-lib.js"></script>
  <script src="./my_code.js"></script>
 </head>
 <body>
 </body>
</html>

jQuery-lib.js

function one_jquery_function() {
   // 具体实现逻辑
}

my_code.js

// 自定义代码主动调用库函数
one_jquery_function();

对框架的理解与实现逻辑 #

框架遵循**控制反转（IoC）**原则，控制权由框架掌握，它会先完成自身初始化，再在合适的时机调用我们的自定义代码。

常见执行流程 #

1. 前置加载与初始化：通常框架脚本会先于自定义代码加载，优先完成自身的环境搭建、生命周期初始化、DOM监听等前置工作。
2. 自定义代码的约定式暴露：我们的代码必须按照框架的规则暴露给它，常见方式包括：
   • 注册生命周期钩子（如React的useEffect、Vue的mounted）
   • 导出特定格式的模块（如Next.js的页面组件、Express的路由）
   • 全局暴露框架要求的入口函数
3. 框架主动触发调用：框架在自身生命周期的对应节点，主动调用我们注册好的自定义代码。

简化示例代码 #

index.html

<html>
 <head>
  <script src="URL to JS-framework.js"></script>
  <script src="./my_code.js"></script>
 </head>
 <body>
  <div id="app"></div>
 </body>
</html>

JS-framework.js（简化实现）

// 框架构造函数
function Framework() {
  this.init();
}

Framework.prototype.init = function() {
  // 完成框架自身的初始化工作
  console.log('框架初始化完成');
  // 触发自定义代码执行
  this.invokeUserCode();
};

Framework.prototype.invokeUserCode = function() {
  // 检查用户是否按照约定暴露了代码
  if (window.userApp && typeof window.userApp.mount === 'function') {
    window.userApp.mount('#app');
  }
};

// 实例化框架，启动整个流程
new Framework();

my_code.js（用户自定义代码）

// 按照框架约定暴露入口方法
window.userApp = {
  mount: function(el) {
    document.querySelector(el).innerHTML = '<h1>我的自定义代码运行了</h1>';
    console.log('自定义代码被框架调用');
  }
};

框架是否总是先于自定义代码执行？ #

大部分场景下是这样，但存在例外：

• 如果框架脚本添加了async或defer属性实现异步加载，可能会出现自定义代码先执行的情况，这时需要通过监听DOMContentLoaded事件或框架加载完成的回调，确保在框架就绪后再注册自定义代码。
• 极少数框架允许开发者手动触发框架初始化，这种情况下自定义代码可能先执行，再由我们主动启动框架。

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