随笔分类 - [10]JS
-
iframe+ajaxSubmit结合--续篇(判断图片(文件)大小,上传图片,验证码刷新)
摘要:人们似乎慢慢遗忘了iframe。毕竟在ajax未诞生前。都是用iframe来实现无刷新的效果。当请教iframe实现无刷新知识时。他们说从来没用过。iframe是什么?。无奈。只有自己摸索,毕竟我属入门级别。下面的方法从效率上好不好。我也说不清。已有的用户注册的表单,现优化实现如下功能用户选择图片及时判断图片大小,不符合的话清空value点提交按钮判断验证码是否正确。页面不能刷新,且要保证符号要求的file的vlaue存在。因为只要页面不刷新。value的值就会存在思路:因为file是Readonly,想清空value。只能用新的file替换之前的file想页面不刷新。首选当然是ajax请求, 阅读全文
-
bootstrap源码学习与示例:bootstrap-carousel
摘要:bootstrap的旋转木马组件,不过只能自动从左到右,而且与其他组件不一样,需要自己手动初始化一下。结构还是算简单,<divid="myCarousel"class="carousel slide"><divclass="carousel-inner"><divclass="item active left"><imgsrc="http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo 阅读全文
-
mass Framework attr模块 v3
摘要:mass Framework attr模块 v3为了获取最佳的性能与兼容性,attr模块在v3中分割为两大块。attr模块大胆HTML5的classList,Array.isArray等新式API, attr_fix则是专门为IE6789准备的。attr模块存在大量的钩子,为摆平浏览器做了许多工件,但我们没有必须把所有补丁都集成到一个JS文件,其中过半是为IE侍侯的,因此分割出去对标准浏览器的加载量非常有利。下面是attr.js,它相当于jQuery的attributes.js(github中的划分)。?//=========================================== 阅读全文
-
bootstrap源码学习与示例:bootstrap-tab
摘要:切换卡或叫标签页组件。它与scrollspy组件一样,分为两部分,触发区与面板区。触发区用于绑定点击事件,切换对应的面板。切换区为一个UL列表,要求UL带"nav nav-tabs"或"nav nav-pills"这两种类名。li下的标签要求有 data-toggle="tab"属性,你可以通过data-target或href指定对应的面板。面板区要求就相对宽松些,容器要求带"tab-content"类名,下面的每个面板都要求带"tab-pane"类名。?<ulid="mytab 阅读全文
-
bootstrap源码学习与示例:bootstrap-transition
摘要:虽然是基于不纯的目的来学习它,但想必也对大家有所帮助。bootstrap虽然挂着twitter的名字,但实质上只是twitter的两个员工自己的项目。bootstrap不是单纯一个项目,它的许多部件,包括CSS部分,JS部分,还是最原始的less部分要依赖其他项目才能运作。不过CSS已经有合并版了,JS我们也只需要导入jQuery。因此想跟着学习的人,到这里把源码部分CSS下载回来,jQuery使用1.83就行了。或者搭建以下这样的架子:<!DOCTYPE html><html><head><title>bootstrap学习 by 司徒正美&l 阅读全文
-
我的模块加载系统 v21
摘要:多上stackoverflow总是有好处,昨天发现opera12之前一个比较致命的BUG,触发条件是script.onreadystatechange = script.onload = function(){},因此连同mass, jQuery, seajs,labjs, headjs,controljs在内都中招了。我们可以称之为连写回调引发的血案。这个我正文会详解。本版本的第二个改进是IE6的自闭合base标签回避问题。以前不管是否存在base标签,所有浏览器都插入到head标签的第一个子节点之前。但这样倒序可能引发后插入的先解析。因此现在特地对IE6进行处理,如果存在base标签,不管 阅读全文
-
我的MVVM框架 v3教程——todos例子
摘要:我的MVVM框架 v3教程——todos例子我的MVVM框架 v3教程——todos例子每个MVC框架都爱搞个todos演示它的HTML如下:<!--[if IE 6]><center style="display:inline-block;zoom:1;text-align:left;"> <![endif]--><divid="todoapp"><header><h1>Todos</h1><inputid="new-todo"type=&qu 阅读全文
-
一个支持优先级的自定义事件系统
摘要:在AS3中有一个叫IEventDispatcher 的类,与浏览器的window对象,document或元素节点一样,提供了 addEventListener, removeEventListener, dispatchEvent等接口。相对于浏览器的addEventListener,Flash的参数是更丰富,其中有一个允许我们指定回调的优先级,让我们在fire时优先执行它们。这是一个非常好的东西,JS想实现它也不能,于是便有以下这个类。以后,你想你的其他组件拥有自定义事件功能,那么继承它就行了。以下是源码,使用AMD的形式包装。你们用时,可以使用我的加载器或requireJS加载它就行了。或 阅读全文
-
JavaScript 倒计时脚本
摘要:分享12个效果精美的 JavaScript 倒计时脚本 倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒计时。今天,在这篇文章中收集了12优秀的倒计时脚本,有一天你可能会用到的。您可能感兴趣的相关文章10套精美的免费网站后台管理系统模板8个惊艳的 HTML5 和 JavaScript 特效精心挑选的优秀jQuery Ajax分页插件几款效果精美的jQuery加载进度条插件60款非常绚丽的jQuer 幻灯片插件下载jQuery Countdown Timer一款简单的jQuery倒计时插件,用于显示剩余的天数,小时,分钟. 阅读全文
-
判定模块加载时是否存在循环依赖
摘要:循环依赖是所有语言的加载器都是大头的问题,除非你的模块都是像spring那么利用Ioc进行控制反转,那么出现循环依赖就是死结。对此,我们唯一能做的事是,在第一个循环依赖出现时就立即通知用户查看它们的依赖列表。在AMD大肆普及动态加载的好处后,大家应该隐藏知道有两个方法干这事。一个定义模块的define方法,另一个是加载模块的require方法。define方法的参数为define(name?, deps? ,factroy), 换言之模块名与依赖列表都不是必须的,require参数为require(names , callback)。当我们用require一组模块,将它们的返回值传到回调中前, 阅读全文
-
《JavaScript编程精解》简明读书
摘要:醉心于Github上美妙的WebGL Demo之中,我试图努力学习JavaScript。我曾经囫囵吞枣地将那本犀牛书《JavaScript权威指南》看了一遍,无奈功力不够,对那些抽象的概念理解很有限。前一阵子亚马逊有买300减100活动,凑书的时候忽然想起之前汤姆大叔送的那本《JavaScript编程精解》评价不错,我当时手气不好(其实主要还是没有使用地精黑科技),没有抢到,就在亚马逊上买了一本。书拿到手后,发现其异乎寻常的薄,翻了两页感觉还不错,于是决定花点时间以此书为基础,再梳理一下JavaScript。值和变量值六种类型:number,string,Boolean,object,func 阅读全文
-
—数据缓存模块进化史
摘要:数据缓存系统最早应该是jQuery1.2引入的,那时它的事件系统完成照搬DE大神的addEvent.js,而addEvent在实现有个缺憾,它把事件的回调都放到EventTarget之上,这会引发循环引用,如果EventTarget是window对象,又会引发全局污染。有了数据缓存系统,除了规避这两个风险外,我们还可以有效地保存不同方法产生的中间变量,而这些变量会对另一个模块的方法有用,解耦方法间的依赖。对于jQuery来说,它的事件克隆乃至后来的列队实现都是离不开缓存系统。jQuery1.2 在core模块新增了两个静态方法, data与removeData。data不用说,与jQuery其 阅读全文
-
Node.js[0] 简介
摘要:学习node的过程很美妙,不断有新的概念出现;这个过程也大大拓展了技术视野,之后会把学习中遇到的点点滴滴整理出来。Node是什么?“Node.js”是官方称呼,交流多用node简称。Ryan Dahl给Chrome V8 Javascript引擎添加了一组友好的Javascript API,并让V8能够独立运行于多个平台上(暂且把V8看做是js虚拟机),这样js也能写出跨平台非浏览器页面的应用。关于node是什么?github上node项目的readme标题为“Evented I/O for V8 Javascript”,也能看出node给自己的定位; 下面是一小段node代码,实现了一个简单 阅读全文
-
jquery1.83 之前所有与异步列队相关的模块的演变回顾
摘要:jQuery在1.5引入了Deferred对象(异步列队),当时它还没有划分为一个模块,放到核心模块中。直到1.52才分割出来。它拥有三个方法:_Deferred, Deferred与when。出于变量在不同作用域的共用,jQuery实现异步列队时不使用面向对象方式,它把_Deferred当作一个工厂方法,返回一个不透明的函数列队。之所以说不透明,是因为它的状态与元素都以闭包手段保护起来,只能通过列队对象提供的方法进行操作。这几个方法分别是done(添加函数),resolveWith(指定作用域地执行所有函数),resolve(执行所有函数),isResolved(判定是否已经调用过resol 阅读全文
-
speeding up your web site 前端性能优化
摘要:关注网站前端性能不得不提到一篇文章,Best Practices for Speeding Up Your Web Site,他来自yahoo性能研究团队,文章列出了7类35条网站提速的最佳实践。Yahoo的最佳实践1,内容减少HTTP请求、减少DNS查找、避免重定向、缓存Ajax、按需加载组件、预加载组件、减少DOM元素的数量、分离组件到不同的域名、尽量不使用iframe、避免4042,服务器使用CDN、启用浏览器缓存(添加Expires或Cache-Control、配置ETags)、启用Gzip压缩、尽早刷新缓冲区、Ajax使用GET请求方式、避免Image标签src属性为空3,Cooki 阅读全文
-
Extjs4 MVC
摘要:PS:第一篇我放了个图片前台结构的,有个单词写错了导致我model层总是报错,我把model写成modal了。呵呵,粗心的后果就是花费更多的时间去弥补我的粗心,这是被细心的人甩下的原因之一。1、我们在model下的MVC.js文件中定义我们上一篇中grid的model,如下:modelExt.define('MVC.model.MVC', {2 extend: 'Ext.data.Model',3 fields: ['name', 'email']4 });2、在controller中声明我们定义的model,?models : 阅读全文
-
如何直接强制客户端刷新.js文件
摘要:客户端缓存脚本通常让我们又爱又恨,爱他,是因为他确实可以有效防止相同的文件在客户端和服务器之间传来传去,恨他,是因为当你真的需要更新他的时候,他可能不理会你的要求。以至于很多人直接在脚本后面加一个时间戳作为参数,当我们每次去获取网页的时候,都会在后面去增加一个时间戳,这样脚本文件就会每次都回传给浏览器,具体表现为你每次F5刷新页面(不是CTRL+F5)的时候,返回状态码始终都是200。当然,这么残暴地写,在一些企业内网的环境,也没什么大不了,但是还是很多人会有点儿洁癖。其实只要在每次变更的时候强制大家刷新一下,不是就可以了吗?于是大家认为在后面加一个版本号,如v=2之类的,这样只需要每次更新脚 阅读全文
-
mass Framework css模块 v4
摘要:if( win ) {win.scrollTo(!top ? val : $( win ).scrollLeft(),top ? val : $( win ).scrollTop());} else{this[ method ] = val;}});};});varpseudoAdapter = window.VBArray && $.query && $.query.pseudoAdapterif(pseudoAdapter){pseudoAdapter.hidden = function( el ) {returnel.type === "hidd 阅读全文
-
单元测试一例:学习断言、测试用例函数的编写
摘要:本篇我们将通过对Date.strftime编写单元测试的例子,学会断言、测试用例函数的相关知识。 首先我们先来看Date.strftime的实现代码。Date.prototype.strftime = (function () { function strftime(format) { var date = this; return (format + "").replace(/%([a-zA-Z])/g, function (m, f) { var formatter = Date.formats && Date.formats[f]; ... 阅读全文
-
Javascript实现图片的预加载的完整实现
摘要:图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。今天我们将来实现一个完整的图片预加载和处理图片加载后执行后续操作的代码。下面的函数实现了一个我们想要的最基本的图片预加载效果functionpreloadimages(arr){varnewimages=[]vararr=(typeofarr!="object")?[arr]:arr//确保参数总是数组for(vari=0;i<arr.length;i++){newimages[i]=newIm 阅读全文