.NET Tips | جستجوها: نتایج مشابه «طراحی گردش کاری با استفاده از State machines

مطالب دوره‌ها

مفاهیم کلیدی مورد استفاده در مدل سازی داده کاوی (بخش دوم)

مفاهیم کلیدی

Case مهمترین مفهومی است که در تحلیل یک مسئله داده کاوی می‌بایست شناسائی شود و تشخیص اشتباه در شناسائی آن منجر به عدم موفقیت پروژه داده کاوی خواهد شد. Case به معنای یک موجودیت پایه از اطلاعات می‌باشد که عملیات داده کاوی بر روی آن انجام می‌شود و هدف از معرفی آن، معرفی ساختار مسئله به موتور داده کاوی است. هر Case شامل مجموعه ای از ویژگی‌ها (Attributes) می‌باشد؛ مانند سن، جنسیت. ویژگی‌ها می‌توانند دارای یک مجموعه از مقادیر ممکن باشند که به آنها وضعیت یا مقدار (State/Value) می‌گویند؛ مانند جنسیت که دارای دو وضعیت زن یا مرد می‌باشد.

Case می‌تواند ساده باشد؛ برای نمونه زمانیکه قصد دارید «از اطلاعات آماری مشتریان به منظور تحلیل ریسک وام گرفتن» استفاده کنید، بدین ترتیب هر Case شامل اطلاعات یک مشتری و یا ردیفی از داده مشتریان است.

Case می‌تواند کمی پیچیده‌تر باشد؛ برای مثال زمانیکه می‌خواهید «رفتار خرید مشتری را بر اساس تاریخچه خرید مشتری» تحلیل کنید، که در این صورت هر Case شامل یک رکورد از اطلاعات مشتری به همراه لیستی از محصولاتی که خریداری کرده است، می‌باشد. (توجه کنید تعریف رفتار به طور ضمنی، بیانگر عملکرد در طول زمان می‌باشد)

Case مثال فوق نمونه ای از Nested Case است، که به اطلاعات Details در ساختار Master/Details اشاره دارد. چنانچه Case ای از نوع Nested باشد، الگوریتم‌ها به Case ای به عنوان ورودی فرمت مجموعه ردیف سلسله مراتبی (Hierarchical Row-set) نیاز دارند.

Case Key مشخصه ای است که یکتا بودن هر Case را مشخص می‌کند و اغلب Primary Key یک جدول رابطه ای است، همچنین ممکن است یک کلید ترکیبی باشد. ذکر این نکته ضروری است که بدانیم Case Key فقط یک شناسه است و شامل هیچ الگویی نمی‌باشد و بدین ترتیب غالباً بوسیله الگوریتم‌های داده کاوی نادیده گرفته می‌شود.

Nested Key مهمترین مشخصه ویژگی از بخش Nested هر Case است و در واقع کلید معنایی تحلیل می‌باشد که شامل اطلاعات مفیدی درباره‌ی الگوهاست. به بیان دیگر ویژگی است که عناصر مختلف موجود در Nested Case را به ازای هر Case تفکیک می‌کند. همچنین در نظر داشته باشید که Nested Key یک شناسه نیست و دارای مفهومی متفاوت با Foreign Key است، بدین ترتیب سایر مشخصه‌های دیگر در بخش Nested؛ جهت توصیف Nested Key بکار می‌روند. برای نمونه چنانچه مدلی برای یادگیری الگوهایی درباره رفتار خرید مشتری داشته باشیم، Nested Key برابر با محصول و میزان خرید است.

به همین ترتیب Case Table جدولی است شامل اطلاعات Case و بطور مشابه Nested Table جدولی است که شامل اطلاعات مرتبط با قسمت Nested از Case می‌باشد. از اپراتور Shape به منظور پیوند میان Case Table و Nested Table استفاده می‌شود.

