מי שלא זוכר הבטחתי לייצר סדרת כלים חינמים, הראשון שיצא הוא Laping שמאפשר למנהלי רשתות לבדוק זמינות של פורטים ברחבי הרשת, עבר המון זמן והנה הגיעה השעה לכלי חדש, JavaScript Optimizer הוא כלי המבוסס על .Net וביטויים רגולרים (regular expression) שעוברים על הקוד של ה JavaScript ומשנים אותו, הם משנים אותו בצורה אופטימלית כלומר צמצום רווחי שורה, והורדת הערות מקומיות.
מי ולמה צריך את זה?
בעיקר מפתחי אתרים , הרעיון הוא לצמצם את גודל הקובץ שהלקוח צריך להוריד למחשב שלו בעזרת צמצום רווחים ושורות שגם הם תופסים משקל בקובץ, דבר נוסף שמרווחים בתהליך הוא הפיכת הקוד ללא קריא ומקשה מאוד על הצפייה בקוד, מי שרוצה לנתח את הקוד יצטרך לעבור מילה מילה ולעצב את הקובץ בעצמו על מנת שהיה קריא.
דוגמה ללא אופטמיזציה:
function helloWorld(id) {
var root = document.getElementById('tmp');
for (var i = 0; i < root.childElementCount; i++) {
var elm = root.childNodes[i];
elm.className = "test";
changeWorld(elm.id);
}
}
function changeWorld(id) {
var f = document.getElementById(id);
f.attributes("Style", "width:24px; height:32");
changeSpace(f.id);
}
function changeSpace(id)
{
var f = document.getElementById(id);
f.attributes("onclick", "helloWorld()");
}
דוגמה עם אופטמיזציה:
סיכום:
אז מה ראינו פה? גם הדברים הקטנים ביותר מאפשרים לנו להעלות את האופטמיזציה לאתרים שלנו, ניתן לממש את הרעיון בכל השפות וזאת דרך מעולה להפוך את הקוד שלנו ללא קריא.
פששש....
מי ולמה צריך את זה?
בעיקר מפתחי אתרים , הרעיון הוא לצמצם את גודל הקובץ שהלקוח צריך להוריד למחשב שלו בעזרת צמצום רווחים ושורות שגם הם תופסים משקל בקובץ, דבר נוסף שמרווחים בתהליך הוא הפיכת הקוד ללא קריא ומקשה מאוד על הצפייה בקוד, מי שרוצה לנתח את הקוד יצטרך לעבור מילה מילה ולעצב את הקובץ בעצמו על מנת שהיה קריא.
דוגמה ללא אופטמיזציה:
function helloWorld(id) {
var root = document.getElementById('tmp');
for (var i = 0; i < root.childElementCount; i++) {
var elm = root.childNodes[i];
elm.className = "test";
changeWorld(elm.id);
}
}
function changeWorld(id) {
var f = document.getElementById(id);
f.attributes("Style", "width:24px; height:32");
changeSpace(f.id);
}
function changeSpace(id)
{
var f = document.getElementById(id);
f.attributes("onclick", "helloWorld()");
}
דוגמה עם אופטמיזציה:
function helloWorld(id) { var root = document.getElementById('tmp'); for (var i = 0; i < root.childElementCount; i++) { var elm = root.childNodes[i]; elm.className = "test"; changeWorld(elm.id); } } function changeWorld(id) { var f = document.getElementById(id); f.attributes("Style", "width:24px; height:32"); changeSpace(f.id); } function changeSpace(id) { var f = document.getElementById(id); f.attributes("onclick", "helloWorld()"); }
אחרי שראינו את ההבדל נעבור על תוכנית, התוכנית מבוססת על ה Framework 2.0 אבל ניתן לממש אותה בכול שפה שתומכת בביטויים רגולרים, התוכנית עצמה מאוד פשוטה וכוללת בתוכה 2 פונקציות בלבד, טעינה ושמירת קובץ JS, ומורכבת מ 2 ביטויים רגולרים, הביטוי הראשון אינו מתעסק אם האופטימזציה אלא עם ההערות שהמשתמש רשם לקובץ והסיבה היא כאשר נבצע אופטמיזציה ונצמצם את השורות ההערות יפגעו לנו באופטימזיצה בכך שיהפכו את הפקודות בקובץ לההערה, הביטוי השני מצמצם לנו את הרווחים בקובץ.
// remove all to local comments in the file
file = Regex.Replace(file, "(?<!:)//[^\r\n]*", "", RegexOptions.IgnoreCase);
//replace all extra spaces to one space.
file = Regex.Replace(file, @"\s+", " ",RegexOptions.Multiline);
חשוב מאוד! במקרה שיש מחרוזות עם רווחים כפולים הם הצטמצמו לרווח בודד, בדקתי את הקוד על מספר קבצים והוא עבד תקין, במקרה של תקלה נא לפרסם בפוסט זה.
התוכנית:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.IO;
using System.Text.RegularExpressions;
namespace javaScriptMinimize
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
string file;
private void btn_input_Click(object sender, EventArgs e)
{
if (openFileDialog1.ShowDialog() == DialogResult.OK)
{
txb_input.Text = openFileDialog1.FileName;
FileStream myfile = new FileStream(openFileDialog1.FileName, FileMode.Open, FileAccess.Read);
StreamReader myreader = new StreamReader(myfile);
file = myreader.ReadToEnd();
file = Regex.Replace(file, "(?<!:)//[^\r\n]*", "", RegexOptions.IgnoreCase);
file = Regex.Replace(file, @"\s+", " ",RegexOptions.Multiline);
txb_mini.Text = file;
myreader.Close();
myfile.Close();
myreader.Dispose();
myfile.Dispose();
}
}
private void btn_save_Click(object sender, EventArgs e)
{
try
{
string filename = "mini_" + Path.GetFileName(txb_input.Text);
string path = Path.GetDirectoryName(txb_input.Text);
if (File.Exists(path + "\\" + filename))
File.Delete(path + "\\" + filename);
FileStream myfile = new FileStream(path + "\\" + filename, FileMode.Append, FileAccess.Write);
StreamWriter mywriter = new StreamWriter(myfile);
mywriter.Write(file);
mywriter.Close();
myfile.Close();
mywriter.Dispose();
myfile.Dispose();
}
catch (Exception ex)
{ }
}
}
}
אז מה ראינו פה? גם הדברים הקטנים ביותר מאפשרים לנו להעלות את האופטמיזציה לאתרים שלנו, ניתן לממש את הרעיון בכל השפות וזאת דרך מעולה להפוך את הקוד שלנו ללא קריא.
פששש....
אין תגובות:
הוסף רשומת תגובה