《JSP》第09节：JSP三大指令之include指令

SP指令是指：用于设置JSP页面相关属性的一个语法命令，例如：设置页面编码字符集、导入其他包等等。JSP中提供了三个指令，分别是：page指令、include指令、taglib指令。其中page指令用于设置JSP页面属性，include指令用于引入其他的JSP文件，taglib指令用于引入标签库。这一小节内容介绍include指令的使用。

1.1、include指令作用

include指令作用：将指定的文件引入到当前JSP页面里面。include指令会将引入的文件内容嵌入到当前JSP页面中的对应位置。

<%@ include file="文件的相对路径" %>

案例代码：

创建一个header.jsp文件。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>这是HTML头部</title>
</head>

创建一个include.jsp文件。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 引入头部文件 --%>
<%@ include file="header.jsp" %>
<body>

<div style="background-color: cadetblue">
    这是正文内容区域
</div>

<%-- 引入底部文件 --%>
<%@ include file="footer.html" %>
</body>
</html>

创建一个footer.jsp文件。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div style="background-color: antiquewhite;">
  这是footer底部内容区域
</div>

启动Tomcat容器，浏览器访问http://localhost:8080/servlet/include.jsp，结果如下：

1.2、include指令的本质

include指令的本质是什么呢？？？我们来查看下编译之后的Java源代码，找到上面include.jsp文件编译之后的源文件，如下所示：

/*
 * Generated by the Jasper component of Apache Tomcat
 * Version: Apache Tomcat/8.5.98
 * Generated at: 2024-02-25 05:06:41 UTC
 * Note: The last modified time of this file was set to
 *       the last modified time of the source file after
 *       generation to assist with modification tracking.
 */
package com.gitcode.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.jsp.*;

