SlideShare une entreprise Scribd logo
1  sur  13
Underscore.js
-- a utility-belt library for JavaScript
                                By zfcao@corp.netease.com
                                              2012-09-07
underscore ?

不扩展任何 JavaScript 的原生对象


委托浏览器原生的方法


向上兼容 es5
Underscore vs jQuery Utilities
                                                             =N aN ?
Collections : $.each vs _.each                    Na N ==
比较: http://jsperf.com/jquery-each-vs-for-loop/12
Arrays :
$.unique()+$.merge() vs _.union()
比较: http://jsperf.com/merge-vs-union


Objects : $.extend() vs _.extend()
比较: http://jsbin.com/atetew/5/edit


Templates:
$. template () vs _. template ()
比较: http://jsperf.com/template-vs-template
Jquery -- dom(browser)




Underscore help html5 
in client  and node in 
server!!
所以咧……
        Tips: 并不完全能取代 jquery.util ,旨在补充 jquery 或 raw javascript


                                     _.groupBy
                _.reduce
                                                                  _.reject


         _.include

                                                                      _.sortBy
  _.key(obj)



_.bind(func ,object)                                    _.memorize(func,[hashFunc])


                                _.throttle(func,wait)
思考:把 {a:1,b:2,c:3} 转换成“ a=1&b=2&c=3“  ?




_({a:1,b:2,c:3}).chain().map(function(v,k){return k +'=' +v}).value().join("&");
jquery                                     backbone
                                           用来实现前端 MVC 架构组织
提供 dom 操作, ajax 支
                                           •Model
持
                                           •View
                                           •Collection
                                           •router
                 underscore
                 对 ecmascript 补充,提供
                 常用方法的支持



         eg : http://arturadib.com/hello-backbonejs/docs/5.html
用到我们项目中去 :
api:
http://documentcloud.github.com/underscore/docs/underscore.html

http://underscorejs.org/

http://www.css88.com/doc/underscore
MORE:
Underscore 竟然有 php, lua, perl 的
移植了 ?

http://brianhaveri.github.com/Undersc
ore.php/
http://vti.github.com/underscore-perl/
http://mirven.github.com/underscore.l
ua/


http://lodash.com/ 是对 underscore
的改进,号称 8 倍速度于 underscore
THE END
THANK YOU

Contenu connexe

Tendances

KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
yiming he
 
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
 
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)
jeffz
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
taobao.com
 
Yui3.3.0 node
Yui3.3.0 nodeYui3.3.0 node
Yui3.3.0 node
enmaai
 
jQuery源码学习
jQuery源码学习jQuery源码学习
jQuery源码学习
fangdeng
 
Template mb-kao
Template mb-kaoTemplate mb-kao
Template mb-kao
xwcoder
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
 
Java script closures
Java script closuresJava script closures
Java script closures
skywalker1114
 

Tendances (20)

開發流程與工具介紹
開發流程與工具介紹開發流程與工具介紹
開發流程與工具介紹
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
 
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
 
14 Saving Loading and Application States
14 Saving Loading and Application States14 Saving Loading and Application States
14 Saving Loading and Application States
 
Migrations 與 Schema 操作
Migrations 與 Schema 操作Migrations 與 Schema 操作
Migrations 與 Schema 操作
 
CRUD 綜合運用
CRUD 綜合運用CRUD 綜合運用
CRUD 綜合運用
 
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习
 
Migrations 與 Schema操作
Migrations 與 Schema操作Migrations 與 Schema操作
Migrations 與 Schema操作
 
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
 
Model & Seeding整合
Model & Seeding整合Model & Seeding整合
Model & Seeding整合
 
Schema & Migration操作
Schema & Migration操作Schema & Migration操作
Schema & Migration操作
 
Eloquent ORM
Eloquent ORMEloquent ORM
Eloquent ORM
 
Yui3.3.0 node
Yui3.3.0 nodeYui3.3.0 node
Yui3.3.0 node
 
redux-observable with react-apollo
redux-observable with react-apolloredux-observable with react-apollo
redux-observable with react-apollo
 
jQuery源码学习
jQuery源码学习jQuery源码学习
jQuery源码学习
 
Template mb-kao
Template mb-kaoTemplate mb-kao
Template mb-kao
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
Java script closures
Java script closuresJava script closures
Java script closures
 

En vedette (7)

Underscore.js
Underscore.jsUnderscore.js
Underscore.js
 
Underscore
UnderscoreUnderscore
Underscore
 
Underscore.js
Underscore.jsUnderscore.js
Underscore.js
 
BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Introduction to Underscore.js
Introduction to Underscore.jsIntroduction to Underscore.js
Introduction to Underscore.js
 
Introduction to Underscore.js
Introduction to Underscore.jsIntroduction to Underscore.js
Introduction to Underscore.js
 
The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017
 

Similaire à Underscore

Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
jay li
 
用Jquery实现拖拽层
用Jquery实现拖拽层用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
 
Laravel II - Developer Student Clubs NCU.pdf
Laravel II - Developer Student Clubs NCU.pdfLaravel II - Developer Student Clubs NCU.pdf
Laravel II - Developer Student Clubs NCU.pdf
NCUDSC
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
Dongxu Yao
 
Ecma script edition5-小试
Ecma script edition5-小试Ecma script edition5-小试
Ecma script edition5-小试
lydiafly
 
Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)
yiditushe
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
 
Java华为面试题
Java华为面试题Java华为面试题
Java华为面试题
yiditushe
 

Similaire à Underscore (20)

Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
用Jquery实现拖拽层
用Jquery实现拖拽层用Jquery实现拖拽层
用Jquery实现拖拽层
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
Vue.js
Vue.jsVue.js
Vue.js
 
Laravel II - Developer Student Clubs NCU.pdf
Laravel II - Developer Student Clubs NCU.pdfLaravel II - Developer Student Clubs NCU.pdf
Laravel II - Developer Student Clubs NCU.pdf
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
 
程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號
 
程式人雜誌 2015年五月
程式人雜誌 2015年五月程式人雜誌 2015年五月
程式人雜誌 2015年五月
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
 
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
 
Kissy design
Kissy designKissy design
Kissy design
 
Ecma script edition5-小试
Ecma script edition5-小试Ecma script edition5-小试
Ecma script edition5-小试
 
Js培训
Js培训Js培训
Js培训
 
Uliweb设计分享
Uliweb设计分享Uliweb设计分享
Uliweb设计分享
 
Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)
 
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
Java华为面试题
Java华为面试题Java华为面试题
Java华为面试题
 
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
 
JSX is NOT HTML
JSX is NOT HTMLJSX is NOT HTML
JSX is NOT HTML
 

Underscore