江苏省住房城乡建设厅网站,手机网站底部导航,零基础如何开网店,网站开发代理报价表封装js文件时的注意事项
避免全局变量污染#xff1a;使用闭包或模块模式封装代码,不将变量暴露在全局作用域。
// 闭包方式
(function () {var a 1;function foo() {// ...}
})();// 模块模式
var module (function () {var a 1;function foo() {// ...}return {foo: fo…封装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 srcfoo.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 srcdom.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);总结:
如果是直接通过 script 标签引入,不需要 export,外部可以直接使用库暴露的全局变量。如果是通过 ES6 import 语法引入,那么库文件需要使用 export 暴露接口,然后外部通过 export 导入使用。无论是哪种方式引入,都能达到避免全局污染的目的。使用库的代码只会影响库暴露的接口,不会污染全局环境。所以推荐使用 ES6 的模块化语法,这是更规范的JavaScript模块解决方案。通过 export 和 import 可以建立模块间的依赖关系,并确保避免命名冲突。
