【js封装】js封装自己的公共方法，以后方便调用

最新推荐文章于 2024-06-20 20:51:18 发布

原创最新推荐文章于 2024-06-20 20:51:18 发布 · 7.4k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#common #前端 #封装

自用js 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了作者在前端开发中为提高工作效率，如何封装JS公共方法。作者讨论了使用prototype和class两种封装方式，并根据群里一位大哥的建议选择了class。文中还提到了在Array上追加方法时的一个常见错误，并展示了如何通过封装来创建自己的common方法库，以便于代码复用和提高开发速度。文章以一个设置空值的实例展示了公共方法的应用。

从事前端开发快一年了，很多东西都是不系统的，尽管保存，但是调用还需要去找，浪费时间，所以我要封装一个文件，直接引入文件，调用省事省时间。

正文：

首先我想到有两种封装方法，一个是prototype，另一个是class(最后选择了class封装，因为群里的一个大哥解释：prototype是用在(构造)函数上的，函数的prototype就是在没es6的class时候对class的模拟)

前期我对Array追加方法犯了一个错误(如下图)：

Array已经有prototype了，第二种方法还要增加clean，此时prototype和clean同一个级别

通俗点：第一个框是Array的衣服(prototype)加个口袋(clean)，第二框相当于给Array换了件衣服(clean)

后续持续更新。。。。。

将公共方法加进去，也是自己的common，可以共享，增加前端编写速度

1.设置空值

应用场景：重置搜索条件，不想刷新页面的话，每个id，class都要一个一个写出来，太丑了

$("#id1").val("");
$("#id2").val("");
$("#id3").val("");
$("#id4").val("");
$("#id5").val("");
$("#id6").val("");

修改后

 var clearMap = { "#kywds": "", "#nokywds": "", "#bg": "", "#end": "", "#ay": "", "#fy": "", "#st": "全部内容", "#round": "all", "#type": "all", "#court_level": "", "#case_no": "", "#judge_name": "", "#party_name": "", "#law_info": "", "#lawyer_name": "", "#law_firm": "" };

for (e in clearMap) {
     $(e).val(clearMap[e]);
}

$('.user-box').hover(function(e) {

$(".layoutBox").stop().slideToggle()

});