اشتراکها
اشتراکها
پروژه Regulex
اشتراکها
معرفی math.js
در جهت تکمیل بحث "بررسی امنیتی، حین استفاده از jQuery Ajax"، یک مورد دیگر را هم میتوان اضافه کرد: چگونه صفحهی معروف Add service reference را در VS.NET جهت سرویس WCF خود از کار بیندازیم؟
راه حل آن هم بسیار ساده است اما چون عموما در منابع مرتبط با جملات و کلمات بیش از حد فنی بیان میشود، شاید از دید دور مانده باشد:
اگر WCF Service تولیدی شما تنها قرار است توسط برنامهی Silverlight یا جاوا اسکریپتی موجود در پروژهی جاری مورد استفاده قرار گیرد، باید Meta Data مرتبط با آن سرویس را جهت بالابردن امنیت سیستم، حذف نمود. توسط این Meta Data میتوان ServiceContract ، OperationContract و سایر اطلاعات یک WCF Service را استخراج نمود.
الف) روش غیر فعال کردن متادیتا در یک Ajax enabled WCF Service
به فایل وب کانفیگ برنامه مراجعه کرده و تغییر زیر را اعمال کنید:
...
<behavior name="">
<serviceMetadata httpGetEnabled="false" httpsGetUrl="false" />
...
</behavior>
...
ب) روش غیرفعال کردن متادیتا در یک Silverlight enabled WCF Service
ابتدا قسمت الف را اعمال نموده سپس تغییر زیر را نیز لحاظ نمائید (IMetadataExchange به صورت کامنت درآمده):
<!-- <endpoint address="mex" binding="mexHttpBinding"
contract="IMetadataExchange" /> -->
با این تغییرات ساده، گزینهی Add service reference دیگر قابلیت تشخیص خودکار اطلاعات سرویس شما را نداشته و با یک خطا متوقف خواهد شد:
The HTML document does not contain Web service discovery information.
Metadata contains a reference that cannot be resolved.
سؤال:
1- آیا با این تغییر در عملکرد WCF سرویس ما اخلال ایجاد خواهد شد؟
پاسخ: خیر. تنها Web service discovery information را از کار انداختهایم.
2- در صورت تغییر کدهای WCF Service چه باید کرد؟
پاسخ: اگر امضای متدها و اینترفیسهای تعریف شده تغییری نداشتهاند، لزومی به هیچ نوع تغییری نیست. در غیراینصورت، سریع موارد الف و ب فوق را به حالت اول برگردانده، کلاینت مورد استفاده را به روز کنید، مجددا متادیتا را حذف نمائید.
در این قسمت روش جایگزین کردن متد css جیکوئری را با کدهای خالص جاوا اسکریپتی بررسی میکنیم.
کار با Inline Styles
در این مثال میخواهیم با استفاده از جاوا اسکریپت، المانهای h2 و h3 را یافته و سپس h2ها را آبی و h3ها را سبز کنیم:
برای تغییر inline style المانها، از خاصیت style آنها استفاده میشود که در نهایت این شیوهنامههای جدید توسط ویژگی style به همان المان اضافه میشوند:
خاصیت style جزو استاندارد DOM Level 2 است که در سال 2000 تصویب شدهاست (از زمان IE 8.0 به بعد در دسترس است). باید دقت داشت که از این روش بیشتر در کتابخانههای جاوا اسکریپتی برای شرایطی خاص، جهت تغییر پویای رابط کاربری استفاده میشود و هر تغییری که در اینجا اعمال شود، مقادیر قبلی موجود را بازنویسی میکند.
همچنین اگر بخواهیم به یک المان چندین شیوهنامه را انتساب دهیم، روش کار به صورت زیر است:
پس از یافتن المانهای مدنظر، تنها کافی است نام شیوهنامهی مدنظر را به خاصیت style اضافه و مقدار دهی کنیم. در اینجا نام شیوهنامهای که «کبابی» باشد، مانند font-weight، به صورت camel case مانند fontWeight درج خواهد شد؛ هرچند از همان نام اصلی نیز میتوان به صورت زیر استفاده کرد:
روش دیگری نیز برای انجام این تغییرات چندتایی وجود دارد:
خاصیت style یک المان، از نوع اینترفیس CSSStyleDeclaration است که دارای خاصیت استاندارد cssText نیز میباشد. توسط این خاصیت میتوان چندین شیوهنامه را به صورت یکجا به عنصری انتساب داد و یا تمام آنها را خواند.
کار با Style Sheets
Inline styles تنها روش کار با شیوهنامهها نیست. روش صحیح و قابل مدیریت کار با شیوهنامهها استفاده از فایلهای style sheets است. برای مثال تغییرات قبل را میتوان در فایلی به نام styles.css و با محتوای زیر ایجاد کرد:
و سپس آنرا به صفحه متصل نمود:
و یا حتی میتوان این شیوه نامه را به صورت inline نیز به ابتدای صفحه اضافه نمود:
اما ممکن است در برنامه بخواهیم امکان تغییر پویای قالب را به کاربران بدهیم. در یک چنین حالتی اعمال این نوع شیوهنامهها توسط جاوا اسکریپت مفهوم پیدا میکند:
اولین سطر، اولین تگ style اضافه شده به صفحه را یافته (این style میتواند inline و یا لینک شدهی توسط یک فایل باشد) و سپس شیوه نامهی جدیدی را توسط متد insertRule، در انتهای آن به صورت پویا درج میکند.
مخفی کردن و نمایش دادن المانها در صفحه
جیکوئری به همراه متدهای hide و show است که کار مخفی کردن و یا نمایش دادن مجدد یک المانرا انجام میدهند:
در کل روشهای زیادی برای مخفی کردن یک المان وجود دارند. برای مثال میتوان opacity آنرا به صفر تنظیم کرد و یا position آنرا به absolute و سپس آنرا در مختصاتی خارج از صفحه قرار داد. اما عموما خاصیت display را به none تنظیم میکنند. همچنین در استاندارد W3C HTML5، خاصیت جدید hidden از نوع boolean نیز به المانها اضافه شدهاند که دقیقا برای همینمنظور بکار میرود. مزیت مهم این خاصیت نه فقط استاندارد بودن آن، بلکه بالابردن دسترسی پذیری المانهای صفحه توسط برنامههای «screen reader» مخصوص معلولین است. بنابراین با استفاده از جاوا اسکریپت خالص برای مخفی کردن یک المان میتوان نوشت:
این روش 25 بار سریعتر از متد hide جیکوئری است! از این جهت که jQuery در پشت صحنه مدام متد window.getComputedStyle را برای موارد خاص و بحرانی کار با شیوهنامهها فراخوانی میکند (در تمام متدهایی که با CSS کار میکنند) و این متد تاثیر منفی بر روی کارآیی برنامه دارد.
و چون خاصیت hidden از نوع Boolean است، ذکر آن در یک المان یعنی تنظیم آن به true و حذف آن، یعنی تنظیم آن به false یا نمایش مجدد المان در اینجا:
اندازهگیری تاثیر شیوهنامهها بر روی طول و عرض المانها
CSS Box Model یک چنین تعریفی را دارد:
زمانیکه از متدهای ()width و ()height جیکوئری بر روی المانی استفاده میشود، صرفا طول و عرض قسمت «content» را دریافت خواهید کرد.
برای این منظور در جاوا اسکریپت خالص این خواص در اختیار ما است:
روش اندازه گیری Content + Padding توسط جاوا اسکریپت خالص:
این خواص هرچند اخیرا به استانداردهای CSS به صورت رسمی اضافه شدهاند، اما از زمان IE 6.0 پشتیبانی میشدهاند و با متدهای ()innerWidth و ()innerHeight جیکوئری قابل مقایسه هستند.
روش اندازه گیری Content + Padding + Border توسط جاوا اسکریپت خالص:
این خواص از زمان IE 8.0 پشتیبانی میشدهاند.
کار با Inline Styles
<h1>News</h1> <div>Welcome to our site!</div> <h2>World</h2> <h3>Title 1</h3> <div>description 1.</div> <h2>Science</h2> <h3>Title 2</h3> <div>description 2.</div>
var headings = document.querySelectorAll('h2, h3'); for (var i = 0; i < headings.length; i++) { if (headings[i].tagName === 'H2') { headings[i].style.color = 'blue'; } else { headings[i].style.color = 'green'; } }
<h2 style="color: blue">….</h2> <h3 style="color: green">….</h3>
همچنین اگر بخواهیم به یک المان چندین شیوهنامه را انتساب دهیم، روش کار به صورت زیر است:
<h2>World</h2> ... <h2>Science</h2> <script> var headings = document.querySelectorAll('h2'); for (var i = 0; i < headings.length; i++) { headings[i].style.color = 'blue'; headings[i].style.fontWeight = 'bold'; } </script>
headings[i].style['font-weight'] = 'bold';
var headings = document.querySelectorAll('h2'); for (var i = 0; i < headings.length; i++) { headings[i].style.cssText = 'color: blue; font-weight: bold'; }
کار با Style Sheets
Inline styles تنها روش کار با شیوهنامهها نیست. روش صحیح و قابل مدیریت کار با شیوهنامهها استفاده از فایلهای style sheets است. برای مثال تغییرات قبل را میتوان در فایلی به نام styles.css و با محتوای زیر ایجاد کرد:
h2 { color: blue; } h3 { color: green; }
<link href="styles.css" rel="style sheet">
<style> h2 { color: blue; } h3 { color: green; } </style>
var sheet = document.styleSheets[0]; sheet.insertRule('h2 { font-style: italic; }', sheet.cssRules.length - 1);
مخفی کردن و نمایش دادن المانها در صفحه
جیکوئری به همراه متدهای hide و show است که کار مخفی کردن و یا نمایش دادن مجدد یک المانرا انجام میدهند:
// hide an element $element.hide(); // show it again $element.show();
element.setAttribute('hidden', '');
و چون خاصیت hidden از نوع Boolean است، ذکر آن در یک المان یعنی تنظیم آن به true و حذف آن، یعنی تنظیم آن به false یا نمایش مجدد المان در اینجا:
element.removeAttribute('hidden');
اندازهگیری تاثیر شیوهنامهها بر روی طول و عرض المانها
CSS Box Model یک چنین تعریفی را دارد:
زمانیکه از متدهای ()width و ()height جیکوئری بر روی المانی استفاده میشود، صرفا طول و عرض قسمت «content» را دریافت خواهید کرد.
برای این منظور در جاوا اسکریپت خالص این خواص در اختیار ما است:
<style> .box { padding: 10px; margin: 5px; border: 3px solid; display: inline-block; } </style> <span class="box">a box</span>
// returns 38 var clientHeight = document.querySelector('.box').clientHeight; // returns 55 var clientWidth = document.querySelector('.box').clientWidth;
روش اندازه گیری Content + Padding + Border توسط جاوا اسکریپت خالص:
// returns 44 var offsetHeight = document.querySelector('.box').offsetHeight; // returns 61 var offsetWidth = document.querySelector('.box').offsetWidth;
معرفی :
Svelte یک رویکرد جدید برای ایجاد رابط کاربری است که به ما کمک میکند صفحاتی پویا به صورت SPA با کارآیی و کیفیت بالا و همچنین کمترین حجم کد تولید کنیم. تفاوت اصلی svelte با رقبای سنتی خود مانند vue - React - angular این است که Svelte تنها یک فریم ورک نیست، بلکه درواقع یک کامپایلر است که همین موضوع سبب شده توجه زیادی را اخیرا به خود جلب کند. در فریم ورکهای سنتی، تمام عملیات در browser انجام میشود یا بهتر است بگوییم در run-time؛ ولی svelte تمام این عملیات را زمان build شدن برنامه شما انجام میدهد و کد جاوا اسکریپتی بدون هیچ وابستگی به هیچ پکیجی تولید میکند. نکته دیگری که باید به آن اشاره کنم این است که برخلاف سایر فریم ورکها، svelte از virtual DOM استفاده نمیکند! در بخشهای بعد در مورد virtual DOM و معایب آن بیشتر صحبت خواهیم کرد.
مقایسه مختصر فریم ورکهای معتبر :
مقایسههایی که در ادامه قصد دارم به اشتراک بگذارم، بر مبنای سه بخش Performance - size - lines of code است که به صورت مختصر با هم بررسی خواهیم کرد و کاری با جزئیات این مقایسه نداریم؛ چرا که هدف از نشان دادن این مقایسه صرفا این است که شاید برای ما سوال شود چرا باید یا بهتر است به این فریم ورک اهمیت بدهیم.
- Performance : کارآیی - که در ارتباط با مدت زمان پاسخ گویی و قابل استفاده شدن برنامه میباشد. (مقایسه به درصد - هرچه بیشتر عملکرد بهتر)
در مقایسه اول، اکثر فریم ورکها، امتیازی بالای 90 درصد دارند که در واقع نشان دهنده این است شما از هرکدام از این موارد استفاده کنید، چندان تفاوتی را احساس نخواهید کرد.
با توجه به اینکه svelte به نسبت بقیه این فریم ورکها که خیلی از آنها کاملا جا افتاده هستند، بسیار جدید است و جای بهبود دارد از نظر performance عملکرد قابل قبولی از خود نشان داده است.
- Size : اندازه - که نشان دهنده حجم نهایی فایلهای تولید شده ( Css-Html-JavaScript ) فریم ورک است. این مقایسه اندازه فریم ورک و تمام وابستگیهای آن است که به bundle نهایی برنامه اضافه شده است (هر چه اندازه فایل کمتر باشد بهتر است چراکه توسط کاربر نهایی زودتر دانلود میشود).
در مقایسه size یکی از دلایل محبوبیت این کامپایلر را مشاهده میکنید که تفاوت قابل توجهی نسبت به سایر فریم ورکها دارد.
- Lines of Code : تعداد خطوط کد - نشان دهنده این است که یک نویسنده بر اساس این فریم ورکها چند سطر کد را باید برای تهیهی یک برنامهی جدید بنویسد.
نکته دیگری که باید اینجا بهش اشاره کنم، ساده بودن svelte است. این سادگی سبب میشود میزان کدنویسی برای ساخت یک برنامه به مراتب کمتر از فریم ورکهای دیگر باشد. که در نتیجه بازدهی استفاده از آن را بالاتر خواهد برد.
برای کسب اطلاعات بیشتر و مطالعه منبع این مقایسه میتوانید به این لینک مراجعه نمایید.
نتیجه گیری : ( مزایا - معایب )
درمورد مزایای استفاده از svelte میتوان به راحتی کارکردن با آن، حجم بسیار کم کدهای نهایی برنامه و عملکرد مناسب آن و همینطور استفاده نکردن از virtualDom اشاره کرد؛ چرا که برای اولین بار کدهای تولید شده به معنای واقعی واکنش گرا خواهند بود.
هرچند معایبی هم شاید داشته باشد که قبل از هر چیز بهتر است به آنها اشاره کنم. بزرگترین و شاید تنها ایرادی که من میتوانم از این فناوری بگیرم این است که خالق این تکنولوژی یک نفر است! angular توسط شرکت google توسعه داده میشود. react توسط فیسبوک توسعه داده میشود. vue درست است که شرکت بزرگی آن را توسعه نمیدهد ولی نتیجه یک کار تیمی و چند صد نفر برنامه نویس مختلف است که به صورت open source به توسعه آن میپردازند. شاید این تنها نکته منفی باشد که اعتماد به این تکنولوژی را سخت کرده است.
دانلود و نصب :
پیش نیاز :
قبل از هرچیز برای نصب Svelte به Node.Js نیاز داریم. قبل از شروع کار، از نصب بودن آن اطمینان حاصل نمایید.
ساخت اولین برنامه :
npx degit sveltejs/template my-svelte-project cd my-svelte-project npm install npm run dev
البته با استفاده از اسکریپت dev، کدهای ما برای زمان برنامه نویسی بهینه شدهاند و چندان برای پابلیش و استفاده مناسب نیستند؛ لذا برای تولید کدهای مناسب برای محصول نهایی میتوانیم از دستور npm run build استفاده کنیم.
در بخش بعد به بررسی ساختار فایلها و کدهای ایجاد شده Svelte میپردازیم.
در این مقاله شما را با روشی آشنا خواهم کرد که در عین سادگی، کارآیی زیادی در پروژههای AngularJS خواهد داشت.
در پروژههای بزرگ که تعداد Controllerها بیش از حد میباشد همیشه تعدادی Injection مشترک وجود دارد و مدیریت این Injectionها در همه کنترلها و مخصوصا کنترلهای جدید که به پروژه اضافه میکنیم سخت میشود و گاهی از نظم خارج میشود مخصوصا وقتی که تعداد Developerها در پروژه زیاد باشند.
با استفاده از تابع زیر مابقی Injectionهای مختص هر Controller را پیاده سازی میکنیم.
توضیح تابع: در خط اول یک Copy از آرایه را تهیه میکنیم تا در دفعات بعد هم این آرایه قابل استفاده باشد. arguments در داخل تابع به رشته Injectionهای ارسال شده به تابع و تابع Controller اشاره دارد. با این روش میتوانیم به صورت نامحدود Injectionها را به تابع ارسال کنیم. در داخل حلقه به Copy متغیر injection همه Injectionهای ارسالی به تابع را push میکنیم. نهایتا این تابع آرایهای از injectionهای مشترک و Injectionهای مختص هر Controller و خود تابع Controller را بر میگرداند.
همانطور که مشاهده کردید، با این روش خیلی راحتتر میتوانید Injectionهای مشترک را مدیریت کنید. اگر قرار باشد Injection جدیدی را به همه Controllerها اضافه کنید، کافیست آن را در آرایه injection درج کنید.
برای همه ما پیش آماده است که خیلی از Injectionهای Controllerهای AngularJS به صورت مشترک بوده ولی مجبور شدهایم این Injectionها را در هر Controller تکرار کنیم. کدهای زیر را مشاهده کنید. در این کد یک سری از injectionها به صورت مشترک در این ۴ Controller تکرار شده است.
app.controller('ctrl1',['$scope','$rootscope','$location','$route','api','delete','notify',ctrl1]); ... app.controller('ctrl2',['$scope','$rootscope','$location','$route','api','delete','notify','chart',ctrl2]); ... app.controller('ctrl3',['$scope','$rootscope','$location','$route','api','delete','notify','pulling',ctrl3]); ... app.controller('ctrl4',['$scope','$rootscope','$location','$route','api','delete','notify','chart','report',ctrl4]);
در این روش که نوعی Trick ساده Javascript هست به شما در مدیریت Injectionها کمک میکند.
خوب ابتدا همه Injectionهای مشترک Controllerها را شناسایی میکنیم و یه آرایه تعریف میکنیم و همه Injectionهای مشترک را مرتب در این آرایه قرار میدهیم.
var injection=['$scope','$rootscope','$location','$route','api','delete','notify'];
function injectionHandle() { var _injection=angular.copy(injection); for(var i=0;i<arguments.length;i++){ _injection.push(arguments[i]); } return _injection; }
در مرحله بعدی در تعریف Controllerها تابع injectionHandle را همراه با Injectionهای مختص آن Controller را صدا میزنیم.
در کد زیر نحوه استفاده از این روش را مشاهده میکنید:
app.controller('ctrl1', injectionHandle(ctrl1)); ... app.controller('ctrl2', injectionHandle('chart',ctrl2)); ... app.controller('ctrl3', injectionHandle('pulling',ctrl3)); ... app.controller('ctrl4', injectionHandle('chart','report',ctrl4));
jQuery یا کلا JavaScript یعنی کدهای سمت کاربر. بنابراین این کدها باید دسترسی رسیدن به مدخل سمت سرور را داشته باشند و اگر عموم از آن منع شده باشند، یک اسکریپت معمولی هم بدیهی است که دسترسی خاصی نخواهد داشت چون سمت سرور اجرا نمیشود. فقط نتیجه عملیات آن به سمت سرور Post میشود.
یکی از کارهای متداول سمت سرور جهت منع عموم و فقط دسترسی دادن به jQuery مورد زیر است:
«بررسی امنیتی، حین استفاده از jQuery Ajax»
یکی از کارهای متداول سمت سرور جهت منع عموم و فقط دسترسی دادن به jQuery مورد زیر است:
«بررسی امنیتی، حین استفاده از jQuery Ajax»