public final class include_jsp extends org.apache.jasper.runtime.HttpJspBase
    implements org.apache.jasper.runtime.JspSourceDependent,
                 org.apache.jasper.runtime.JspSourceImports {

  private static final javax.servlet.jsp.JspFactory _jspxFactory =
          javax.servlet.jsp.JspFactory.getDefaultFactory();

  private static java.util.Map<java.lang.String,java.lang.Long> _jspx_dependants;

  static {
    _jspx_dependants = new java.util.HashMap<java.lang.String,java.lang.Long>(2);
    _jspx_dependants.put("/footer.jsp", Long.valueOf(1708837593266L));
    _jspx_dependants.put("/header.jsp", Long.valueOf(1708837593271L));
  }

  private static final java.util.Set<java.lang.String> _jspx_imports_packages;

  private static final java.util.Set<java.lang.String> _jspx_imports_classes;

  static {
    _jspx_imports_packages = new java.util.HashSet<>();
    _jspx_imports_packages.add("javax.servlet");
    _jspx_imports_packages.add("javax.servlet.http");
    _jspx_imports_packages.add("javax.servlet.jsp");
    _jspx_imports_classes = null;
  }

  private volatile javax.el.ExpressionFactory _el_expressionfactory;
  private volatile org.apache.tomcat.InstanceManager _jsp_instancemanager;

  public java.util.Map<java.lang.String,java.lang.Long> getDependants() {
    return _jspx_dependants;
  }

  public java.util.Set<java.lang.String> getPackageImports() {
    return _jspx_imports_packages;
  }

  public java.util.Set<java.lang.String> getClassImports() {
    return _jspx_imports_classes;
  }

  public javax.el.ExpressionFactory _jsp_getExpressionFactory() {
    if (_el_expressionfactory == null) {
      synchronized (this) {
        if (_el_expressionfactory == null) {
          _el_expressionfactory = _jspxFactory.getJspApplicationContext(getServletConfig().getServletContext()).getExpressionFactory();
        }
      }
    }
    return _el_expressionfactory;
  }

  public org.apache.tomcat.InstanceManager _jsp_getInstanceManager() {
    if (_jsp_instancemanager == null) {
      synchronized (this) {
        if (_jsp_instancemanager == null) {
          _jsp_instancemanager = org.apache.jasper.runtime.InstanceManagerFactory.getInstanceManager(getServletConfig());
        }
      }
    }
    return _jsp_instancemanager;
  }

  public void _jspInit() {
  }

  public void _jspDestroy() {
  }

  public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
      throws java.io.IOException, javax.servlet.ServletException {

    final java.lang.String _jspx_method = request.getMethod();
    if (!"GET".equals(_jspx_method) && !"POST".equals(_jspx_method) && !"HEAD".equals(_jspx_method) && !javax.servlet.DispatcherType.ERROR.equals(request.getDispatcherType())) {
      response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED, "JSP 只允许 GET、POST 或 HEAD。Jasper 还允许 OPTIONS");
      return;
    }

    final javax.servlet.jsp.PageContext pageContext;
    javax.servlet.http.HttpSession session = null;
    final javax.servlet.ServletContext application;
    final javax.servlet.ServletConfig config;
    javax.servlet.jsp.JspWriter out = null;
    final java.lang.Object page = this;
    javax.servlet.jsp.JspWriter _jspx_out = null;
    javax.servlet.jsp.PageContext _jspx_page_context = null;


    try {
      response.setContentType("text/html;charset=UTF-8");
      pageContext = _jspxFactory.getPageContext(this, request, response,
      			null, true, 8192, true);
      _jspx_page_context = pageContext;
      application = pageContext.getServletContext();
      config = pageContext.getServletConfig();
      session = pageContext.getSession();
      out = pageContext.getOut();
      _jspx_out = out;

      out.write('\r');
      out.write('\n');
      out.write('\r');
      out.write('\n');
      out.write("\r\n");
      out.write("<html>\r\n");
      out.write("<head>\r\n");
      out.write("    <title>这是HTML头部</title>\r\n");
      out.write("</head>");
      out.write("\r\n");
      out.write("<body>\r\n");
      out.write("\r\n");
      out.write("<div style=\"background-color: cadetblue\">\r\n");
      out.write("    这是正文内容区域\r\n");
      out.write("</div>\r\n");
      out.write("\r\n");
      out.write('\r');
      out.write('\n');
      out.write("\r\n");
      out.write("<div style=\"background-color: antiquewhite;\">\r\n");
      out.write("  这是footer底部内容区域\r\n");
      out.write("</div>");
      out.write("\r\n");
      out.write("</body>\r\n");
      out.write("</html>");
    } catch (java.lang.Throwable t) {
      if (!(t instanceof javax.servlet.jsp.SkipPageException)){
        out = _jspx_out;
        if (out != null && out.getBufferSize() != 0)
          try {
            if (response.isCommitted()) {
              out.flush();
            } else {
              out.clearBuffer();
            }
          } catch (java.io.IOException e) {}
        if (_jspx_page_context != null) _jspx_page_context.handlePageException(t);
        else throw new ServletException(t);
      }
    } finally {
      _jspxFactory.releasePageContext(_jspx_page_context);
    }
  }
}

通过上面源代码，可以看到，使用include指令引入的两个文件，最终都会将两个文件中的内容直接嵌入到当前include.jsp文件里面，如下所示：

所以include指令的本质就是将引入文件中的内容，直接拼接到当前JSP页面的对应位置。这里也就会存在一个问题，引入的JSP文件中，不能存在和当前JSP页面相同的变量名称，因为变量名称相同会导致编译失败。另外，使用include指令引入其他的JSP文件时候，只会生成访问的那个JSP文件的源代码，被引入的JSP文件不会生成对应的源代码。

以上，就是include指令的使用及其本质。

今天就到这里，未完待续~~

PHP中有两个引入文件的语言结构：include、require

1、注意这两个都是语言结构不是方法，与echo、print、isset()、empty()、unset()等类似都是语言结构不是函数！！！！！

2、include与require都是引入外部文件到当前上下文环境，但是他们有一些区别:

一、被包含文件先按参数给出的路径寻找，如果没有给出目录（只有文件名）时则按照 include_path 指定的目录寻找。如果在 include_path 下没找到该文件则 include 最后才在调用脚本文件所在的目录和当前工作目录下寻找。如果最后仍未找到文件则 include 结构会发出一条警告；这一点和 require 不同，后者会发出一个致命错误。（在这点上include_once与require_once类似，但是他们在导入一个已导入的文件都会忽略,但是他们在引入文件时会判断是否引入会降低性能）

二、关于引入的文件：当一个文件被包含时，其中所包含的代码继承了 include、require 所在行的变量范围。从该处开始，调用文件在该行处可用的任何变量在被调用的文件中也都可用。不过所有在包含文件中定义的函数和类都具有全局作用域。

