common.js没引用怎么用的

common.js没引用怎么用的：使用模块化加载、通过动态加载、使用CDN资源、利用webpack等构建工具。其中，通过动态加载是一种很有效的方法，可以在需要时才加载相应的JavaScript文件，从而提高页面的加载速度和性能。下面将详细描述这种方法。

通过动态加载JavaScript文件，开发者可以在需要时才加载common.js，这意味着在初始加载页面时，可以减少不必要的资源加载，提升页面性能。动态加载可以通过原生JavaScript或使用第三方库如RequireJS实现。通过这种方式，你可以在特定的事件触发时，才加载并执行common.js里的代码。

一、模块化加载

使用ES6模块

ES6引入了模块化的概念，可以通过import和export来导入和导出模块。这样可以按需加载JavaScript文件，避免不必要的依赖。

// common.js
export function greet() {
    console.log("Hello from common.js");
}
// main.js
import { greet } from './common.js';
greet();

通过这种方式，你可以在需要时引用common.js中的函数或对象，而不是在HTML中直接引用整个文件。

使用CommonJS模块

CommonJS是Node.js中使用的模块系统，也可以在浏览器端使用，通过工具如Browserify来实现。

// common.js
module.exports = {
    greet: function() {
        console.log("Hello from common.js");
    }
};
// main.js
const common = require('./common.js');
common.greet();

这种方式在服务器端应用中非常流行，但在前端使用时需要额外的工具支持。

使用AMD模块

AMD（Asynchronous Module Definition）是一种在浏览器中异步加载模块的方法，RequireJS是其实现之一。

// common.js
define([], function() {
    return {
        greet: function() {
            console.log("Hello from common.js");
        }
    };
});
// main.js
require(['./common'], function(common) {
    common.greet();
});

这种方式非常适合在复杂的前端项目中管理依赖和模块。

二、通过动态加载

使用原生JavaScript动态加载

你可以通过原生JavaScript的<script>标签动态加载common.js。

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("common.js", function() {
    console.log("common.js loaded and executed.");
});

这种方式允许你在特定的事件或条件下加载并执行common.js，而不是在页面加载时立即加载。

使用第三方库动态加载

使用第三方库如RequireJS可以更加便捷地实现动态加载。

requirejs.config({
    paths: {
        "common": "path/to/common"
    }
});
require(["common"], function(common) {
    common.greet();
});

RequireJS提供了更强大的依赖管理和模块加载功能，适合在大型项目中使用。

三、使用CDN资源

引用公共CDN资源

CDN（Content Delivery Network）可以提高资源加载速度，通过引用公共CDN上的common.js，你可以减少服务器的负担，同时利用CDN的缓存机制。

<script src="https://cdn.example.com/common.js"></script>

动态加载CDN资源

结合动态加载和CDN资源，你可以在需要时动态加载CDN上的common.js。

function loadScriptFromCDN(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.onload = function() {
        callback();
    };
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
loadScriptFromCDN("https://cdn.example.com/common.js", function() {
    console.log("common.js loaded from CDN and executed.");
});

这种方式既可以提高加载速度，又能按需加载资源。

四、利用webpack等构建工具

使用webpack进行模块化打包

webpack是一个流行的前端构建工具，可以将多个JavaScript文件打包成一个或多个文件，并支持按需加载。

// webpack.config.js
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
};
// main.js
import('./common.js').then(module => {
    module.greet();
});

通过这种方式，webpack可以将common.js单独打包，当需要时再动态加载，优化了资源管理和加载性能。

使用其他构建工具

除了webpack，还有其他构建工具如Parcel、Rollup等，它们也提供类似的功能，可以帮助你实现模块化和按需加载。

// Parcel example
import('./common.js').then(module => {
    module.greet();
});

这些工具都提供了强大的模块管理和打包功能，可以根据项目需求选择合适的工具。

五、使用项目管理系统

在开发团队中，使用项目管理系统可以帮助你更好地组织和管理代码库，确保各个模块的依赖和加载顺序。

研发项目管理系统PingCode

PingCode是一款专业的研发项目管理系统，支持代码管理、任务跟踪和版本控制，可以帮助你更好地管理JavaScript项目。

通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，支持任务分配、进度跟踪和团队协作，可以提高团队的工作效率和项目管理水平。

通过使用这些工具，你可以更加高效地管理和维护项目中的JavaScript代码，确保各个模块的合理加载和使用。

总结，通过模块化加载、动态加载、使用CDN资源和利用构建工具等方法，可以在没有直接引用common.js的情况下，按需加载和使用其中的代码。同时，使用项目管理系统可以帮助你更好地组织和管理代码库，提高团队协作效率。