طراحی و بهینه سازی وب سایت های شخصی شرکتی و پزشکی
در استاندارد جاوا اسکریپت در وردپرس به بخش های زیر می پردازیم : #توضیحات کلی جاوا اسکریپت به یک بخش حیاتی در توسعه برنامه های کاربردی مبتنی بر وردپرس شده است همچنین هسته وردپرس ( پوسته ها و افزونه ها ) از این امر مبرا نیست. استانداردها در این زبان همانند استانداردهای html,css و php برای حفظ یکپارچگی و قالب بندی کدهای جاوا اسکریپت نیاز است. تمام کدها صرف نظر از اینکه چه کسی آن ها را نوشته است در یک نگاه باید یکسان به نظر آیند.یعنی اصول نگارش سازگار با استاندارد باشد. استاندارد جاوا اسکریپت وردپرس از راهنمای سبک جی کویری جاوا اسکریپت گرفته شده است . استاندارد ما از دستورالعمل های جی کویری به روش های زیر متفاوت است :وردپرس برای داده های string از تک کوتیشن استفاده می کند.داده ها با دندانه در داخل براکت فاصله می گیرند.محتویات یک تابع همواره با دندانه فاصله دار می شود که به بسته شدن کامل فایل می توان اشاره نمود .برخی از قوانین فضای خالی یا سفید متفاوت است ، این تفاوت به خاطر هماهنگی با کدهای استاندارد php در وردپرس می باشد.در جی کویری 100 کارکتر یک حد سخت از خطوط برنامه نویسی است ، اما به شدت اعمال نمی شود.بسیاری از نمونه ها از راهنمای سبک جی کویری گرفته شده است که در آینده بیشتر در مورد آنان توضیح می دهیم ؛ این تفاوت ها در سرفصل های بعدی به صورت یکپارچه به اطلاعاتان خواهد رسید. هر یک از استانداردها و نمونه ها برای کد نویسی بهتر در وردپرس باید در نظر گرفته شود. مگر اینکه به صراحت با ضد الگوهای یاد شده نقیض باشد. #فاکتورگیری از کد یا کوتاه نویسی بسیاری از کدهای وردپرس در حالت اولیه شان برای جاوااسکریپت ناسازگار هستند. وردپرس در راستای بهبود تدریجی کارکرد آن می کوشد ، بنابراین کد باید آسان و تمیز در یک نگاه باشد. چرخه ای از کدهای استاندارد از اهمیت بالایی برخوردارند ، تطبیق کدهای قدیمی JS از اهمیت فوری برخوردار نیست. فضاهای سفید در فایل های بزرگ و قدیمی یک نامیدی است. همه فایل های جدید یا بروز شده جاوا اسکریپت باید با دقت طبق استانداردها بررسی شود و از JSHint عبور کند. #فاصله ها در سراسر کد خود از کتابخانه فاصله ها استفاده نمایید .هنگامی که در فضای مورد استفاده شک دارید . این قوانین لیبرال برای تشویق خوانایی و بهبود توسعه توصیه شده است. کوچک شدن یک فایل برای اجرای فرآیند بهینه سازی و خواندن سریع آن توسط مرورگر هاست.دندانه توسط کلید TAB.نداشتن فاصله سفید بعد از اتمام خط یا خالی بودن یک خط بین دو خط .خطوط شما نباید طولانی تر از 80 کاراکتر باشند و نباید از 100 تجاوز کنند ( TAB با 4 Space محاسبه می شود ).این یک قانون نرم است ، اما خطوط طولانی کدها را ناخوانا و آشفته نشان می دهد.بلوک های if / else / for / while / try همیشه باید از براکت ها استفاده کنند و همیشه در چند خط نوشته شوند.عملگر یکتای ویژه اپراتورها ( ++  و  — ) نباید فاصله ای بین دو عنصر داشته باشند.هر , و ; نباید فاصله ای ماقبل داشته باشند.هر ; برای خاتمه استفاده می شود و باید در انتهای هر خط استفاده شود.هر : بعد از نام یک ویژگی بعد از تعریف یک شی ، نباید فاصله ای قبل از آن وجود داشته باشد.؟ و : در شروط سه گانه باید از فاصله در هر دو طرف استفاده کنند.سازنده های خالی را با فاصله پر نکنید . (مثال : {} , [] , ()fn).باید یک خط جدید در پایان هر یک از فایل ها وجود داشته باشد .هر ! نفی باید یک فاصله دنبال کننده داشته باشد.تمام بدنه توابع باید توسط یک TAB دندانه داشته باشند ، حتی اگر کل فایل در یک بسته شدن تمام می شود.فضاهای کد ممکن است در داخل یک بلوک یا در خط یک تراز باشد ، اما TAB به تنهایی در آغاز یک بلوک استفاده می شود.استانداردهای جاوا اسکریپت وردپرس از قوانین سبک جی کویری ترجیح کمی برای استفاده از فضاهای خالی بهره می برند. این انحرافات برای هماهنگی بین فایل های PHP و JAVASCRIPT در کدهای وردپرس استفاده می شوند. فضاهای خالی می توانند به عنوان جلوگیری از تجمع یک خط به عنوان یک خطا در JSHint به عنوان خطاهای فاصله عنوان کرد. یکی از راه های برطرف نمودن فضاهای خالی استفاده از ویرایشگر متنی می باشد . #اشیا کارکرد یک شی را اگر کوتاه باشد می توان در یک خط ساخت (دستور العمل اندازه را به خاطر بسپارید.). زمانی که کارکرد یک شی بسیار بزرگتر از طول یک خط باشد باید یک ویژگی در هر خط باشد. نام ویژگی ها فقط احتیاج به یک نقل قول دارند اگر آن ها از کلمات رزرو شده یا حاوی کارکترهای ویژه باشند . JavaScript // Preferred var map = { ready: 9, when: 4, 'you are': 15 }; // Acceptable for small objects var map = { ready: 9, when: 4, 'you are': 15 }; // Bad var map = { ready: 9, when: 4, 'you are': 15 }; 1 2 3 4 5 6 7 8 9 10 11 12 13 // Preferred varmap={ ready:9, when:4, 'you are':15 }; // Acceptable for small objects varmap={ready:9,when:4,'you are':15}; // Bad varmap={ready:9, when:4,'you are':15}; #آرایه ها و فراخوانی توابع همیشه شامل فضاهای اضافی در اطراف عناصر و آرگومان ها هستند . JavaScript array = [ a, b ]; foo( arg ); foo( 'string', object ); foo( options, object[ property ] ); foo( node, 'property', 2 ); 1 2 3 4 5 6 7 8 9 array=[a,b]; foo(arg); foo('string',object); foo(options,object[property]); foo(node,'property',2); استثناها : JavaScript // For consistency with our PHP standards, do not include a space around // string literals or integers used as key values in array notation: prop = object['default']; firstArrayElement = arr[0]; // Function with a callback, object, or array as the sole argument: // No space on either side of the argument foo(function() { // Do stuff }); foo({ a: 'alpha', b: 'beta' }); foo([ 'alpha', 'beta' ]); // Function with a callback, object, or array as the first argument: // No space before the first argument foo(function() { // Do stuff }, options ); // Function with a callback, object, or array as the last argument: // No space after after the last argument foo( data, function() { // Do stuff }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // For consistency with our PHP standards, do not include a space around // string literals or integers used as key values in array notation: prop=object['default']; firstArrayElement=arr[0]; // Function with a callback, object, or array as the sole argument: // No space on either side of the argument foo(function(){ // Do stuff }); foo({ a:'alpha', b:'beta' }); foo([ 'alpha', 'beta' ]); // Function with a callback, object, or array as the first argument: // No space before the first argument foo(function(){ // Do stuff },options); // Function with a callback, object, or array as the last argument: // No space after after the last argument foo(data,function(){ // Do stuff }); مثال هایی برای فاصله گذاری خوب JavaScript var i; if ( condition ) { doSomething( 'with a string' ); } else if ( otherCondition ) { otherThing({ key: value, otherKey: otherValue }); } else { somethingElse( true ); } // Unlike jQuery, WordPress prefers a space after the ! negation operator. // This is also done to conform to our PHP standards. while ( ! condition ) { iterating++; } for ( i = 0; i < 100; i++ ) { object[ array[ i ] ] = someFn( i ); $( '.container' ).val( array[ i ] ); } try { // Expressions } catch ( e ) { // Expressions } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 vari; if(condition){ doSomething('with a string'); }elseif(otherCondition){ otherThing({ key:value, otherKey:otherValue }); }else{ somethingElse(true); } // Unlike jQuery, WordPress prefers a space after the ! negation operator. // This is also done to conform to our PHP standards. while(!condition){ iterating++; } for(i=0;i<100;i++){ object[array[i]]=someFn(i); $('.container').val(array[i]); } try{ // Expressions }catch(e){ // Expressions } #سمی کالون ها از آن ها استفاده نمایید. هرگز وابسته به الحاق خودکار آن ها نباشید . #دندانه گذاری و شکست خطوط دندانه گذاری و شکست خطوط خوانایی را به کدهای پیچیده می افزاید. کلید TAB باید برای دندانه گذاری استفاده شود . حتی اگر تمام فایل دارای یک خاتمه باشد (استناد به یک تابع بلافاصله) ، محتوای توابع باید با یک TAB دندانه گذاری شوند. JavaScript (function( $ ) { // Expressions indented function doSomething() { // Expressions indented } })( jQuery ); 1 2 3 4 5 6 7 (function($){ // Expressions indented functiondoSomething(){ // Expressions indented } })(jQuery); #بلوک ها و آکلادها بلوک های if , else , for , while و try باید از آکلاد استفاده کنند و همیشه در چند خط نوشته شوند . باز کردن آکلاد باید در همان خط تعریف تابع ، شرط یا حلقه باشد. بستن آکلاد باید به طور مستقیم در آخرین سطر از بلوک قرار گیرد . JavaScript var a, b, c; if ( myFunction() ) { // Expressions } else if ( ( a && b ) || c ) { // Expressions } else { // Expressions } 1 2 3 4 5 6 7 8 9 vara,b,c; if(myFunction()){ // Expressions }elseif((a&&b)||c){ // Expressions }else{ // Expressions } #دستورات چند خطی زمانی که یک دستور طولانی تر از یک خط باشد باید در عملگر شکست خط انجام پذیرد . JavaScript // Bad var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c + ' is ' + ( a + b + c ); // Good var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c + ' is ' + ( a + b + c ); 1 2 3 4 5 6 7 // Bad varhtml='<p>The sum of '+a+' and '+b+' plus '+c +' is '+(a+b+c); // Good varhtml='<p>The sum of '+a+' and '+b+' plus '+c+ ' is '+(a+b+c); خطوط باید به گروه های منطقی برای خوانایی شکسته شوند ، مانند تقسیم هر عبارت به شرط سه گانه روی خود ، حتی اگر هر دو در یک خط باشند . JavaScript // Acceptable var baz = ( true === conditionalStatement() ) ? 'thing 1' : 'thing 2'; // Better var baz = firstCondition( foo ) && secondCondition( bar ) ? qux( foo, bar ) : foo; 1 2 3 4 5 6 7 // Acceptable varbaz=(true===conditionalStatement())?'thing 1':'thing 2'; // Better varbaz=firstCondition(foo)&&secondCondition(bar)? qux(foo,bar): foo; هر زمان که یک شرط طولانی تر از یک خط باشد ، خطوط پی در پی برای تشخیص دادن آن ها از بدنه باید در یک سطح اضافی دندانه گذاری شوند . JavaScript if ( firstCondition() && secondCondition() && thirdCondition() ) { doStuff(); } 1 2 3 4 if(firstCondition()&&secondCondition()&& thirdCondition()){ doStuff(); } #صدا زدن چند زنجیره ای یا صدا زدن چند متد هر زمانی یک زنجیر از صدا زدن متدها طولانی تر از یک خط باشد ، هر کدام باید در یک خط صدا زده شوند ، با اولین تماس روی یک خط جداگانه از اشیا که متدها در آن فراخوانی می شوند. اگر متد زمینه را تغییر می دهد یک سطح اضافی از دندانه گذاری باید استفاده شود. JavaScript elements .addClass( 'foo' ) .children() .html( 'hello' ) .end() .appendTo( 'body' ); 1 2 3 4 5 6 elements .addClass('foo') .children() .html('hello') .end() .appendTo('body'); #تعریف متغیر با var هر  بخش تابع var باید با یک کاما از هر متغیر محلی جدا شود . اگر تابعی از متغیر var استفاده نمی کند ، آن متغیر می تواند در یک دامنه بیرونی قرار گیرد ( هر زمان که دامنه های جهانی بدترین دامنه باشند ) و ناخواسته توان اشاره و تغییر آن را دارد. وظایف با بخش var باید با خطوط کاربر لیست شود ، در حالی که وظایف آن ها را می توان در یک خط گروه بندی کنید. هر خطوط اضافی باید با یک دندانه گذاری اضافی با TAB مشخص شود . اشیا و توابع می تواند به طور انگشت شماری از خطوط را اشغال کنند و برای جلوگیری استفاده بیش از دندانه به خارج از بخش اختصاص داده شود. JavaScript // Good var k, m, length, // Indent subsequent lines by one tab value = 'WordPress'; // Bad var foo = true; var bar = false; var a; var b; var c; 1 2 3 4 5 6 7 8 9 10 11 // Good vark,m,length, // Indent subsequent lines by one tab value='WordPress'; // Bad varfoo=true; varbar=false; vara; varb; varc; #Globals در گذشته هسته وردپرس متغیرهای Global سنگین تر ساخته می شد . از آنجا که هسته فایل های وردپرس در هر زمانی با افزونه ها استفاده می شوند ، خروجی Globals نباید پاک شوند. همه Global های استفاده شده در فایل باید در بالای هر فایل ثبت شوند. Global های چند خطی باید با کاما جدا شوند . برای مثال passwordStrength اجازه به ساخت در یک فایل می دهد : JavaScript /* global passwordStrength:true */ 1 /* global passwordStrength:true */ کلمه “true” بعد از  passwordStrength به این معنی است که آن Global تعریف شده برای فایل است . اگر شما دسترسی به Global در جای دیگری دارید . حذف کردن true: برای تعیین Global به صورت فقط خواندنی است . کتابخانه های مشترک Backbone, jQuery, Underscore و اشیا Global WP همگی متغیرهای Global ثبت شده در فایل jshintrc. هستند. Backbone و Underscore شاید در هر زمانی به طور مستقیم دیده شوند . jQuery باید از طریق $ با عبور از اشیا jQuery در یک تابع ناشناخته دیده شود : JavaScript (function( $ ) { // Expressions })( jQuery ); 1 2 3 (function($){ // Expressions })(jQuery); ()noConflict. یا تنظیم $ برای خنثی کردن متغیر دیگر نیاز است. در اشیا WP فایل هایی که اضافه یا تغییر داده می شوند باید به راحتی برای جلوگیری از تنظیم خاصیت های قبل به خاصیت global دسترسی داشته باشند . JavaScript // At the top of the file, set "wp" to its existing value (if present) window.wp = window.wp || {}; 1 2 // At the top of the file, set "wp" to its existing value (if present) window.wp=window.wp||{}; #نامگذاری نام های متغیرها و توابع باید به صورت کلماتی کامل باشد ،  از استاندارد شتری با کلمه اول با حروف کوچک استفاده می شود . این محل جایی است که استاندارد آن از WordPress PHP coding standards متفاوت تر است . سازنده ها دندانه گذاری شده برای استفاده از new باید شامل یک کلمه بزرگ در اول باشند . (مثال : UpperCamelCase). نام ها باید توصیفی باشند ، اما نه بیش از حد . برای تکرار کننده ها استثنا هستند ، همانند استفاده از i برای نشان دهنده index در loop . #توضیحات (Comments) توضیحات قبل از کدی که به آن اشاره می کنند می آیند و باید همیشه قبل از یک خط خالی باشند . ( تمرکز روی حرف اول از توضیحات و شامل یک دوره پایان زمانی در جملات کامل ). باید یک فاصله بین قرار گیری توضیحات ( // ) و متن توضیحات وجود داشته باشد . توضیحات یک خطی JavaScript someStatement(); // Explanation of something complex on the next line $( 'p' ).doSomething(); 1 2 3 4 someStatement(); // Explanation of something complex on the next line $('p').doSomething(); توضیحات چند خطی باید توضیحات طولانی استفاده کنند می توانید JavaScript Documentation Standards را مطالعه کنید . JavaScript /* * This is a comment that is long enough to warrant being stretched * over the span of multiple lines. */ 1 2 3 4 /* * This is a comment that is long enough to warrant being stretched * over the span of multiple lines. */ توضیحات درون خطی به عنوان یک استثنا زمانی که باید حاشیه نویسی استدلال خاص استفاده شود مجاز است. JavaScript function foo( types, selector, data, fn, /* INTERNAL */ one ) { // Do stuff } 1 2 3 functionfoo(types,selector,data,fn,/* INTERNAL */one){ // Do stuff } #برابری Equality بررسی برابری اکید باید از ( === ) و برابری انتزاعی باید از ( == ) استفاده کند . تنها استثنا زمانی است که برای چک کردن هر دو undefined و null از طریق null باشد . JavaScript // Check for both undefined and null values, for some important reason. if ( undefOrNull == null ) { // Expressions } 1 2 3 4 // Check for both undefined and null values, for some important reason. if(undefOrNull==null){ // Expressions } #چک نوع Type Checks این ارجح ترین راه برای چک کردن نوع یک شئ است : در حال حاضر هرجایی استواری یا تاکید مورد استفاده است ، برای تشویق از متدهای type checking  Underscore.js روی  jQuery استفاده کنید . #رشته ها Strings برای رشته ها از تک کوتیشن استفاده کنید. JavaScript var myStr = 'strings should be contained in single quotes'; 1 varmyStr='strings should be contained in single quotes'; هنگامی که رشته ای شامل تک کوتیشن باشد ، آن نیاز به جایگذاری در یک بک اسلش ( \ ) دارد . JavaScript // Escape single quotes within strings: 'Note the backslash before the \'single quotes\''; 1 2 // Escape single quotes within strings: 'Note the backslash before the \'single quotes\''; دستور سوئیچ Switch Statements کاربرد دستور سوئیچ عموما شما را دلسرد می کند ، اما می تواند زمانی که تعداد زیادی از موارد وجود داشته باشد به ویژه هنگامی که موارد متعدد را می توان با همان بلوک به کار گرفت ، مفید واقع شود یا سقوط منطقی از اهرم باشد ( مورد پیش فرض ). هنگامی که از دستورات سوئیچ استفاده می کنید :از break برای هر مورد غیر از default استفاده کنید. به صراحت اجازه دستورها به “fall through” توجه کنید .در switch دستور case را با یک دندانه اجرا نمایید . JavaScript switch ( event.keyCode ) { // ENTER and SPACE both trigger x() case $.ui.keyCode.ENTER: case $.ui.keyCode.SPACE: x(); break; case $.ui.keyCode.ESCAPE: y(); break; default: z(); } 1 2 3 4 5 6 7 8 9 10 11 12 13 switch(event.keyCode){ // ENTER and SPACE both trigger x() case$.ui.keyCode.ENTER: case$.ui.keyCode.SPACE: x(); break; case$.ui.keyCode.ESCAPE: y(); break; default: z(); } این برای برگرداندن یک مقدار از درون یک دستور switch توصیه نمی شود : از بلوک های case برای تنظیم مقدارها ، سپس ‘return’ در پایان این ارزش ها استفاده کنید . JavaScript function getKeyCode( keyCode ) { var result; switch ( event.keyCode ) { case $.ui.keyCode.ENTER: case $.ui.keyCode.SPACE: result = 'commit'; break; case $.ui.keyCode.ESCAPE: result = 'exit'; break; default: result = 'default'; } return result; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 functiongetKeyCode(keyCode){ varresult; switch(event.keyCode){ case$.ui.keyCode.ENTER: case$.ui.keyCode.SPACE: result='commit'; break; case$.ui.keyCode.ESCAPE: result='exit'; break; default: result='default'; } returnresult; } #آرایه ها Arrays آرایه ها در جاوا اسکریپت باید با استفاده از مختصر نویسی سازنده ‘ [] ‘ به جای نماد ()new Array ایجاد شوند . JavaScript var myArray = []; 1 varmyArray=[]; شما می توانید در طول ساخت یک آرایه آن را مقدار دهی اولیه کنید : JavaScript var myArray = [ 1, 'WordPress', 2, 'Blog' ]; 1 varmyArray=[1,'WordPress',2,'Blog']; #اشیاء Objects راه های زیادی برای ایجاد اشیا در جاوا اسکریپت وجود دارد . نماد تحت اللفظی شی ، {} است که هر دو سازگارترین و همچنین ساده از نظر خوانایی می باشد . var myObj = {}; 1 varmyObj={}; نماد تحت اللفظی شی باید استفاده شود مگر اینکه نیاز شی یک نمونه خاص ، که در این صورت شی باید با صدا زدن تابع سازنده با new ایجاد شود . JavaScript var myObj = new ConstructorMethod(); 1 varmyObj=newConstructorMethod(); خاصیت شی باید از طریق نشانه گذاری دات (نقطه ) دیده شود ، مگر اینکه آن کلید یک متغیر باشد ، یک کلمه رزرو شده باشد یا یک رشته که یک شناسه معتبر نیست : JavaScript prop = object.propertyName; prop = object[ variableKey ]; prop = object['default']; prop = object['key-with-hyphens']; 1 2 3 4 prop=object.propertyName; prop=object[variableKey]; prop=object['default']; prop=object['key-with-hyphens']; #شرایط Yoda | “Yoda” Conditions برای هماهنگی با PHP code standards ، هر زمان که شما در حال مقایسه یک شی به رشته باشید ( بولی، عدد صحیح،ثابت های دیگر یا تحت اللفظی )، همیشه متغیر باید سمت دست راست و ثابت ها یا تحت اللفظ ها باید سمت چپ قرار بگیرند. JavaScript if ( true === myCondition ) { // Do stuff } 1 2 3 if(true===myCondition){ // Do stuff } این برای خواندن کمی عجیب و غریب است. برای تفهیم از آن استفاده کنید. #تکرار Iteration زمانی که تکرار روی یک مجموعه بزرگ با استفاده از حلقه for باشد، آن برای بیشترین مقدار حلقه از متغیر به جای حداکثر محاسبه دوباره هر بار توصیه می شود : JavaScript // Good & Efficient var i, max; // getItemCount() gets called once for ( i = 0, max = getItemCount(); i < max; i++ ) { // Do stuff } // Bad & Potentially Inefficient: // getItemCount() gets called every time for ( i = 0; i < getItemCount(); i++ ) { // Do stuff } 1 2 3 4 5 6 7 8 9 10 11 12 13 // Good & Efficient vari,max; // getItemCount() gets called once for(i=0,max=getItemCount();i<max;i++){ // Do stuff } // Bad & Potentially Inefficient: // getItemCount() gets called every time for(i=0;i<getItemCount();i++){ // Do stuff } تا حدودی از استانداردهای جاوا اسکریپت در وردپرس را مطالعه کردیم البته مجموعه توابع Underscore.js ، توابع تکرار روی jQuery ، کتابخانه JSHint و همچنین مستندات استانداردهای خطی و مستندات استانداردهای خطی جاوا اسکریپت را مطالعه نمایید. در مطلب قبلی می توانید استاندارد HTML در وردپرس را مطالعه نمایید؛ همچنین می توانید در ادامه استانداردهای php در وردپرس را مطالعه نمایید.