怎么创建公用js

创建公用JS的方法有很多种，主要有：模块化、封装函数、使用命名空间、利用构建工具。 其中，模块化是当前最流行和推荐的方法。模块化的一个显著优势是它能够有效地管理代码依赖，提高代码的可维护性和可读性。通过模块化，我们可以将代码拆分成多个功能单一的小文件，每个文件只负责处理特定的任务。这样不仅可以提高代码的复用性，还能避免全局变量污染的问题。

一、模块化

模块化是指将代码拆分成多个模块，每个模块只负责处理特定的任务。模块化不仅能提高代码的可维护性，还能增强代码的复用性。当前最流行的模块化方案有CommonJS和ES6 Modules。

1. CommonJS

CommonJS主要用于Node.js环境。它的核心思想是通过module.exports和require来实现模块的导出和导入。

// utils.js
function add(a, b) {
    return a + b;
}
function subtract(a, b) {
    return a - b;
}
module.exports = {
    add,
    subtract
};
// main.js
const utils = require('./utils');
console.log(utils.add(1, 2));  // 输出: 3
console.log(utils.subtract(5, 3));  // 输出: 2

2. ES6 Modules

ES6 Modules是现代浏览器和Node.js都支持的模块化方案。它通过export和import关键字来实现模块的导出和导入。

// utils.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}
// main.js
import { add, subtract } from './utils.js';
console.log(add(1, 2));  // 输出: 3
console.log(subtract(5, 3));  // 输出: 2

二、封装函数

封装函数是指将一组相关的功能封装在一个函数中，使其成为一个独立的功能模块。这样不仅可以提高代码的复用性，还能避免全局变量污染的问题。

(function(global) {
    function add(a, b) {
        return a + b;
    }
    function subtract(a, b) {
        return a - b;
    }
    global.utils = {
        add,
        subtract
    };
})(this);
// 使用
console.log(utils.add(1, 2));  // 输出: 3
console.log(utils.subtract(5, 3));  // 输出: 2

三、使用命名空间

命名空间是一种组织代码的方式，可以有效地避免全局变量污染的问题。通过创建一个全局对象，并将所有相关的功能挂载到这个对象上，我们可以实现代码的模块化管理。

var MYAPP = MYAPP || {};
MYAPP.utils = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    }
};
// 使用
console.log(MYAPP.utils.add(1, 2));  // 输出: 3
console.log(MYAPP.utils.subtract(5, 3));  // 输出: 2

四、利用构建工具

构建工具如Webpack、Rollup和Parcel可以帮助我们实现模块化管理、代码压缩和打包。通过配置这些工具，我们可以轻松地创建公用JS库，并将其应用到不同的项目中。

1. Webpack

Webpack是一个流行的前端构建工具，可以帮助我们实现模块化管理、代码压缩和打包。

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

2. Rollup

Rollup是一个更为轻量级的构建工具，适用于库的打包。

// rollup.config.js
import babel from 'rollup-plugin-babel';
export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'cjs'
    },
    plugins: [
        babel({
            exclude: 'node_modules/'
        })
    ]
};

五、实例：创建一个公用的日期处理库

为了更好地理解如何创建公用JS库，我们将创建一个简单的日期处理库。这个库将包括几个常用的日期处理函数，比如格式化日期、计算日期差等。

1. 创建项目结构

my-date-lib/ ├── src/ │ ├── index.js │ ├── formatDate.js │ ├── dateDiff.js ├── dist/ ├── package.json ├── webpack.config.js

2. 实现日期处理函数

// src/formatDate.js
export function formatDate(date, format) {
    const map = {
        'M': date.getMonth() + 1,
        'd': date.getDate(),
        'h': date.getHours(),
        'm': date.getMinutes(),
        's': date.getSeconds()
    };
    return format.replace(/([Mdhms])+/g, (all, t) => {
        let v = map[t];
        if (v !== undefined) {
            if (all.length > 1) {
                v = '0' + v;
                v = v.substr(v.length - 2);
            }
            return v;
        } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
}

// src/dateDiff.js
export function dateDiff(date1, date2) {
    const diffTime = Math.abs(date2 - date1);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
}

// src/index.js
import { formatDate } from './formatDate';
import { dateDiff } from './dateDiff';
export default {
    formatDate,
    dateDiff
};

3. 配置Webpack

// webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'my-date-lib.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'MyDateLib',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

4. 打包和使用

在项目根目录下运行npm run build，Webpack会将代码打包到dist目录中。然后，我们可以在任何项目中引用这个打包好的JS库。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Date Library</title>
</head>
<body>
    <script src="dist/my-date-lib.js"></script>
    <script>
        const today = new Date();
        const formattedDate = MyDateLib.formatDate(today, 'yyyy-MM-dd hh:mm:ss');
        console.log(formattedDate);
        const date1 = new Date('2023-01-01');
        const date2 = new Date('2023-12-31');
        const diff = MyDateLib.dateDiff(date1, date2);
        console.log(diff);  // 输出: 364
    </script>
</body>
</html>

通过以上步骤，我们成功创建了一个公用的日期处理库，并展示了如何在项目中使用这个库。

六、使用项目管理系统

在开发和维护公用JS库的过程中，使用项目管理系统可以极大地提高团队的协作效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

PingCode提供了全面的研发项目管理功能，可以帮助团队有效地管理代码版本、跟踪问题和任务进度。Worktile则更加通用，适用于各类项目的协作管理，提供了任务分配、进度跟踪和团队沟通等功能。