Coding Standard

[haicon232]

1. Sử dụng computed để tính toán 1 property khi không cần tham số tại các line sau:
   https://github.com/hamzoni/Web-Front-End-Assignment/blob/master/src/components/partials/ImageBox.vue#L42
   https://github.com/hamzoni/Web-Front-End-Assignment/blob/master/src/components/partials/ImageBox.vue#L43
   ...

2. Sử dụng Array.prototype.map() trong những trường hợp for và không cần dùng đến index:
   Tham khảo:
   https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

VD:
https://github.com/hamzoni/Web-Front-End-Assignment/blob/master/src/components/partials/Pagination.vue#L75

for(let i = 0; i < this.localPagRaw.length; i++) {
          let name = this.localPagRaw[i].match(/(?!")(\w+)(?=")/g)[0];
          let val = this.localPagRaw[i].match(/(?!page=)\d+/g)[0];
          this.localPag[name] = val;
}

Viết lại như sau:

this.localPagRaw.map((o) => {
      let name = o.match(/(?!")(\w+)(?=")/g)[0];
      let val = o.match(/(?!page=)\d+/g)[0];
      this.localPag[name] = val;
      return o
})

Ngoài ra chỗ này localPag em có thể sử dụng là result của cái map kia luôn. (Tùy thuộc vào logic)

3. So sánh với undefined, null, ...
   VD:
   https://github.com/hamzoni/Web-Front-End-Assignment/blob/master/src/components/partials/Pagination.vue#L22

Chỉ cần sử dụng !x là được.

4. Chưa sử dụng JSLint trong Project.
5. Viết code chưa thống nhất. Lúc thì default value là null, lúc thì default value là undefined.
6. Sử dụng các prototype của Array.
   VD:
   https://github.com/hamzoni/Web-Front-End-Assignment/blob/master/src/components/pages/Albumn.vue#L69

Nên sử dụng hàm
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push

7. Tên biến nhiều chỗ chưa Camel Case.
   https://github.com/hamzoni/Web-Front-End-Assignment/blob/master/src/components/IHeader.vue#L20

8. Không commit key, password, ... lên git.
   Sử dụng biến config để load ra key, password ở đây
   https://github.com/hamzoni/Web-Front-End-Assignment/blob/master/src/assets/js/api.js#L4

[taquy]

#1.
Before:

data() {
     return {
          thumbnail: this.info.urls.thumb,
          date: {
               created: DateFNS.format(DateFNS.parse(this.info.created_at), "hh:mm:ss A MMM Do YYYY"),
               updated: DateFNS.format(DateFNS.parse(this.info.updated_at), "hh:mm:ss A MMM Do YYYY")
          },
          fullName: this.info.user.first_name + " " + this.info.user.last_name,
          username: "@" + this.info.user.username,
          profileUrl: "/profile/" + this.info.user.username
     }
},

After:

computed: {
     thumbnail: function() {
          return this.info.urls.thumb;
     },
     date: function() {
          return {
               created: DateFNS.format(DateFNS.parse(this.info.created_at), "hh:mm:ss A MMM Do YYYY"),
               updated: DateFNS.format(DateFNS.parse(this.info.updated_at), "hh:mm:ss A MMM Do YYYY")
          }
     },
     fullName: function() {
          return this.info.user.first_name + " " + this.info.user.last_name;
     },
     username: function() {
          return "@" + this.info.user.username;
     },
     profileUrl: function() {
          return "/profile/" + this.info.user.username;
     }
}

#2.
Before:

for(let i = 0; i < this.localPagRaw.length; i++) {
    let name = this.localPagRaw[i].match(/(?!")(\w+)(?=")/g)[0];
    let val = this.localPagRaw[i].match(/(?!page=)\d+/g)[0];
    this.localPag[name] = val;
}

After:

this.localPagRaw.map(pg => {
    let name = pg.match(/(?!")(\w+)(?=")/g)[0];
    let val = pg.match(/(?!page=)\d+/g)[0];
    this.localPag[name] = val;
});

#3
Đúng rồi anh, check tồn tại short version. Đã fix x !== undefined thành x ạ.

#4 , #5 done

#6
Đã dùng Array.prototype.push() (alternation)

#7
Done.
Còn một số chỗ không có camel là của API hoặc tên component.

#8
cái này em ko rõ lắm, nhờ anh chỉ bảo thêm ạ.

[hiendv]

4. is not resolved

[taquy]

I don't understand 4.

[hiendv]

Take a look at this: https://github.com/eslint/eslint

[hiendv]

Module build failed: Error: Cannot find module 'eslint-config-standard'

[hiendv]

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})