EG1:

vars.php

<?php

$color = 'green';

$fruit = 'apple';

test.php

<?php

echo "A $color $fruit"; // A

include 'vars.php';

echo "A $color $fruit"; // A green apple

如果 include 出现于调用文件中的一个函数里，则被调用的文件中所包含的所有代码将表现得如同它们是在该函数内部定义的一样。所以它将遵循该函数的变量范围。此规则的一个例外是魔术常量，它们是在发生包含之前就已被解析器处理的。

3、include返回值:

处理返回值：在失败时 include 返回 FALSE 并且发出警告。成功的包含则返回 1，除非在包含文件中另外给出了返回值。可以在被包括的文件中使用 return 语句来终止该文件中程序的执行并返回调用它的脚本。同样也可以从被包含的文件中返回值。可以像普通函数一样获得 include 调用的返回值。不过这在包含远程文件时却不行，除非远程文件的输出具有合法的 PHP 开始和结束标记（如同任何本地文件一样）。可以在标记内定义所需的变量，该变量在文件被包含的位置之后就可用了。因为 include 是一个特殊的语言结构，其参数不需要括号。在比较其返回值时要注意。

EG2：

<?php

// won't work, evaluated as include(('vars.php') == TRUE), i.e. include('')

if (include('vars.php') == TRUE) {

echo 'OK';

}

// works

if ((include 'vars.php') == TRUE) {

echo 'OK';

}

讲解:

$bar 的值为 1 是因为 include 成功运行了。注意以上例子中的区别。第一个在被包含的文件中用了 return 而另一个没有。如果文件不能被包含，则返回 FALSE 并发出一个 E_WARNING 警告。如果在包含文件中定义有函数，这些函数不管是在 return 之前还是之后定义的，都可以独立在主文件中使用。如果文件被包含两次，PHP 5 发出致命错误因为函数已经被定义，但是 PHP 4 不会对在 return 之后定义的函数报错。推荐用 include_once 而不是检查文件是否已包含并在包含文件中有条件返回.

3、include引入文件的处理：（这点很重要）

当一个文件被包含时，语法解析器在目标文件的开头脱离 PHP 模式并进入 HTML 模式，到文件结尾处恢复。由于此原因，目标文件中需要作为 PHP 代码执行的任何代码都必须被包括在有效的 PHP 起始和结束标记之中。并且当执行完成之后直接加入到缓冲区，将被导入的文件中的变量加入到当前的作用域变量链上。

EG3:

//t1.php 文件内容

1234<?php $name="PQS"; ?>5678<?php return 1; ?>9

//t2.php文件内容

<?php

include "t1.php";

echo $name;

//开始执行t2.php

会输出:12345678PQS

案例解析:

首先当include "t1.php";文件时PHP解析器脱离PHP模式进入HTML模式开始解析，因为HTML模式是将内容直接加入到缓冲区，所以没有标签1234会被首先加入到缓冲区，然后在执行<?php $name="PQS"; ?>这里就会把$name这个变量加入到t2.php的include "t1.php"这句代码的上线文变量作用域中。然后接着在回到HTM模式将5678加入到缓冲区，接下来遇到<?php return 1;?>就开始进入PHP模式进行执行代码，因为include是接受return的，所以当这里return 1之后整个文件的加载就到此处结束了，返回到t2的代码执行域中了，这也是为什么最后没有输出9的原因。

举个例子证明PHP将文件输入到缓冲区：

//t3.php

1234567

//t4.php

<?php

$string = get_include_contents('t3.php');

function get_include_contents($filename) {

if (is_file($filename)) {

ob_start();

include $filename;

$contents = ob_get_contents();

ob_end_clean();

return $contents;

}

return false;

}

echo $string;

//执行t4.php

1234567

案例分析：

函数get_include_contents($filename)

在include之前开启缓冲区，当include将t3.php文件引入后就使用ob_get_contents()方法获取缓冲区数据赋值给$contents,然后使用ob_end_clean将缓冲区数据丢弃最后将$contents返回，最后输出返回值就是t3.php在经过php运行的值。

4、include支持引入URL：

