前端杂乱分享
- 9. 事件绑定的兼容性 好处： 1：封装各浏览器差异性 2：内存泄漏管理 YAHOO.util.Event.on is an alias for addListener
- 14. 原生的AJAX写法 -----有助于大家理解原理 难记不？ 基于这个实现的Demo
- 51. （现在推荐） Closure-compiler下载地址: http://code.google.com/p/ourtools/downloads/list 更多的工具 git这个地址 https://github.com/kissyteam/kissy-tools.git 常见方式： test.source.js ---> test.js （以前） test.js ---> test-min.js（现在推荐）
- 69. Yahoo! User Interface Library(简称yui) 是一个使用Javascript编写的工具和控件库。 我们知道写JS的时候最讨厌的就是需要兼容不同的浏览器，尤其是IE自己支持一些特殊的方法和属性，而使用YUI封装好的方法能屏蔽不同浏览器之间的差别，并能使开发更有效率，用户体验更好。 51
- 70. 2010/12/16 We Choose YUI ! 稳定可靠及可持续性的维护。 HTML结构/CSS/JavaScript 层次最为分明，易于多人协作开发。 丰富的组件支持 。 完善的文档/范例。 贴近Java开发人员的代码命名习惯/编码规范/文档规范/面向对象模型。 近亲出品，友情支持 。
- 73. YAHOO Global Object YAHOO Global Object搭建了全局的YUI命名空间以及未其他的工具和控件库提供一些核心的服务。 常用方法列举如下: 避免js全局变量污染的好办法 ：YAHOO.namespace(e.g.) 提供相当多的简单易用的小方法：YAHOO.lang(e.g.) 55
- 76. 2010/12/16 YUI Howto – DOM (2) 偏爱 $() ? var $D = YAHOO.util.Dom; Var $ = $D.get; var obj = $(id);
- 84. Event listener Toooooooooooold(e.g.) <a href="someurl" onclick="someFunction(); return false"> 缺点：js嵌入html中，最好html和js分别管理 old，W3C标准： document.getElementById('someElement').onclick = someFunction; 缺点：需要两步，单个元素操作，函数名太长 now，更加灵活，更加方便 YAHOO.util.Event.addListener(someElement, "someEvent", someHandler); (alias .on) 62
- 85. Event listener static Boolean addListener ( el , sType , fn , obj , overrideContext ) static Boolean on ( el , sType , fn , obj , overrideContext ) 添加一个事件监听函数(e.g.) Parameters: el <String|HTMLElement|Array|NodeList> 需要添加事件监听函数的元素 ID， 元素引用，ID 或 元素引用的数组。 sType <String> 要添加监听函数的事件类型 fn <Function> 事件触发时执行的回调函数 obj <Object> 传递给监听函数的一个自定义对象 overrideContext <boolean|object> 如果为 true，fn 的执行上下文会 被替换为 obj参数，如果是一个对 象，则这个对象会成为回调函数的 执行上下文 Returns: Boolean 如果动作成功完成或延迟执行则返回 true， 如果有一个或多个元素未添加监听函数或操作 抛出了一个异常则返回 false。 63
- 86. 2010/12/16 YUI Howto – Event (1) // DOM 0 el.onclick = doSomething; // IE el.attachEvent(‘onclick’, doSomething); // Mozilla el.addEventListener(‘click’, doSomething, false); YAHOO.util.Event.on(el, ‘click’, doSomething);
- 87. 2010/12/16 YUI Howto – Event (2) window.onload = function() { doSomething(); } YAHOO.util.Event.on(window, ‘load’, doSomething); 更多的选择 onAvailable(element, function); onContentReady(element, function); onDOMReady(element, function);
- 88. 2010/12/16 YUI Howto – Event (3) window.onload = function() { doSomething(); } YAHOO.util.Event.on(window, ‘load’, doSomething); onAvailable(element, function); onContentReady(element, function); onDOMReady(element, function);
- 94. 2010/12/16 YUI Howto – Connectoin (1) Asynchronous Request Use GET YAHOO.util.Connect.asyncRequest('GET', url, { success: function(o) { indicator.style.display = 'none'; container.innerHTML = o.responseText; //auto fit image width autoFitImageWidth(container, container.offsetWidth); SpaceManager.showArticleComments(threadId, 0, uid, scrollToComment); }, failure: function(o) { alert("系统错误:" + o.status); } }); Example from Taobao Space
- 95. 2010/12/16 YUI Howto – Connectoin (2) Asynchronous Request Use POST YAHOO.util.Connect.asyncRequest('POST', url, { success: function(o) { //doSomething }, failure: function(o) { //doSomething } }， 'key1=value1&key2=value2');
- 96. 2010/12/16 YUI Howto – Connectoin (3) Asynchronous Request Use POST + SetForm YAHOO.uitl.Connect.setForm(frm); YAHOO.util.Connect.asyncRequest('POST', url, { success: function(o) { indicator.style.display = 'none'; container.innerHTML = o.responseText; YAHOO.util.Dom.get('CommentBody').value = ''; // 更新评论数(文章可能已被删除) try { var c = Y.Dom.get('CommentCount').innerHTML; YAHOO.util.Dom.get('CommentCountTop').innerHTML = c; } catch (e) {} }, failure: function(o) { alert("系统错误:" + o.status); } }); Example from Taobao Space
- 97. 2010/12/16 TBra 什么是Tbra ? 2007年下半年开始，淘宝的前端工程师发现，页面上的不少通用功能，都不能直接套用YUI的现有组件来完成。比如图片轮播、弹出层等，如果直接用 YUI的组件，会导致要加载的文件很大，修改成本还不低。于是淘宝开始基于YUI的核心功能，实现了一套常用组件，加上一些实用的辅助工具类，形成了淘宝 的第一代前端类库：TBra. TBra由 YUI Core 和 SimpleSlide等实用组件组成 http://a.tbcdn.cn/tbra/1.0/tbra-aio.js?t=20090604.js
- 98. 2010/12/16 TBra Overview CheckboxGroup SimpleTab SimpleScroll Pagination SimpleSlide SimplePopup …… SimpleListing …… Widget Control ......................................................... Common BOM JSON Core Array extras ? ......................................................... YUI
- 99. 2010/12/16 TBra Introduce (1) Array extras Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.forEach Array.prototype.filter Array.prototype.map Array.prototype.some Array.prototype.every
- 101. 2010/12/16 TBra Introduce (3) TB.bom |—— isGecko |——isOpera |——isSafari |—— isIE |—— isIE6 |—— getCookie() |—— setCookie() |—— removeCookie() |——pickDocumentDomain()
