JavaScript 코드를 더 의미있게 만드는 방법

Semantic 은 HTML에서 자주 사용되는 단어로, 콘텐츠의 구조에 따라 적절한 태그를 선택하는 것입니다. 그 역할은 과소평가될 수 없습니다:

• 은 레이블에 의미를 부여하고 코드 구조를 더 명확하게 만듭니다. 레이블에 클래스를 추가하여 이를 식별할 수 있지만 속성을 통해 온톨로지를 표현하는 이러한 형식은 그것은 충분히 직접적이지 않고 어느 정도 중복되는 것 같습니다.

• 검색 엔진 최적화(SEO). 잘 구성된 웹 페이지는 검색 엔진에 대한 선호도가 높습니다. Baidu와 Google도 웹 페이지 구성에 대해 많은 제안(표준)을 제시했습니다. 웹페이지를 더 쉽게 크롤링할 수 있습니다.

• 현재 많은 타오바오 웹페이지는 시각 장애인의 독서를 지원하는 등 장치 분석에 도움이 됩니다. 웹페이지 표현의 의미.

• 작업에 참여하기 전에는 많은 프로그래머가 1인 개발 모드에 있었으며 코드는 중요하지 않았습니다. 일단 직장에 가면 이전의 나쁜 습관이 조금 늘어난 것을 알게 될 것입니다.

W3C 그룹 워킹 그룹은 지속적으로 웹 사양에 기여하고 있으며, 그들의 목표는 전체 인터넷의 발전 추세를 안정화하고 통합하는 것입니다. 더 이상 고민하지 않고 이 기사의 주요 요점인 JavaScript 코드를 의미론적으로 의미화하는 방법으로 돌아가겠습니다.

1. 먼저 읽기 어려운 JavaScript 코드를 살펴보세요

1. 판단

rree

2. 대기열 지우기

// 数据类型判断
if(Object.prototype.toString.call(str) === “[object String]”){
    // doSomething();
}；

// 文件类型判断
if(/.*\.css(?=\?|$)/.test(“/path/to/main.css”)){
    // doSomething();
}

3. 변수 등록

var Queue = ["test1", "test2", "test3"];
// 常见方式
Queue.length = 0;
Queue = [];

위의 예는 이해할 수 없습니다. 프로그램 첫 번째 예에서는 변수가 문자열 유형인지 확인하기 위해 객체 프로토타입 체인의 toString 메서드를 사용하고 파일이 CSS 파일인지 확인하기 위해 일반 규칙을 사용합니다. 코드는 비교적 작성하기 쉽습니다. 여러 객체 가 동시에 여러 유형 중 하나인지 확인해야 한다면 어떻게 될까요? 예를 들어, 코드 문자열에서 require 종속성을 추출해야 한다면 자체 코드를 어떻게 구성할지 고민해야 할까요?

두 번째 예에서는 배열의 길이를 0으로 설정하거나 빈 배열을 사용하여 이 변수를 재설정하는 것이 매우 일반적인 방법이지만 현재 시나리오에서는 이를 지우는 것입니다. , 좀 더 의미론적인 형태로 표현할 수 있을까요? 예를 들어, 대기열의 처음 5개 항목과 마지막 3개 항목만 지우면 어떻게 됩니까?

세 번째 예에서 변수 등록은 여러 개의 등록을 모아 놓은 것입니다. 위의 형식은 실제로 a, b, c, d 등이 분리되어 산재되어 있는 경우입니다. 수백 줄의 코드? repos["x"] 의 갑작스런 출현이 다소 직관적이지 않은 것처럼 보입니까?

이 기사에서 옹호하는 아이디어를 설명하기 위해 위의 설명은 다소 모호하고 무리가 있으므로 아래를 읽어보시기 바랍니다.

2. 코드 의미 개선

위의 세 가지 경우에는 코드를 표시하기 위해 보다 의미 있는 방법을 사용합니다.

1 . 의미변수

// 注册
var repos = {};

repos[“a”] = {
   name: “a”,
   content: {}
};

repos[“b”] = {
   name: “b”,
   content: {}
};

는

// 类型判断
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...
}

isCss의 일반 코드가 아무리 길어도 isCss라는 단어를 보면 이름 그대로입니다. 정규식을 작성하는 분들 중에는 정규식을 따로 추출하지 않고 의미 있는 변수를 사용하여 저장하는 경우가 많습니다. 주석을 추가해도 괜찮습니다. 정규식을 이해하고 코드의 의미를 이해합니다.

이러한 처리는 실제로 코드 양을 늘리지만 엔지니어링 관점에서는 개발 효율성과 코드 구성을 향상시키는 데 도움이 됩니다.

2. 의미적 동작

// 提取常量
var isCss = /.*\.css(?=\?|$)/;
isCss.test(“/path/to/main.css”);

위 코드는 인덱스 0부터 큐 끝까지 큐 항목의 모든 항목을 삭제하는 강력한 의미를 갖습니다. . 이 작성 방식은 확장성도 더 좋습니다.

var Queue = ["test1", "test2", "test3"];
Queue.splice(0, Queue.length);

이것은 단지 작은 예일 뿐입니다. 일부 동작에는 많은 코드 조합이 필요합니다. 동일한 동작에 대해 적절한 코드 조합이 없으면 전체 구조가 나타납니다. , 읽기에 도움이 되지 않습니다.

Queue.splice(2, 4); // 删除从索引为 2，往后的 4 个元素

기존

// 注册
var repos = [];

function register(o){
   repos[o.name] = o;
}

register({
  name: “a”,
  content: {}
});

에 비해 의미 수준이 향상되었습니다~

3. 요약

최적화 code 에는 고려해야 할 측면이 많습니다. 하지만 코드 최적화는 코드의 양을 줄이는 것이 아닙니다. 때로는 코드의 가독성을 높이기 위해 코드를 추가해야 할 때도 있습니다.

• 변수를 올바르게 표시

• 작업 캡슐화

• 함수

• 이해하기 어려운 부분이 있으면 댓글을 달아주세요

위 내용은 JavaScript 코드를 더 의미있게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!