Nothing Special   »   [go: up one dir, main page]

Skip to content

hchiam/learning-closure

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Learning Closure, Google's common JavaScript library

Just one of the things I'm learning. https://github.com/hchiam/learning and https://github.com/hchiam/learning-frameworks

Closure Library is a library that you call, not a framework (like React/Angular) that calls you. Library: more flexibility. Framework: less boilerplate.

Closure also comes with lower-level utilities for a variety of things like DOM manip, server comms, animation, data structures, testing, rich text editing, etc.:

https://developers.google.com/closure/library

https://google.github.io/closure-library/develop/get-started

Use it with the Closure Compiler: (JS -> better JS)

https://developers.google.com/closure/compiler

https://closure-compiler.appspot.com

Key conventions

Namespace

goog.math.clamp = function(...

Dep management

goog.provide("goog.math"); // namespace

goog.require("goog.math.Coordinate"); // import

Inheritance

goog.inherits(goog.ui.MenuButton, goog.ui.Button);
// makes MenuButton inherit stuff from Button

// so it can do getValue too now:
var btn = new goog.ui.MenuButton("hi");
var value = btn.getValue();
// note: also MUST call() "super" constructor:
goog.ui.MenuButton = function(...
  goog.ui.Button.call(this, ...

Events

goog.events.listen(...
// and
this.dispatchEvent(...

Closure covers all browsers by defining its own event framework, and lets you define your own event types, and listen to Closure Library objects like you would for DOM elements.

var eventType = goog.events.EventType.CLICK;
goog.events.listen(element, eventType, clickHandler, capturePhase, thisObject);

// and

this.dispatchEvent(
  new goog.ui.ZippyEvent(goog.ui.Zippy.Events.TOGGLE, this, this.expanded_)
);

Trying it out

git clone https://github.com/google/closure-library
cd closure-library
yarn
cd ..
touch hello.js
touch hello.html
# fill in the two files

npm init and then use parcel:

npm init
yarn global add parcel-bundler # or: npm install -g parcel-bundler
parcel hello.html

About

Learning Closure

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published