بررسی چند کتابخانه آپلود با پشتیبانی از DragDrop
برای یکی از پروژه‌ها نیاز به یک آپلودر داشتم که قابلیت Drag&Drop را نیز داشته باشد و در ضمن پیاده سازی آسانی هم داشته باشد. در این بین به تعدادی از کتابخانه‌های جی کوئری می‌پردازیم. FileDrop اولین کتابخانه‌ای که با آن آشنا شدم و از آن استفاده کردم، کتابخانه‌ی FileDrop است که بسیار ساده و در عین حال قابلیت‌های خوبی را می‌دهد و از فناوری Filereader ( + ) در Html5 برای اینکار استفاده می‌کند. مرورگرهای کروم، فا ...
معرفی کتابخانه Loader برای بارگذاری JS و CSS
در طراحی صفحات وب، معمولا از فایل‌های JS و CSS مختلفی استفاده می‌شود؛ از کتابخانه‌ها گرفته تا فایل‌ها اصلی برنامه. به صورت خیلی ساده ما تمام این فایل‌ها را به صفحه‌ی لینک می‌کنیم. اما این روش درست نیست و حجم صفحه و تعداد درخواست‌ها به سرور برای بارگذاری فایل‌ها خیلی بیشتر می‌شود. در زمان اجرای یک صفحه‌ی وب مسلما قسمت‌هایی از صفحه وجود دارند که شاید در شرایط خاصی، کاربر این صفحات را ببیند و یا نیاز باشد تا منطقی، توسط یک فایل JS خاص انجام ش ...
CoffeeScript #10
اصطلاحات عمومی CoffeeScript Destructuring Assignments با استفاده از Destructuring assignments می‌توانید خصوصیات را از آرایه‌ها یا اشیاء، با هر میزان عمقی استخراج کنید. someObject = { a: 'value for a', b: 'value for b' } { a, b } = someObject console.log "a is '#{a}', b is '#{b}'" نتیجه‌ی کامپایل آن می‌شود: var a, b, someObject; someObject = { a: 'value for a', b: 'value fo ...
CoffeeScript #9
اصطلاحات عمومی CoffeeScript Multiple arguments همانطوری که در قسمت قبل در تابع Math.max مشاهده کردید، با استفاده از ... آرایه را به عنوان آرگومان چندگانه به تابع max ارسال کردیم. در پشت صحنه CoffeeScript برای اطمینان از ارسال کامل آرایه به تابع max، برای فراخوانی از تابع ()apply استفاده می‌کند. ما نیز می‌توانیم از این ویژگی در جای دیگری استفاده کنیم. Log = log: -> console?.log(arguments...) ...
CoffeeScript #8
اصطلاحات عمومی CoffeeScript Includes برای چک کردن وجود یک مقدار در یک آرایه به طور معمول از indexOf استفاده می‌شود؛ در حالی که تمامی نسخه‌های IE به طور کامل از آن پشتیبانی نمی‌کنند. var included = (array.indexOf("test") != -1) CoffeeScript برای حل این مشکل، کلمه‌ی کلیدی in را ارائه کرده است: included = "test" in array متاسفانه برای چک کردن یک کلمه در ...
Performance در AngularJS قدم پنجم
در این مقاله موضوعی را مطرح خواهم کرد که شاید برای خیلی‌ها این نوع کد نویسی خوشایند نباشد. حتی برای خود من هم خوشایند نیست؛ ولی نهایتا در بهبود Performance تاثیر خیلی زیادی دارد. به کد زیر دقت کنید. <div ng-repeat="item in items"> <div ng-if="setting.header">{{item.header}}</div> <div>{{item.title}}</div> <div ng-if="setting.footer">{{item.footer}}</div> </div> ...
Performance در AngularJS قدم چهارم
امیدوارم از مقالات قبلی لذت برده باشید. در این مقاله می‌خواهم در مورد $watch صحبت کنم. سوال اول: $watch چیست و چه کاربردی دارد؟ $watch همان عملکرد Watching در AngularJS را انجام می‌دهد؛ ولی کاربردهای جالبی دارد. به کد زیر دقت کنید. var errorChat=false; $scope.$watch(function () { return errorChat; }, function (newValue, oldValue) { if(newValue ==true){ alert('قسمت محاوره سامانه با مشکل ...
CoffeeScript #7
اصطلاحات عمومی CoffeeScript هر زبانی دارای مجموعه‌ای از اصطلاحات و روش هاست. CoffeeScript نیز از این قاعده مستثنی نیست. در این قسمت می‌خواهیم مقایسه‌ای بین جاوااسکریپت و CoffeeScript انجام دهیم تا به وسیله‌ی این مقایسه، مفهوم عملی این زبان را درک کنید. Each در جاوااسکریپت وقتی می‌خواهیم بر روی آرایه‌ای با بیش از یک خانه، کاری را چندین بار انجام دهیم، می‌توانیم از تابع ()forEach یا از همان قالب حلقه‌ی for در زبان C استفاده کنیم ...
CoffeeScript #6
Classes Inheritance & Super شما می‌توانید به راحتی از کلاس‌های دیگری که نوشته‌اید، با استفاده از کلمه‌ی کلیدی ،extends ارث بری کنید: class Animal constructor: (@name) -> alive: -> true class Parrot extends Animal constructor: -> super("Parrot") dead: -> not @alive() در مثال بالا، Parrot (طوطی) از کلاس Animal ارث بری شده، ک ...
CoffeeScript #5
Classes کلاس نه تنها در جاوااسکریپت بلکه در سایر زبان‌ها از جمله CoffeeScript نیز، بسیار مفید است. در پشت صحنه، CoffeeScript برای ایجاد کلاس از prototype استفاده می‌کند. برای ساختن کلاس در CoffeeScript از کلمه کلیدی class باید استفاده کنید. class Animal نتیجه‌ی کامپایل مثال بالا می‌شود: var Animal; Animal = (function() { function Animal() {} return Animal; })(); ...