随笔分类 - [10]JS
-
事件模型及其常用功能
摘要:事件模型及其常用功能前言工作中用ExtJS有一段时间了,Ext丰富的UI组件大大的提高了开发B/S应用的效率。虽然近期工作中天天都用到ExtJS,但很少对ExtJS框架原理性的东西进行过深入学习,这两天花了些时间学习了下。我并不推荐大家去研究ExtJS框架的源码,虽然可以学习其中的思想和原理,但太浪费精力了,除非你要自己写框架。对于ExtJS这种框架,非遇到“杂症”的时候我觉得也没必要去研究其源码和底层的原理,对其一些机制大致有个概念,懂得怎么用就行,这也是本篇博文的主要目的。Ext自己的事件机制Ext中的事件遵循树状模型,和事件相关的类主要有这么几个:Ext.util.Observable、 阅读全文
-
看几道JQuery试题后总结(上篇)
摘要:看几道JQuery试题后总结(上篇)无意中拿到的JQuery题目,拿来分享顺便总结总结在JQuery对象中区分.text();.val();.html();.innerHTML;.innerTEXT()的用法与区别,用例子证明在JQuery选择器中空格与大于号的区别在一个表单中,查找所有选中的input元素,JQ的写法指定的为某个div内部动态添加一个div的写法,外部添加一个div的写法(包括在该节点的前面以及后面)JQuery对象与dom对象的区别,以及两者互相转换的方法如何动态的为某个div添加class属性,如何移除class属性,以及如何获取div中某个属性的值,比如说Id的名称或者 阅读全文
-
jQuery最佳实践
摘要:jQuery最佳实践上一篇,我整理了《jQuery设计思想》。那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQuery"。我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks)。他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值。==============================================1. 使用最新版本的jQuer 阅读全文
-
JS、JQuery和ExtJs动态创建DOM对象
摘要:做了个简单使用JavaScript、JQuery、ExtJs进行DOM对象创建的测试,主要是使用JavaScript、JQuery、ExtJs动态创建Table对象、动态Table数据填充、多选控制。1.简单前台数据处理界面有点丑了,没美化界面,主要是JavaScript动态创建Table。效果图:View Code2.JavaScript动态创建DOM对象主要是使用JavaScript动态创建按钮、文本、链接、表格、加上CheckBox的表格(简单实现全选),这里Table的数据是页面数据,不是服务端数据,主要是与后面的JQuery和ExtJs请求服务端数据动态创建Table的差异比较。界面 阅读全文
-
看看国外的javascript题目,你能全部做对吗?
摘要:看看国外的javascript题目,你能全部做对吗?叶小钗的博客最近都在讨论面试题目正好以前也看过一篇,就借花献佛拿出来分享一下http://perfectionkills.com/javascript-quiz/附带了自己的理解,答案有争议的地方欢迎大家指出题目一?234(function(){ returntypeofarguments; })();"object"arguments是对象,伪数组有两件事要注意这里:参数不是数组,它是一个数组一样的物体,你可以使用方括号和整数索引的元素,但方法通常可在一个如推上不存在参数数组Array.prototype.slice.c 阅读全文
-
ExtJS初接触 —— 了解 Ext Core
摘要:ExtJS初接触 —— 了解 Ext CoreExt Core是一款和jQuery媲美的轻型JS库,基于MIT许可。对于Dom的操作,我个人还是比较喜欢用jQuery。当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext Core是ExtJS框架的一个小子集。如果仅仅使用Ext Core的功能,则只需引入builds文件夹下的一个ext-core.js就可以了,无需css等其他文件。由于浏览器DOM操作的差异,为了实现Web框架的跨浏览器特性,每个JS框架都会构建一个新类来操作DOM,在Ext Core中实现该功能的类就是Ext.Element。Ext.Element类 阅读全文
-
jQuery设计思想
摘要:jQuery设计思想jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。目前,互联网上最好的jQuery入门教材,是Rebecca Murphe 阅读全文
-
new和instanceof的内部机制
摘要:new和instanceof的内部机制首先我们来看看obj = new o()这条语句发生了什么:var obj = (function(){ var obj = {}; obj.__proto__ = o.prototype; //其他赋值语句... return obj;})();也就是说如果不对o的原型(prototype)作修改,obj的隐式原型链(__proto__)是指向o最初始的原型(prototype)的。这就是new的内部工作方式。下面再看instanceof,假设现在有 x instanceof y 一条语句,则其内部实际作出了如下的判断:while... 阅读全文
-
Javascript内存泄漏
摘要:Javascript内存泄漏原文:http://point.davidglasser.net/2013/06/27/surprising-javascript-memory-leak.html本周我在Meter的同事追踪到了一个奇怪的Javascript内存泄漏。我找遍了互联网,尝试了各种关键字:javascript closure memory leak,无果。所以,这可能是一个未知的问题。(你们所找到的都是讲老版本的IE的垃圾回收算法的问题,但是我碰到的这个问题甚至影响到我当前装的最新Chrome浏览器。)Update:Vyacheslav Egorov向我指出他曾经写过的一篇同样主题的文 阅读全文
-
flowplayer视频播放插件
摘要:flowplayer视频播放插件最近项目中需要添加播放视频的功能,视频文件是flv格式的。在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些。特将使用方法记录一下。flowplayer也有html5版本的,但由于网站为了支持IE较低版本,还是选择了flash版本的。flowplayer官网:http://flowplayer.org/一. 介绍:Flowplayer支持播放flv、swf等流媒体以及图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。二. 调用: 1. 在页面头部Head标签内添加引用 (我使用的是3.2.12免费版,最新版可从官网下载). 阅读全文
-
迷你MVVM框架 avalonjs 0.82发布
摘要:迷你MVVM框架 avalonjs 0.82发布本版本最大的改进是启用全新的parser。parser是用于干什么的?在视图中,我们通过绑定属性实现双向绑定,比如ms-text="firstName", ms-html="sex + '士'", ms-visible="Math.abs(toggle + 2000) >= 20", 我们需要将它们转换为求值函数。我们通过ms-controller="vm"来绑定ViewModel,比如vm = { firstName: '司徒' 阅读全文
-
jquery ready方法实现原理 内部原理
摘要:jquery ready方法实现原理 内部原理今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多。先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.我的ready方法写了2版,借鉴了不少前辈的代码,先上代码。代码1.0问世,代码如下:var 阅读全文
-
jQuery基础之选择器
摘要:jQuery基础之选择器上一篇文章介绍了jQuery对象与DOM对象的区别与联系,属于比较基础的,这篇文章来介绍下jQuery基础之选择器。选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷的找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。1.基本选择器选择器描 阅读全文
-
代理模式
摘要:js设计模式(9)---代理模式0.前言 KG、PP被交易到了布鲁克林篮网,我的心情很复杂,一方面为他们不能终老celtics感到惋惜,另一方面为他们能够再次冲击总冠军感到高兴。从07年以来,作为一个铁杆celtics球迷,他们给我带来很多喜怒哀乐,也记载我的青春,不过这一切都会成为历史。1.代理模式是什么 1.1、代理(proxy)是一个对象,它可以用来控制对另外一个对象的访问; 1.2、代理对象和本体对象实现了同样的接口,并且会把任何方法调用传递给本体对象;2、应用 2.1、远程... 阅读全文
-
ExtJS初接触 - 在项目中使用ExtJS
摘要:ExtJS初接触 - 在项目中使用ExtJS今天ExtJS官网发布了ExtJS最新正式版4.2.1。Ext JS 4.2.1 正式版 下载ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI组件,具有统一的主题,便于快速开发,提高效率。但显然它并不适合互联网站的开发。主要目录文件介绍builds:压缩后的ExtJS代码,体积更小,更快;docs:开发文档;examples:官方演示示例;locale:多国语言资源文件;pkgs:ExtJS各部分功能的打包文件;resource:ExtJS所需要的CSS与图片文件;src:未压缩的源代码目录;bootstarp.js:ExtJS库引导文件, 阅读全文
-
异步队列 Deferred
摘要:异步队列 Deferred背景:移动web app开发,异步代码是时常的事,比如有常见的异步操作:Ajax(XMLHttpRequest)Image Tag,Script Tag,iframe(原理类似)setTimeout/setIntervalCSS3 Transition/AnimationHTML5 Web DatabasepostMessageWeb WorkersWeb Socketsand more…后面几个是CSS3 HML5加入的新API.这些接口都是会产生异步的操作比如本人的一个phonegap项目,操作HTML5本地数据库(HTML5 Web Database)就是一个异 阅读全文
-
javascript代码复用--继承
摘要:javascript代码复用--继承由于javascript没有类的概念,因此无法通过接口继承,只能通过实现继承。实现继承是继承实际的方法,javascript中主要是依靠原型链要实现。原型链继承原型链继承是基本的继承模式,其本质是重写原型对象,使其为新对象的实例。代码实现如下:function Person(){ this.name = "default"; var temp = "temp";}Person.prototype.age=0;Person.prototype.getName = function(){ return this.name; 阅读全文
-
享元模式
摘要:享元模式0.前言 今天总结了四种设计模式,到现在有点精疲力尽了,但是还是有不少收获,很开心自己有掌握了新的东西,今天变得有了价值。1.使用条件 1.1、网页中使用了大量资源密集型的对象; 1.2、这些对象中所保存的数据至少有一部分能被转化为外在数据; 1.3、外在数据分离出去以后,独一无二的对象的数目较少。2. 实现步骤 2.1、将所有外在数据从目标类分离,形成共享对象; 2.2、创建一个用来控制共享类实例化的工场; 2.3、创建一个用来保存外在数据的管理器。3.享... 阅读全文
-
Extjs4.2 Tree使用技巧
摘要:Extjs4.2 Tree使用技巧小结demo本案例使用了Ext.Tree.Panel的如下知识点:1.刷新、重新加载Tree,定位到上次的节点位置2.Tree的右键操作3.Extjs4.x Tree获取当前选中的节点4.新增、修改、删除Tree节点5.修改tree节点的属性,例如text,iconCls,leaf等6.treedata rest proxy7.treeStore.sync的同步回调方法8.Extjs4.x Tree获取父节点,获取子节点Chirldrens9.Extjs4.x TreePanel的展开,收缩10.Extjs4.x Tree的拖拽操作treeviewdragdr 阅读全文
-
Js继承小结
摘要:Js继承小结一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象。于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoyan/javascript-patterns?from_search=9(该博文作者同样是《Javascript Patterns》一书的作者,效力于Yahoo,是YSlow 的架构者和smush.it的作者),在此,自己做一些小结和笔录以免多次重复学习。js继承:/*******继承1:复制父亲对象所有属性-->子对象**********/function extend(par 阅读全文