原生加载js怎么写

原生加载JS的几种方式有：使用<script>标签、动态创建<script>标签、使用defer和async属性、通过XMLHttpRequest或Fetch API加载并执行。 其中，动态创建<script>标签是一种常见且灵活的方法，允许您在需要时加载和执行JavaScript文件。

动态创建<script>标签的方法如下：

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    if (script.readyState) {  // 仅针对IE浏览器
        script.onreadystatechange = function() {
            if (script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  // 针对其他浏览器
        script.onload = function() {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

在这段代码中，loadScript函数接受两个参数：url和callback。url是要加载的JavaScript文件的路径，callback是文件加载完成后要执行的回调函数。这种方法确保了JavaScript文件在需要时被动态加载，并且在加载完成后执行相关操作。

一、使用`<script>`标签直接加载

使用<script>标签是最常见的方式。您只需在HTML文件中添加如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load JS</title>
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这种方式简单直接，但如果需要在页面加载后再动态加载JavaScript文件，则需要使用其他方法。

二、动态创建`<script>`标签

动态创建<script>标签允许您在需要时加载JavaScript文件。除了上文提到的例子，下面是另一个示例：

function addScript(url) {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;  // 让脚本异步加载
    document.body.appendChild(script);
}
addScript('path/to/your/script.js');

这种方法可以将脚本文件异步加载，从而不会阻塞页面的渲染。

三、使用`defer`和`async`属性

defer和async属性可以控制脚本加载和执行的时机。

defer：脚本会在HTML解析完毕后执行，且按顺序执行。
async：脚本会异步加载，一旦加载完毕立即执行，不保证顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load JS</title>
    <script src="path/to/your/script.js" defer></script>
    <!-- 或者 -->
    <script src="path/to/your/script.js" async></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

四、通过`XMLHttpRequest`或`Fetch` API加载并执行

XMLHttpRequest和Fetch API可以用于加载JavaScript文件，然后通过eval函数执行。不过，请注意，使用eval存在一定的安全风险，因此应谨慎使用。

// 使用Fetch API
fetch('path/to/your/script.js')
    .then(response => response.text())
    .then(data => {
        eval(data);
    })
    .catch(error => console.error('Error loading script:', error));

这种方式适用于需要对脚本内容进行某些处理后再执行的场景。

五、项目中的实际应用

在实际项目中，使用动态加载JavaScript文件的场景非常多，比如在单页应用（SPA）中，根据路由动态加载不同的模块。在这样的场景中，推荐使用现代化的项目管理和协作工具，如研发项目管理系统PingCode和通用项目协作软件Worktile，以便更好地管理项目中的各种资源和任务。

1. 动态加载模块

例如，在React或Vue项目中，可以使用Webpack的代码分割功能，实现按需加载模块。

import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <LazyComponent />
            </Suspense>
        </div>
    );
}
export default App;

2. 结合项目管理工具

在大型项目中，通常需要使用项目管理工具进行任务分配和进度跟踪。研发项目管理系统PingCode可以帮助团队高效管理研发过程，而通用项目协作软件Worktile则适用于更广泛的项目管理需求。

通过以上几种方法，您可以灵活地在项目中加载和管理JavaScript文件，确保项目的高效和可维护性。

原生加载js怎么写

一、使用<script>标签直接加载

二、动态创建<script>标签

三、使用defer和async属性

四、通过XMLHttpRequest或Fetch API加载并执行