در خصوص Attribute ها (ویژگی ها) از آنجا که هر ویژگی؛ توصیف کننده مسئله داده کاوی از یک منظر خاص می‌باشد، می‌توان اینگونه بیان نمود که هر چه تعداد ویژگی‌ها در یک پروژه بیشتر باشد، توان تحلیل در آن پروژه افزایش می‌یابد. انواع ویژگی‌ها به دو دسته Discrete (گسسته) و Continuous (پیوسته) تقسیم می‌شوند. برای نمونه ویژگی جنسیت، تحصیلات و ... گسسته و همچنین ویژگی سن، درآمد و ... پیوسته هستند. به مقادیر موجود در یک ویژگی پیوسته Value و بطور مشابه به وضعیت‌های موجود در یک ویژگی گسسته State گفته می‌شود. ویژگی‌ها در یک الگوریتم از حیث کاربرد (Attribute Usage) به دو دسته Input و Output تقسیم می‌شوند.

یک الگوریتم از ویژگی‌های ورودی (Input) استفاده می‌کند تا الگویی برای پیش بینی ویژگی‌های خروجی (Output) پیدا کند. همچنین لازم است در نظر داشته باشید که برخی الگوریتم‌ها نظیر Naïve Bayes صرفاً با داده‌های گسسته و بطور مشابه الگوریتم هایی نظیر Logistic Regression تنها با مقادیر پیوسته کار می‌کنند.

‫۹ سال و ۱۲ ماه قبل، یکشنبه ۱۸ آبان ۱۳۹۳، ساعت ۱۶:۰۳

میثم خوشبخت

مطالب

معرفی Selector های CSS - قسمت 1

1- .class

این Selector تگ‌هایی را انتخاب می‌نماید که عضو یک کلاس خاص باشند.

<style>
    .first{ color: red}
    .content{color:blue}
</style>
<div class="first">Text 1</div>
<div>Text 2</div>
<p class="first">Text 3</p>
<div class="content">Text 4</div>

در مثال فوق Text 1 و Text 3 به رنگ قرمز و Text 4 به رنگ آبی نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	.class	1

2- #id

این Selector تگی را انتخاب می‌کند که دارای یک id خاص می‌باشد.

<style>
    #pass {
        color: red;
    }        
</style>
<input type="password" id="pass"/>

در مثال فوق محتوای کادر رمز عبور به رنگ قرمز نمایش می‌یابد.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	#id	1

3- E

جهت انتخاب تگ‌ها براساس عنوان آنها استفاده می‌شود.

<style>
    div {
        color: red;
    }
</style>
<div>Text 1</div>
<p>Text 2</p>
<div>Text 3</div>

در مثال فوق Text 1 و Text 3 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	E	1

4- *

این Selector تمامی تگ‌ها را انتخاب می‌نماید

<style>
    * {
        color: red;
    }
</style>
<div>Text 1</div>
<input type="text" value="Text 2"/>
<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

در مثال فوق رنگ متن تمامی تگهای فوق قرمز خواهد شد.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
3.1	9.6	7.0	2.0	4.0	*	2

5- S1 S2

تمامی المنت‌های S2 که فرزند S1 می‌باشند، انتخاب خواهند شد.

<style>
    div span {
        color:red
    }
</style>
<div>
    <h1>Text 1</h1>
    <span>Text 2</span>
    <p>
        <span>Text 3</span>
        <div>Text 4</div>
    </p>
    <span>Text 5</span>
</div>

در مثال فوق Text 2، Text 3 و Text 5 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	S1 S2	1

6- S1>S2

تمامی المنت‌های S2 که فرزند مستقیم S1 می‌باشند، انتخاب خواهند شد.

<style>
    div>span {
        color:red
    }
</style>
<div>
    <h1>Text 1</h1>
    <span>Text 2</span>
    <p>
        <span>Text 3</span>
        <div>Text 4</div>
    </p>
    <span>Text 5</span>
</div>

در مثال فوق Text 2 و Text 5 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	7.0	Yes	Yes	S1>S2	2

7- S1+S2

تمامی المنت‌های S2 که هم تراز S1 و دقیقا بعد از S1 قرار گرفته اند را انتخاب می‌نماید.

<style>
    h1+p {
        color: red;
    }
</style>
<div>
    <h1>Text 1</h1>
    <p>Text 2</p>
    <div>Text 3</div>
    <p>Text 4</p>
    <h1>
        <p>Text 5</p>
    </h1>
    <p>Text 6</p>
</div>

در مثال فوق Text 2 و Text 6 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	7.0	Yes	Yes	S1+S2	2

8- S1~S2

تمامی المنت‌های S2 که هم تراز S1 می‌باشند و بعد از S1 قرار گرفته اند را انتخاب می‌نماید.

<style>
    div ~ p {
        color: red;
    }
</style>
<div>
    <h1>Text 1</h1>
    <p>Text 2</p>
    <div>Text 3</div>
    <p>Text 4</p>
    <h1>
        <p>Text 5</p>
    </h1>
    <p>Text 6</p>
</div>

در مثال فوق Text 4 و Text 6 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
3.2	9.6	7.0	3.5	4.0	S1~S2	3

9- S1!>S2

این Selector المنت‌های S1 را انتخاب می‌کند که والد مستقیم S2 می‌باشند.

<style>
    div!>span {
            border: 1px solid red;
        }
</style>
<div>
    <h1>Text 1</h1>
    <div>
        <span>Text 2</span>
        <h1>Text 3</h1>
        <p>Text 4</p>
    </div>
    <div>Text 5</div>
</div>

در مثال فوق کادری قرمز رنگ را دور آن div که شامل محتوای Text 2، Text 3 و Text 4 می‌باشد، ترسیم خواهد نمود.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
No	No	No	No	No	S1!>S2	4

10- S1 /attribute/ S2

تمامی المنت‌های S2 انتخاب می‌شوند که توسط یک attribute از S1 به id المنت S2 ارجاع داده است.

<style>
    label /for/ input {
        color: red;
    }
</style>
<label for="user">User Name:</label>
<input type="text" id="user"/>
<label>Password:</label>
<input type="password" id="pass"/>

در مثال فوق، اولین تگ input که id آن user می‌باشد و توسط تگ label و با استفاده از ویژگی for (به id تگ input) ارجاع داده شده است، انتخاب و محتوای آن قرمز می‌شود.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
No	No	No	No	No	S1 /attribute/ S2	4

‫۹ سال و ۸ ماه قبل، چهارشنبه ۲۲ بهمن ۱۳۹۳، ساعت ۲۳:۳۰

وحید نصیری

نظرات مطالب

چند نکته کاربردی درباره Entity Framework

- سورس آزمایش به عمد ارسال شد، تا بتونید خودتون اجراش کنید و اندازه گیری کنید. این‌ها چشم بندی نبوده یا نظر شخصی نیست. یک سری اندازه گیری است.
- توضیح دادم در انتهای همان آزمایش. برای تکرار مجدد: چون یکبار رفت و برگشت کمتری داره به دیتابیس. چون تغییر State یک شیء و ورود آن به سیستم ردیابی، خیلی سریعتر است از واکشی اطلاعات از بانک اطلاعاتی. اما در مورد لیستی از اشیاء، توسط context.Factors سیستم EF دسترسی به IDها پیدا می‌کنه (در هر دو حالت متصل و منقطع). اگر سیستم ردیابی خاموش شود، برای اتصال مجدد این‌ها زمان خواهد برد (چون IDهای دریافت شده از بانک اطلاعاتی ردیابی نمی‌شوند)، اما در حالت متصل، همان بار اولی که کوئری گرفته شده، همانجا اتصال هم برقرار شده و در حین به روز رسانی اطلاعات می‌داند چه تغییراتی رخ داده و چگونه سریعا باید محاسبات رو انجام بده. اما در حالت منقطع توسط متد DetectChanges تازه شروع به اتصال و محاسبه می‌کند.

‫۱۱ سال و ۴ ماه قبل، یکشنبه ۲ تیر ۱۳۹۲، ساعت ۰۴:۲۱

مسعود پاکدل

نظرات مطالب

EF Code First #14

