แรงบันดาลใจจากการโพสต์ก่อนหน้านี้ผมทำสำเนาของRakefileและผู้ขายไดเรกทอรีกระจายกับWysiHat (ก RTE กล่าวโดยการเปลี่ยนแปลง) และทำให้การปรับเปลี่ยนไม่กี่ที่จะรวมถึงรหัสตรวจสอบกับJSLintและ minification กับยูอิคอมเพรสเซอร์
แนวคิดคือการใช้Sprockets (จาก WysiHat) เพื่อรวม JavaScript หลาย ๆ อันไว้ในไฟล์เดียวตรวจสอบไวยากรณ์ของไฟล์ที่ผสานด้วย JSLint และย่อด้วย YUI Compressor ก่อนการแจกจ่าย
ข้อกำหนดเบื้องต้น
- Java Runtime
- อัญมณีทับทิมและเรค
- คุณควรรู้วิธีใส่ JAR ไว้ในClasspath
ตอนนี้ทำ
- ดาวน์โหลดแรดและวาง JAR ("js.jar") ใน classpath ของคุณ
- ดาวน์โหลดYUI Compressorและวาง JAR (build / yuicompressor-xyz.jar) ไว้ใน classpath ของคุณ
- ดาวน์โหลดWysiHatและคัดลอกไดเรกทอรี "ผู้ขาย" ไปยังรากของโครงการ JavaScript ของคุณ
- ดาวน์โหลดJSLint for Rhinoและวางไว้ในไดเรกทอรี "ผู้ขาย"
ตอนนี้สร้างไฟล์ชื่อ "Rakefile" ในไดเรกทอรีรากของโครงการ JavaScript และเพิ่มเนื้อหาต่อไปนี้:
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
})();
แล้ว ...
ดู Rakefile ที่มาพร้อมกับ WysiHat เพื่อตั้งค่าการทดสอบหน่วยอัตโนมัติ สิ่งที่ดี :)
และตอนนี้สำหรับคำตอบ
นี่ไม่ได้ตอบคำถามเดิมดีมาก ฉันรู้และฉันขอโทษเกี่ยวกับเรื่องนั้น แต่ฉันโพสต์ไว้ที่นี่เพราะฉันหวังว่ามันจะเป็นประโยชน์กับคนอื่นในการจัดระเบียบของพวกเขา
วิธีการแก้ไขปัญหาของฉันคือการทำโมเดลเชิงวัตถุให้มากที่สุดเท่าที่จะทำได้และแยกการใช้งานออกเป็นไฟล์ต่าง ๆ จากนั้นตัวจัดการควรสั้นที่สุด ตัวอย่างของListซิงเกิลนั้นก็ดีเช่นกัน
และเนมสเปซ ... ก็สามารถเลียนแบบได้ด้วยโครงสร้างวัตถุที่ลึกกว่า
if (typeof org === 'undefined') {
var org = {};
}
if (!org.hasOwnProperty('example')) {
org.example = {};
}
org.example.AnotherObject = function () {
// constructor body
};
ฉันไม่ใช่แฟนตัวยงของการเลียนแบบขนาดใหญ่ แต่สิ่งนี้มีประโยชน์หากคุณมีวัตถุมากมายที่คุณต้องการย้ายออกจากขอบเขตทั่วโลก