如果“URL include wrappers”在 PHP 中被激活，可以用 URL（通过 HTTP 或者其它支持的封装协议——见支持的协议和封装协议）而不是本地文件来指定要被包含的文件。如果目标服务器将目标文件作为 PHP 代码解释，则可以用适用于 HTTP GET 的 URL 请求字符串来向被包括的文件传递变量。严格的说这和包含一个文件并继承父文件的变量空间并不是一回事；该脚本文件实际上已经在远程服务器上运行了，而本地脚本则包括了其结果。

<?php

/* This example assumes that www.example.com is configured to parse .php *

* files and not .txt files. Also, 'Works' here means that the variables *

* $foo and $bar are available within the included file. */

// Won't work; file.txt wasn't handled by www.example.com as PHP

include 'http://www.example.com/file.txt?foo=1&bar=2';

// Won't work; looks for a file named 'file.php?foo=1&bar=2' on the

// local filesystem.

include 'file.php?foo=1&bar=2';

// Works.

include 'http://www.example.com/file.php?foo=1&bar=2';

$foo = 1;

$bar = 2;

include 'file.txt'; // Works.

include 'file.php'; // Works.

此案例是PHP官网案例，如果不懂之处请移步值PHP官网include章节！

误1

var aedes = new aedes_1.default();
^

TypeError: aedes_1.default is not a constructor

错误2

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
/Users/jiechengyang/src/node-app/mqtt-examples/dist/01/mqtt-server.js:1
import Aedes from 'aedes';
^^^^^^

SyntaxError: Cannot use import statement outside a module

源码分析

需要编译的ts:mqtt_server.js

import Aedes from 'aedes'
import { createServer } from 'net'

const port = 1883

const aedes = new Aedes()
const server = createServer(aedes.handle)

server.listen(port, function () {
  console.log('server started and listening on port ', port)
})

aedes.d.ts 源码

import Aedes, { AedesOptions } from './types/instance'

export declare function createBroker(options?: AedesOptions): Aedes

export * from './types/instance'
export * from './types/packet'
export * from './types/client'

export { default } from './types/instance'

tsconfig.json配置:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "esModuleInterop": true,
      "strict": true
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
  }

编译的结果:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "esModuleInterop": true,
      "strict": true
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
  }

问题解读

错误1

因为是初学ts,造成上面的问题的原因是:个人使用的编译选项不对导致,因此,应该熟悉tsconfig.json 的编译参数.最后的tsconfig.json配置如下:

 {
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "declaration": true,
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "lib": [
        "DOM",
        "ES2022"
      ],
      "module": "ES2022",
      "moduleResolution":"node",
    //   "outDir": "dist",
      "rootDir": "src",
      "sourceMap": true,
      "strict": true,
      "target": "ES2022"
    },
    "include": [
      "src/**/*.ts"
    ]
  }

错误2

报错信息表明您的 JavaScript 文件被 Node.js 解释为 ECMAScript 模块（ES module），而不是 CommonJS 模块。这通常是因为文件扩展名是 .mjs，或者因为 type: module 被设置在了 package.json 文件中。

在您的情况下，看起来您正在使用 import 语句导入模块，这是 ECMAScript 模块的语法。然而，默认情况下，Node.js 将文件当作 CommonJS 模块处理。

为了解决这个问题，有几个选项：

将文件扩展名更改为 .mjs：

将您的文件扩展名从 .js 更改为 .mjs。这会告诉 Node.js 将文件视为 ECMAScript 模块。
将 type 设置为 module：

在您的 package.json 文件中，可以添加 "type": "module"，以将所有 .js 文件视为 ECMAScript 模块。

{
  "type": "module",
  "scripts": {
    "start": "node your-script.js"
  }
}

注意：将 "type": "module" 添加到 package.json 可能会影响到项目中其他依赖的模块。这是因为 CommonJS 和 ECMAScript 模块有一些不同之处。确保您的项目及其依赖项对 ECMAScript 模块提供了正确的支持。

tsconfig配置参数说明

当配置 TypeScript 编译器选项时，各个属性有着不同的作用。以下是您 tsconfig.json 文件中使用的一些关键属性的解释：

