محمد افاضاتی

دیده ها، شنیده ها و علاقه مندی های یک برنامه نویس
سه شنبه, ۲۱ شهریور ۱۳۹۱، ۰۷:۱۷ ق.ظ

Dependency Management

در زبان javascript کلاً چیزی به اسم Dependency Management وجود ندارد یعنی شما به راحتی نمی‌توانید بالای فایلتان بنویسید Import X و از X استفاده کنید. کلاً قرار است که همه نیاز ها در خود html پایه با load کردن درست فایل‌ها انجام شود.
در نهایت اگر درست هم به همه چیز دقت کنید همچین نتیجه‌ای خواهد داشت

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.ui.js" type="text/javascript" charset="utf-8"></script>
<script src="application.utils.js" type="text/javascript" charset="utf-8"></script>
<script src="application.js" type="text/javascript" charset="utf-8"></script>
<script src="models/asset.js" type="text/javascript" charset="utf-8"></script>
<script src="models/activity.js" type="text/javascript" charset="utf-8"></script>
<script src="states/loading.js" type="text/javascript" charset="utf-8"></script>
...

که نه تنها زیبا نیست بلکه http overhead زیادی خواهد داشت. یعنی شما تعداد درخواست خیلی زیادی به سرور می‌زنید معلوم نیست همه این‌ها minify شده اند؟ همه‌شان نیاز هستند؟  Dependency Management به نسبت فایل‌هایی که استفاده شده است یک فایل خروجی می‌دهد.

CommonJS
بعد از اینکه javascript به سمت سرور رفت در ابزار هایی مثل rhino و spiderMonkey مشکل  Dependency Management حل شد. حتی در node شما ابزاری به اسم require داشتی که کتابخانه مورد نظر را load می کرد.
بعد از این قضایا Kevin Dangoor در پستی از بلاگش نوشت کهjavascript نیاز دارد که راهی استاندارد برای load کردن کتابخانه‌های javascript داشته باشد. اینگونه بود که CommonJs متولد شد.
شما به راحتی می‌توانید یک فایل javascript را declare کنید و در زمان مورد نظرش require کنید.


// maths.js
exports.per = function(value, total) {
return( (value / total) * 100 );
};
// application.js
var Maths = require("./maths");
assertEqual( Maths.per(50, 100), 50 );


از خودتان می‌پرسید ارتباط این با برنامه نویسی Client side چیست؟ بعد از اینکه اصول استاندارد شدند و همه چیز برپایه این شد CommonJs قسمتی را اضافه کرد به اسم Modules/Transport با هدف load کردن module به صورت async انجام می‌شد و در سمت client هم همه این موارد را داشته باشیم.

// maths.js
require.define("maths", function(require, exports){
exports.per = function(value, total) {
return( (value / total) * 100 );
};
});
// application.js
require.define("application", function(require, exports){
var per = require("./maths").per;
assertEqual( per(50, 100), 50 );
}), ["./maths"]); // List dependencies (maths.js)


با این اتفاق تمام مشکلات scope و namesapacing و … حل می‌شد.


Module Loaders
برای استفاده در سمت client نیاز به Module Loaders بود پس ابزار هایی برای این نوشته شد.


Yabble
با این ابزار خیلی ساده می‌توانید root اصلی را مشخص کنید و به نسبت تعریف‌ها همه را Load کنید.

<script src="https://github.com/jbrantly/yabble/raw/master/lib/yabble.js"> </script>
<script>
require.setModuleRoot("javascripts");
// We can use script tags if the modules
// are wrapped in the transport format
require.useScriptTags();
require.ensure(["application"], function(require) {
// Application is loaded
});
require.ensure(["application", "utils"], function(require) {
var utils = require("utils");
assertEqual( utils.per( 50, 200 ), 25 );
});
</script>


با require از Load شدن مطمئن می‌شوید و می‌تواند با آن ابزار کار کنید.
در کل موارد دیگری هم برای تکمیل این چرخه وجود دارد مثل



نوشته شده توسط محمد افاضاتی
ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم

محمد افاضاتی

دیده ها، شنیده ها و علاقه مندی های یک برنامه نویس
محمد افاضاتی
محمد افاضاتی برنامه نویس python php دیتابیس های postgresql mongodb و ...

رونوشتی از علاقه مندی هایم برای ماندگار تر شدن!

تبلیغات

طبقه بندی موضوعی

Feedburner RSS

Others

توییتر

Dependency Management

