前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

编写可维护的JavaScript

首页
2017-10-24 10:10:43
Front-End
JavaScript读书笔记

# 一、事件处理


# 1.1 规则1:隔离应用层

  • 好的写法,拆分应用逻辑
var myApp = {
    handleClick: function(e){
      this.showPopup(e);  
    },
    showPopup: function(e){
        var popup = document.getElementById("popup");
        popup.style.left = e.clientX + "px";
        popup.style.top = e.clientY + "px";
    }
};

addEventListener(element,"click",function(e){
    MyApp.handleClick(e);
});

@前端进阶之旅: 代码已经复制到剪贴板

# 1.2 规则2:不要分发事件对象

var myApp = {
    handleClick: function(e){
     // 假设事件支持 DOMlevel2
     
     e.preventDefault();
     e.stopPropagation();
     
     //传入应用逻辑
      this.showPopup(e.clientX,e.clientY);  
    },
    showPopup: function(x,y){
        var popup = document.getElementById("popup");
        popup.style.left = x + "px";
        popup.style.top = y + "px";
    }
};

addEventListener(element,"click",function(e){
    MyApp.handleClick(e);
});

@前端进阶之旅: 代码已经复制到剪贴板

# 二、javascript中的检测方法


# 2.1 检测原始值


在JavaScript中有五种原始类型:字符串、数字、布尔值、null、undefined。如果你希望一个值是字符串、数字、布尔值或undefined,最佳选择是使用typeof运算符。typeof运算符会返回一个表示值 饿类型的字符串

fe
  • 一、事件处理
    • 1.1 规则1:隔离应用层
    • 1.2 规则2:不要分发事件对象
  • 二、javascript中的检测方法
    • 2.1 检测原始值
    • 2.2 检测引用值
    • 2.3 检测函数
    • 2.4 检测数组
    • 2.5 检测属性
  • 三、将配置数据从代码中分离

← JavaScript启示录阅读笔录前后端分离之数据Mock →