thảo luận Trả lời tất cả những câu hỏi về Front End !!!

Các bác cho em xin 1 vài câu hỏi phỏng vấn intern/fresher fe với ạ
1xEuo02.gif
 
bây giờ còn dùng angular không các anh, FE tôi biết code mỗi nó hồi mới ra trường, tới giờ vẫn dùng cho mấy project liên quan tới portal, còn mấy thứ khác không tìm hiểu nên không rõ ngoài thị trường sao nữa.
 
Các bác cho em hỏi em đang dùng next js 13 page router, em đang có 1 component sử dụng router.query để lấy query param dạng:
localhost:3000/SampleID/[SampleID]/xxx/?xxx=xxx .. .
Router.query để lấy SampleID trong code.
Nhưng ở trong jest thì khi em sử dụng MockRouter.push để push url, thì hàm router.query lại không get được cái SampleID đẫn đến code bị lỗi, unit test bị sai mặc dù ở môi trường thật code chạy đúng hoàn toàn.
test thử thì router.query chỉ lấy được xxx, không lấy được SampleID.
Trên môi trường thật thì router.query sẽ lấy được SampleID
 
mn cho mình hỏi chút về Angular với ạ
mình có 1 màn hình cần hiển thị nhiều data, mỗi data lại cần nhiều function tính toán phức tạp để hiển thị, hiện mình đang dùng rxjs để quản lý các state cho việc hiển thị đó, mỗi 1 observable mình để 0.1-1s chạy 1 lần
cách làm của mình có ổn không? có cách nào để tối ưu hơn không? Trong các dự án thực tế thì mọi người xử lý case này như nào?
dùng observable rồi 0.1-1s chạy 1 lần thì không ổn và tối ưu, chỉ chạy khi nào cần tính toán và thay đổi trạng thái thôi.
data, thông thường sẽ là thay đổi thường xuyên hoặc không thay đổi thường xuyên.
  • nếu thay đổi thường xuyên, thì data không được quá lớn hoặc tính toán quá phức tạp, nếu ko được chọn, thì chia nhỏ ra, rồi xử lý bất đồng bộ, có thể dùng web worker, gpu để hỗ trợ tính toán.
  • nếu data không thay đổi thường xuyên, thì chấp nhận tính lâu 1 lần rồi cache lại, hoặc có thể dùng web worker, gpu rồi chia ra tính từng phần độc lập để giảm tải.
 
Thím cho em hỏi cái 360 này nó dùng thủ thuật gì vậy?

Theo em thấy là 1 video cắt frame ra rồi kết hợp slide để chuyển image, nhưng mà vẫn chưa nghĩ ra giải pháp

View attachment 2324685
này thì như bạn ở trên có inspect ra rồi ý.
chả muốn hiểu nó làm như nào mà chỉ muốn xài thì có bạn ở trên cũng ref thư viện rồi áh.
còn về cách thức hoạt động hoặc thích tự giải quyết/xử lý thì nó đơn giản như thế này:
  • mình sẽ có 1 danh sách hình, chụp đủ các góc độ của sản phẩm, ví dụ có 36 hình chụp 360 độ, thì mỗi hình cách nhau 10 độ, phân biệt mỗi hình với nhau bởi index.
  • lưu trạng thái index/độ hiện tại, để hiển thị số hình tương ứng.
  • bắt sự kiện mouse/pointer/touch - start/move/(end), tính deltaX bằng cách so sánh position x hiện tại và trước đó, từ đó xác định được là hướng di chuyển sang trái/phải, nhiều/ít > tính tương ứng với thay đổi index/độ với 1 tỉ lệ nào đó, tỉ lệ này có thể tuỳ chỉnh lớn nhỏ để cho nó mượt/ít mượt tuỳ ý.
  • dựa vào tính toán ở trên, có thể xác định được index/độ tương ứng, rồi lưu vào biến ở trên/tải hình ảnh tương ứng để hiển thị.
  • để nó loop đc thì index hoặc độ sẽ = chia lấy dư của index/độ với totalIndex/360.
đấy, nó chỉ thế, có chăng là thêm vụ optimize load hình.
 

này thì như bạn ở trên có inspect ra rồi ý.
chả muốn hiểu nó làm như nào mà chỉ muốn xài thì có bạn ở trên cũng ref thư viện rồi áh.
còn về cách thức hoạt động hoặc thích tự giải quyết/xử lý thì nó đơn giản như thế này:
  • mình sẽ có 1 danh sách hình, chụp đủ các góc độ của sản phẩm, ví dụ có 36 hình chụp 360 độ, thì mỗi hình cách nhau 10 độ, phân biệt mỗi hình với nhau bởi index.
  • lưu trạng thái index/độ hiện tại, để hiển thị số hình tương ứng.
  • bắt sự kiện mouse/pointer/touch - start/move/(end), tính deltaX bằng cách so sánh position x hiện tại và trước đó, từ đó xác định được là hướng di chuyển sang trái/phải, nhiều/ít > tính tương ứng với thay đổi index/độ với 1 tỉ lệ nào đó, tỉ lệ này có thể tuỳ chỉnh lớn nhỏ để cho nó mượt/ít mượt tuỳ ý.
  • dựa vào tính toán ở trên, có thể xác định được index/độ tương ứng, rồi lưu vào biến ở trên/tải hình ảnh tương ứng để hiển thị.
  • để nó loop đc thì index hoặc độ sẽ = chia lấy dư của index/độ với totalIndex/360.
đấy, nó chỉ thế, có chăng là thêm vụ optimize load hình.

thx cả 2 bác, mua thì chắc k đủ kinh phí mua rồi, chắc tự ngồi mò code hoặc k ra thì kiếm bạn freelancer nào code hộ :big_smile:
 
thư viện js đầy
thx cả 2 bác, mua thì chắc k đủ kinh phí mua rồi, chắc tự ngồi mò code hoặc k ra thì kiếm bạn freelancer nào code hộ :big_smile:
cái này chủ yếu là source hình thôi bác, chứ thư viện hỗ trợ trên github cả đống, lên đọc rồi cấu hình theo là xong:byebye:
tự chụp thì trên blog thằng này hướng dẫn khá là tốt Guides & Tutorials Archives - Imajize 360 viewer for product photography (https://imajize.com/360-tutorials/)
 
Last edited:
Back
Top