allowSyntheticDefaultImports:
用途： 允许 TypeScript 在没有明确指定默认导出的模块中合成默认导入。当您使用 import Aedes from 'aedes'; 时，如果模块不提供默认导出，TypeScript 将尝试合成一个默认导入。
建议： 在使用模块系统的项目中，通常将其设置为 true。
esModuleInterop:
用途： 启用 ECMAScript 模块的互操作性，允许直接导入默认导出的模块。
建议： 在使用模块系统的项目中，通常将其设置为 true。
declaration:
用途： 生成与 TypeScript 文件对应的 .d.ts 声明文件。声明文件用于描述模块的类型信息，以便其他 TypeScript 项目可以正确地使用它。
建议： 在构建库或模块时，通常设置为 true。
forceConsistentCasingInFileNames:
用途： 强制文件名大小写一致性。确保导入模块时文件名的大小写与实际文件名一致。
建议： 通常设置为 true 以防止由于大小写问题引起的潜在错误。
lib:
用途： 指定 TypeScript 编译器可以使用的库文件。"DOM" 和 "ES2022" 表示您的代码可能使用了浏览器 DOM API 和 ECMAScript 2022 的特性。
建议： 根据项目需求添加合适的库文件。
module:
用途： 指定生成的 JavaScript 代码使用的模块系统。"ES2022" 表示使用 ECMAScript 2022 模块系统。
建议： 根据目标环境选择合适的模块系统。
moduleResolution:
用途： 指定模块解析策略，"node" 表示使用 Node.js 的解析策略。
建议： 在 Node.js 项目中通常将其设置为 "node"。
rootDir:
用途： 指定源代码文件的根目录。用于确定编译器应该编译哪些文件。
建议： 设置为源代码文件的根目录。
sourceMap:
用途： 生成与 JavaScript 文件对应的 source map 文件，以便在调试时可以追踪到 TypeScript 代码。
建议： 在开发环境中通常设置为 true。
strict:
用途： 启用 TypeScript 的严格模式，集成了多个严格的类型检查选项。
建议： 在项目中启用严格模式，以帮助捕获潜在的错误。
target:
用途： 指定生成的 JavaScript 代码的目标语言版本。"ES2022" 表示生成的代码应符合 ECMAScript 2022 标准。
建议： 根据目标环境选择合适的语言版本。

编译如何选择commonjs 和ecmascript

选择使用 CommonJS 还是 ECMAScript 模块（ES module）通常取决于您的项目的特定要求和部署环境。下面是一些建议：

使用 CommonJS：
Node.js 项目：如果您的项目是一个 Node.js 项目，特别是在旧版 Node.js 中，使用 CommonJS 是很自然的选择。Node.js 长期以来一直使用 CommonJS 模块系统。

现有项目：如果您的项目中已经使用了 CommonJS，为了保持一致性，可能更容易继续使用 CommonJS。

npm 生态系统：大多数 Node.js 包都是以 CommonJS 格式发布的，因此在使用 npm 生态系统中，使用 CommonJS 通常更为方便。

使用 ECMAScript 模块：
前端项目：在浏览器环境或支持 ES module 的环境中，可以考虑使用 ECMAScript 模块。现代前端开发中，许多工具和框架都支持 ES module。

静态分析和优化： ECMAScript 模块在静态分析和优化方面具有一些优势，因为它们提供了更多的信息，这有助于一些工具进行更好的代码优化。

模块化加载器：如果您的项目中使用了模块加载器（如Webpack、Rollup等），这些工具通常支持 ES module，并且可以更好地进行代码分割和懒加载等优化。

组合使用：
在某些场景下，您也可以在同一项目中同时使用 CommonJS 和 ES module，这种混合使用的方式在过渡期或特定的工作流中可能会有用。例如，在一些前端项目中，可以使用 Babel 或 Webpack 进行模块的转换，将 CommonJS 转换为 ES module 以获得一些优势。

总体而言，选择 CommonJS 还是 ES module 取决于您项目的具体需求、使用的环境以及团队的偏好。在许多情况下，Node.js 项目会继续使用 CommonJS，而前端项目则更倾向于使用 ES module。

在线咨询

上一篇：html中如何写“返回顶部按钮”？
下一篇：34道常见的HTML+CSS面试题（附答案）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

《JSP》第09节：JSP三大指令之include指令

1.1、include指令作用

1.2、include指令的本质

误1

错误2

源码分析

需要编译的ts:mqtt_server.js

aedes.d.ts 源码

tsconfig.json配置:

编译的结果:

问题解读

错误1

错误2

tsconfig配置参数说明

编译如何选择commonjs 和ecmascript

您的项目需求