استاندارد کدنویسی جاوا اسکریپت

بسمه تعالی

استاندارد کدنویسی جاوا اسکریپت

 

حاصل تحقیقات صورت گرفته بر روی چارچوب های مختلف جاوا اسکریپت این شد که چارچوب Backbone در عین حال که ساختار مناسبی به کدهای جاوا اسکریپت می‌دهد، پیچیدگی نسبتاً کمتری را به کد تحمیل می‌کند؛ بنابراین چارچوب نامبرده به عنوان ابزار اصلی استانداردسازی کدهای جاوا اسکریپت پیشنهاد می‌شود. در این مقاله تبصره‌هایی را برای استفاده از این چارچوب عنوان می‌کنیم که رعایت آن‌ها لازمه کار تیمی موفق در کدنویسی جاوا اسکریپت است.

الف) توابع Getter و Setter در مدل‌ها

برای این که هنگام استفاده از یک مدل به راحتی بفهمیم مشخصه‌های مدل چیست، لازم است در هر مدل، توابع Getter و Setter را تعریف کنیم تا ابزارهای برنامه‌نویسی مشخصه‌های مدل را به درستی پیشنهاد دهند. نکته قابل توجه این است که برای پیاده‌سازی این توابع فقط و فقط باید از get و set خود Backbone استفاده شود. در ادامه مثالی از توابع getter و setter در یک مدل را مشاهده می‌کنید:

getTitle:function(){

      return this.get(‘title’);

}

setTitle:function(t){

      this.set(‘title’,t);

}

ب) دسترسی به المان خاصی از View ها

هنگام تعریف هر View باید تعیین کرده باشیم که آیا از این View فقط یک بار شیء ایجاد می‌کنیم یا این‌که ممکن است چندین بار از آن شیء ایجاد کنیم. در حالت اول (ایستا) مجاز هستیم به المان موردنظر id بدهیم و برای دستیابی به آن از $(‘#id’) استفاده کنیم. اما در حالت دوم (پویا) مجاز نیستیم به المان‌ها id بدهیم زیرا با چند بار ایجاد شیء از View موردنظر بین id ها تداخل ایجاد می‌شود. در این حالت باید از طریق کلاس css به المان موردنظر دست پیدا کنیم. مثلاً $(‘.commentTitle’) .

ج) تغییرات در مدل که View را هم تغییر می‌دهد

در حالتی که یک View، مدل متناظر دارد و می‌خواهیم با تغییر در مدل، View هم به روز شود، هیچ وقت به طور مستقیم View را تغییر نمی‌دهیم بلکه مدل را به روز می‌کنیم تا View خودش به روز شود. برای این که این اتفاق بیفتد باید در تابع initialize ی که در View نوشته ایم، به تغییرات مدل گوش دهیم و تابع مناسب را فراخوانی کنیم. در ادامه مثال ساده‌ای را مشاهده می‌کنید:

initialize: function () {

        this.listenTo(app.todos, 'add', this.addOne);

},

 

createTodo: function (e) {

app.todos.create(this.newAttributes());

this.$input.val('');

   },

 

addOne: function (todo) {

       var view = new app.TodoView({ model: todo });

       this.$list.append(view.render().el);

   },

بدیهی است هنگامی که یک View مدل متناظر ندارد، تغییر مستقیم View بلامانع است.

 

د) نگهداری المان‌های View در متغیر

در صورتی که نیاز به نگهداری المان‌های رندر شده در متغیر داریم، در انتهای تابع رندر (قبل از return) این‌گونه متغیرها را مقداردهی می‌کنیم.

render: function () {

       this.$input = this.$('.edit');

       return this;

   },

هـ) المان متناظر با View

 هر View که تعریف می‌کنیم، بالاخره باید در جایی از صفحه آن را رندر کنیم؛ بنابراین حتماً باید این View با یکی از المان‌های صفحه متناظر شود. اگر View از نوع ایستاست (یعنی فقط یک بار از آن شیء می‌سازیم) می‌توانیم به طور مستقیم el آن را تعیین کنیم. بنابراین دیگر نباید به آن tagName بدهیم. اما اگر View از نوع پویاست (یعنی ممکن است چند بار از آن شیء ایجاد کنیم) باید به آن tagName بدهیم و نباید به آن el بدهیم. در ادامه مثالی را مشاهده می‌کنید:

app.TodoView = Backbone.View.extend({

      //... is a list tag.

      tagName:  'li'

});

app.AppView = Backbone.View.extend({

      el: '#todoapp'

});