اشتراکها
چرا از TypeScript استفاده نمیکنید؟
اشتراکها
آیا باید از asp.net 5 استفاده کنم ؟
اشتراکها
با این خصوصیات CSS شگفت زده شوید
یک نکتهی تکمیلی
شبیه به سشن، چند مورد دیگر را نیز میتوان به همین روش تامین کرد:
شبیه به سشن، چند مورد دیگر را نیز میتوان به همین روش تامین کرد:
ioc.For<IIdentity>().Use(() => HttpContext.Current.User.Identity); ioc.For<HttpContextBase>().Use(() => new HttpContextWrapper(HttpContext.Current)); ioc.For<HttpServerUtilityBase>().Use(() => new HttpServerUtilityWrapper(HttpContext.Current.Server)); ioc.For<HttpRequestBase>().Use(ctx => ctx.GetInstance<HttpContextBase>().Request);
متد حسود یا Feature envy در دسته بندی «کدهایی بیش از اندازه، وابسته به هم» قرار میگیرد. چنین متدی بیش از آنکه از فیلدها و خصوصیات کلاس خود استفاده کند، از فیلدها و خصوصیات شیء دیگری از نوعی دیگر، استفاده میکند.
یکی از اشکالات کدهای بیش از اندازه وابسته به هم، دشواری در نگهداری و تغییر کد است. بهطوریکه در زمان تغییر بخشی از کد، نیاز است بخشهای مرتبط نیز مورد بررسی قرار گیرند. همچنین وابستگی بیش از اندازه کلاسها به یکدیگر قابلیت جداسازی و استفاده مجدد کلاسها را کاهش خواهد داد.
معمولا در نتیجهی جابجایی مسئولیتها، در بخشهای مختلف کد، شاهد چنین کد بد بویی هستیم. یکی از پر تکرارترین شرایط، زمانی است که تعدادی از متغیرهای متد، به کلاس داده خاص خود منتقل شوند.
به طور مثال:
در این کد یک کلاس برای ایجاد یک آیتم صورت حساب نوشته شده است که یک آیتم از قرارداد را به عنوان ورودی دریافت و سپس اقدام به ایجاد یک آیتم صورت حساب میکند.
public class OrderItem { public int Quantity { get; set; } public decimal UnitPrice { get; set; } public decimal Discount { get; set; } } public class InvoiceItemGenerator { private readonly OrderItem _orderItem; public InvoiceItemGenerator(OrderItem orderItem) { _orderItem = orderItem; } public dynamic Generate() { dynamic invoiceItem = new ExpandoObject(); invoiceItem.Amount = _orderItem.Quantity * _orderItem.UnitPrice - _orderItem.Discount; return invoiceItem; } }
اگر به متد Generate دقت کرده باشید متوجه خواهید شد که این متد از خصوصیات شی OrderItem استفاده بیش از اندازه میکند و در حال انجام محاسبهای است که ظاهرا بهتر بود جای دیگری باشد.
در این مثال خاص دو راه حل برای این موضوع وجود دارد:
اول: انتقال منطق محاسبه مبلغ نهایی آیتم، به کلاس OrderItem. مانند:
public class OrderItem { public int Quantity { get; set; } public decimal UnitPrice { get; set; } public decimal Discount { get; set; } public decimal GetFinalAmount() { return Quantity * UnitPrice - Discount; } } public class InvoiceItemGenerator { private readonly OrderItem _orderItem; public InvoiceItemGenerator(OrderItem orderItem) { _orderItem = orderItem; } public dynamic Generate() { dynamic invoiceItem = new ExpandoObject(); invoiceItem.Amount = _orderItem.GetFinalAmount(); return invoiceItem; } }
دوم: انقال کل منطق محاسبه قیمت به کلاسی مثلا با نام InvoiceItemAmountCalculator که در نوشتههای پیشین نمونهای از آن را مشاهده کردیم. در واقع در این روش استراتژی محاسبه قیمت را به صورت کلاسی مجزا پیاده سازی میکنیم.
به طور کلی روشهای رفع چنین بوی بدی به همین دو نوع برخورد ختم خواهد شد. ایجاد یک کلاس استراتژی از نظر اصل Single responsibility مفید است؛ ولی ممکن است کد را در دام «درخت ارث بری موازی» بیندازد.
جمع بندی
این کد بد بو نیز یکی از پرتکرارترین کدهای بد بوی قابل مشاهده در پروژههای نرم افزاری است. یکی از نتایج مستقیم این کد بد بو، وجود کدهای تکراری فراوان برای انجام روالهای تقریبا یکسان است که با رفع این بو به خوبی برطرف میشوند. همچنین رفع این بوی بد به افزایش قابلیت نگهداری کد نیز کمک بسیار زیادی میکند.
ابتدا مثال ساده زیر را درنظر بگیرید:
در اینجا یک تصویر به نام myImage.png به دو طریق، به صفحهای اضافه شده است:
الف) در متد test1، یک وهله از آن تهیه و دو بار به صفحه اضافه شده است.
ب) در متد test2، به نحوی متداول، هربار که نیاز به نمایش تصویری بوده، یک وهله جدید از تصویر تهیه و اضافه شده است.
نکتهی مهم در اینجا، حجم نهایی دو فایل حاصل است:
حجم فایل test2.pdf دقیقا دوبرابر حجم فایل test1.pdf است. علت هم به این بر میگردد که هر وهله جدیدی از شیء Image، صرفنظر از محتوای آن، توسط iTextSharp به صورت جداگانهای در فایل pdf نهایی ثبت خواهد شد.
این مورد خصوصا در تهیه گزارشاتی که تصویری را در پشت صحنه صفحات نمایش میدهد یا در هدر صفحه یک تصویر مشخص و ثابتی قرار گرفته است و نیاز است این تصویر در تمام صفحات تکرار شود، بسیار مهم است و در صورت عدم رعایت نکته تهیه یک وهله از تصاویری تکراری، میتواند حجم فایل را بیجهت تا چندمگابایت افزایش دهد.
using System.Diagnostics; using System.IO; using iTextSharp.text; using iTextSharp.text.pdf; namespace OptimizeImageSizes { class Program { static void Main(string[] args) { test1(); test2(); } private static void test2() { using (var pdfDoc = new Document(PageSize.A4)) { var pdfWriter = PdfWriter.GetInstance(pdfDoc, new FileStream("Test2.pdf", FileMode.Create)); pdfDoc.Open(); var table = new PdfPTable(new float[] { 1, 2 }); table.AddCell(Image.GetInstance("myImage.png")); table.AddCell(Image.GetInstance("myImage.png")); pdfDoc.Add(table); } Process.Start("test2.pdf"); } private static void test1() { using (var pdfDoc = new Document(PageSize.A4)) { var pdfWriter = PdfWriter.GetInstance(pdfDoc, new FileStream("Test1.pdf", FileMode.Create)); pdfDoc.Open(); var table = new PdfPTable(new float[] { 1, 2 }); var image = Image.GetInstance("myImage.png"); table.AddCell(image); table.AddCell(image); pdfDoc.Add(table); } Process.Start("test1.pdf"); } } }
الف) در متد test1، یک وهله از آن تهیه و دو بار به صفحه اضافه شده است.
ب) در متد test2، به نحوی متداول، هربار که نیاز به نمایش تصویری بوده، یک وهله جدید از تصویر تهیه و اضافه شده است.
نکتهی مهم در اینجا، حجم نهایی دو فایل حاصل است:
حجم فایل test2.pdf دقیقا دوبرابر حجم فایل test1.pdf است. علت هم به این بر میگردد که هر وهله جدیدی از شیء Image، صرفنظر از محتوای آن، توسط iTextSharp به صورت جداگانهای در فایل pdf نهایی ثبت خواهد شد.
این مورد خصوصا در تهیه گزارشاتی که تصویری را در پشت صحنه صفحات نمایش میدهد یا در هدر صفحه یک تصویر مشخص و ثابتی قرار گرفته است و نیاز است این تصویر در تمام صفحات تکرار شود، بسیار مهم است و در صورت عدم رعایت نکته تهیه یک وهله از تصاویری تکراری، میتواند حجم فایل را بیجهت تا چندمگابایت افزایش دهد.
با سلام خدمت دوستان عزیز
تصمیم گرفتم در طی چندین پست در حد توانم به آموزش jQuery بپردازم. (مطالب نوشته شده برداشت ازادی از کتاب jQuery in action است)
جی کوئری (jQuery) چیست؟
تصمیم گرفتم در طی چندین پست در حد توانم به آموزش jQuery بپردازم. (مطالب نوشته شده برداشت ازادی از کتاب jQuery in action است)
جی کوئری (jQuery) چیست؟
jQuery یک کتابخانه بسیار مفید برای جاوا اسکریپت است. بسیار ساده و کارآمد است و مشکل جاوا اسکریپت را برای تطابق با مرورگرهای اینترنتی مختلف برطرف نموده است؛ یادگیریjQuery بسیار آسان است. در جی کوئری کد جاوا اسکریپت از فایل HTML جدا شده و بنابراین کنترل کدھا و بھینهسازی آنھا بسیار سادهتر خواھد شد. توابعی برای کار با AJAX فراھم نموده و در این زمینه نیز کار را بسیار ساده کرده است. در جی کوئری میتوان از خصوصیت فراخوانی زنجیرهای متدھا استفاده نمود و این باعث میشود چندین کد فقط در یک سطر قرار گیرد و در نتیجه کد بسیار مختصر گردد. در مقایسه با سایر ابزارهایی که تاکید عمدهای بروی تکنیکهای هوشمند جاوا اسکریپت دارند، هدف جی کوئری تغییر تفکر سازندگان وب سایتها، به ایجاد صفحههایی با کارکرد بالا میباشد. به جای صرف زمان برای مقابله با پیچیدگیهای جاوا اسکریپت پیشرفته، طراحان میتوانند با استفاده از زمان و دانش خود در زمینهی CSS، HTML، XHTML و جاوا اسکریپتهای ساده، عناصر صفحه را مستقیما دستکاری کنند و از همین طریق تغییرهای گشترده و سریعی انجام دهند.
نکته: برای استفاده از جی کوئری باید HTML و CSS و جاوا اسکریپت آشنایی داشته باشید.
چگونه از جی کوئری استفاده کنیم؟
برای استفاده از جی کوئری باید ابتدا فایل آن را از سایت آن دانلود کرده و در پروژه خود استفاده نمایید. البته روشهای دیگری برای استفاده از این فایل وجود دارد که در آینده بیشتر با آن آشنا خواهیم شد. برای استفاده از این فایل در پروژه باید به شکل زیر آن را به صفحه HTML خود معرفی کنیم.
سپس بعد از معرفی خط فوق در قسمت head صفحه باید کدهای خود را در یک تگ script بنویسیم.
کوتاه کردن کد: هر زمان شما خواسته باشید کارکرد یک صفحه وب را پویاتر کنید، در اکثر مواقع به ناچار این کار از طریق عناصری بروی صفحه انجام داده اید که با توجه به انتخاب شدن آنها، صفحه کارکردی خاص خواهد داشت. مثلا در جاوا اسکریپت اگر بخواهیم عنصری را که در یک radioGroup انتخاب شده است را برگردانیم باید کدهای زیر را بنویسیم:
اما اگر بخواهیم همین کد را با جی کوئری بنویسیم:
ممکن است مثال بالا کمی گنگ باشد نگران نباشید در آینده با این دستورات بیشتر آشنا خواهیم شد.
قدرت اصلی جی کوئری برگفته از انتخابکنندهها (Selector) هاست، انتخابکننده ، یک عبارت است که دسترسی به عنصری خاص بر روی صفحه را موجب میشود؛ انتخابکننده این امکان را فراهم میسازد تا به سادگی عنصر مورد نظر را مشخص و به آن دسترسی پیدا کنیم که در مثال فوق، عنصر مورد نظر ما گزینه انتخاب شده از myRadioGroup بود.
Unobtrusive JavaScript: اگر پیش از پیدایش CSS در کار ایجاد صفحههای اینترنتی بودهاید حتما مشکلات و مشقات آن دوران را به خاطر میآورید. در آن زمان برای فرمتدهی به اجزای مختلف صفحه ، به ناچار علائم فرمتدهی را به همراه دستورات خود اجزا، در صفحههای HTML استفاده میکردیم. اکنون بسیار بعید به نظر میرسد کسی ترجیح دهد فرمتدهی اجزا را به همراه دستورهای HTML آن انجام دهد. اگر چه هنوز دستوری مانند زیر بسیار عادی به نظر میآید:
نکته ای که در مثال فوق حائز اهمیت است، این است که خصوصیات ظاهری دکمه ایجاد شده از قبیل فونت و عنوان دکمه، از طریق تگ <font> و یا پارامترهای قابل استفاده در خود دستور دکمه تعیین نشده است، بلکه CSS وظیفه تعیین آنها را دارد. اما اگرچه در این مثال فرمتدهی و دستور خود دکمه از یکدیگر جدا شدهاند؛ شاهد ترکیب این دکمه با رفتار آن هستیم. در جی کوئری میتوانیم رفتار را از اجزا به آسانی جدا کنیم.
جی کوئری نیز از چنین انتخابکنندههایی استفاده میکند، الته نه تنها از انتخابکنندههایی که هم اکنون در CSS موجود میباشند، بلکه برخی از انتخابکنندههایی که هنوز در تمام مرورگرها پشتیبانی نمیشوند.
برای انتخاب مجموعهای از عناصر از یکی از دو Syntax زیر استفاده میکنیم.
ممکن است در ابتدا ()$ کمی نا معمول به نظر آید، اما اکثر کسانی که با جی کوئری کار میکنند از اختصار و کوتاهی این ساختار استفاده میکنند.
مثال زیر نمونهای دیگر است که در آن مجموعهای از تمام لینکهایی که درون تگ <p> قرار دارند را انتخاب میکند:
تابع ()$ که در حقیقت نام خلاصهای برای ()jQuery میباشد، نوع خروجی مخصوصی دارد که شامل یک آرایه از اشیایی میشود که انتخابکننده آن را برگزیده است. این نوع خروجی این مزیت را دارد که شمار زیادی متد از پیش تعریف شده را داراست که به سادگی قابل اعمال میباشند.
در اصطلاح برنامه نویسی به چنین توابعی که گروهی از عناصر را جمع میکنند، Wrapper میگویند زیرا تمام عناصر مطلوب را تحت یک شی بستهبندی میکند. در جیکوئری به آنها Wrapped Set یا jQuery Wrapper میگویند و به متدهایی که قابل اعمال بروی اینها به نام jQuery Wrapper Methodes شناخته میشوند.
در مثال زیر میخواهیم تمام عناصر <div> در صورتی که دارای کلاس notLongForThisWorldباشند را مخفی (با فید شدن) کنیم.
یکی از مزیتهای اکثر متدهای قابل اجرا بروی مجموعه عناصر انتخاب شده آن است که خروجی خود آنها مجموعهای دیگر است. به این معنا که خروجی این متد، آماده اعمال یک متد دیگر است.
فرض کنید در مثال بالا بخواهیم پس از مخفی کردن هر <div> بخواهیم یک کلاس به نام removedبه آن بیافزاییم. به این منظور میتوان کدی مانند زیر نوشت:
این زنجیره متدها میتوانند به هرتعداد ادامه پیدا کند.
چند نمونه انتخاب کننده:
جهت مطالعه بیشتر میتوانید از این منابع ^ و ^ و ^ و ^ و ^ استفاده کنید.
موفق و موید باشید
نکته: برای استفاده از جی کوئری باید HTML و CSS و جاوا اسکریپت آشنایی داشته باشید.
چگونه از جی کوئری استفاده کنیم؟
برای استفاده از جی کوئری باید ابتدا فایل آن را از سایت آن دانلود کرده و در پروژه خود استفاده نمایید. البته روشهای دیگری برای استفاده از این فایل وجود دارد که در آینده بیشتر با آن آشنا خواهیم شد. برای استفاده از این فایل در پروژه باید به شکل زیر آن را به صفحه HTML خود معرفی کنیم.
<html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> </head> <body> </body> </html>
کوتاه کردن کد: هر زمان شما خواسته باشید کارکرد یک صفحه وب را پویاتر کنید، در اکثر مواقع به ناچار این کار از طریق عناصری بروی صفحه انجام داده اید که با توجه به انتخاب شدن آنها، صفحه کارکردی خاص خواهد داشت. مثلا در جاوا اسکریپت اگر بخواهیم عنصری را که در یک radioGroup انتخاب شده است را برگردانیم باید کدهای زیر را بنویسیم:
var checkedValue; var elements = document.getElementByTagName ('input'); for (var n = 0; n < elements.length; n++) { if (elements[n].type == 'radio' && elements[n].name == 'myRadioGroup' && elements[n].checked) { checkedValue = elements[n].value; } }
var checkedValue = $ ('[name="myRadioGroup"]:checked').val();
قدرت اصلی جی کوئری برگفته از انتخابکنندهها (Selector) هاست، انتخابکننده ، یک عبارت است که دسترسی به عنصری خاص بر روی صفحه را موجب میشود؛ انتخابکننده این امکان را فراهم میسازد تا به سادگی عنصر مورد نظر را مشخص و به آن دسترسی پیدا کنیم که در مثال فوق، عنصر مورد نظر ما گزینه انتخاب شده از myRadioGroup بود.
Unobtrusive JavaScript: اگر پیش از پیدایش CSS در کار ایجاد صفحههای اینترنتی بودهاید حتما مشکلات و مشقات آن دوران را به خاطر میآورید. در آن زمان برای فرمتدهی به اجزای مختلف صفحه ، به ناچار علائم فرمتدهی را به همراه دستورات خود اجزا، در صفحههای HTML استفاده میکردیم. اکنون بسیار بعید به نظر میرسد کسی ترجیح دهد فرمتدهی اجزا را به همراه دستورهای HTML آن انجام دهد. اگر چه هنوز دستوری مانند زیر بسیار عادی به نظر میآید:
<button type="button" onclick="document.getElementById('xyz').style.color='red';"> Click Me </button>
مجموعه عناصر در جی کوئری:
زمانی که CSS به عنوان یک تکنولوژی به منظور جداسازی طراحی از ساختار به دنیای صفحههای اینترنتی معرفی شد، میبایست راهی برای اشاره به اجزای صفحات از طرف فایل CSS نیز معرفی میشد. این امر از طریق انتخابکنندهها (Selector) صورت پذیرفت.
برای مثال انتخابکننده زیر، به تمام عناصر <a> اشاره دارد که در یک عنصر <p> قرار گرفتهاند:
p a
برای انتخاب مجموعهای از عناصر از یکی از دو Syntax زیر استفاده میکنیم.
$(Selector) یا jQuery(Selector)
مثال زیر نمونهای دیگر است که در آن مجموعهای از تمام لینکهایی که درون تگ <p> قرار دارند را انتخاب میکند:
$("p a")
در اصطلاح برنامه نویسی به چنین توابعی که گروهی از عناصر را جمع میکنند، Wrapper میگویند زیرا تمام عناصر مطلوب را تحت یک شی بستهبندی میکند. در جیکوئری به آنها Wrapped Set یا jQuery Wrapper میگویند و به متدهایی که قابل اعمال بروی اینها به نام jQuery Wrapper Methodes شناخته میشوند.
در مثال زیر میخواهیم تمام عناصر <div> در صورتی که دارای کلاس notLongForThisWorldباشند را مخفی (با فید شدن) کنیم.
$("div.notLongForThisWorld").fadeOut();
فرض کنید در مثال بالا بخواهیم پس از مخفی کردن هر <div> بخواهیم یک کلاس به نام removedبه آن بیافزاییم. به این منظور میتوان کدی مانند زیر نوشت:
$("div.notLongForThisWorld").fadeOut().addClass("removed");
چند نمونه انتخاب کننده:
نتیجه | انتخاب کننده | |
تمام <p>های زوج را انتخاب میکند | $('p:even') | |
سطر اول هر جدول را انتخاب میکند | $("tr:nth-child(1)"); | |
<div>هایی که مستقیما در <body> تعریف شده باشند را انتخاب میکند. | $("body > div"); | |
لینک هایی که به یک فایل pdf اشاره دارند را انتخاب میکند. | $("a[href$=pdf]"); | |
تمام <div> هایی که مستقیما در <body> معرفی شده اند و دارای لینک میباشند را انتخاب میکند. | $("body > div:has(a)") | |
ادامه مطالب در پستهای بعدی تشریح خواهد شد.
جهت مطالعه بیشتر میتوانید از این منابع ^ و ^ و ^ و ^ و ^ استفاده کنید.
موفق و موید باشید