Web Front End

Google Closure 学习笔记-1

基础结构

  1. Closure的库结构和文件夹结构相对应,因此需要查找某个命名空间对应的文件时,可以按照库结构来查找。
  2. Closure的基本方法都在base.js中,因此需要先在文档中首先引用base.js。
  3. Closure中使用goog.provide(namespace)来定义命名空间。因此一种好的做法是,只定义一个全局命名空间,其他所有functions作为这个对象的属性。这种做法的好处是,所有的名称都集合在了一起,同时在使用多个库的情况下,避免了和其他库的命名空间冲突。
  4. 每一个命名空间都需要使用goog.require()来请求。
  5. goog.partial()和call()的不同在于,goof.partial()中,参数会被直接传递到function内执行。
  6. 在Closure中,object、function、array、string、number、boolean、Null、undefined都有对应的goog.isXXX()来进行判断。
  7. goog.isDef(value) 当value != undefined时返回true,null也是返回true。

各个主要的命名空间

  1. goog.string 包含了对string的处理,主要是string的转义。
  2. goog.array 包含了对数组的操作。
  3. goog.object 包含了对象操作。
  4. goog.json 包含了json的解析和序列化。
  5. goog.dom 包含了DOM元素的获取和操作。
  6. goog.dom.classes 包含了DOM元素的CSS类处理。
  7. goog.userAgent 检测用户useragent。
  8. goog.userAgent.product 检测用户浏览器。
  9. goog.style 包含了DOM元素的CSS样式的获取和设置。
  10. goog.function 包含了function的构建。
  11. goog.events 事件相关的方法。
  12. goog.ui UI控件。

涉及到的一些主要的方法。

  • goog.string.htmlEscape(str,opt_isLikelyToContainHtmlChars)
  • goog.array.forEach() 用来遍历数组中的所有元素。
  • goog.object.get(obj,key,opt_value)
  • goog.object.transpose(obj) 可以返回一个交换了键值和数据的对象。但是如果数据不是string的话,就不会出现在返回的对象中。
  • goog.dom.getElment(idOrElment)
  • goog.dom.getElmentsByTagNameAndClass(nodeName,className,elmentToLookIn)
  • goog.dom.getAncestorElmentsByTagNameAndClass(nodeName,className,elmentToLookIn) 包括元素本身
  • goog.dom.creatDom(nodeName,attributes,var_args) atrributes是一个对象,用来作为创建的元素的属性。如果attributes是string的话,就作为元素的class的值。第三个参数用来创建元素的子元素,可以同时创建多个。goog.creatDom()的返回值是一个node,可以使用在appendChild等方法中。
  • goog.dom.htmlToDocumentFragment(htmlstring) 返回值是node。
  • goog.dom.classes.get(element) 返回包含目标元素的class的数组。
  • goog.dom.classes.has(element,className) 如果目标元素包含相应的类名,返回true,否则返回false。
  • goog.dom.classes.add(element,var_args)
  • goog.dom.classes.remove(element,var_args) 添加或删除目标元素的类。
  • goog.dom.classes.toggle(element,className)
  • goog.dom.classes.swap(element,fromClass,toClass) 如果目标元素含有fromClass这个类,就将它替换成toClass。
  • goog.dom.classes.enable(element,className,enabled) 启用或者禁用元素的特定类。
  • goog.style.getPageOffset(elment) 获取元素相对HTML文档的位置(top和left)。
  • goog.style.getSize(element) 获取元素的高和宽。能够获取隐藏元素的值。包括hidden和display:none的元素。
  • goog.style.getBounds(element) 获取元素的位置信息,包括元素的PageOffset和Size。
  • goog.style.setOpacity(element,opacity) 设置opacity值,0-1,如果是空的话,就会清除opacity值。
  • goog.style.setInlineBlock(element) 设置元素的display属性为inline-block。
  • goog.style.setUnselectable(element,unselectable,opt_noRecurse) 设置文本可不可选。
  • goog.events.listen(eventSource, eventType, listener, [capturePhase, [handler]]) 五个参数分别是绑定事件的DOM对象,触发listener的事件种类(值为string的数组),事件监听器本身,(可选)控制监听器是否仅在捕获阶段被调用,(可选)指定监听器中this代表的对象。