Question

当我在大学学习C语言时，我学会了制作自定义库和模块，我可以使用它来存储我自己的函数，并在需要的地方和时间调用它们。有没有办法用html做到这一点，然后我可以链接到我的主页？像这样的东西？我没有在网上看到教程或任何内容，所以我不确定。

// myLibrary.lib - name of file

<script language="javascript" type="text/javascript">
     function function1(){
        *code*
     }
</script>

<script language="javascript" type="text/javascript">
     function function2(){
        *code*
     }
</script>

<script language="html" type="text">
     function function3(){
        <h1>Hello!</h1>
        <p>\nHello there!</p>
     }
</script>

然后当我需要调用一个函数时，我可以调用myLibrary.functionX（）。

这可能吗？

Answer 1

HTML不是一种编程语言。您无法创建任何类型的HTML函数。但是，你绝对可以用javascript做你想问的事。只需使用您喜欢的文本编辑器编写一个javascript文件，然后将其链接到您的html文件。

Answer 2

对于Javascript，我会将Node Package Manager用于此目的，尽管它涉及很多步骤。

让我们创建一个简单的库。我们定义了两个函数，并通过将它们分配给module.exports

来导出它们

CustomLibrary.js

'use strict';

module.exports.function1 = function() {
    console.log('function1 called');
}

module.exports.function2 = function() {
    console.log('function2 called');
}

现在，这不会直接在浏览器中执行，但您可以browserify将其添加到可以包含在HTML中的包中。

要实现这一点，您需要一个package.json文件形式的构建脚本。

{
    "name": "CustomLibrary",
    "version": "1.0.0",
    "main": "CustomLibrary.js",
    "devDependencies": {
        "browserify": "^13.0.1"
    },
    "scripts": {
        "browserify": "./node_modules/browserify/bin/cmd.js CustomLibrary.js --s CustomLibrary --outfile BuiltCustomLibrary.js",
        "build": "npm run browserify"
    }
}

要执行它，首先通过执行

安装browserify模块

$ npm install

现在，运行

$ npm run build

这＆＃34; build＆＃34;可以在HTML文件中使用的BuiltCustomLibrary.js Javascript文件。

BuiltCustomLibrary.js

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.CustomLibrary = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

module.exports.function1 = function() {
    console.log('function1 called');
}

module.exports.function2 = function() {
    console.log('function2 called');
}

},{}]},{},[1])(1)
});

这是一个用于测试的HTML文件：

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="BuiltCustomLibrary.js"></script>
</head>
<body>
    <script>
        CustomLibrary.function1();
        CustomLibrary.function2();
    </script>
</body>

当您在浏览器中打开它并打开控制台时，您可以看到打印的语句。

你可以制作自定义的html库和/或模块吗？

2 个答案: