- در یک سری پلیرها به نظر وجود BOM برای خواندن زیرنویس فارسی اجباری است؛ وگرنه فایل را یونیکد تشخیص نمیدهند.
- در حین ذخیره سازی از Encoding.Unicode استفاده کردهاید (UTF 16 هست در دات نت). شاید Encoding.UTF8 را هم آزمایش کنید، مفید باشد. حجم UTF 16 نسبت به UTF 8 نزدیک به دو برابر است و شاید بعضی پخش کنندهها با آن مشکل داشته باشند.
- به روز رسانی نرم افزار و firmware دستگاه هم در بسیاری از اوقات مفید است؛ خصوصا برای رفع مشکلات یونیکد آنها.
چندین جایگزین برای Google Reader!
نحوه ذخیره شدن متن در فایلهای PDF
حتما نیاز است پیشنیاز فوق را یکبار مطالعه کنید تا علت خروجیهای متفاوتی را که در ادامه ملاحظه خواهید نمود، بهتر مشخص شوند. همچنین فایل PDF ایی که مورد بررسی قرار خواهد گرفت، همان فایلی است که توسط متد writePdf ذکر شده در پیشنیاز تهیه شده است.
دو کلاس متفاوت برای استخراج متن از فایلهای PDF در iTextSharp وجود دارند:
الف) SimpleTextExtractionStrategy
using System.Diagnostics; using System.IO; using iTextSharp.text; using iTextSharp.text.pdf; using iTextSharp.text.pdf.parser; namespace TestReaders { class Program { private static void readPdf1() { var reader = new PdfReader("test.pdf"); int intPageNum = reader.NumberOfPages; for (int i = 1; i <= intPageNum; i++) { var text = PdfTextExtractor.GetTextFromPage(reader, i, new SimpleTextExtractionStrategy()); File.WriteAllText("page-" + i + "-text.txt", text); } reader.Close(); } static void Main(string[] args) { readPdf1(); } } }
Test ld Wor llo He Hello People
ب) LocationTextExtractionStrategy
همان مثال قبل را درنظر بگیرید، اینبار به شکل زیر:
private static void readPdf2() { var reader = new PdfReader("test.pdf"); int intPageNum = reader.NumberOfPages; for (int i = 1; i <= intPageNum; i++) { var text = PdfTextExtractor.GetTextFromPage(reader, i, new LocationTextExtractionStrategy()); File.WriteAllText("page-" + i + "-text.txt", text); } reader.Close(); }
Test Hello World Hello People
استخراج متون فارسی از فایلهای PDF توسط iTextSharp
روشهای فوق با PDFهای فارسی هم کار میکنند اما خروجی حاصل آن مفهوم نیست و نیاز به پردازش ثانوی دارد. ابتدا مثال زیر را درنظر بگیرید:
static void writePdf2() { using (var document = new Document(PageSize.A4)) { var writer = PdfWriter.GetInstance(document, new FileStream("test.pdf", FileMode.Create)); document.Open(); FontFactory.Register("c:\\windows\\fonts\\tahoma.ttf"); var tahoma = FontFactory.GetFont("tahoma", BaseFont.IDENTITY_H); ColumnText.ShowTextAligned( canvas: writer.DirectContent, alignment: Element.ALIGN_CENTER, phrase: new Phrase("تست میشود", tahoma), x: 100, y: 100, rotation: 0, runDirection: PdfWriter.RUN_DIRECTION_RTL, arabicOptions: 0); } Process.Start("test.pdf"); }
ﺩﻮﺷﻲﻣ ﺖﺴﺗ
private static void readPdf2() { var reader = new PdfReader("test.pdf"); int intPageNum = reader.NumberOfPages; for (int i = 1; i <= intPageNum; i++) { var text = PdfTextExtractor.GetTextFromPage(reader, i, new LocationTextExtractionStrategy()); text = Encoding.UTF8.GetString(Encoding.UTF8.GetBytes(text)); File.WriteAllText("page-" + i + "-text.txt", text, Encoding.UTF8); } reader.Close(); }
ﺩﻮﺷﻲﻣ ﺖﺴﺗ
using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Runtime.InteropServices; using System.Security; namespace TestReaders { [SuppressUnmanagedCodeSecurity] class GdiMethods { [DllImport("GDI32.dll")] public static extern bool DeleteObject(IntPtr hgdiobj); [DllImport("gdi32.dll", CharSet = CharSet.Auto, SetLastError = true)] public static extern uint GetCharacterPlacement(IntPtr hdc, string lpString, int nCount, int nMaxExtent, [In, Out] ref GcpResults lpResults, uint dwFlags); [DllImport("GDI32.dll")] public static extern IntPtr SelectObject(IntPtr hdc, IntPtr hgdiobj); } [StructLayout(LayoutKind.Sequential)] struct GcpResults { public uint lStructSize; [MarshalAs(UnmanagedType.LPTStr)] public string lpOutString; public IntPtr lpOrder; public IntPtr lpDx; public IntPtr lpCaretPos; public IntPtr lpClass; public IntPtr lpGlyphs; public uint nGlyphs; public int nMaxFit; } public class UnicodeCharacterPlacement { const int GcpReorder = 0x0002; GCHandle _caretPosHandle; GCHandle _classHandle; GCHandle _dxHandle; GCHandle _glyphsHandle; GCHandle _orderHandle; public Font Font { set; get; } public string Apply(string lines) { if (string.IsNullOrWhiteSpace(lines)) return string.Empty; return Apply(lines.Split('\n')).Aggregate((s1, s2) => s1 + s2); } public IEnumerable<string> Apply(IEnumerable<string> lines) { if (Font == null) throw new ArgumentNullException("Font is null."); if (!hasUnicodeText(lines)) return lines; var graphics = Graphics.FromHwnd(IntPtr.Zero); var hdc = graphics.GetHdc(); try { var font = (Font)Font.Clone(); var hFont = font.ToHfont(); var fontObject = GdiMethods.SelectObject(hdc, hFont); try { var results = new List<string>(); foreach (var line in lines) results.Add(modifyCharactersPlacement(line, hdc)); return results; } finally { GdiMethods.DeleteObject(fontObject); GdiMethods.DeleteObject(hFont); font.Dispose(); } } finally { graphics.ReleaseHdc(hdc); graphics.Dispose(); } } void freeResources() { _orderHandle.Free(); _dxHandle.Free(); _caretPosHandle.Free(); _classHandle.Free(); _glyphsHandle.Free(); } static bool hasUnicodeText(IEnumerable<string> lines) { return lines.Any(line => line.Any(chr => chr >= '\u00FF')); } void initializeResources(int textLength) { _orderHandle = GCHandle.Alloc(new int[textLength], GCHandleType.Pinned); _dxHandle = GCHandle.Alloc(new int[textLength], GCHandleType.Pinned); _caretPosHandle = GCHandle.Alloc(new int[textLength], GCHandleType.Pinned); _classHandle = GCHandle.Alloc(new byte[textLength], GCHandleType.Pinned); _glyphsHandle = GCHandle.Alloc(new short[textLength], GCHandleType.Pinned); } string modifyCharactersPlacement(string text, IntPtr hdc) { var textLength = text.Length; initializeResources(textLength); try { var gcpResult = new GcpResults { lStructSize = (uint)Marshal.SizeOf(typeof(GcpResults)), lpOutString = new String('\0', textLength), lpOrder = _orderHandle.AddrOfPinnedObject(), lpDx = _dxHandle.AddrOfPinnedObject(), lpCaretPos = _caretPosHandle.AddrOfPinnedObject(), lpClass = _classHandle.AddrOfPinnedObject(), lpGlyphs = _glyphsHandle.AddrOfPinnedObject(), nGlyphs = (uint)textLength, nMaxFit = 0 }; var result = GdiMethods.GetCharacterPlacement(hdc, text, textLength, 0, ref gcpResult, GcpReorder); return result != 0 ? gcpResult.lpOutString : text; } finally { freeResources(); } } } }
در اینجا برای اصلاح متد readPdf2 خواهیم داشت:
private static void readPdf2() { var reader = new PdfReader("test.pdf"); int intPageNum = reader.NumberOfPages; for (int i = 1; i <= intPageNum; i++) { var text = PdfTextExtractor.GetTextFromPage(reader, i, new LocationTextExtractionStrategy()); text = Encoding.UTF8.GetString(Encoding.UTF8.GetBytes(text)); text = new UnicodeCharacterPlacement { Font = new System.Drawing.Font("Tahoma", 12) }.Apply(text); File.WriteAllText("page-" + i + "-text.txt", text, Encoding.UTF8); } reader.Close(); }
سؤال: آیا این روش با تمام PDFهای فارسی کار میکند؟
پاسخ: خیر! همانطور که در پیشنیاز مطلب جاری عنوان شد، در یک حالت خاص، PDF writer میتواند شماره Glyphها را کاملا عوض کرده و در فایل PDF نهایی ثبت کند. خروجی حاصل در برنامه Adobe reader خوانا است، چون نمایش را بر اساس اطلاعات هندسی Glyphها انجام میدهد؛ اما خروجی متنی آن به نوعی obfuscated است چون مثلا حرف A آن به کاراکتر مرسوم دیگری نگاشت شده است.
OpenCVSharp #2
بارگذاری و نمایش تصاویر به کمک OpenCVSharp
متدهای اینترفیس C مربوط به OpenCV، در OpenCVSharp با ذکر کلاس Cv آن قابل دسترسی هستند. برای نمونه متدهای C یاد شدهی در ابتدای بحث، چنین معادلی را در OpenCVSharp دارند:
using OpenCvSharp; namespace OpenCVSharpSample02 { class Program { static void Main(string[] args) { var img = Cv.LoadImage(@"..\..\images\ocv02.jpg"); Cv.NamedWindow("window"); Cv.ShowImage("window", img); Cv.WaitKey(); Cv.DestroyWindow("window"); Cv.ReleaseImage(img); } } }
در اینجا با استفاده از متد LoadImage، تصویری را از مسیر مشخصی، بارگذاری میکنیم. سپس یک پنجرهی OpenCV ایجاد و این تصویر در آن نمایش داده میشود. متد WaitKey منتظر فشرده شدن یک کلید بر روی پنجرهی OpenCV میشود. پس از آن این پنجره تخریب و همچنین منابع native این تصویر آزاد میشوند.
متد LoadImage، پارامتر دومی را نیز میپذیرد:
var img = Cv.LoadImage(@"..\..\images\ocv02.jpg", LoadMode.GrayScale);
Enum تعریف شدهی در اینجا قابلیت or یا جمع منطقی را نیز دارد. برای مثال میتوان مقدار LoadMode.AnyColor | LoadMode.AnyDepth را نیز مشخص کرد؛ جهت بارگذاری تصویر اصلی با مشخصات کامل آن که حالت پیش فرض است.
کلاسهای پشت صحنهی اینترفیس C در OpenCVSharp
علت وجود کلاس Cv در OpenCVSharp، سهولت برگرداندن مثالهای C کتابخانهی OpenCV به نمونههای دات نتی است. اما اگر قصد داشته باشید از کلاسهای پشت صحنهی این اینترفیس در OpenCVSharp استفاده کنید، میتوان کدهای فوق را به نحو ذیل نیز بازنویسی کرد:
using (var img = new IplImage(@"..\..\images\ocv02.jpg", LoadMode.Unchanged)) { using (var window = new CvWindow("window")) { window.Image = img; Cv.WaitKey(); } }
همچنین پنجرهی OpenCV نیز در اینجا با کلاس CvWindow پیاده سازی میشود که این کلاس نیز اینترفیس IDisposable را پیاده سازی میکند.
یک نکتهی تکمیلی
اگر متد LoadImage کتابخانهی OpenCV قادر به بارگذاری تصویر شما نبود، متد دیگری به نام IplImage.FromFile نیز پیش بینی شدهاست. این متد از امکانات System.Drawing.Bitmap دات نت برای بارگذاری تصویر و تبدیل آن به فرمت OpenCV استفاده میکند.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید.
- طول عکس خروجی نهایی 250 پیکسل است.
- فونت متن 10 پیکسل هست و عرض هر خط 17 پیکسل.
- حداکثر تعداد خطِ نمایش متن، 3 خط است و اگر متن برای نمایش، به 3 خط بیشتر نیاز داشت، اضافهی متن را به صورت 3 نقطه نمایش میدهیم (مثل عکس بالا).
- عرض بارکد 50 پیکسل است.
- فاصله بین بارکد و متن 5 پیکسل است.
public static class BarcodeHelper { public static string GenerateBarcodeWithText(string input, string textBelow) { // barcode: 50 pixels // margin: top 5 pixels // height of each text line is 17 pixels // text: maximum 3 lines // each 30 letters is: 1 line var eachLineHeight = 17; var eachLineLetters = 30; var maximumLines = 3; var maximumTextHeight = eachLineHeight * maximumLines; var resultWidth = 250; var barcodeHeight = 50; var textY = barcodeHeight + 5; // each 30 letters is: 1 line for example input length is 150 letters and for show 100 letters we need (150 / 30) 5 lines // each line is 17 pixels and text height will be (17 * 5) 102 pixels var textHeight = (textBelow.Length / eachLineLetters) * eachLineHeight; // if height of text be greater than (eachLineHeight * maximumLines) we use maximum text height (eachLineHeight * maximumLines) textHeight = textHeight > maximumTextHeight ? maximumTextHeight : textHeight; // if text height be less than 1 line we set 1 line height (17 pixels) to the text height // text height minimum is equal 1 linle (17 pixels) textHeight = textHeight < eachLineHeight ? eachLineHeight : textHeight; var resultHeight = textY + textHeight; } }
چون ما از Bitmap و Image استفاده میکنیم، پس به پکیچ System.Drawing.Common نیاز داریم:
<ItemGroup> <PackageReference Include="System.Drawing.Common" Version="6.0.0" /> </ItemGroup>
اولین کاری که انجام میدهیم، یک Bitmap را ایجاد میکنیم و بعد یک مستطیل را به اندازهی خود Bitmap ایجاد میکنیم و با کلاس Graphics، به نارنجی، رنگش میکنیم و داخل Bitmap میریزیم و در نهایت عکس ایجاد شده را در حافظهی رم ذخیره میکنیم.
- Bitmap فضایی را در اختیار ما قرار میدهد که داخلش هر چیزی را ترسیم کنیم.
- Graphics به ما کمک میکند که عملیات گرافیکی را نظیر رنگ آمیزی، ترسیم عکس و ... روی یک شیء انجام دهیم.
- MemoryStream برای ذخیره سازی موقت در حافظهی رم به کار میاد؛ عکس ایجاد شدهی تا این لحظه را که یک مستطیل نارنجی رنگ هست، در داخل رم ذخیره میکنیم.
#region MainBitmap var mainBitmap = new Bitmap(resultWidth, resultHeight); using var rectangleGraphics = Graphics.FromImage(mainBitmap); { var rectangle = new Rectangle(0, 0, resultWidth, resultHeight); rectangleGraphics.FillRectangle(Brushes.OrangeRed, rectangle); } using var rectangleStream = new MemoryStream(); { mainBitmap.Save(rectangleStream, ImageFormat.Png); } #endregion
خروجی تا این لحظه:
حالا باید بارکد را ایجاد کنیم و عکس خروجی بارکد را داخل این مستطیل بریزیم؛ برای اینکار از کتابخانه BarcodeLib استفاده میکنیم:
private static Bitmap GenerateBarcodeImage(string input, int width, int height) { var barcodeInstance = new Barcode(); var barcodeImage = barcodeInstance.Encode(BarcodeLib.TYPE.CODE39, input, Color.Black, Color.OrangeRed, width, height); using var barcodeStream = new MemoryStream(); { barcodeImage.Save(barcodeStream, ImageFormat.Png); } return (Bitmap)Image.FromStream(barcodeStream); }
و الان این عکس بارکد را داخل مستطیل اصلی میریزیم و هر دو را Merge میکنیم:
#region Barcode var barcodeImage = GenerateBarcodeImage(input, resultWidth, barcodeHeight); #endregion #region MergedRectangleAndBarcode var newMainBitmap = (Bitmap)Image.FromStream(rectangleStream); var newBarcodeBitmap = barcodeImage; using var newRectangleGraphics = Graphics.FromImage(newMainBitmap); { newRectangleGraphics.DrawImage(newBarcodeBitmap, 0, 0); } using var mergedRectangleAndBarcodeStream = new MemoryStream(); { newMainBitmap.Save(mergedRectangleAndBarcodeStream, ImageFormat.Png); } #endregion
خروجی تا این لحظه :
حالا باید 5 پیکسل از پایین بارکد فاصله بگیریم و متن را بنویسیم.
برای اینکار از یک مستطیل کمک میگیریم. یعنی یک مستطیل بدون هیچ رنگ و Border ـی را پایین این بارکد ایجاد میکنیم، چرا؟ دلیل این است که میخواهیم متنمان را به صورت وسط چین، از راست و چپ، و وسط از بالا و پایین قرار بدیم و برای اینکار میگیم این نسبت وسط چین بودن از راست و چپ، وسط بودن از بالا و پایین را از مستطیل پایین بارکد کمک بگیر، خلاصهاش میشود اینکه از مستطیلِ پایینِ بارکد برای وسط چین بودن متن از راست و چپ و وسط بودن از بالا و پایین استفاده میکنیم.
#region WriteText var barcodeBitmap = (Bitmap)Image.FromStream(mergedRectangleAndBarcodeStream); using var graphics = Graphics.FromImage(barcodeBitmap); { using var font = new Font("Tahoma", 10); { var rect = new Rectangle(0, textY, resultWidth, textHeight); var sf = new StringFormat(); sf.Alignment = StringAlignment.Center; sf.Trimming = StringTrimming.EllipsisCharacter; sf.FormatFlags = StringFormatFlags.DirectionRightToLeft; sf.LineAlignment = StringAlignment.Center; graphics.DrawString(textBelow, font, Brushes.Black, rect, sf); //graphics.DrawRectangle(Pens.Green, rect); } } using var finalStream = new MemoryStream(); { barcodeBitmap.Save(finalStream, ImageFormat.Png); } #endregion
graphics.DrawString میگوید textBelow را با font تاهوما و با رنگ سیاه، داخل rect (مستطیل) و با این تنظیماتِ متن بریز.
Alignment متن را وسط چین میکند (این وسط چین شدن نسبت به مستطیل پایین بارکد است که هیچ رنگ و Border ـی ندارد) .
LineAlignment متن را از بالا و پایین میارد وسط (این وسط شدن نسبت به مستطیل پایین بارکد است که هیچ رنگ و Border ـی ندارد).
EllipsisCharacter اگر متن طولانی باشد، اضافه متن را به صورت سه نقطه نمایش میدهد.
DirectionRightToLeft متن را RTL میکند.
خروجی نهایی:
عکس نهایی به صورت Stream ذخیره شدهاست، آنرا به فرمت Base64 تبدیل میکنیم و برگشت میزنیم.
return Convert.ToBase64String(finalStream.ToArray());
برای نمایش یک آرایه بایتی که به فرمت Base64 تبدیل شده، به این روش عمل میکنیم:
<img src="data:image/png;base64, @BarcodeHelper.GenerateBarcodeWithText("barcode text", "below text")" />
چون برای ایجاد بارکد از تایپ 39 استفاده کردهایم و تایپ 39 فقط حروف بزرگ انگلیسی را پشتیبانی میکند، پس برای اینکه دچار خطا نشویم، میتوانیم ابتدای متدمان، از این کد استفاده کنیم:
// Type 39 doesn't support lower case letters, for prevent exception, we convert all input letters to upper case // more details: https://www.dntips.ir/newsarchive/details/18019 input = input.ToUpperInvariant();
همچنین جهت تشخیص خودکار راست به چک بودن متن پایین بارکد، میتوان از متد ContainsFarsi در پکیج DNTPersianUtils.Core استفاده کرد:
if (textBelow.ContainsFarsi()) sf.FormatFlags = StringFormatFlags.DirectionRightToLeft;
Install-package Microsoft.FeatureManagement.AspNetCore
[FeatureGate("chat")] public class ChatController : Controller { public IActionResult Index() { // do sth } }
[FeatureGate("feature1", "feature2")] public class ChatController : Controller { public IActionResult Index() { // do sth } }
"FeatureManagement": { "feature1": true, "feature2": false },
public enum RequirementType { // // Summary: // The enabled state will be attained if any feature in the set is enabled. Any = 0, // // Summary: // The enabled state will be attained if all features in the set are enabled. All = 1 }
[FeatureGate(RequirementType.Any,"feature1", "feature2","feature3")] public class ChatController : Controller { public IActionResult Index() { // do sth } }
@addTagHelper *, Microsoft.FeatureManagement.AspNetCore // put this line in _ViewImports <feature name="feature1,feature2,feature3"> <li> <a asp-area="" asp-controller="Chat" asp-action="index">Stay in contact</a> </li> </feature>
public class RedirectDisabledFeatureHandler : IDisabledFeaturesHandler { public Task HandleDisabledFeatures(IEnumerable<string> features, ActionExecutingContext context) { context.Result = new RedirectResult("url"); return Task.CompletedTask; } }
public void ConfigureServices(IServiceCollection services) { services.AddFeatureManagement().UseDisabledFeaturesHandler(new RedirectDisabledFeatureHandler()); ; }
پردازش فایلهای XML با استفاده از jQuery
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Access to restricted URI denied.
Zepto.js یک کتابخانهی سمت مرورگر است که میتواند در برخی کاربردها جایگزین مناسبی برای jQuery باشد. مهمترین ویژگی Zepto، سازگاری ساختار این کتابخانه با جیکوئری است. به این معنی که چنانچه شیوهی کدنویسی با jQuery را بدانید، شیوهی کدنویسی Zepto را نیز فرا گرفتهاید.
- Observable state: در MobX نیز همانند Redux، کل شیء state به صورت یک شیء جاوا اسکریپتی ارائه میشود؛ با این تفاوت که در اینجا این شیء، یک Observable است که نمونهای از مفهوم آنرا در مثال قسمت قبل بررسی کردیم.
- Actions: متدهایی هستند که state را تغییر میدهند.
- Computed properties: در مورد مفهوم خواص محاسباتی در قسمت قبل بحث کردیم. این خواص، مقدار خود را بر اساس تغییرات سایر خواص Observable، به روز میکنند.
- Reactions: سبب بروز اثرات جانبی (side effects) میشوند؛ مانند تعامل با دنیای خارج. نمونهای از آن، متد autorun است که تغییرات Observableها را ردیابی میکند.
برای مثال خاصیت محاسباتی fullName، تغییرات سایر خواص Observable را احساس کرده و مقدار خودش را به روز میکند. سپس یک Reaction به آن، میتواند به روز رسانی DOM، جهت نمایش این تغییرات باشد و یا نمونهی دیگری که میتواند بسیاری از این مفاهیم را نمایش دهد، کلاس زیر است:
import { action, observable, computed } from 'mobx'; class PizzaCalculator { @observable numberOfPeople = 0; @observable slicesPerPerson = 2; @observable slicesPerPie = 8; @computed get slicesNeeded() { console.log('Getting slices needed'); return this.numberOfPeople * this.slicesPerPerson; } @computed get piesNeeded() { console.log('Getting pies needed'); return Math.ceil(this.slicesNeeded / this.slicesPerPie); } @action addGuest() { this.numberOfPeople!++; } }
- برای مثال زمانیکه تعریف observable numberOfPeople@ را داریم، به این معنا است که میخواهیم تغییرات تعداد افراد را تحت نظر قرار دهیم و اگر تغییری در مقدار آن صورت گرفت، آنگاه مقدار خواص محاسباتی که با computed@ مزین شدهاند، به صورت خودکار به روز رسانی شوند.
- action@ به این معنا است که متدی در اینجا، سبب بروز تغییری در state کلاس جاری میشود. MobX به همراه یک strict mode است که اگر فعال باشد، ذکر تزئین کنندهی action@ بر روی یک چنین متدهایی ضروری است، در غیراینصورت، الزامی به درج آن نیست.
در این قطعه کد تعدای console.log را هم ملاحظه میکنید. علت آن نمایش مفهوم کش کردن اطلاعات در MobX است. فرض کنید برای بار اول، مقدار یکی از خواصی را که به صورت observable تعریف شدهاند، تغییر میدهیم. در این حالت تمام خواص محاسباتی وابستهی به آنها، به صورت خودکار مجددا محاسبه شده و console.logها را نیز مشاهده خواهیم کرد. اگر برای بار دوم همین فراخوانی صورت گیرد و تغییری در مقادیر خواص observable صورت نگیرد، MobX از نگارش کش شدهی این خواص محاسباتی استفاده میکند و بیجهت سبب رندر مجدد UI نخواهد شد که در نهایت کارآیی بالایی را سبب خواهد شد. برای پیاده سازی یک چنین قابلیتی با Redux باید از مفهومی مانند React.memo و Memoization و کتابخانههای کمکی مانند Reselect استفاده کرد؛ اما در اینجا به صورت توکار و خودکار اعمال میشود.
ساختارهای دادهای که توسط MobX پشتیبانی میشوند
MobX از اکثر ساختارهای دادهای متداول در جاوا اسکریپت پشتیبانی میکند؛ برای مثال:
- اشیاء مانند ({})observable
- آرایهها مانند ([])observable
- Maps مانند observable(new Map())
چند نکته:
- همانطور که در قسمت قبل نیز ذکر شد، decorators در اصل یکسری تابع هستند و برای مثال میتوان observable را به صورت observable@ و یا به صورت یک تابع معمولی مورد استفاده قرار داد.
- اگر شیءای را به صورت ({})observable معرفی کنیم، با افزودن خواصی به آن پس از این فراخوانی، این خواص دیگر مورد ردیابی قرار نخواهند گرفت. علت آنرا هم در شبهکد زیر میتوان مشاهده کرد:
const extendObservable = (target, source) => { source.keys().forEach(key => { const wrappedInObservable = observable(source[key]); Object.defineProperty(target, key, { set: value.set. get: value.get }); }); };
برای رفع این مشکل میتوان از Map استفاده کرد. یعنی در اینجا اگر قرار است تعداد خواص اشیاء را به صورت پویا تغییر دهید، آنها را به صورت Map تعریف کنید؛ چون متد set آن توسط observableها ردیابی میشود.
استفاده از MobX با React توسط کتابخانهی mobx-react
تا اینجا MobX را به صورت متکی به خود مورد بررسی قرار دادیم. اکنون قصد داریم آنرا به یک برنامهی React متصل کنیم. برای اینکار کتابخانههای زیادی وجود دارند که در این قسمت کلیات روش کار با کتابخانهی mobx-react را در بین آنها بررسی میکنیم.
نصب کتابخانهی mobx-react
ابتدا نیاز است تا این کتابخانه را نصب کنیم:
> npm install --save mobx mobx-react
تحت نظر قرار دادن کامپوننتها
در ادامه پس از نصب کتابخانهی mobx-react، نیاز است کامپوننتها را تحت نظر MobX قرار دهیم که اینکار را میتوان توسط تزئین کنندهی observer آن انجام داد. همانطور که عنوان شد، تزئین کنندهها را میتوان به صورت معمولی observer@ به یک کلاس و یا به صورت فراخوانی تابع، برای مثال به یک کامپوننت تابعی اعمال کرد. برای نمونه کامپوننتهای کلاسی را به نحو زیر میتوان با observer@ مزین کرد:
import { observer } from "mobx-react"; @observer class Counter extends Component {
و یا کامپوننتهای تابعی را میتوان توسط متد observer به صورت زیر محصور کرد:
const Counter = observer(({ count }) => { return ( // ... ); });
class ContainerComponent extends Component () { componentDidMount() { this.stopListening = autorun(() => this.render()); } componentWillUnmount() { this.stopListening(); } render() { … } }
تعریف مخزن و اتصال آن به کامپوننتها
کار شیء Provider که بالاترین کامپوننت را در سلسله مراتب کامپوننتها محصور میکند، ارائهی store، به تمام کامپوننتهای فرزند است. در Redux فقط یک store را داریم که به شیء Provider آن ارسال میکنیم. اما در حین کار با MobX چنین محدودیتی وجود ندارد و میتوان چندین store را تعریف کرد و در اختیار برنامه قرار داد که شبهکد نحوهی تعریف آن به صورت زیر است:
import { Provider } from 'mobx-react'; import ItemStore from './store/ItemStore'; import Application from './components/Application'; const itemStore = new ItemStore(); ReactDOM.render( <Provider itemStore={itemStore}> <Application /> </Provider>, document.getElementById('root'), );
@inject('itemStore') class NewItem extends Component { // ...
const UnpackedItems = inject('itemStore')( observer(({ itemStore }) => ( // ... )), );
یک مثال: پیاده سازی مثال شمارشگر قسمت سوم این سری با mobx-react
در ادامه قصد داریم برنامهی شمارشگر ارائه شده در قسمت سوم بررسی redux را با mobx پیاده سازی کنیم. به همین جهت یک پروژهی جدید React را ایجاد میکنیم:
> create-react-app state-management-with-mobx-part2 > cd state-management-with-mobx-part2 > npm start
> npm install --save mobx mobx-react bootstrap
import "bootstrap/dist/css/bootstrap.css";
پس از آن فایل src\index.js را به صورت زیر تغییر میدهیم:
import "./index.css"; import "bootstrap/dist/css/bootstrap.css"; import { autorun, decorate, observable } from "mobx"; import React from "react"; import ReactDOM from "react-dom"; import Counter from "./components/Counter"; import * as serviceWorker from "./serviceWorker"; class Count { value = 0; increment = () => { this.value++; }; decrement = () => { this.value--; }; } decorate(Count, { value: observable }); const count = (window.count = new Count()); autorun(() => console.log("The count changed!", count.value)); ReactDOM.render( <main className="container"> <Counter count={count} /> </main>, document.getElementById("root") ); serviceWorker.unregister();
- در قسمت قبل، روش تحت نظر قرار دادن یک شیء متداول جاوا اسکریپتی را توسط متد observable مشاهده کردیم. در اینجا نگارش کلاسی آن مثال را بر اساس کلاس Count مشاهده میکنید. اگر نخواهیم از decorator ای مانند observable@ بر روی خاصیت value این کلاس استفاده کنیم، روش تابعی آنرا با فراخوانی متد decorate و ذکر نوع کلاس و سپس خاصیتی که باید به صورت observable تحت نظر قرار گیرد، در اینجا مشاهده میکنید. این هم یک روش کار با mobx است.
- پس از ایجاد کلاس Count که در اینجا نقش store را نیز بازی میکند، یک وهلهی جدید را از آن ساخته و به متغیر count در این ماژول و همچنین window.count انتساب میدهیم. انتساب window.count سبب میشود تا بتوان در کنسول توسعه دهندگان مرورگر، با نوشتن count و سپس enter، به محتویات این متغیر دسترسی یافت و یا حتی آنرا تغییر داد؛ مانند تصویر زیر که بلافاصله این تغییر، در UI برنامه نیز منعکس میشود:
- در اینجا تعریف شیء Provider را که پیشتر در مورد آن بحث کردیم، مشاهده نمیکنید؛ چون با تک کامپوننت Counter تعریف شدهی در این مثال، نیازی به آن نیست. میتوان این شیء store را به صورت مستقیم به props کامپوننت Counter ارسال کرد.
اکنون تعریف کامپوننت شمارشگر واقع در فایل src\components\Counter.jsx به صورت زیر خواهد بود که این کامپوننت، count را به صورت props دریافت میکند:
import { observer } from "mobx-react"; import React from "react"; const Counter = observer(({ count }) => { return ( <section className="card mt-5"> <div className="card-body text-center"> <span className="badge m-2 badge-primary">{count.value}</span> </div> <div className="card-footer"> <div className="d-flex justify-content-center align-items-center"> <button className="btn btn-secondary btn-sm" onClick={count.increment} > + </button> <button className="btn btn-secondary btn-sm m-2" onClick={count.decrement} > - </button> </div> </div> </section> ); }); export default Counter;
تا زمانیکه کامپوننت، با تابع observer محصور شدهاست، به props رسیده گوش فرا داده و خواص و اشیاء observable آنرا تشخیص میدهد و سبب رندر مجدد کامپوننت، با تغییری در آنها خواهد شد.
کدهای کامل این قسمت را میتوانید از اینجا دریافت کنید: state-management-with-mobx-part2.zip