درسته جناب نصیری ولی در صورتی که پروژه به صورت SOA باشه مثل WCF (خواه Win App باشد خواه Web App) دیگه Context در سطح فرم معنی پیدا نمی‌کنه . در این حالت اصلا Context سمت کلاینت وجود ندارد که بتونیم ردیابی خودکار اشیا را به عهده اون بزاریم. سمت کلاینت فقط مدل برنامه است به علاوه یک ChannelFactory برای ارتباط با سرور .در این حالت خود مدل‌های برنامه باید توانایی Track کردن رو داشته باشند و Context سمت برنامه با استفاده از این اطلاعات Track شده توسط Entity عملیات CRUD را رو دیتابیس اجرا می‌کنه.
در این حالت می‌تونیم N تا Entity رو که هر کدوم یک State مشخص دارند مثل Addedd , Deleted , modified توسط متد ApplyChanged که برای ObjectContext تعریف شده به ObjectStateManager اضافه کنیم و در نهایت با دستور SaveChanged اطلاعات به صورت نهایی روی دیتابیس اعمال می‌شوند.
توضیحات تکمیلی (^ )

‫۱۱ سال و ۵ ماه قبل، یکشنبه ۵ خرداد ۱۳۹۲، ساعت ۰۳:۴۹

مهمان

نظرات مطالب

آشنایی با NuGet - قسمت اول

‫سلام،

یک سوال بی‌ربط به NuGet:

disqus در وبلاگ من به خوبی کار نمی‌کند. در واقع box مربوط به ورود کامنت مدت زمان خیلی خیلی زیادی به حالت ‎Please wait می‌ماند. آن هم ظاهراً به خاطر بلایی که بر سر mediacdn.disqus.com آمده.

ایده‌ای برای حل آن دارید؟

افشار
blog.afsharm.com

‫۱۳ سال و ۷ ماه قبل، دوشنبه ۲۲ فروردین ۱۳۹۰، ساعت ۲۱:۳۴

وحید نصیری

مطالب

پیاده سازی پروژه‌های React با TypeScript - قسمت هشتم - تعیین نوع کامپوننت‌های کلاسی

با ارائه‌ی React Hooks، استفاده‌ی از کامپوننت‌های کلاسی، کمتر و کمتر شده‌اند. اما جهت تکمیل و خاتمه‌ی سری جاری، این نوع را نیز در این قسمت بررسی می‌کنیم.

تعیین نوع props و state در کامپوننت‌های کلاسی

برای این منظور ابتدا فایل جدید src\components\BigC.tsx را ایجاد کرده و سپس توسط میانبر rcc، ساختار ابتدایی این کامپوننت را ایجاد می‌کنیم. در ادامه آن‌را در کامپوننت src\App.tsx استفاده خواهیم کرد:

یکی از مزایای دیگر کار با تایپ‌اسکریپت، فعال شدن intellisense مرتبط با افزونه‌هایی مانند typescript hero و auto import است که نمونه‌ای از آن‌را در تصویر فوق مشاهده می‌کنید. فقط کافی است نام المان مرتبط را نوشت و سپس با استفاده از افزونه‌های یاد شده، به صورت خودکار import آن‌را اضافه کرد.

پس از افزودن المان این کامپوننت، اگر سعی کنیم یک props را برای آن تعریف کنیم، بلافاصله خطای تعریف نشده بودن آن‌را دریافت خواهیم کرد:

در اینجا نیز همانند کامپوننت‌های تابعی، باید ابتدا نوع Props را تعیین کرد و تنها تفاوت آن، روش معرفی این type جدید به کامپوننت است:

import React, { Component } from "react";

type Props = {
  title: string;
};

type State = {
  status: string;
};

export default class BigC extends Component<Props, State> {
  render() {
    return (
      <div>
        <h1>I'm in a class component</h1>
      </div>
    );
  }
}

در کامپوننت‌های کلاسی، نوع State و نوع Props، از طریق آرگومان‌های جنریک Component، به نحوی که مشاهده می‌کنید، مشخص می‌شوند.
مابقی نکات آن مانند props اختیاری و غیره، تفاوت خاصی را با کامپوننت‌های تابعی که پیشتر بررسی کردیم، ندارند و یکی هستند.

مقایسه‌ای بین Types و Interfaces

در این سری بیشتر از types استفاده شد، تا اینترفیس‌های تایپ‌اسکریپت. برای مثال بجای نوع زیر:

type State = {
   rValue: boolean;
};

می‌توان از اینترفیس معادل آن نیز استفاده کرد:

interface State {
  rValue: boolean;
}

