Trương Thành Nhơn 09050070
Thái Lập Quốc 09050071
Closure Tool
Closure Tool là một dự án của google nhằm tăng cường hỗ trợ cho các nhà phát triển trong việc thiết kế website và các ứng dụng web của công ty.
Các ứng dụng web ngày nay đặt ra một thách thức cho các nhà phát triển: Làm thế nào để xây dựng và duy trì mã JavaScript một cách hiệu quả để làm sao tải trang web nhanh chóng và có thể làm việc trên mọi trình duyệt?
Closure Tool sẽ giúp giải quyết vấn đề này với 4 gói công cụ:
I. CLOSURE COMPILER
- Là một công cụ để giúp cho JavaScript tải và chạy nhanh hơn.
- Nó là một trình biên dịch thực sự cho JavaScript.
- Thay vì biên dịch từ một ngôn ngữ nguồn thành mã máy thì nó biên dịch mã JavaScript ban đầu thành mã JavaScript tốt hơn.
- Công cụ này sẽ tiến hành phân tích mã JavaScript ban đầu:
o Chuẩn hóa mã JavaScript bằng cách thêm dấu chấm phẩy (;) vào cuối mỗi câu phát biểu (statement), thêm dấu mở đóng ngoặc nhọn ({}) vào những câu lệnh mà nhà phát triển thường bỏ qua.
o Xóa toàn bộ khoảng trắng, dấu xuống hàng, tab, ngoại trừ các khoảng trắng trong chuỗi hoặc những câu lệnh như return.
o Rút gọn các tên biến trong một hàm, đặt lại tên thành a, b, c, d,..
Từ đó:
- Đảm bảo tính tương thích trình duyệt cao hơn.
- Làm source code gọn hơn.
- Tối ưu hóa source code.
II. CLOSURE LINTER
- Closure Linter là một tiện ích để kiểm tra tập tin JavaScript.
- Ví dụ như: Thiếu dấu chấm dấu phẩy, khoảng trắng, các chú thích...
- Ngoài ra closure linter còn giúp ta tiết kiệm thời gian để tập trung vào quá trình coding.
Cài đặt closure linter trên windows
Cài đặt phần mềm python
Cài đặt gói easy install
Tải file closure_linter-latest.tar.gz và tiến hành cài đặt bằng lệnh trong command
III. CLOSURE LIBRARY
- Đây là một bộ sưu tập các đoạn mã JavaScript nhằm hỗ trợ các nhà lập trình xử lý những công nghệ phức tạp như các thao tác xử lý xâu chuỗi.
- Bao gồm nhiều hàm thông dụng dùng để xây dựng các ứng dụng JavaScript: Cung cấp nhiều tính năng hữu ích cho việc tạo ra các ứng dụng web hỗ trợ đa hệ điều hành.
- Cung cấp giao diện hàm và class cho các mục đích thông dụng.
- Ngoài công cụ giao diện người dùng, thư viện này còn có các công cụ về mảng, đối tượng. Closure Library còn bổ sung namespace giúp các script trở nên nhỏ gọn và tải nhanh hơn khi dùng với Closure Compiler.
IV. CLOSURE TEMPLATE
- Closure Templates là một hệ thống templating từ phía client và phía server giúp bạn tự động xây dựng hoặc có thể tái sử dụng HTML.
- Nó có một cú pháp đơn giản cho các lập trình viên, và bạn có thể tùy chỉnh để phù hợp với nhu cầu ứng dụng của bạn.
- ClosureTemplates được biên dịch để hàm JavaScript cho hiệu quả cao nhất từ phía client.
- Closure Templates cung cấp một cách dễ dàng để xây dựng các phần của HTML , giao diện người dùng và giúp bạn hiển thị một cách logic.
- Templates làm việc với cả JavaScript và Java. Bạn có thể viết một template và chia sẻ nó giữa client và server .
- Bạn có thể đặt nhiều template trong một tập tin nguồn.
ff
Bổ sung thêm về closure Library:
Closure Library
Funtion currying : là các hàm có thể định trước đối số chức năng nhất định, cho phép phần còn lại được xác định khi hàm được gọi.
1. goog.partial(functionToCall, ...)
- goog.partial() có chức năng gọi và một danh sách các đối số để gọi với nó, nhưng không đơn thuần là thực hiện chức năng với các đối số được chỉ định. Nó có một chức năng mới, khi được gọi sẽ thực hiện các chức năng mới với bất kỳ đối số được bổ sung nào.
Vd: var a = function() {
alert('Hello world!');
};
var b = goog.partial(alert, 'Hello world!');
- Sử dụng goog.partial() còn giúp ngăn chặn rò rỉ bộ nhớ.
2. goog.bind(functionToCall, selfObject, ...)
- Cũng tương tự như goog.partial() ngoại trừ đối số thứ 2 của nó bị ràng buộc.
ProgressBar.prototype.update = function(statusBar) {
if (!this.isComplete()) {
var percentComplete = this.getPercentComplete();
statusBar.repaintStatus(percentComplete);
// Update the statusBar again in 500 milliseconds.
var updateAgainWithGoogBind = goog.bind(this.update, this, statusBar);
setTimeout(updateAgainWithGoogBind, 500);
}
};
- Giống như goog.partial(), sử dụng goog.bind() tạo ra một hàm với một phạm vi giới hạn để updateAgainWithGoogBind() không duy trì tham chiếu đến percentComplete nhưng updateAgain sẽ duy trì, điều đó ngăn chặn percentComplete từ việc thu gom rác thải.
Exports
1. goog.getObjectByName(name, opt_object) lấy tên của một đối tượng dưới dạng chuỗi đầy đủ và trả về đối tượng tương ứng, nếu nó tồn tại. Điều này hữu ích khi truy cập một biến dẫ được exported từ một thư viện JavaScript khác.
var GMap2 = goog.getObjectByName('google.maps.GMap2');
var map = new GMap2(document.body);
hoặc khi truy cập vào một đối tượng dự kiến sẽ tồn tại trong môi trường toàn cầu
// window.location will not be defined if the code is executed in Rhino
var href = goog.getObjectByName('window.location.href');
2. goog.exportProperty(object, propertyName, value) thiết lập được xác định bởi đối tượng propertyName với các giá trị được định trước. Thông thường được xác định với tên và giá trị, nhưng sử dụng goog.exportProperty() để đảm bảo rằng các tài sản sẽ dưới cái tên đó, ngay cả khi biên dịch
goog.provide('Lottery');
Lottery.doDrawing = function() {
Lottery.winningNumber = Math.round(Math.random() * 1000);
};
// In uncompiled mode, this is redundant.
goog.exportProperty(Lottery, 'doDrawing', Lottery.doDrawing);
và
var a = {}; // Lottery namespace
a.a = function() { /* ... */ }; // doDrawing has been renamed to 'a'
a.doDrawing = a.a; // doDrawing exported on Lottery
cả 2 đoạn code đều có chức năng tương tự Exporting làm nó không trùng tên với nhau điều này có thể làm giảm kích thước mã.
3. goog.exportSymbol(publicPath, object, opt_objectToExportTo) tương tự như goog.exportProperty nhưng nó có điều kiện đầy đủ bằng đường dẫn export chứ không phải bằng tên. Nếu các đối tượng trong đường dẫn không có thì goog.exportSymbol() sẽ tạo.
goog.exportSymbol('Lottery.doDrawing', Lottery.doDrawing);
goog.exportSymbol('Lottery.getWinningNumber', Lottery.getWinningNumber);
goog.exportSymbol('Lottery.setWinningNumber', Lottery.setWinningNumber);
goog.exportSymbol('Lottery.MAX_TICKET_NUMBER', Lottery.MAX_TICKET_NUMBER);
sử dụng goog.exportSymbol() có lợi hơn vì nó tạo ra một đối tượng mới và thêm 4 thuộc tính được liệt kê trước đó.
Type Assertions
Phần này giới thiệu các chức năng kiểm tra kiểu của một biến và các hàm thông dụng
/**
* @param {!Element} el
* @return {!Array.<string>}
*/
example.getElementCssClasses = function(el) {
return el.className.split(' ');
};
/**
* @param {*} arg
* @return {boolean}
*/
example.customNullTest = function(arg) {
return arg === null;
};
/**
* @param {string} id
* @return {Array.<string>}
*/
example.getElementCssClassesById = function(id) {
var el = document.getElementById(id);
// At this point, the Compiler knows that el is either an Element or null.
if (example.customNullTest(el)) {
return null;
} else {
// If goog.isNull() were used in the conditional, the Compiler would be able
// to infer that el must be non-null in this branch of the conditional.
return example.getElementCssClasses(el);
}
};
Sau khi kiểm tra phát hiện các lổi sau đây:
type-assertions.js:33: ERROR - actual parameter 1 of example.getElementCssClasses
does not match formal parameter
found : (HTMLElement|null)
required: Element
return example.getElementCssClasses(el);
goog.typeOf(value)
// Misspelling of 'string' will not be caught by the Compiler.
if (goog.typeOf(value) == 'strnig')
// Misspelling of isString will be caught by the Compiler.
if (goog.isStrnig(value))
trả về các lỗi
switch (goog.typeOf(someArg)) {
case 'string': doStringThing(someArg); break;
case 'number': doNumberThing(someArg); break;
case 'boolean': doBooleanThing(someArg); break;
// etc.
}
Các hàm khác cũng tương tự
goog.isDef(value)
goog.isNull(value)
goog.isDefAndNotNull(value)
goog.isArray(obj)
goog.isArrayLike(obj)
goog.isDateLike(obj)
goog.isString(obj), goog.isBoolean(obj), goog.isNumber(obj)
goog.isFunction(obj)
..