编写可维护的js-读书笔记

本文介绍了前端开发中的最佳实践,包括事件处理程序的正确编写方式、不同类型数据的有效检测方法、配置数据的合理分离策略等,旨在帮助开发者提升代码质量和维护效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第7章  事件处理

7.2 规则1:隔离应用逻辑

事件处理程序不应该出现业务代码,应该只与用户行为有关。将所有应用逻辑从事件处理程序中抽离出来是最佳实践。

不能无限制的分发event对象,因为我们的应用处理程序只用到event对象上的一部分属性,所以,要让事件处理程序成为接触到event对象的唯一函数,应该在进入应用逻辑前针对event对象执行任何必要的操作,包括阻止默认事件或者阻止冒泡。

最佳实践

//绑定事件最佳实践
var MyApplication = {
  handleClick: function (event) {
    event.preventDefault();
    event.stopPropagation();
    //传入应用逻辑
    this.showPopup(event.clientX, event.clientY);
  },
  showPopup: function (x, y) {
    var popup = document.getElementById("popup");
    popup.style.left = x + "px";
    popup.style.top = y + "px";
    popup.className = "reveal";
  }
};
addEventListener(element, "click", function (event) {
  MyApplication.handleClick(event);
})

第8章  避免空比较

检测基本数据类型的最佳实践:

检测number、string、undefined、boolean的最佳实践:用typeof

如果你需要检测null,最佳实践是直接用===或者!==

检测引用数据类型的最佳实践

使用instanceof,但是它有个缺点是,无法跨帧frame,但是typeof可以

检测函数用typeof,因为它可以跨frame

检测数组用Object.prototype.toString.call(value) === '[Object Array]'

判断属性是否存在,用in

第9章 将配置数据从代码中分离出来

适合设置配置数据的情况:

1.URL  

2.需要展现给用户的字符串 

3.重复的值 

4.任何可能发生改变的值

第11章  不是你的对象不要动

只要不是你写的对象,你都不要覆盖、删除或者新增方法。

第13章  文件和目录结构

最佳实践:

1.一个文件只包含一个对象

2.第三方代码独立于项目之外,最好的是直接从cdn下载

3.js项目通用目录:src源文件、build最终构建后的文件、test测试文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值