اما از کدامیک باید استفاده کرد؟
در تایپ‌اسکریپت، از type بیشتر برای تعریف یک نوع جدید استفاده می‌شود، اما از اینترفیس‌ها برای تعریف موجودیت‌ها و entities. برای مثال از type می‌توان برای تعریف نامی برای نوع‌های primitive, union, intersection نیز استفاده کرد، اما اینترفیس‌ها همواره برای تعیین نوع اشیاء مورد استفاده قرار می‌گیرند. نمی‌توان دو نوع هم‌نام را تعریف کرد، اما اگر دو اینترفیس هم نام را تعریف کنید، با هم یکی می‌شوند. نوع‌ها برخلاف اینترفیس‌ها قابلیت پیاده سازی نداشته و بیشتر جنبه‌ی یک اعلان را دارند و ... در نهایت استفاده‌ی از هر کدام بیشتر یک انتخاب شخصی است.

منابع تکمیلی

یکی از بهترین منابع تکمیلی استفاده‌ی از TypeScript در React، مخزن کد react-typescript-cheatsheet است که به همراه مجموعه‌ای از نکات مرتبط است.

‫۴ سال و ۴ ماه قبل، دوشنبه ۱۹ خرداد ۱۳۹۹، ساعت ۱۴:۱۰

وحید نصیری

مطالب

پیاده سازی پروژه‌های React با TypeScript - قسمت ششم - تعیین نوع هوک useEffect و هوک‌های سفارشی

در این قسمت قصد داریم یک هوک سفارشی را ایجاد کرده و نوع‌های آن‌را توسط TypeScript مشخص کنیم. همچنین در این بین از هوک useEffect هم استفاده خواهیم کرد؛ هرچند این هوک، نکات تایپ‌اسکریپتی خاصی را به همراه ندارد.

ایجاد هوک سفارشی useClickOutside

برای این منظور فایل جدید src\components\useClickOutside.tsx را ایجاد کرده و به صورت زیر تکمیل می‌کنیم:

import { useEffect } from "react";

const useClickOutside = (ref, handler) => {
  useEffect(() => {
    const listener = (event) => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      handler(event);
    };
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [handler, ref]);
};

export { useClickOutside };

توضیحات:

- متد هوک سفارشی ما، دو پارامتر ref و handler را دریافت می‌کند. ref به DOM Element جاری اشاره می‌کند و handler تابعی است که هنگام کلیک در خارج از ناحیه‌ی یک DOM Element خاص، اجرا می‌شود.
- سپس یک listener را تعریف کرده‌ایم که این تابع handler را اجرا می‌کند؛ البته به شرطی‌که DOM Element ارسالی وجود داشته باشد و خود target هم نباشد.
- در ادامه این listener را به رخ‌دادهای mousedown و touchstart متصل کرده و پاکسازی آن‌ها را هم در قسمت return متد useEffect انجام داده‌ایم.
- همچنین چون می‌خواهیم تنها در صورت تغییر پارامترهای ارسالی به هوک سفارشی جاری، این useEffect به روز رسانی شود، این پارامترها را در قسمت Dependency List مربوط به متد useEffect نیز ذکر کرده‌ایم.

تا اینجا اگر کدهای فوق را دنبال کنید، چون پسوند این فایل tsx است، خطاهای تایپ‌اسکریپتی زیر را مشاهده خواهید کرد که به دلیل انتساب ضمنی نوع any، به این پارامترهای بدون نوع است:

استفاده از هوک سفارشی useClickOutside

بنابراین قدم بعدی کار، تکمیل نوع‌های مرتبط با این پارامترها است. برای این منظور، ابتدا سعی می‌کنیم تا این هوک را در کامپوننت src\components\ReducerButtons.tsx قسمت قبلی استفاده کنیم تا نسبت به نوع پارامترهای ارسالی به این هوک، درک بهتری را پیدا کنیم:

import { useClickOutside } from "./useClickOutside";

// ...

export const ReducerButtons = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const ref = useRef<HTMLDivElement>(null);
  useClickOutside(ref, () => {
    console.log("clicked outside");
  });

  return (
    <div ref={ref}>
      // ...
    </div>
  );
};