سه شنبه, ۲۱ شهریور ۱۳۹۱، ۰۷:۱۷ ق.ظ

در زبان javascript کلاً چیزی به اسم Dependency Management وجود ندارد یعنی شما به راحتی نمی‌توانید بالای فایلتان بنویسید Import X و از X استفاده کنید. کلاً قرار است که همه نیاز ها در خود html پایه با load کردن درست فایل‌ها انجام شود.
در نهایت اگر درست هم به همه چیز دقت کنید همچین نتیجه‌ای خواهد داشت

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.ui.js" type="text/javascript" charset="utf-8"></script>
<script src="application.utils.js" type="text/javascript" charset="utf-8"></script>
<script src="application.js" type="text/javascript" charset="utf-8"></script>
<script src="models/asset.js" type="text/javascript" charset="utf-8"></script>
<script src="models/activity.js" type="text/javascript" charset="utf-8"></script>
<script src="states/loading.js" type="text/javascript" charset="utf-8"></script>
...

که نه تنها زیبا نیست بلکه http overhead زیادی خواهد داشت. یعنی شما تعداد درخواست خیلی زیادی به سرور می‌زنید معلوم نیست همه این‌ها minify شده اند؟ همه‌شان نیاز هستند؟  Dependency Management به نسبت فایل‌هایی که استفاده شده است یک فایل خروجی می‌دهد.

CommonJS
بعد از اینکه javascript به سمت سرور رفت در ابزار هایی مثل rhino و spiderMonkey مشکل  Dependency Management حل شد. حتی در node شما ابزاری به اسم require داشتی که کتابخانه مورد نظر را load می کرد.
بعد از این قضایا Kevin Dangoor در پستی از بلاگش نوشت کهjavascript نیاز دارد که راهی استاندارد برای load کردن کتابخانه‌های javascript داشته باشد. اینگونه بود که CommonJs متولد شد.
شما به راحتی می‌توانید یک فایل javascript را declare کنید و در زمان مورد نظرش require کنید.


// maths.js
exports.per = function(value, total) {
return( (value / total) * 100 );
};
// application.js
var Maths = require("./maths");
assertEqual( Maths.per(50, 100), 50 );


از خودتان می‌پرسید ارتباط این با برنامه نویسی Client side چیست؟ بعد از اینکه اصول استاندارد شدند و همه چیز برپایه این شد CommonJs قسمتی را اضافه کرد به اسم Modules/Transport با هدف load کردن module به صورت async انجام می‌شد و در سمت client هم همه این موارد را داشته باشیم.

// maths.js
require.define("maths", function(require, exports){
exports.per = function(value, total) {
return( (value / total) * 100 );
};
});
// application.js
require.define("application", function(require, exports){
var per = require("./maths").per;
assertEqual( per(50, 100), 50 );
}), ["./maths"]); // List dependencies (maths.js)


با این اتفاق تمام مشکلات scope و namesapacing و … حل می‌شد.


Module Loaders
برای استفاده در سمت client نیاز به Module Loaders بود پس ابزار هایی برای این نوشته شد.


Yabble
با این ابزار خیلی ساده می‌توانید root اصلی را مشخص کنید و به نسبت تعریف‌ها همه را Load کنید.

<script src="https://github.com/jbrantly/yabble/raw/master/lib/yabble.js"> </script>
<script>
require.setModuleRoot("javascripts");
// We can use script tags if the modules
// are wrapped in the transport format
require.useScriptTags();
require.ensure(["application"], function(require) {
// Application is loaded
});
require.ensure(["application", "utils"], function(require) {
var utils = require("utils");
assertEqual( utils.per( 50, 200 ), 25 );
});
</script>


با require از Load شدن مطمئن می‌شوید و می‌تواند با آن ابزار کار کنید.
در کل موارد دیگری هم برای تکمیل این چرخه وجود دارد مثل

نظرات  (۲)

۲۱ شهریور ۹۱ ، ۰۹:۵۲ مهران خواجوی
 خوب برای build کردن چنین پروژه هایی از چه ابزاری استفاده میکنی؟ واسه این که باید فایل ها به ترتیب مشخصی توی یه فایل فشرده بشه چه راهکاری داری؟
پاسخ:
برای build نهایی؟ خودشون ابزار دارند مثلا ender در نهایت با node یک فایل درست می کند و همه و رو می تونی compress کنی
۰۵ مهر ۹۱ ، ۱۰:۳۶ ایمان ریحانیان
 خیلی خوب بود، مرسی

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی