السلام عليكم اخواني
في الاول اشكر اخي اشرف سمهوري على اتاحة الفرصة للكتابة في سوالف
كاتب الموضوع : هاوي ويب 2.0
الان ونحن نتجه الى ترقية مواقعنا الى web 2.0 فاول ما يتبادر الى الذهن لغة الجافا سكريبت
وال css لكن من دخل حقا الى هذا المجال مؤكد صادفته كبر حجم ملفات الجافاسكريبت و الcss
ما يعني ذلك زيادة مدة تحميل الصفحة و الموقع ككل
و لتفادي ذلك تم تطوير بعض الادوات لتساعد في تقليص حجم الملف اقصى حد ممكن لتسريع التحميل
لذالك جمعت ما توفر لدي من الادوات التي استخدمها واردت مشاركة تجربتي مع اخوتي في هذا المجال
اولا نتعرف على مفهوم الضغط في الجافا سكريبت
هو اخر شيء يفكر فيه المبرمج بعد كتابته الكود البرمجي لتقليص حجم الملف و زيادة سرعة تحميل الصفحة ولهذا المفهوم السابق ثلاثة طرق نتطرق اليهم
ا- :con2:ضغط الملف و ذلك بحذف جميع التعليقات و المساحات البيضاء (white space) مع ترك الكود البرمجي كما هو دون اي تغيير
اشهر اداة لهذه الطريقة هي المسمات JSMin
ناخذ مثال على هذه الاداة
كود:
var is = {
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
}
وبعد الضغط يصبح الكود كمايلي
كود:
var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
لمزيد من المعلومات و تحميل الاداة يرجى زيارة الرابط التالي
JSMIN, The JavaScript Minifier
ب- :nice:ضغط الملف و ذلك بحذف جميع التعليقات و المساحات البيضاء (white space) و مع تغيير اسماء المتغيرات الى اسماء صغيرة كارقام او حروف
و اشهر اداة لهذه الطريقة هي المسمات ShrinkSafe
وهي اداة تابعة الى framework dojotoolkit
و للعمل عليها يلزم تثبيت الجافا في الجهاز
و مثال على هذه الاداة
كود:
function MyClass(){
this.foo = function(argument1, argument2){
var addedArgs = parseInt(argument1)+parseInt(argument2);
return addedArgs;
}
var anonymousInnerFunction = function(){
// do stuff here!
}
}
function MyFunc(){
// this is a top-level function
}
// we've got multiple lines of whitespace here
و بعد الضغط
كود:
function MyClass(){
this.foo=function(_1,_2){
var _3=parseInt(_1)+parseInt(_2);
return _3;
};
var _4=function(){
};
}
function MyFunc(){
}
عند تحميل هذه الاداة custom_rhino.jar ضع ملف الجافا سكريبت في نفس المجلد
ثم عن طريق الدوس اكتب الامر التالي مع مراعاة انك في المجلد المحتوي على الاداة
كود:
java -jar custom_rhino.jar -c infile.js > outfile.js 2>&1
حيث infile.js هو ملفك المراد ضغطه outfile.js هو الملف الذي سوف تكون في النتيجة
والتحميل الاداة و مزيد من المعلومات يرجى زيارة الرابط التالي
ShrinkSafe | The Dojo Toolkit
ج- :1power:ضغط الملف كما في الطريقة (ب) و اضافة الى ذلك تغيير جميع الكلمات في الكود البرمجي الى كلمات ضغيرة
و اشهر اداة لهذه الطريقة هي packer المبرمجة من طرف dean edwards
وناخذ المثال الاول كتجربة
كود:
var is = {
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
}
وبعد الضغط
كود:
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('u 1={6:2.8==\'h t q\',p:2.m(),4:2.8==\'i\',3:2.g.s(),r:9(2.7.o(n))||9(2.7),l:2.k==\'j\'}1.a=1.3.5(\'a\')>=0;b(1.3.5(\'f\')>=0){1.6=1.4=c;1.f=e}b(1.3.5(\'d\')>=0){1.6=1.4=c;1.d=e}',31,31,'|is|navigator|ua|ns|indexOf|ie|appVersion|appName|parseFloat|mac|if|false|gecko|true|opera|userAgent|Microsoft|Netscape|Win32|platform|win|javaEnabled|21|substr|java|Explorer|version|toLowerCase|Internet|var'.split('|'),0,{}))
و لتحميل الاداة و المزيد من المعلومات يرجى زيارة الرابط التالي
/packer/
ملاحضات ز
اخوتي الكرام ماهذا الموضوع الا مقدمة الى عالم وحده
وانا من خلال هذا الموضوع اردت اعطاء فكرة عامة عن هذا المجال
لم اتطرق الى كل طريقة بالتفصيل لكي لا اعقد الموضوع كما انني لم اتطرق الى
كل الادوات المتوفرة للضغط
و لقد تركت لكل اداة الرابط الرسمي لموقعها لاني متاكد من انه لا يوجد احسن من المصدر
واود ان انبه ان البعض يستخدم هذة الادوات خاصة الثانية (ب) و الثالثة (ج) لتشفير الكود الخاص به
و اي استفهامات فانا في الخدمة
واما بالنسبة لضغط ال css في تتم بالطريقة (ا) حيث يتم حذف التعليقات و الwhite space
ناخذ المثال التالي
الكود قبل الضغط
كود:
TABLE {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
BODY {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
TD {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
TR {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
A {
CURSOR: pointer; COLOR: #4885e8; TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}
.a1 {
CURSOR: pointer; COLOR: #4885e8; TEXT-DECORATION: none
}
.a1:hover {
TEXT-DECORATION: underline
}
.Def_Table {
BORDER-RIGHT: #c3d6ee 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #c3d6ee 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #c3d6ee 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #c3d6ee 1px solid; FONT-FAMILY: Tahoma; BORDER-COLLAPSE: collapse; cellspacing: 0; cellpadding: 0
}
وبعد الضغط
كود:
TABLE{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}BODY{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}TD{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}TR{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}A{CURSOR:pointer;COLOR:#4885e8;TEXT-DECORATION:none}A:hover{TEXT-DECORATION:underline}.a1{CURSOR:pointer;COLOR:#4885e8;TEXT-DECORATION:none}.a1:hover{TEXT-DECORATION:underline}.Def_Table{BORDER-RIGHT:#c3d6ee 1px solid;PADDING-RIGHT:2px;BORDER-TOP:#c3d6ee 1px solid;PADDING-LEFT:0px;FONT-SIZE:8pt;PADDING-BOTTOM:2px;BORDER-LEFT:#c3d6ee 1px solid;PADDING-TOP:2px;BORDER-BOTTOM:#c3d6ee 1px solid;FONT-FAMILY:Tahoma;BORDER-COLLAPSE:collapse;cellspacing:0;cellpadding:0}
و الرابط لهذه الاداة هو
CSS Drive Gallery- CSS Compressor
هذا الموضوع ليس كاملا و الكمال لله عز وجل
فمن لديه اية اضافات نرجو ان لا يبخل بها علينا
وشكرا