前端写代码真的有必要封装太好么?

黑马程序员官方

于 2023-06-06 17:15:23 发布

阅读量480

点赞数

分类专栏： 2023年前端—入门到精通文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/itcast_cn/article/details/131071623

版权

2023年前端—入门到精通专栏收录该内容

323 篇文章 234 订阅

订阅专栏

封装代码是一个非常重要的编程实践，特别是在前端开发中。封装可以提高代码的可读性和可维护性，使代码更易于理解和修改。也不是一味的都要封装，前端封装代码的最佳实践包括以下几个方面：

将重复的代码封装成函数或组件，以便于重用。
将具有相似功能的代码封装成一个模块或类，以便于维护。
将与业务逻辑无关的代码封装成独立的库或插件，以便于复用。
将代码分层，将业务逻辑和界面逻辑分离，以便于维护和扩展。
使用面向对象的编程思想，将代码组织成对象和类的形式，以便于重用和维护。

这是使用React组件封装按钮样式的示例代码：

import React from 'react';

const Button = ({ children }) => {
  return (
    <button style={{ backgroundColor: 'blue', color: 'white', padding: '10px' }}>
      {children}
    </button>
  );
};

export default Button;

在这个例子中，我们创建了一个名为Button的组件，它接受一个children属性并返回一个带有样式的button元素。我们可以在应用程序的任何地方使用此组件，只需导入它并传递所需的按钮文本即可。希望这个例子能够帮助大家理解前端封装代码的概念。

不适合使用封装的情况，大家也可以了解一下

当代码只在一个地方使用时，封装代码可能会增加代码的复杂性，反而降低代码的可读性和可维护性。
当代码需要高度定制化时，封装代码可能会限制开发人员的自由度，导致代码难以满足特定的需求。
当代码需要频繁更改时，封装代码可能会增加维护的难度，因为每次更改都需要修改封装的代码。

假设需要在页面上展示一个图片轮播组件，每隔3秒钟切换一张图片。这种情况，就不适合过度封装的，过度封装会增加代码复杂度和开发成本。如果需要更复杂的图片轮播功能，再考虑进行封装。

<div class="slider">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
  <img src="image4.jpg" alt="">
</div>

const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');
let index = 0;
setInterval(() => {
  images[index].classList.remove('active');
  index = (index + 1) % images.length;
  images[index].classList.add('active');
}, 3000);

最后给大家介绍15个web前端开发中的小窍门小技巧，能够帮助大家在开发过程中解决一些小问题，耐心看下去呦~

一、浏览器地址运行JavaScript代码

这个很多人都知道的，在浏览器直接运行JavaScript，如下：

javascript:alert('hello from address bar :)');

将以下代码粘贴到浏览器地址栏正常执行～

如果没有出现弹窗的话，是因为不能复制粘贴，需要手敲出来，IE&Chrome回自动去掉代码开头的javascript：，Firefox虽然不会自动去掉，但是它也不支持地址栏运行JS代码。

二、浏览器地址运行HTML代码

如果说上面那条大家都知道的话，这条也应该都知道了，除了IE内核浏览器，都可以运行HTML代码。

data:text/html,<h1>Hello, world!</h1>

不知道的快去试试～

三、把浏览器也可以当作编辑器

将下面代码在浏览器中运行，就变成了简单的编辑器。

data:text/html, <html contenteditable>

下面代码放到console执行后，整个页面变得可以编辑。

document.body.contentEditable='true';

四、利用a标签自动解析URL

很多时候我们从一个URL中提取域名，查询关键字，变量参数值等，其实浏览器就可以帮我们完成了。在Js代码中创建一个a标签然后将需要解析的URL赋值给a的href属性，就得到了一切我们想要的了。

<div id="sample"></div>
<script type="text/javascript">
        console.log(sample);//直接写id名即可获取到元素
</script>

五、编写样式

浏览器中还有一个功能，就是可以直接在浏览器中编写标签的样式，效果直接就可以看到

截图框的位置即可编写样式

六、如何快速掌握echarts

此处为语雀视频卡片，点击链接查看：demo.mp4

对于外行人来说学习echarts有什么技巧呢?https://www.zhihu.com/question/325034410/answer/2576197532

七、Datalist元素

这项 HTML 元素的使用频率极低，今天我们就要为它正名！

< datalist>标签用于为< input>元素提供一项“自动补全”功能。在键入过程中，您会看到如下图所示的预定义下拉菜单及选项。

示例：

<input**list="animals"**name="animal" id="animal"><datalist**id="animals"**>
<option value="Cat">
<option value="Dog">
<option value="Chicken">
<option value="Cow">
<option value="Pig">
</datalist>

<datalist>列出的属性，必须等于<input>的id，因为需要将二者捆绑使用。

八、常用的全屏剧中JS函数

//获取元素
function getElement(ele) {
  return document.getElementById(ele);
}
//自动居中函数


function autoCenter(el) {
  var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
  var bodyY =
    document.documentElement.offsetHeight || document.body.offsetHeight;

  var elementX = el.offsetWidth;
  var elementY = el.offsetHeight;

  el.style.left = (bodyX - elementX) / 2 + "px";
  el.style.top = (bodyY - elementY) / 2 + "px";
}

九、其他

1.link链接的css文件也是可以用id命名的，即任何标签都可以加id，包括link，head body html等

2.任何标签的任何属性也都是可以修改的，例如link里面的href

3.input都有一个属性叫title，就是提示文字

4.前期开发中，可以在a链接的href中加js代码，也可以加#，但是建议一般先空着，因为加#点击之后会跳上去，而空着不会有反应，后期确定好跳转路径再加上去。

5.html里面的属性怎么写，js就怎么写，唯一例外的是class，如果要改变div的class，必须是ODiv.className=XXX；

6.两种操作属性的方法：（.）和（[’ ']） a[xxx]的好处是可以设置属性参数

7.元素.style.属性=XXX 是修改行间样式，改完后再改className是不会有效果的，会被行间样式的优先级取代,为了避免出现错误，要么只改style，要不只改className，混着来会出错！

以上内容。大家在学习前端的过程中遇到什么问题，都可以问我

黑马程序员官方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端写代码真的有必要封装太好么?

封装代码是一个非常重要的编程实践，特别是在前端开发中。封装可以提高代码的可读性和可维护性，使代码更易于理解和修改。在这个例子中，我们创建了一个名为Button的组件，它接受一个children属性并返回一个带有样式的button元素。我们可以在应用程序的任何地方使用此组件，只需导入它并传递所需的按钮文本即可。希望这个例子能够帮助大家理解前端封装代码的概念。
复制链接

扫一扫