原生JS插件的封装写法

示例如下
plugin.js 封装一个自动执行的方法,使window持有那么一个plugin对象,对象可以是function或者也可以是属性 供给外部调用

//第一种写法
; var plugin = (function () {
    function _helloText(str) {
        console.log('打印:' + str);
    }

    function _getName() {
        return '此乃' + document.title
    }

    return {
        callHello: _helloText,
        getName: _getName
    };
})();


//第二种写法 更为内敛 本质上是一样的
(function () {
    //定义一些默认参数
    var _options = {
        default_word: "default hello"
    }

    //定义一些api
    var _plugin_api = {
        oneFunc: function (str = _options.default_word) {
            alert(str);
            return this;//返回当前方法
        },
        twoFunc: function () {
            alert("secondFunc");
            return this;//返回当前方法
        }
    }
    //这里确定了插件的名称
    this.MyPlugin = _plugin_api;
})();

使用调用如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试原生JS插件的写法</title>
    <!-- 引入 -->
    <script src="./plugin.js"></script>
</head>

<body>
    <div>Hello JS</div>
    <script type="text/javascript”>
        <!-- 调用 -->
        plugin.callHello('你好,React.JS !!!');
        console.log(plugin.getName());
        MyPlugin.oneFunc()
        MyPlugin.oneFunc('弹个窗试试!')
        MyPlugin.twoFunc()
    </script>
</body>
</html>
posted @ 2022-08-30 18:13  CoderWGB  阅读(368)  评论(0)  编辑  收藏  举报