برای این منظور، سه تغییر را انجام داده‌ایم:
- ابتدا import‌های لازم را به ابتدای ماژول افزوده‌ایم.
- سپس با استفاده از هوک useRef که در قسمت چهارم آن‌را بررسی کردیم، ارجاعی را به المان div رندر شده، بدست آورده‌ایم.
- در آخر هوک سفارشی جدید useClickOutside را فراخوانی کرده‌ایم که آرگومان اول آن به DOM Element مربوط به div اشاره می‌کند و پارامتر دوم آن، تابعی است که پس از کلیک در خارج از ناحیه‌ی آن، اجرا خواهد شد.

تعیین نوع‌های پارامترهای هوک سفارشی

تا اینجا متوجه شدیم که handler، چیزی بجز یک تابع که void را بازگشت می‌دهد (void <= ())، نیست. همچنین نوع شیء ref را هم می‌توان با نزدیک کردن اشاره‌گر ماوس، به متغیر ref در کامپوننت ReducerButtons، مشاهده کرد:

بر این اساس، تعاریف نوع‌های پارامترهای هوک سفارشی useClickOutside به صورت زیر مشخص می‌شوند:

const useClickOutside = (
  ref: React.RefObject<HTMLDivElement>,
  handler: () => void
) => {

همچنین بر اساس نکات قسمت سوم، نوع event را نیز به React.MouseEvent تنظیم می‌کنیم:

const listener = (event: React.MouseEvent<HTMLElement>) => {

پس از آن، اولین خطایی که ظاهر می‌شود به صورت زیر است:

عنوان می‌کند که نوع event.target، از نوع Node، که مورد نظر متد contains است، نیست. برای رفع آن فقط کافی است تبدیل نوع زیر را انجام داد:

ref.current.contains(event.target as Node)

مشکل بعدی، بدون پارامتر تعریف کردن نوع تابع handler است:

برای رفع این خطا، نوع پارامتر تابع handler را نیز بر اساس رویداد ارسالی به آن، مشخص می‌کنیم:

const useClickOutside = (
  ref: React.RefObject<HTMLDivElement>,
  handler: (event: React.MouseEvent<HTMLElement>) => void
) => {

مرحله‌ی آخر، عدم تطابق React.MouseEvent تعریف شده، با پارامترهای متد addEventListener است:

برای درک بهتر این خطا، اشاره‌گر ماوس را به محل تعریف این متد نزدیک می‌کنیم، تا بتوان امضای آن‌را مشاهده کرد. در حالت mousedown، پارامتر دوم این متد، از نوع MouseEvent است:

(method) Document.addEventListener<"mousedown">(type: "mousedown", listener: (this: Document, ev: MouseEvent) 
=> any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)

و در حالت touchstart، پارامتر دوم آن به TouchEvent تغییر کرده‌است:

(method) Document.addEventListener<"touchstart">(type: "touchstart", listener: (this: Document, ev: TouchEvent)
 => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)

به همین جهت است که نوع <React.MouseEvent<HTMLElement تعریف شده، با این دو سازگار نیست و خطا رخ‌داده‌است. برای رفع این خطا، با استفاده از union types، هر دو رخ‌داد MouseEvent و TouchEvent را باید به عنوان نوع پارامترهای ورودی تعریف کرد:

const useClickOutside = (
  ref: React.RefObject<HTMLDivElement>,
  handler: (event: MouseEvent | TouchEvent) => void
) => {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {

بنابراین با کمی دقت به تعاریف استانداردی که به همراه متدهای مورد استفاده هستند، می‌توان نوع‌های مرتبط را تشخیص داد و از آن‌ها استفاده کرد.

یک نکته‌ی تکمیلی: در اینجا با تعریف <ref: React.RefObject<HTMLDivElement، دیگر ref ارسالی، هیچ المان دیگری را بجز div نمی‌تواند بپذیرد. برای عمومی‌تر کردن آن، می‌توان بر روی آن کلیک راست کرد و گزینه‌ی Go to definition را انتخاب نمود:

بنابراین حالت عمومی‌تر آن، استفاده از HTMLElement ای است که HTMLDivElement از آن ارث بری کرده‌است:

const useClickOutside = (
  ref: React.RefObject<HTMLElement>,
  handler: (event: MouseEvent | TouchEvent) => void
) => {

با این تغییرات، کدهای نهایی این قسمت، به صورت زیر در خواهند آمد:

import { useEffect } from "react";

const useClickOutside = (
  ref: React.RefObject<HTMLElement>,
  handler: (event: MouseEvent | TouchEvent) => void
) => {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return;
      }
      handler(event);
    };
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [handler, ref]);
};

export { useClickOutside };

‫۴ سال و ۴ ماه قبل، شنبه ۱۷ خرداد ۱۳۹۹، ساعت ۲۰:۲۵

وحید نصیری

نظرات اشتراک‌ها

#C برای برنامه نویسی سیستمی

نسخه native، منظور کامپایل مستقیم کدهای سی‌شارپ به کدهای ماشین هستند. در حال حاضر اگر صحبت از #C می‌شود، منظور #CLR C است. یعنی کدهای شما ابتدا به IL ترجمه می‌شوند و بعد IL توسط JIT Compiler به کدهای ماشین ترجمه خواهد شد. در نسخه native این دو مرحله حذف و تبدیل به یک مرحله خواهند شد. البته برای مقاصد سیستمی جهت دسترسی بیشتر به سخت افزار و همچنین بالابردن سرعت اجرایی کدها. برای رقابت با ++C با ارائه زبانی که type safe است؛ برای کارهای async بهینه سازی شده‌است، سرعت توسعه با آن بالاتر است و ابزارهای بهتری برای آن تدارک دیده شده‌اند. ضمنا استاندارد آن در اختیار مایکروسافت است و تغییرات آتی آن ساده‌تر خواهند بود و سریعتر.

‫۱۰ سال و ۱۰ ماه قبل، دوشنبه ۹ دی ۱۳۹۲، ساعت ۱۶:۴۲

مهدی ملائیان

اشتراک‌ها

مفاهیم Compiling و Transpiling

عبارت Transpiler این روزها در دنیای مدرن برنامه‌نویسی زیاد استفاده می‌شود. عمل Transpiling در حقیقت تبدیل یک کد از یک زبان به یک زبان هم سطح دیگر است. این در حالی است که مفهوم Compiling یک مفهوم کلی‌تر است و به معنی تبدیل یک زبان به هر چیز دیگری (مثل یک زبان نزدیک به ماشین یا زبان هم‌سطح) است. برای مثال عمل تبدیل یک کد TypeScript به JavaScript توسط یک Transpiler انجام می‌شود. زیرا این دو زبان از لحاظ سطح انتزاع شبیه هم هستند. ولی عمل تبدیل کد C# به IL یا تبدیل کد C++ به binary code و یا تبدیل Java به byte code یک کامپایل محسوب می‌شود. زیرا این تبدیل به یک زبان نزدیک به ماشین است.

‫۸ سال و ۳ ماه قبل، چهارشنبه ۳۰ تیر ۱۳۹۵، ساعت ۱۹:۲۱

م شاکری

نظرات مطالب

سفارشی سازی ASP.NET Core Identity - قسمت پنجم - سیاست‌های دسترسی پویا

ممنون بابت پاسخگویی.

فرض کنید در SampleController، اکشنی به نام Edit وجود دارد که سبب نمایش فرم ویرایش میشود که این فرم حاوی دراپ دانی می‌باشد که اطلاعات خود رو از اکشنی مجزا به نام GetData در همان کنترلر به صورت ajax دریافت میکند.اگر بخواهیم با روش فعلی به این موارد دسترسی دهیم به حالت زیر خواهیم رسید:

مشاهده فرم ویرایش	SampleController:Edit	✓
مشاهده محتویات دراپ دان	SampleController:GetData	✓

در این حالت صفحه بدون مشکل لود شده و محتویات دراپ دان نمایش داده میشود.حالتی که تنها اکشن index به calim افزوده شود در این حالت صفحه بارگذاری میشود اما محتویات دراپ دان به دلیل اینکه در Calim وجود ندارد لود نخواهد شد و درخواست ajax با خطای 401 مواجه میشود.

روشی وجود دارد که با انتخاب اکشن Edit تمامی اکشن‌های مورد نیاز در فرم ویرایش نیز به Calim اضافه گردد؟

‫۷ سال و ۳ ماه قبل، یکشنبه ۲۵ تیر ۱۳۹۶، ساعت ۱۷:۱۶