使用JavaScript创建可复用的组件
2023-07-233.1k 阅读
理解JavaScript组件的概念
组件的定义
在JavaScript开发的世界里，组件是一种独立且可复用的代码单元，它封装了特定的功能和行为，并通过特定的接口与外部进行交互。简单来说，组件就像是一个黑盒子，内部实现了特定的逻辑，而外部只需要知道如何使用它提供的接口来获取所需的功能。例如，在一个网页应用中，一个按钮可以被设计成一个组件，它内部处理点击事件的逻辑，外部开发者只需要在合适的地方引入这个按钮组件，并设置一些基本属性（如按钮文本），就能使用这个按钮的功能。
组件的优势
- 复用性：避免重复编写相似的代码。假设我们有一个通用的弹窗组件，在多个页面或功能模块中都可能需要用到弹窗提示用户信息。如果没有组件化，我们就需要在每个用到弹窗的地方都重新编写弹窗相关的HTML、CSS和JavaScript代码。而使用组件后，只需要编写一次弹窗组件，在其他需要的地方直接引入即可。
- 可维护性：由于组件是独立的，当需要对某个功能进行修改时，只需要在对应的组件内部进行修改，而不会影响到其他不相关的部分。比如，我们发现按钮组件在某些情况下样式显示异常，只需要在按钮组件的代码中查找和修改样式相关的代码，而不用担心会破坏页面其他地方的功能。
- 提高开发效率：开发团队可以并行开发不同的组件。例如，一个团队负责开发导航栏组件，另一个团队负责开发表单组件。这样可以大大加快整个项目的开发进度，因为各个组件的开发可以同时进行，互不干扰。
创建简单的JavaScript组件
基于函数的组件
- 基本结构 在JavaScript中，最基础的创建组件的方式就是使用函数。下面我们以一个简单的计数器组件为例。
function Counter() {
let count = 0;
function increment() {
count++;
console.log('Count:', count);
}
return {
increment: increment
};
}
// 使用组件
let counter1 = Counter();
counter1.increment();
在上述代码中，Counter函数就是我们定义的组件。它内部定义了一个私有变量count用于存储计数器的值，以及一个increment函数用于增加计数器的值并打印。最后，函数返回一个对象，对象中包含increment函数，这样外部就可以通过调用counter1.increment()来使用这个计数器组件的功能。
- 添加参数 为了使组件更加灵活，我们可以给组件函数添加参数。比如，我们希望计数器从一个初始值开始计数。
function Counter(initialValue) {
let count = initialValue || 0;
function increment() {
count++;
console.log('Count:', count);
}
return {
increment: increment
};
}
// 使用组件
let counter2 = Counter(5);
counter2.increment();
这里，Counter函数接受一个initialValue参数，如果没有传入该参数，则默认初始值为0。这样，我们就可以根据不同的需求创建具有不同初始值的计数器组件。
基于对象的组件
- 使用构造函数 使用构造函数也是创建组件的常见方式。以一个简单的文本显示组件为例。
function TextComponent(text) {
this.text = text;
this.display = function () {
console.log('Displaying text:', this.text);
};
}
// 使用组件
let textComponent1 = new TextComponent('Hello, World!');
textComponent1.display();
在上述代码中，TextComponent是一个构造函数，它接受一个text参数，并将其赋值给this.text。display方法用于在控制台打印出文本。通过new关键字创建组件实例textComponent1，并调用display方法来显示文本。
- 原型链的应用 为了避免每个组件实例都重复创建相同的方法，可以将方法定义在原型链上。
function TextComponent(text) {
this.text = text;
}
TextComponent.prototype.display = function () {
console.log('Displaying text:', this.text);
};
// 使用组件
let textComponent2 = new TextComponent('JavaScript Components');
textComponent2.display();
这里，display方法被定义在TextComponent的原型上。这样，所有通过TextComponent构造函数创建的实例都可以共享这个display方法，节省了内存空间。
组件的模块化
模块化的概念
在JavaScript中，模块化是将代码分割成独立的模块，每个模块都有自己的作用域，并且可以通过特定的方式导出和导入功能。这对于创建可复用的组件非常重要，因为它可以避免全局变量的污染，同时使组件的管理和维护更加容易。
使用ES6模块
- 导出组件
假设我们有一个
ButtonComponent组件，我们可以使用ES6模块来导出它。
// buttonComponent.js
class ButtonComponent {
constructor(text) {
this.text = text;
this.clickHandler = function () {
console.log('Button clicked:', this.text);
};
}
}
export default ButtonComponent;
在上述代码中，我们定义了一个ButtonComponent类，并使用export default将其导出。这样，其他模块就可以导入并使用这个组件。
- 导入组件
在另一个文件中，我们可以导入并使用这个
ButtonComponent。
// main.js
import ButtonComponent from './buttonComponent.js';
let button1 = new ButtonComponent('Click me');
button1.clickHandler();
这里，通过import关键字从buttonComponent.js文件中导入ButtonComponent，然后创建实例并调用其方法。
使用CommonJS模块（Node.js环境）
- 导出组件
在Node.js环境中，通常使用CommonJS模块规范。以下是一个简单的
CalculatorComponent示例。
// calculatorComponent.js
function CalculatorComponent() {
this.add = function (a, b) {
return a + b;
};
this.subtract = function (a, b) {
return a - b;
};
}
module.exports = CalculatorComponent;
这里，通过module.exports将CalculatorComponent导出。
- 导入组件 在另一个Node.js文件中可以这样导入和使用。
// app.js
const CalculatorComponent = require('./calculatorComponent.js');
let calculator1 = new CalculatorComponent();
let result = calculator1.add(5, 3);
console.log('Addition result:', result);
通过require函数导入CalculatorComponent，然后创建实例并调用其add方法。
组件间的通信
父子组件通信
- 父组件向子组件传递数据
以React - like的方式为例（虽然这里是纯JavaScript实现概念），假设我们有一个
ParentComponent和一个ChildComponent。
function ChildComponent(data) {
this.data = data;
this.display = function () {
console.log('Received data in child:', this.data);
};
}
function ParentComponent() {
let childData = 'Some data from parent';
let child = new ChildComponent(childData);
child.display();
}
// 使用
let parent = new ParentComponent();
在上述代码中，ParentComponent创建了一个ChildComponent实例，并将childData作为参数传递给ChildComponent，实现了父组件向子组件传递数据。
- 子组件向父组件传递数据 可以通过回调函数来实现子组件向父组件传递数据。
function ChildComponent(callback) {
this.sendData = function () {
let dataToSend = 'Data from child';
callback(dataToSend);
};
}
function ParentComponent() {
let handleChildData = function (data) {
console.log('Received data from child in parent:', data);
};
let child = new ChildComponent(handleChildData);
child.sendData();
}
// 使用
let parent = new ParentComponent();
这里，ParentComponent定义了一个回调函数handleChildData，并将其传递给ChildComponent。ChildComponent通过调用这个回调函数，将数据传递回父组件。
兄弟组件通信
- 通过共同的父组件通信
假设有
BrotherComponent1和BrotherComponent2两个兄弟组件，它们通过共同的父组件进行通信。
function BrotherComponent1(callback) {
this.sendData = function () {
let dataToSend = 'Data from brother 1';
callback(dataToSend);
};
}
function BrotherComponent2(data) {
this.display = function () {
console.log('Received data in brother 2:', data);
};
}
function ParentComponent() {
let dataFromBrother1;
let brother1 = new BrotherComponent1(function (data) {
dataFromBrother1 = data;
let brother2 = new BrotherComponent2(dataFromBrother1);
brother2.display();
});
brother1.sendData();
}
// 使用
let parent = new ParentComponent();
在这个例子中，BrotherComponent1通过回调函数将数据传递给ParentComponent，ParentComponent再将数据传递给BrotherComponent2，从而实现了兄弟组件间的通信。
- 使用事件总线 事件总线是一种更通用的兄弟组件通信方式。
const eventBus = {
events: {},
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
},
emit(eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(callback => callback(data));
}
}
};
function BrotherComponent1() {
this.sendData = function () {
let dataToSend = 'Data from brother 1 via event bus';
eventBus.emit('brother1Data', dataToSend);
};
}
function BrotherComponent2() {
eventBus.on('brother1Data', function (data) {
console.log('Received data in brother 2 via event bus:', data);
});
}
// 使用
let brother1 = new BrotherComponent1();
let brother2 = new BrotherComponent2();
brother1.sendData();
这里，BrotherComponent1通过eventBus.emit方法触发一个事件并传递数据，BrotherComponent2通过eventBus.on方法监听这个事件，从而实现了兄弟组件间通过事件总线的通信。
组件的生命周期
生命周期的概念
组件的生命周期是指组件从创建、存在到销毁的一系列过程。了解和管理组件的生命周期对于确保组件的正确运行和资源的合理利用非常重要。在JavaScript组件开发中，虽然不像一些框架（如React、Vue）那样有明确的生命周期钩子函数，但我们可以自己模拟实现类似的功能。
模拟组件的生命周期
- 创建阶段
在组件创建时，可以进行一些初始化操作。以一个
UserProfileComponent为例。
function UserProfileComponent(userData) {
this.user = userData;
// 创建阶段的初始化操作
console.log('User profile component created with user:', this.user);
this.init = function () {
// 这里可以进行更复杂的初始化逻辑，如加载用户头像等
console.log('Initializing user profile component...');
};
this.init();
}
// 使用
let userProfile = new UserProfileComponent({name: 'John Doe'});
在上述代码中，UserProfileComponent构造函数在创建实例时，打印出组件已创建的信息，并调用init方法进行一些初始化逻辑。
- 运行阶段
组件在运行过程中可能会根据外部输入或内部状态变化执行不同的操作。比如，我们给
UserProfileComponent添加一个更新用户信息的功能。
function UserProfileComponent(userData) {
this.user = userData;
this.init = function () {
console.log('Initializing user profile component...');
};
this.init();
this.updateUser = function (newUserData) {
this.user = newUserData;
console.log('User profile updated:', this.user);
};
}
// 使用
let userProfile = new UserProfileComponent({name: 'John Doe'});
userProfile.updateUser({name: 'Jane Doe'});
这里的updateUser方法就是组件在运行阶段执行的操作，用于更新用户信息。
- 销毁阶段
虽然JavaScript的垃圾回收机制会自动回收不再使用的对象，但在某些情况下，我们可能需要手动清理一些资源，比如取消定时器、解绑事件等。我们可以给
UserProfileComponent添加一个destroy方法来模拟销毁阶段。
function UserProfileComponent(userData) {
this.user = userData;
this.init = function () {
console.log('Initializing user profile component...');
};
this.init();
this.updateUser = function (newUserData) {
this.user = newUserData;
console.log('User profile updated:', this.user);
};
this.destroy = function () {
// 这里可以进行资源清理操作，如取消定时器等
console.log('User profile component destroyed.');
};
}
// 使用
let userProfile = new UserProfileComponent({name: 'John Doe'});
userProfile.destroy();
在destroy方法中，我们可以编写清理资源的逻辑，并在组件不再需要时调用这个方法。
提高组件的可复用性
设计通用的接口
- 参数化配置
让组件的行为和外观可以通过参数进行配置。以一个
ImageComponent为例，我们希望可以通过参数控制图片的来源、尺寸等。
function ImageComponent(src, width, height) {
this.src = src;
this.width = width;
this.height = height;
this.render = function () {
let imgElement = document.createElement('img');
imgElement.src = this.src;
imgElement.width = this.width;
imgElement.height = this.height;
document.body.appendChild(imgElement);
};
}
// 使用
let image1 = new ImageComponent('image.jpg', 200, 150);
image1.render();
通过传递不同的src、width和height参数，我们可以创建不同的图片组件实例，提高了组件的通用性。
- 回调函数接口
提供回调函数接口，让使用者可以自定义组件的某些行为。比如，我们给
ButtonComponent添加一个点击后的回调接口。
function ButtonComponent(text, clickCallback) {
this.text = text;
this.clickCallback = clickCallback;
this.render = function () {
let buttonElement = document.createElement('button');
buttonElement.textContent = this.text;
buttonElement.addEventListener('click', () => {
if (this.clickCallback) {
this.clickCallback();
}
});
document.body.appendChild(buttonElement);
};
}
// 使用
let buttonClickHandler = function () {
console.log('Button was clicked!');
};
let button2 = new ButtonComponent('Custom click button', buttonClickHandler);
button2.render();
这里，通过传递clickCallback回调函数，使用者可以自定义按钮点击后的行为，增加了组件的灵活性和可复用性。
遵循设计模式
- 单例模式
当我们希望一个组件在整个应用中只有一个实例时，可以使用单例模式。以一个
GlobalSettingsComponent为例。
function GlobalSettingsComponent() {
let instance;
function createInstance() {
let settings = {
theme: 'light',
language: 'en'
};
function getSetting(key) {
return settings[key];
}
function setSetting(key, value) {
settings[key] = value;
}
return {
getSetting: getSetting,
setSetting: setSetting
};
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
}
// 使用
let settingsComponent = GlobalSettingsComponent();
let instance1 = settingsComponent.getInstance();
let instance2 = settingsComponent.getInstance();
console.log(instance1 === instance2); // true
在上述代码中，GlobalSettingsComponent通过闭包和getInstance方法确保每次获取的都是同一个实例，实现了单例模式，保证了全局设置的一致性。
- 观察者模式
观察者模式适用于当组件的状态变化需要通知其他组件的场景。假设我们有一个
DataStoreComponent和多个ObserverComponent。
function DataStoreComponent() {
let data = {value: 0};
let observers = [];
function subscribe(observer) {
observers.push(observer);
}
function unsubscribe(observer) {
observers = observers.filter(obs => obs!== observer);
}
function updateData(newValue) {
data.value = newValue;
observers.forEach(observer => observer.update(data));
}
return {
subscribe: subscribe,
unsubscribe: unsubscribe,
updateData: updateData
};
}
function ObserverComponent(name) {
this.name = name;
this.update = function (data) {
console.log(`${this.name} received updated data:`, data);
};
}
// 使用
let dataStore = DataStoreComponent();
let observer1 = new ObserverComponent('Observer 1');
let observer2 = new ObserverComponent('Observer 2');
dataStore.subscribe(observer1);
dataStore.subscribe(observer2);
dataStore.updateData(10);
dataStore.unsubscribe(observer2);
dataStore.updateData(20);
这里，DataStoreComponent维护一个观察者列表，当数据更新时，通知所有订阅的ObserverComponent。ObserverComponent通过update方法接收更新的数据，实现了观察者模式，使组件间的状态同步更加灵活和可维护。
处理组件的样式
内联样式
- 直接在JavaScript中设置样式
以一个简单的
BoxComponent为例，我们可以在组件内部直接设置元素的内联样式。
function BoxComponent(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
this.render = function () {
let boxElement = document.createElement('div');
boxElement.style.width = this.width + 'px';
boxElement.style.height = this.height + 'px';
boxElement.style.backgroundColor = this.color;
document.body.appendChild(boxElement);
};
}
// 使用
let box1 = new BoxComponent(100, 100, 'blue');
box1.render();
在上述代码中，通过boxElement.style直接设置div元素的宽度、高度和背景颜色等内联样式。
- 使用对象字面量设置样式 为了使代码更简洁，我们可以使用对象字面量来设置样式。
function BoxComponent(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
this.render = function () {
let boxElement = document.createElement('div');
let styles = {
width: this.width + 'px',
height: this.height + 'px',
backgroundColor: this.color
};
Object.assign(boxElement.style, styles);
document.body.appendChild(boxElement);
};
}
// 使用
let box2 = new BoxComponent(150, 150,'red');
box2.render();
这里，通过Object.assign方法将样式对象应用到元素的style属性上，使代码看起来更清晰。
外部样式表
- 引入CSS文件
首先创建一个
buttonComponent.css文件。
.button {
padding: 10px 20px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
然后在ButtonComponent中引入这个CSS文件。
function ButtonComponent(text) {
this.text = text;
this.render = function () {
let linkElement = document.createElement('link');
linkElement.rel ='stylesheet';
linkElement.href = 'buttonComponent.css';
document.head.appendChild(linkElement);
let buttonElement = document.createElement('button');
buttonElement.textContent = this.text;
buttonElement.classList.add('button');
document.body.appendChild(buttonElement);
};
}
// 使用
let button3 = new ButtonComponent('Styled button');
button3.render();
在上述代码中，通过创建一个link元素并将其添加到document.head中，引入外部CSS文件，然后给按钮元素添加对应的CSS类，应用样式。
- 样式作用域
为了避免样式冲突，可以使用CSS Modules或类似的技术来限定样式的作用域。假设我们使用CSS Modules，首先创建
buttonComponent.module.css文件。
.button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
在JavaScript中使用时，需要借助打包工具（如Webpack）来处理CSS Modules。
import styles from './buttonComponent.module.css';
function ButtonComponent(text) {
this.text = text;
this.render = function () {
let buttonElement = document.createElement('button');
buttonElement.textContent = this.text;
buttonElement.classList.add(styles.button);
document.body.appendChild(buttonElement);
};
}
// 使用
let button4 = new ButtonComponent('Scoped styled button');
button4.render();
这里，通过import styles from './buttonComponent.module.css'导入样式模块，styles.button确保样式只应用于该组件，避免了与其他组件样式的冲突。
测试JavaScript组件
单元测试
- 使用Jest进行单元测试
假设我们有一个
MathComponent，包含add和subtract方法。
function MathComponent() {
this.add = function (a, b) {
return a + b;
};
this.subtract = function (a, b) {
return a - b;
};
}
使用Jest进行单元测试。
const {test, expect} = require('@jest/globals');
const MathComponent = require('./mathComponent.js');
test('add method should return correct sum', () => {
let mathComponent = new MathComponent();
let result = mathComponent.add(3, 5);
expect(result).toBe(8);
});
test('subtract method should return correct difference', () => {
let mathComponent = new MathComponent();
let result = mathComponent.subtract(5, 3);
expect(result).toBe(2);
});
在上述代码中，通过test函数定义测试用例，使用expect来断言方法的返回值是否符合预期，确保MathComponent的add和subtract方法功能正确。
- 测试组件的私有方法（如果需要）
有时候可能需要测试组件的私有方法，虽然这不是推荐的做法，但在某些情况下是必要的。我们可以通过一些技巧来访问私有方法。假设
MathComponent有一个私有方法_multiply。
function MathComponent() {
let _multiply = function (a, b) {
return a * b;
};
this.add = function (a, b) {
return _multiply(a, 1) + _multiply(b, 1);
};
this.subtract = function (a, b) {
return _multiply(a, 1) - _multiply(b, 1);
};
}
测试私有方法。
const {test, expect} = require('@jest/globals');
const MathComponent = require('./mathComponent.js');
test('private _multiply method should return correct product', () => {
let mathComponent = new MathComponent();
// 通过闭包访问私有方法
let multiplyFunc = mathComponent.add.toString().match(/function\s*_multiply\s*\((.*?)\)\s*\{(.*?)\}/)[0];
let multiply = new Function('a', 'b', multiplyFunc.split('{')[1].split('}')[0]);
let result = multiply(3, 5);
expect(result).toBe(15);
});
这里通过正则表达式从add方法的字符串表示中提取_multiply方法的定义，并创建一个新的函数来调用它进行测试。
集成测试
- 测试组件间的通信
假设我们有
ParentComponent、ChildComponent1和ChildComponent2，并且它们之间存在通信。
function ChildComponent1(callback) {
this.sendData = function () {
let dataToSend = 'Data from child 1';
callback(dataToSend);
};
}
function ChildComponent2(data) {
this.display = function () {
console.log('Received data in child 2:', data);
};
}
function ParentComponent() {
let dataFromChild1;
let child1 = new ChildComponent1(function (data) {
dataFromChild1 = data;
let child2 = new ChildComponent2(dataFromChild1);
child2.display();
});
child1.sendData();
}
进行集成测试，确保组件间通信正常。
const {test, expect} = require('@jest/globals');
const ParentComponent = require('./parentComponent.js');
test('components should communicate correctly', () => {
let consoleSpy = jest.spyOn(console, 'log');
let parent = new ParentComponent();
expect(consoleSpy).toHaveBeenCalledWith('Received data in child 2: Data from child 1');
consoleSpy.mockRestore();
});
在这个测试中，通过jest.spyOn监听console.log，并断言ChildComponent2接收到的数据是否正确，从而测试组件间的通信功能。
- 测试组件与外部系统的集成
如果组件与外部API进行交互，例如一个
APIConsumerComponent。
function APIConsumerComponent() {
this.fetchData = function () {
return new Promise((resolve, reject) => {
// 模拟API调用
setTimeout(() => {
resolve({message: 'Data from API'});
}, 1000);
});
};
}
进行集成测试。
const {test, expect} = require('@jest/globals');
const APIConsumerComponent = require('./apiConsumerComponent.js');
test('should fetch data from API correctly', async () => {
let apiConsumer = new APIConsumerComponent();
let result = await apiConsumer.fetchData();
expect(result.message).toBe('Data from API');
});
这里通过async/await等待fetchData方法的Promise resolve，并断言返回的数据是否符合预期，测试组件与模拟API的集成。
通过以上从组件概念、创建方式、模块化、通信、生命周期、可复用性、样式处理到测试等方面的详细介绍，希望你对使用JavaScript创建可复用的组件有了更深入和全面的理解。在实际开发中，可以根据具体需求和场景，灵活运用这些知识来构建高效、可维护的JavaScript组件。