如何让你的JavaScript代码更加语义化
如何让你的JavaScript代码更加语义化
语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签。其作用不容小觑:
- 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余。
- 优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是很高的,百度和 google 也给出了很多网页结构化的建议(规范),方便他们抓取网页。
- 利于设备解析,如盲人阅读器对页面的分析,目前淘宝很多网页都是支持盲人阅读的,这种体验上的优化得利于网页的良好结构和语义化表达。
- 便于开发者维护,在参加工作之前,很多程序员都是单人开发模式,单人开发无所谓代码结构,自己看得懂就差不多了,一旦走向工作岗位,会发现,以前的鄙习有点让自己捉襟见肘了。
W3C Group 工作组在 web 规范上持续贡献,他们的目标也是期望整个互联网的发展态势稳定统一起来。不扯远了,回到本文需要阐述的重点:如何语义化 JavaScript 代码?
一、先看看那些不易读懂的 JavaScript 代码
1. 判断
// 数据类型判断 if(Object.prototype.toString.call(str) === “[object String]”){// doSomething(); };// 文件类型判断 if(/.*\.css(?=\?|$)/.test(“/path/to/main.css”)){// doSomething(); }
2. 清空一个队列
var Queue = ["test1", "test2", "test3"]; // 常见方式 Queue.length = 0; Queue = [];
3. 注册一个变量
// 注册 var repos = {};repos[“a”] = {name: “a”,content: {} };repos[“b”] = {name: “b”,content: {} };
上面几个例子倒不至于看不懂,程序都特别简单,第一个例子中,我们通过 Object 原型链上的 toString 方法来判断一个变量是否为 string 类型,以及使用正则来判断一个文件是不是 css 文件。代码写起来比较轻松,倘若我们同时需要判断多个对象是否为多个类型中的一种呢?再比如我们需要在一串代码中提取 require 依赖关系呢,是否应该思考下如何组织自己的代码?
在第二个例子中,将数组的长度设置为 0,或者使用空数组来重置这个变量,都是十分常见的方式,但目前的场景是清空一个队列,我们是否可以使用更加语义化的形式来呈现?比如我们只需要清空该队列的前五个和后三个 item 呢?
第三个例子中,变量的注册,把一堆注册放在一起,上面的形式确实也是一目了然,如果 a b c d 等都是分隔穿插在几百行代码之间呢?突然来个 repos["x"] 这样是否显得有些不太直观。
为了说明本文所倡导的思想,上面的几个解释都有些含糊和牵强,请往下看。
二、提高代码语义性
针对上述三个案例,用更加语义化的方式来呈现代码:
1. 语义化变量
// 类型判断 function isType(type){return function(o){return Object.prototype.toString.call(o) === '[object ' + type + ']';} }var isString = isType(“String”); var isObject = isType("Object"); var isArray = isType("Array");isString("I'm Barret Lee."); isArray([1,2,3]); isObject({});
我觉得不需要太多的解释,对比
if(Object.prototype.toString.call(str) === “[object String]”){// code here... }
显得清新多了吧。
// 提取常量 var isCss = /.*\.css(?=\?|$)/; isCss.test(“/path/to/main.css”);
不管 isCss 这个正则代码有多长,当我们看到 isCss 这个单词就可以顾名思义。很多人写正则都不会将正则单独提取出来使用某个有意义的变量去存储,加注释还好,要是不加注释,后续开发者就只能硬着头皮看懂正则去理解代码的含义。
这样的处理,实际上是增加了代码量,不过从工程角度去审视,有助于提高开发效率以及代码的组织性。
2. 语义化行为
var Queue = ["test1", "test2", "test3"]; Queue.splice(0, Queue.length);
上面代码具有很强的语义性,从索引为 0 的地方开始,直到队列最后,删除 Queue 中所有的 item。这种写法的扩展性也更好:
Queue.splice(2, 4); // 删除从索引为 2,往后的 4 个元素
这只是个小例子,有些行为是需要很多代码组合处理的,如果没有很好的组合同一行为的代码,整个结构就显得十分涣散,不利于阅读。
// 注册 var repos = [];function register(o){repos[o.name] = o; }register({name: “a”,content: {} });
对比我们之前
repos[“a”] = {name: “a”,content: {} };
语义化程度是不是有所提高~
三、小结
代码的优化,需要考虑的维度很多。但是代码的优化并不是减少代码量,有的时候我们需要增加代码来提高代码的可阅读性。
- 正确标记变量
- 封装某个动作
- 注意函数的写法
- 不容易理解的东西,加注释
转载于:https://www.cnblogs.com/lizonghai/p/4639743.html
如何让你的JavaScript代码更加语义化相关推荐
- html5语义化布局分割代码,HTML5语义化标签布局的兼容性.html
html5语义化标签布局兼容性调整 header, section, footer, aside, nav, main, article, figure { display: block; } bod ...
- 专家系统代码实现_前端代码是怎样智能生成的 - 语义化篇
作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在此期间研 ...
- 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
- HTML5的革新——语义化标签
一.语义化标签的实战意义 我先收集到一些观点,大家姑且先听上一听, 有人说: "没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些" " ...
- 充分了解Web语义化
前言 对于"web语义化"这个词语,我相信只要是从事前端的人都不陌生,从事前端工作在投简历时都会在招聘需求里面看到这句话:"对web语义化有深刻的理解",当然我 ...
- 如何理解 HTML 语义化
你是如何理解 HTML 语义化的?(面试) 在了解 HTML 语义化之前,先科普一下下面几个名词: 语义:是语言所蕴含的意义 (语言的含义).简单的说,符号是语言的载体,符号本身没有意义,只有赋予含义 ...
- 有关WEB前端中的语义化
作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念,于是乎也就花点时间搞搞它.语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太 在意,哇哈哈,其实我也就算只比较老的菜鸟而已,本文不是说教, ...
- php 怎么写个定时自理器,教你编写更加稳定、可读性强的JavaScript代码的示例
每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...
- html语义化练习易牛课堂代码
html <body> <header> <!-- 导航 --> <nav> <a href="#">首页</a& ...
最新文章
- Java随笔--分布式
- 如何更好地利用Pmd、Findbugs和CheckStyle分析结果
- Linux Kernel TCP/IP Stack — L1 Layer — Physical NIC
- 一口气拿了9家公司的offer,年薪50W
- linux多线程求和_211渣硕,海投200+家Java岗(面40,过7),收获多份offer!
- 关于嵌套循环的循环初始化语句问题:
- 你最喜欢的一张美女图片?
- rust(56)-mp3(1)
- 使用 PDBDownloader 解决 IDA 加载 ntoskrnl.exe 时符号不完全问题
- [SQL提数]函数的灵活使用
- 新东方年会节目员工吐槽公司问题 俞敏洪:奖励12万
- oracle 定义变量 查询,Oracle定义PL/SQL变量
- tp 框架防sql注入
- 数据库(mysql)查询语句练习(中级)
- JavaScript学习笔记——基础部分
- Python自动化处理和分析Excel数据的基本方法
- 智能呼叫系统之客户互动中心
- 瑞士军刀1- 剪贴板堆工具-CLCL介绍
- goahead解析(一)---------route.txt
- 第3天-Jenkins详解
热门文章
- python keyboard库_python库 pywinio虚拟键盘使用
- 有向图的强连通分量--Tarjan算法---代码分析
- UnityShader25:在Unity中实现泛光
- OpenGL基础39:GLSL内建变量与接口块
- Codeforces Round #383 (Div. 1): D. Arpa’s letter-marked tree…(dsu on tree+状压)
- python实现抢劵_双十一福利丨机械键盘、蓝牙音箱送送送!Python/UI/Unity多场微课解剖双十一套路!...
- 阶段1 语言基础+高级_1-2 -面向对象和封装_1面向对象思想的概述
- 复习笔记08 常用API
- struts2 javaweb 过滤器、监听器 拦截器 原理
- 栈增长方向与大端/小端问题