اشتراکها
اشتراکها
معرفی DirectX 12 Ultimate
نظرات مطالب
بهبود کارآیی حلقههای foreach در دات نت 7
یک نکتهی تکمیلی: آشنایی با مفهوم «C# Lowering»
در این مطلب، جهت بررسی درک علت یکسان بودن کارآیی حلقههایی که از دیدگاه ما یکی نیستند، از قابلیت نمایش #Low-level C استفاده شد که نام اصلی آن «C# Lowering» است. Lowering به معنای ترجمهی امکانات سطح بالای یک زبان به امکانات سطح پایین آن است. یعنی حاصل عملیات صورت گرفته نیز باز به همان زبان اولیه است که نمونهی آن، تبدیل یک حلقهی foreach سطح بالا به نمونهی سطح پایینی است که توسط NET Runtime. بهتر درک شده و سادهتر اجرا میشود.
مزایای Lowering
- بهبود کارآیی برنامه: برای مثال یکی از کارهایی که در این بین عموما انجام میشود «Loop unrolling» است. یعنی یک حلقه به چندین حلقهی کوچکتر تقسیم میشود تا سربار instructions کنترلی حلقه کاهش پیدا کنند.
- طراحی سادهتر زبان: اینکار به تیم طراحی زبان امکان نوشتن کدهای اضافهتری را میدهد که کار برنامه نویسها را کمتر میکند. برای مثال یک record واقعا چیزی نیست بجز یک کلاس پیاده سازی کنندهی IEquatable به صورت خودکار و در پشت صحنه.
Lowering چه زمانی رخ میدهد؟
Lowering جزئی از عملیات صورت گرفتهی در حین کامپایل است. زمانیکه دستور dotnet build را صادر میکنیم، ابتدا semantics & syntax analysis صورت میگیرد تا اگر برای مثال خطای دستوری وجود دارد، مشخص شود. سپس کدها به CIL یا Common intermediate language تبدیل میشوند. در حین این قسمت است که عملیات lowering نیز انجام میشود.
اگر علاقمند به مشاهدهی این کد #C ثانویهی تولید شدهی توسط کامپایلر هستید، میتوان از ابزار https://sharplab.io نیز استفاده کرد. برای مثال در سمت چپ آن کدهای زیر را قرار دهید:
using System; using System.Collections.Generic; var list = new List<int> { 1, 2 }; foreach(var item in list) Console.Write(item);
اشتراکها
تغییر مجوز Elasticsearch
In September of 2014, at the ng-Europe conference, the Angular team announced what would be known as Angular 2.Is was a drastic change that left many developers angry. One of the main sources of complaint was the lack of a migration path.
در سال 2014 و با معرفی آنگولار 2، که یک rewrite کامل از فریم ورک آنگولار بود، بسیاری از توسعه دهندگان بخاطر تغییرات اساسی به سمت فریم ورکهای دیگر از جمله کتابخانهی ری اکت کوچ کردند.
اشتراکها
وِیژگی های EF در نسخه های مختلف
در بخش قبل با نصب فریم ورک vuetify و بخشی از کامپوننتهای آن آشنا شدیم .
نتیجعه قطعه کد بالا به این صورت است.
نتیجه قطعه کد بالا بدین ترتیب است :
نتیجه قطعه کد بالا :
Order :
بهوسیلهی order میتوان ترتیب قرارگیری آیتمهای Grid را مشخص کرد. فرض کنید یک ردیف سه ستون داریم و میخواهیم زمانیکه این آیتمها در مروگر نمایش داده میشوند، ترتیب قرارگیری آنها متناسب با نیاز ما باشد که با استفاده از دستور order این کار صورت میپذیرد.
نکته: این کار برای بحث seo مورد استفاده قرار میگیرد.
در پایین با یک مثال، چگونگی انجام اینکار شرح داده شدهاست:در توضیح کد پایین اینگونه میتوان گفت که درون کامپوننت <v-layout>، در خط چهارم برنامه، سه کامپوننت <v-flex> قرار داده شدهاند که به وسیله order، ترتیب نمایش آنها را مشخص کردهایم . در <v-flex> اول order با مقدار md2 مشخص شدهاست. بدین معنا که محتویات این <v-flex>، درون خانه دوم نمایش داده شود و به همین ترتیب برای <v-flex>های بعدی نیز این مقادیر تنظیم شدهاند.
<div id="app"> <v-app id="inspire"> <v-container fluid> <v-flex xs4 order-md2> <v-card dark tile flat color="red lighten-1"> <v-card-text>#1</v-card-text> </v-card> </v-flex> <v-flex xs4 order-md3> <v-card dark tile flat color="red lighten-2"> <v-card-text>#2</v-card-text> </v-card> </v-flex> <v-flex xs4 order-md1> <v-card dark tile flat color="red darken-1"> <v-card-text>#3</v-card-text> </v-card> </v-flex> </v-layout> <v-layout row wrap> <v-flex xs12 sm6 md3 order-md4 order-sm2> <v-card dark tile flat color="red darken-2"> <v-card-text>#1</v-card-text> </v-card> </v-flex> <v-flex xs12 sm6 md3 order-md3 order-sm1> <v-card dark tile flat color="deep-orange lighten-1"> <v-card-text>#2</v-card-text> </v-card> </v-flex> <v-flex xs12 sm6 md3 order-md2 order-sm4> <v-card dark tile flat color="deep-orange darken-3"> <v-card-text>#3</v-card-text> </v-card> </v-flex> <v-flex xs12 sm6 md3 order-md1 order-sm3> <v-card dark tile flat color="deep-orange"> <v-card-text>#4</v-card-text> </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>
Direction & Align :
به وسیله تنظیم مقادیر Direction & align برای کامپوننت <v-flex> میتوان برای ایجاد فواصل بین سطرها و ستونها و همچنین نحوه چینش آنها استفاده کرد. اگر به قطعه کد زیر توجه داشته باشید، این تنظیمات شامل justify-space-between , justify-space-around , justify-center هستند که عملکرد هر کدام به صورت جداگانه نمایش داده شده است.
<div id="app"> <v-app id="inspire"> <v-container fluid grid-list-xl> <v-layout row justify-space-between> <v-flex xs2> <v-card dark color="primary"> <v-card-text>one</v-card-text> </v-card> </v-flex> <v-flex xs2> <v-card dark color="secondary"> <v-card-text>two</v-card-text> </v-card> </v-flex> <v-flex xs2> <v-card dark color="accent"> <v-card-text>three</v-card-text> </v-card> </v-flex> </v-layout> <v-layout row justify-space-around> <v-flex xs2> <v-card dark color="primary"> <v-card-text>one</v-card-text> </v-card> </v-flex> <v-flex xs2> <v-card dark color="secondary"> <v-card-text>two</v-card-text> </v-card> </v-flex> <v-flex xs2> <v-card dark color="accent"> <v-card-text>three</v-card-text> </v-card> </v-flex> </v-layout> <v-layout row justify-center> <v-flex xs2> <v-card dark color="primary"> <v-card-text>one</v-card-text> </v-card> </v-flex> <v-flex xs2> <v-card dark color="secondary"> <v-card-text>two</v-card-text> </v-card> </v-flex> <v-flex xs2> <v-card dark color="accent"> <v-card-text>three</v-card-text> </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>
Grow & Shrink :
در لغت، Grow به معنی رشد و توسعه دادن و Shrink به معنی کوچک کردن میباشد که در اینجا نیز دقیقا همین عملکرد را دنبال میکنند. هرگاه برای یک کامپوننت <v-flex> مقدار Grow را تنظیم نماییم، آن <v-flex> تمامی قسمت خالی عرض صفحه را به خود اختصاص میدهد. اما اگر برای کامپوننت <v-flex> مقدار Shrink را تنظیم نماییم، به میزان محتویات درونی خود جا اشغال مینماید.
نکته: pa-1 در اینجا به معنی padding میباشد که به وسیله pa-1 در چهار جهت بالا، پایین، چپ و راست، padding اعمال میشود.
<div id="app"> <v-app id="inspire"> <v-container fluid> <v-layout row> <v-flex grow pa-1> <v-card dark color="green darken-3"> <v-card-text>#1 Im a Grow Flex</v-card-text> </v-card> </v-flex> <v-flex shrink pa-1> <v-card dark color="green darken-1"> <v-card-text>#2 Im a Shrink Flex</v-card-text> </v-card> </v-flex> </v-layout> <v-layout row> <v-flex grow pa-1> <v-card dark color="green darken-1"> <v-card-text>#1 Im a Grow Flex</v-card-text> </v-card> </v-flex> <v-flex shrink pa-1> <v-card dark color="green lighten-1"> <v-card-text>#2 Im a Shrink Flex</v-card-text> </v-card> </v-flex> <v-flex grow pa-1> <v-card dark color="green darken-4"> <v-card-text>#3 Im a Grow Flex</v-card-text> </v-card> </v-flex> </v-layout> <v-layout row> <v-flex shrink pa-1> <v-card dark color="green darken-3"> <v-card-text>#1 Im a Shrink Flex</v-card-text> </v-card> </v-flex> <v-flex grow pa-1> <v-card dark color="green"> <v-card-text>#2 Im a Grow Flex</v-card-text> </v-card> </v-flex> <v-flex shrink pa-1> <v-card dark color="green lighten-1"> <v-card-text>#3 Im a Shrink Flex</v-card-text> </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>
نتیجه قطعه کد بالا:
Nested grid :
در این فریم ورک قابلیت تعریف nested grid همانند سایر CSS فریم ورکها مقدور است. nested gridها در واقع ردیفهایی هستند که درون ستونها قرار میگیرند. بدین وسیله میتوان هر ستون را به 12 قسمت، تقسیم بندی کرد.
<div id="app"> <v-app id="inspire"> <v-container fluid grid-list-md> <v-layout row wrap> <v-flex d-flex xs12 sm6 md4> <v-card color="purple" dark> <v-card-title primary>Lorem</v-card-title> <v-card-text>{{ lorem }}</v-card-text> </v-card> </v-flex> <v-flex d-flex xs12 sm6 md3> <v-layout row wrap> <v-flex d-flex> <v-card color="indigo" dark> <v-card-text>{{ lorem.slice(0, 70) }}</v-card-text> </v-card> </v-flex> <v-flex d-flex> <v-layout row wrap> <v-flex v-for="n in 2":key="n" d-flex xs12 > <v-card color="red lighten-2" dark > <v-card-text>{{ lorem.slice(0, 40) }}</v-card-text> </v-card> </v-flex> </v-layout> </v-flex> </v-layout> </v-flex> <v-flex d-flex xs12 sm6 md2 child-flex> <v-card color="green lighten-2" dark> <v-card-text>{{ lorem.slice(0, 90) }}</v-card-text> </v-card> </v-flex> <v-flex d-flex xs12 sm6 md3> <v-card color="blue lighten-2" dark> <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text> </v-card> </v-flex> </v-layout> </v-container> </v-app> </div>