Asked Sep 4th, 2018 8:19 AM 223 0 3
  • 223 0 3
+2

Tại sao khi build trang web phía browser luôn convert lại tên của các js css về dạng 1 ký tự ?

Share
  • 223 0 3

Theo mọi người thì tại sao ở những file vendor, code javascript, người ta hay convert hết tên biến và tên hàm về dạng chỉ bao gồm 1 ký tự chứ ko để đầy đủ, tường minh như ban đầu? Kiểu như, khi code, lập trình viên sẽ đặt tên hàm là function calculateSumOfTwoNumbers( ) { }, nhưng khi publish code thì sẽ đặt lại là 1 ký tự gì đó, ví dụ function c( ) { }

function P(e, t, o, i) {
  o.updateBound = i, window.addEventListener('resize', o.updateBound, {
    passive: !0
  });
  var r = n(e);
  return H(r, 'scroll', o.updateBound, o.scrollParents), o.scrollElement = r, o.eventsEnabled = !0, o
}

function A() {
  this.state.eventsEnabled || (this.state = P(this.reference, this.options, this.state, this.scheduleUpdate))
}
Mogami @Xitrum
Sep 4th, 2018 4:08 PM

Mình cũng thích phong cách này.

  1. Cho nó nhẹ load nhanh
  2. Để người copy tập đọc cho quen, vì nhiều người Minify 😄
  3. Thứ 3, lừa sếp (leader, cái thằng sếp (leader) mà nó đọc code như thế này nó đọc được 1/2 là đi uống trà rồi (nó chỉ cần đầu vào là gì, đầu ra là gì thôi ..)
  4. Hắc não mấy thằng nhận transfer
  5. Thì theo su hướng thôi ( 1 dòng code, mà nhiều quá thì 1 dòng cái méo gì đẹp nữa 😄)
+1
| Reply
Share

3 ANSWERS


Answered Sep 4th, 2018 8:32 AM
Accepted
+5

nhưng khi publish code thì sẽ đặt lại là 1 ký tự gì đó, ví dụ function c( ) { }

Việc khi publish code tên biến bị thay đổi không phải là do người viết code cố tình sửa lại thế, mà là do code đã qua công đoạn minify, bởi một tool npm nào đó, như uglify-js, minifier, babel-minify ... bạn ạ. Lúc đó code sẽ được tối giản hết mức để có được kích thức nhỏ nhất có thể.

Các cách để tối giản code thì như bạn đã nói, có thể là rút ngắn tên biến, tên hàm còn a, b, C ... loại bỏ các dấu xuống dòng, khoảng trắng, index ...

Ngoài ra trong đoạn code của bạn còn có một phương pháp nữa, đó là ở đoạn passive: !0. Mình đoán là khi code mọi người sẽ viết passive: true, nhưng qua công đoạn minify, nó đã trở thành passive: !0, đơn giản vì viết chữ true tốn đến 4 ký tự, còn viết !0 thì chỉ mất 2 ký tự thôi. 😂 Các công cụ minify nó tính toán chi ly đến thế cơ bạn ạ, nên cũng không có gì khó hiểu khi nó đặt lại tên biến, tên hàm cho ngắn gọn cả 😂

Share
Sep 4th, 2018 8:40 AM

Nhưng theo em được biết Minify chỉ dùng để xóa khoảng trắng và co code về 1 dòng còn việc convert cả name function này thí chưa thấy. Với lại nếu có nhiều function A() giống nhau thì biết code mình đang gọi về hàm nạo ạ ??

0
| Reply
Share
Sep 4th, 2018 8:42 AM

Với là chắc người ta thích trở về thời code C 1 is True, 0 is False đó a =))

0
| Reply
Share
Thang Tran Duc @thangtd90
Sep 4th, 2018 10:05 AM

@tuanbacyen

Nhưng theo em được biết Minify chỉ dùng để xóa khoảng trắng và co code về 1 dòng còn việc convert cả name function này thí chưa thấy

Nó cũng tuỳ vào thư viện mà em dùng, với cả tuỳ vào từng option của các thư viện đó nữa em ạ 😄

Ví dụ như em có thể vào đây để test package Uglify JS

https://skalman.github.io/UglifyJS-online/

Em click nút option sẽ thấy nó có rất nhiều option khác nhau đấy 😄

Anh test với đoạn code này

function bubbleSort    (list) {
var items = list.slice(0), swapped =false,
        p,   q;
   for ( p= 1;p <   items.length; ++p) {
       for (q=0; q < items.length -    p; ++q) {
        if (items[q + 1  ] < items[q]) {
            swapped =true;
        let temp = items[q];
         items[q] = items[ q+1]; items[q+1] = temp;
            }
      }
        if (!swapped)
        break;
    }
       return items;
}

thì được

function bubbleSort(e){var r,t,f=e.slice(0),l=!1;for(r=1;r<f.length;++r){for(t=0;t<f.length-r;++t)if(f[t+1]<f[t]){l=!0;let e=f[t];f[t]=f[t+1],f[t+1]=e}if(!l)break}return f}

Còn nếu em thấy có nhiều function có tên giống nhau, thì có nghĩa là chúng đang được đặt ở những scope khác nhau rồi 😄 Không có chuyện 2 function ở cùng một scope mà có cùng tên đâu 😄

0
| Reply
Share
Sep 4th, 2018 10:10 AM

@thangtd90 ok thank anh ạ =))

0
| Reply
Share
Answered Sep 4th, 2018 8:23 AM
+4

Những file đó đã được Minify thành như vậy đó bạn. Mục đích của việc Minify để giảm kích thước của các file js đó đi, giúp client load những file đó nhanh hơn

Share
Sep 4th, 2018 8:40 AM

Lợi ích khác của việc convert như vậy đối với 1 số vendor thì còn để obfuscate code, giấu đi cách implement chức năng (để tránh bị cạnh tranh, chôm ý tưởng chẳng hạn) 😆

0
| Reply
Share
Sep 4th, 2018 8:40 AM

Nhưng theo mình được biết Minify chỉ dùng để xóa khoảng trắng và co code về 1 dòng còn việc convert cả name function này thí chưa thấy. Với lại nếu có nhiều function A() giống nhau thì biết code mình đang gọi về hàm nạo ạ ??

0
| Reply
Share
Sep 4th, 2018 8:48 AM

@vigov5 Vậy nếu function có trùng tên sau khi Minify thì sao bạn ??

0
| Reply
Share
Sep 4th, 2018 9:15 AM

khi parse toàn bộ source code của lib rồi thì sẽ biết được là có những class, module nào, global variable nào, mỗi class, module có method, có prototype nào. Khi đã liệt kê được ra hết rồi thì cứ đổi tên lần lượt thôi, từ a -> z, thiếu thì từ aa -> az, v..v, sẽ đảm bảo là ko bị trùng, vì dù cho là trùng tên nhưng khác scope thì vẫn khác nhau thôi, ví dụ cùng tên là a nhưng A.a()B.a() vẫn khác nhau 😃

+2
| Reply
Share
Sep 4th, 2018 10:11 AM

@vigov5 Có lý nha 😄

0
| Reply
Share
Answered Sep 6th, 2018 3:23 PM
+2

để Thế giới di động có thể load trong 1 nốt nhạc =)) https://www.thegioididong.com/

Share
Sep 7th, 2018 7:58 AM

😃)

0
| Reply
Share