如何封装一个js文件？

封装js文件时的注意事项

避免全局变量污染：使用闭包或模块模式封装代码,不将变量暴露在全局作用域。

// 闭包方式
(function () {var a = 1;function foo() {// ...}
})();// 模块模式
var module = (function () {var a = 1;function foo() {// ...}return {foo: foo}
})();

指定严格模式：在 JS 文件的首行添加 'use strict';。这能避免许多 JS 潜在的问题。

'use strict';(function () {// ...
})();

命名空间：使用对象字面量创建命名空间,防止函数与变量名称冲突。

var namespace = {utils: {// ...},dom: {// ...}
}

顶层函数和变量使用下划线 _ 开头：这是一种暗示这些成员是私有的约定。

var _foo = 1;function _bar() {// ...
}

使用 IIFE 或模块模式封装代码：不仅可以避免变量污染全局作用域,还可以模拟类。

var Person = (function () {function _constructor() {}// 使用 _constructor 和 _proto 属性模拟 classvar _proto = _constructor.prototype;_proto.sayName = function () {};return _constructor;
})();

为文件添加 nocache 请求参数：这可以防止浏览器加载缓存的脚本文件。

<script src="foo.js?nocache"></script>

举例

封装一个简单的 DOM 操作库:

// dom.js
'use strict';var dom = (function () {var _element = document.createElement('div');function _create(tagName) {return document.createElement(tagName);}function _setText(ele, text) {ele.textContent = text;}function _append(parent, child) {parent.appendChild(child);}function _addClass(ele, className) {ele.classList.add(className);}function _on(ele, event, handler) {ele.addEventListener(event, handler);}return {create: _create,setText: _setText,append: _append,addClass: _addClass,on: _on    };
})();

这个 DOM 库使用模块模式封装了一些常用的 DOM 操纵方法,并暴露了一个 dom 的命名空间对象给外部使用。它具有以下注意事项:

• 使用严格模式
• 封装代码使用模块模式
• 私有成员使用下划线 _ 开头
• 创建 dom 命名空间对外暴露接口
• 避免污染全局环境这样封装的文件具有良好的模块化和封装性,可以在其他 JS 文件中灵活使用。

引入和使用

外部引入这个 dom.js 文件有两种方式：

直接使用<script>标签引入

//html
<script src="dom.js"></script>

此时可以直接通过 dom 命名空间使用该库,不需要 export:

//js
dom.create('h1');

使用 ES6 的 import 语法引入

//js
import * as dom from './dom.js';

这种情况下,dom.js 文件需要使用 export 暴露接口:

//js
// dom.js
var dom = (function () {// ...return {create: _create,// ...};
})();export { dom };

然后在引入的文件中可以通过 dom 命名空间使用:

//js
dom.create('h1');

总结:

1. 如果是直接通过 <script> 标签引入,不需要 export,外部可以直接使用库暴露的全局变量。
2. 如果是通过 ES6 import 语法引入,那么库文件需要使用 export 暴露接口,然后外部通过 export 导入使用。
3. 无论是哪种方式引入,都能达到避免全局污染的目的。使用库的代码只会影响库暴露的接口,不会污染全局环境。所以推荐使用 ES6 的模块化语法,这是更规范的JavaScript模块解决方案。通过 export 和 import 可以建立模块间的依赖关系,并确保避免命名冲突。