编写可维护的前端代码

CoreDump 发布于2019-08-30 15:44 / 389人阅读

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

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

1.代码约定 1.1可读性

代码的格式化 使用若干个空格来进行缩进，因为制表符在不同编辑器种的显示效果不同

注释
函数和方法注明参数，返回值，前提假设....
大段代码
复杂的算法说明算法逻辑，方便别人查看，也方便自己查阅
Hack 说明浏览器的差异，防止别人修改时没考虑到误删...

1.2 变量和函数命名

不要使用没有意义或容易引起歧义的名字，如：foo，doSomething...

变量名尽量用名词，如： car，person....

函数名用动词开始，如：getName(); 返回值为boolean用 is 开头

变量和函数使用可以说清楚方法作用和变量含义的名称，不要担心长度，后期可以压缩

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

将js文件写成独立文件，script标签引入

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);
    }
}

3.其他 3.1 尊重对象所有权

简单点说就是不是你自己的创建或者维护的某个对象，他的对象和方法，不能修改

具体说：

不要为实例或原型添加属性或方法

不要重新定义已存在的方法

3.2 避免全局变量

最多创建一个全局变量，其他对象或函数保存在其中，其中有个概念叫做命名空间

命名空间就是指用来放置页面功能的对象

// 命名空间
let YAHOO = {};

YAHOO.util.Dom 
YAHOO.util.Event
....

3.3 避免与null进行比较

判断一个是否为null 如果直接比较是使用过度的，并且由于比较不充分可能导致错误，
所以在判断一个值的类型的时候要与期望的类型进行比较，而非不被期望的那些

// value 期望一个Array
if(value !== null){
    // do something....
}

// 建议
if(value instanceof Array){
    // do something....
}

下面列举一下判断数据类型的方法

判断基本类型，使用typeof

判断引用类型，可以使用instanceof

判断是否为函数，也可以使用typeof

判断是否为undefined,使用typeof,不要直接===判断，如果函数没有声明，那么会报错

所有类型都可以使用Object.prototype.toString.call

let ts = Object.prototype.toString;

ts.call([]) === "[Object Array]"; // true
ts.call(123) === "[Object Number]"; // true
ts.call({}) === "[Object Object]"; // true
....

3.4 使用常量

使用常量可以避免魔术字符串，也可以帮助构建国际化

建议使用常量的几种情况：

重复值 --- 任何多处使用到的值

用户界面字符串 --- 方便国际化

URLs --- 推荐用一个公共地方专门存放所有的URL

任意可能变更的值 --- 如果是以后可能变更的值，都应该提取出来作为一个常量

GPU云服务器云服务器编写可维护的javascript 编写漂亮的代码 java编写可执行修改rds实例可维护时间

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116286.html

编写可维护的前端代码

摘要：最近在看高级程序设计，看到可维护代码的编写，做一下笔记与总结，方便以后查看。最近在看JavaScript高级程序设计，看到可维护代码的编写，做一下笔记与总结，方便以后查看。 1.代码约定 1.1可读性代码的格式化使用若干个空格来进行缩进，因为制表符在不同编辑器种的显示效果不同注释函数和方法注明参数，返回值，前提假设.... 大段代码复杂的算法说明算法逻辑，方便别人查...

HackerShell 2019-08-26 10:49 评论0 收藏0
编码之道（一）：程序员的“圣经“

摘要：与此类似，理所当然的，我们程序员也会有自己的圣经。这便是程序员的圣经三个原则我认为做为一个程序员，最神圣的就是三个原则，它几乎能完整无误的定义做为一个程序员应该如何去编码。 ...

Elle 2021-09-04 16:40 评论0 收藏0
学习前端我推荐这5本书

摘要：不管你是想涉猎前端抑或进行系统性的学习，我都推荐大家阅读前端的相关书籍。那么对于想入门或者扎实前端基础的童鞋来说我们应该挑选哪几把适合我们的书籍呢下面我就推荐本带我踏入前端并产生较大帮助的图书供大家参考。前言作为一名前端开发人员，如果你告诉我你没有看过任何关于前端的书籍，那么我完全可以认为你不是一名合格的前端开发工程师。为什么我要以看书来衡量合格前端的标准？因为前端作为一个特殊的极...

zorpan 2019-08-20 12:20 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0