https://viblo.asia/p/jquery-i18n-nhung-dieu-nen-biet-Ljy5VQXylra
Last updated
Một website đa ngôn ngữ, có nhiều cách làm, nhưng hôm nay mình xin giới thiệu một plugin jquery i18n hỗ trợ cho việc phát triển đa ngôn ngữ cho website cũng như app của bạn
Dự án triển khai jQuery i18n xong thì mình xin chia sẽ một số kinh nghiệm mình đúc kết được
Plugin dễ dùng, dễ cài đặt Để cài đặt nếu dự án website sử dụng html, css bình thường thì chúng ta chỉ việc add 2 cụ này vào file footer là ok
Các feature khá hữu ích nhỏ và có võ
Bạn hình dung chúng ta thường hay có một số tham số động trong text, làm thế nào chúng ta truyền các tham số động đó vào đoạn text
Với jquery i18n việc đó dễ như ăn kẹo, jquery i18n cung cấp cho tao hẳn một feature gọi là Message format
Ví dụ ta có đoạn text là Chào Cường, chúng ta hình dung ra được vấn đề ở đây là gì không ạ
chúng ta chào một ai đó, thì một ai đó là cái động có thể truyền ngoài vào, vậy thì jquery i18n chúng ta làm thế nào?
Thật đơn giản Placeholders sẽ xử lí rất gọn gàng. Chúng ta chỉ cần khai báo cấu trúc như sau
Rất hữu ích phải không
Hay trong tiếng anh hay có kiểu số ít số nhiều khác bỏi chữ s thì cụ này cũng cho ta cách xử lí rất hay gọi là Plurals
Ngoài ra còn xử lí cho Gender cũng rất hữu ích với cách khai báo đơn giản sau
Lưu ý quả load file translation .json từ server Load file translation từ server, mình rất nhiều time để fixbug cho cụ này.
Vấn đề là gì, mình cùng phân tích vấn đề sau nhé
khi mình khai báo khởi tạo i18n
Lúc đó mình mới mò tìm document của nó thì phát hiện có một chi tiết rất quan trọng là
The library should expose an API to load an object containing key-value pair of messages. Example: $.i18n.load(data). This will return a jQuery.Promise.
Tức là sao nhỉ =)), cụ ấy xử lý bất đồng bộ và return ra 1 promise, ơi zời ạ. Thế nên trên local nó load nhanh không bị trễ nên phát nào ăn luôn phát đó. Lên server phát là dính ngay đòn đau.
Lại đi lục tung cái google lên để fix, cuối cùng chia khoá cửa nó là đây
Muốn gọi cái kiểu $.i18n(message, 1); thì làm ơn vứt cụ ấy vào trong done nhé, để đảm bảo load xong file translation từ server xong xuôi sau đó mới dùng thế nào thì dùng nhá các cụ
À còn một tip hay mình gặp trong dự án, mọi người có nhìn thấy dòng code này không ạ
document.documentElement.lang
Đừng tưởng nó đơn giản nhá, cái này sẽ lấy giá trị lang trong file html bạn khỏi tạo ví dụ sau
Mình đã gặp phải case là $.i18n.locale is empty sau đó mình check ông lang trong file HTML là không truyền vào. Nên giá trị của ông $.i18n.locale is empty là đúng rồi.
Kết luận
Với những kinh nghiệm mình rút ra được khi làm việc với cụ jQuery i18n hi vọng các bạn khi làm việc với cụ ấy sẽ thêm phần tự tin, tránh những lỗi mình đã nêu ở trên. Để dự án hoạt động trơn tru hơn.
Cũng rất hay phải không nào
Nhìn thì không thấy sai nhưng mình đã gặp 1 qủa đắng là trên local test không vấn đề gì cho đến khi deploye lên server toàn bộ translation của mình không cái nào hiển thị được , đắng quá phải không.
