[javascript] JavaScript에서 코드 구성과 관련하여 일반적으로 인정되는 모범 사례 [닫기]

이전 게시물에서 영감을 받아 WysiHat (changelog에서 언급 한 RTE)과 함께 배포 된 Rakefile 및 공급 업체 디렉토리 의 사본을 만들고 JSLint를 사용한 코드 검사 및 YUI Compressor로 축소 를 포함하도록 약간 수정했습니다 .

아이디어는 WysiHat의 Sprockets 를 사용 하여 여러 JavaScript를 하나의 파일로 병합하고 병합 된 파일의 구문을 JSLint로 확인한 후 배포 전에 YUI Compressor로 최소화하는 것입니다.

전제 조건

• 자바 런타임
• 루비와 갈퀴 보석
• JAR을 클래스 경로 에 넣는 방법을 알아야합니다

이제 해

1. Rhino를 다운로드 하고 JAR ( “js.jar”)을 클래스 경로에 넣으십시오.
2. YUI Compressor를 다운로드 하고 JAR (build / yuicompressor-xyz.jar)을 클래스 경로에 넣으십시오.
3. WysiHat을 다운로드 하고 “공급 업체”디렉토리를 JavaScript 프로젝트의 루트에 복사하십시오.
4. Rhino 용 JSLint를 다운로드 하여 “공급 업체”디렉토리에 넣습니다.

이제 JavaScript 프로젝트의 루트 디렉토리에 “Rakefile”이라는 파일을 작성하고 다음 컨텐츠를 추가하십시오.

require 'rake'

ROOT            = File.expand_path(File.dirname(__FILE__))
OUTPUT_MERGED   = "final.js"
OUTPUT_MINIFIED = "final.min.js"

task :default => :check

desc "Merges the JavaScript sources."
task :merge do
  require File.join(ROOT, "vendor", "sprockets")

  environment  = Sprockets::Environment.new(".")
  preprocessor = Sprockets::Preprocessor.new(environment)

  %w(main.js).each do |filename|
    pathname = environment.find(filename)
    preprocessor.require(pathname.source_file)
  end

  output = preprocessor.output_file
  File.open(File.join(ROOT, OUTPUT_MERGED), 'w') { |f| f.write(output) }
end

desc "Check the JavaScript source with JSLint."
task :check => [:merge] do
  jslint_path = File.join(ROOT, "vendor", "jslint.js")

  sh 'java', 'org.mozilla.javascript.tools.shell.Main',
    jslint_path, OUTPUT_MERGED
end

desc "Minifies the JavaScript source."
task :minify => [:merge] do
  sh 'java', 'com.yahoo.platform.yui.compressor.Bootstrap', '-v',
    OUTPUT_MERGED, '-o', OUTPUT_MINIFIED
end

모든 것을 올바르게 수행했다면 콘솔에서 다음 명령을 사용할 수 있어야합니다.

• rake merge -다른 JavaScript 파일을 하나로 병합
• rake check-코드 구문을 확인하려면 (이것이 기본 작업이므로 간단히 입력 할 수 있습니다 rake)
• rake minify -JS 코드의 축소 버전을 준비

소스 병합

Sprockets를 사용하면 JavaScript 전 처리기에서 require다른 JavaScript 파일을 포함 (또는 ) 할 수 있습니다. 다음 구문을 사용하여 초기 파일 ( “main.js”라는 다른 스크립트를 포함하지만 Rakefile에서 변경할 수 있음) :

(function() {
//= require "subdir/jsfile.js"
//= require "anotherfile.js"

    // some code that depends on included files
    // note that all included files can be in the same private scope
})();

그리고…

자동 단위 테스트를 설정하려면 WysiHat과 함께 제공된 Rakefile을 살펴보십시오. 좋은 물건 🙂

그리고 지금 답을 위해

이것은 원래의 질문에 잘 대답하지 못합니다. 나는 그것을 알고 미안하지만, 나는 그것을 다른 사람이 그들의 혼란을 조직하는 데 유용 할 수 있기를 바랍니다.

문제에 대한 나의 접근 방식은 가능한 많은 객체 지향 모델링을 수행하고 구현을 다른 파일로 분리하는 것입니다. 그런 다음 처리기는 가능한 짧아야합니다. List싱글 톤을 사용한 예제 도 좋습니다.

그리고 네임 스페이스는 … 더 깊은 객체 구조로 모방 될 수 있습니다.

if (typeof org === 'undefined') {
    var org = {};
}

if (!org.hasOwnProperty('example')) {
    org.example = {};
}

org.example.AnotherObject = function () {
    // constructor body
};

나는 모방을 좋아하지는 않지만 전역 범위를 벗어나고 싶은 많은 객체가있는 경우 도움이 될 수 있습니다.

답변

Exc = {};

Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};
Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    ...
};

Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    this.internal = {
        widthEstimates: function (tips) {
            ...
        }
        formatTips: function () {
            ...
        }
    };
    ...
};

/**
  * Namespace <i> Example </i> created to group other namespaces of the "Example".  
  */
Exc = {};
/**
  * Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
  */
Exc.ui = {};

/**
  * Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
  * @ Param {String} mask - mask validation of input data.
  */
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};

/**
  * Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
  * @ Param {String} id - id of the HTML element.
  * @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
  */
  Exc.ui.domTips = function (id, tips) {
    this.domID = id;
    this.tips = tips;
    ...
};