编写可维护的前端代码

2019-08-16

最近在看JavaScript高级程序设计,看到可维护代码的编写,做一下笔记与总结,方便以后查看。

1.代码约定

1.1可读性

  • 代码的格式化使用若干个空格来进行缩进,因为制表符在不同编辑器种的显示效果不同
  • 注释函数和方法 注明参数,返回值,前提假设.... 大段代码 复杂的算法 说明算法逻辑,方便别人查看,也方便自己查阅 Hack 说明浏览器的差异,防止别人修改时没考虑到误删...

1.2 变量和函数命名

  • 不要使用没有意义或容易引起歧义的名字,如:foo,doSomething...
  • 变量名尽量用名词,如: car,person....
  • 函数名用动词开始,如:getName(); 返回值为booleanis开头
  • 变量和函数使用可以说清楚方法作用和变量含义的名称,不要担心长度,后期可以压缩

1.3 变量类型透明

类型透明也就是在变量定义的时候可以知道变量的类型

主要有以下三种方式:

  • 初始化变量

    var found = false; // boolean
    var count = -1; // number

    缺点:不能使用在函数声明中的函数参数(现在通过ES6中的函数参数初始化解决)

  • 使用匈牙利标记法o表示对象,s表示字符串...

    var bFound; // boolean
    var iCount; // int

    缺点:代码难以阅读

  • 使用类型注释类型注释放到变量名右边,初始化前面

    var found /*:Boolean*/ = false;
    var count /*:int*/ = -1;

    缺点:不能使用js多行注释

  • 使用typeScript(终极)

2.松散耦合

2.1 解耦HTML/JavaScript

JavaScript中使用HTML

  • 不要使用js插入HTML,可以通过在页面中隐藏元素,当页面渲染后,通过js显示该元素,而不是生成
  • 通过Ajax请求获取HTML

HTML中使用JavaScript

2.2 解耦CSS/JavaScript

  • 通过动态修改样式类,而不是修改特定样式

    // 不建议写法
    element.style.color = 'red';
    element.style.backgroundColor = 'blue';
    
    // 建议写法
    // css
    .dit{
        color: red;
        background-color: blue;
    }
    
    // js
    element.className = 'edit';

2.3 解耦应用逻辑/事件处理程序

有以下几条原则:

  • 勿将event对象传给其他方法,只传函数中需要的数据

  • 任何可以在应用层面动作都应该可以在不执行任何事件处理程序的情况下进行

  • 任何事件处理程序都应该处理事件,然后将处理转交给应用逻辑

    // 不建议写法
    function handleKeyPress(event){
        if(event.keyCode === 13){
            var target = event.target;
            var value = 5 * parseInt(target.value);
            if(value > 10){
                document.getElementById('id').style.display = 'block';
            }
        }
    }
    
    // 建议写法
    // 好处:如果我点击鼠标也执行相同逻辑,那么直接调用validateValue就可以了
    // 应用逻辑
    function validateValue(value){
        value = 5 * parseInt(value);
    
        if(value > 10){
            document.getElementById('id').style.display = 'block';
        }
    }
    
    // 事件处理程序
    function handleKeyPress(event){
        if(event.keyCode === 13){
            var target = event.target;
            validateValue(target.value);
        }
    }

未完待续......

原文链接:segmentfault.com

上一篇:Vue中组件传值的多重实现方式·~
下一篇:写一个 JS 调用栈可视化工具 hound-trace
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部