摘要：
可访问性 英文译为 Accessibility在Web前端开发界，有三个词经常被提及：可用性（Usability）、可访问性（Accessibility）和可维护性（Maintainability）。在《Web Content Accessibility Guidelines 1.0（Web内容可访问性指南）》里，对可访问性的描述是：Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明：提高可访问性也能让普通用户更容易理解Web内容。具体而言，要考虑以下两方面：无论用户是否残障，都得通过用户代理（User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理：桌面 阅读全文
随笔分类 - web---JavaScript
关于JavaScript的namespace命名空间
2013-11-02 23:21 by youxin, 275 阅读, 收藏, 编辑
摘要：
写C或者JAVA习惯的人写JavaScript时可能会发现JavaScript并没有命名空间这一概念，当然如果没有接触过命名空间的程序猿（比如写js，PHP，Python）也可能对命名空间不关注或者不重视。这样的情况普遍存在，见过不少人写JavaScript时直接就全局变量的写，如：function a(){}function b(){}什么是命名空间呢？语言使用的一种代码组织的形式 通过名称空间来分类，区别不同的代码功能 。无论项目大小，如果一开始不严格按照命名空间来编写程序，当你写到上万行JavaScript程序的时候，我相信你一定会后悔你的object或者function命名已经很混乱了 阅读全文
Javascript倒计时
2013-11-02 20:08 by youxin, 843 阅读, 收藏, 编辑
摘要：
倒计时跳转页面：JS倒计时网页自动跳转代码 3秒钟后自动跳转，如果不跳转，请点击下面的链接我的百度注意：setTimeout("delayURL('" + url + "')", 1000);delayURL后面一定要加单引号，否则报错。我们这里的url为一个字符串.小时倒计时： 另一种倒计时：function count(){ var startTime=new Date(); var endTime=startTime.getTime()+5*60*1000; function remainTime() { var nowTime=n 阅读全文
跨域(cross-domain)访问 cookie （读取和设置）
2013-10-31 17:06 by youxin, 1524 阅读, 收藏, 编辑
摘要：
Passport 一方面意味着用一个帐号可以在不同服务里登录，另一方面就是在一个服务里面登录后可以无障碍的漫游到其他服务里面去。坦白说，目前 sohu passport 在这一点实现的很烂（不过俺的工作就是要把它做好啦，hehe）搜狐的 SSO 需求比较麻烦，因为它旗下有好多域名：sohu.com、chinaren.com、sogou.com、focus.cn、17173.com、 go2map.com，登录用户漫游的主要障碍也来自于此。以前亿邮的邮件系统在和别的系统整合的时候是提供一个 URL，用户从第三方系统里面点击这个链接就可以生成访问邮件界面所需的 cookie，然后进入邮件。这个方式 阅读全文
js isArray
2013-10-27 23:10 by youxin, 1170 阅读, 收藏, 编辑
摘要：
1) typeof 运算符typeof 是一元运算符，返回结果是一个说明运算数类型的字符串。如："number"，"string"，"boolean"，"object"，"function"，"undefined"（可用于判断变量是否存在）。但 typeof 的能力有限，其对于Date、RegExp类型返回的都是"object"。如：typeof {}; // "object"typeof []; // "object&quo 阅读全文
JavaScript中的事件委托
2013-10-24 23:51 by youxin, 332 阅读, 收藏, 编辑
摘要：
传统的事件处理 事件委托就是在一个页面上使用一个事件来管理多种类型的事件。这并不是一个新的想法，但对于把握性能来说却很重要。通常情况，你会在web应用程序中看到这样的代码：document.getElementById("help-btn").onclick =function(event){ openHelp(); };document.getElementById("save-btn").onclick =function(event){ saveDocument(); };document.getElementById("undo-btn 阅读全文
转：前端开发者的基本要求
2013-10-22 21:47 by youxin, 450 阅读, 收藏, 编辑
摘要：
原文链接：http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/前几天我为一个项目写README文档，我希望其他开发者能够看到这个项目，并从中学到一些东西。突然我意识到，若放在几年前，我写作的过程中随口提到的Node，npm，Homebrew，git，测试还有产品构建，会把我魂都吓没了。曾经有段时间，一个前端开工程师基本的工作流程是：编辑文件，本地测试下（尽我们可能做到最好），然后通过FTP上传到服务器。我们评价一个前端工程师的水平，是通过他是否能够兼容IE6，或者取得跨浏览器的像素级的一致。很多社区的成 阅读全文
offsetParent和parentNode区别
2013-10-21 20:59 by youxin, 984 阅读, 收藏, 编辑
摘要：
offsetParent用的最普遍的就是来计算元素在页面中的位置，前面的日志理讲了 通过getBoundingClientRect()来获取页面中元素的位置，不过这只支持最新的浏览器，如果要兼容像Opera9.2和Firefox2以及Safair任何版本都只能通过offsetParent该属性来循环获计算获得元素的位置，效率不太好。贴一段缩减了来自YUI里的代码：function getElementXY(el){ //el 要获取位置的元素对象 var pos = [el.offsetLeft, el.offsetTop]; //首先获得该元素相对第一个非流布局父元素的位置 va... 阅读全文
layerX offsetX pageX
2013-10-21 16:34 by youxin, 1812 阅读, 收藏, 编辑
摘要：
offsetX/offsetY：相对于当前元素的位移x/y：相对于当前座标系的位移，但是IE常常搞错当前座标系layerX/layerY：相对于当前座标系的位移pageX/pageY：相对于网页的位移clientX/clientY：相对于可视窗口的位移screenX/screenY：相对于屏幕的位移offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+x/y：W3C- IE+ Firefox- Opera+ Safari+layerX/layerY：W3C- IE- Firefox+ Opera- Safari+pageX/pageY：W3C- IE- 阅读全文
鼠标拖放div 实现
2013-10-21 16:34 by youxin, 1050 阅读, 收藏, 编辑
摘要：
Javascript的mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动1个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。例如，接下来的一个例子就演示了如何综合应用各种鼠标事件来实现页面元素拖放操作的设计过程。在实现拖放操作的设计过程中，需要理清和解决以下几个问题：定义拖放元素为绝对定位，以及设计事件的响应过程。这个实现比较容易。清楚几个坐标概念：按下鼠标时的指针坐标，移动过程中当前鼠标的指针坐标，松开鼠标时的指针坐标，目标被拖动元素的元素坐标，拖动过程中的目标元素坐标。算法设计：按下鼠标时 阅读全文
javascript数组去重
2013-10-18 01:36 by youxin, 407 阅读, 收藏, 编辑
摘要：
字典去重：function delrep2() { var n = {} , r = [] this.forEach(function(v){ if (!n[v]) { n[v] = true r.push(v) } }) return r},但是令人遗憾的是，这个方法是有bug的：你把所有的元素都转化成字典的键值key，也就是字符串，那必然会出现1和'1'的问题一、jQuery.unique使用jQuery unique 函数去重,适用于已引入jQuery库的童鞋语法：jQuery.un... 阅读全文
relatedTarget, fromElement, toElement
2013-10-16 13:50 by youxin, 1890 阅读, 收藏, 编辑
摘要：
原文：http://www.quirksmode.org/js/events_mouse.html#relatedtargetW3C在mouseover和mouseout事件中添加了relatedTarget属性。在mouseover事件中，它表示鼠标来自哪个元素，在mouseout事件中，它指向鼠标去往的那个元素。而Microsoft添加了两个属性：fromElement在mouseover事件中表示鼠标来自哪个元素。toElement在mouseout事件中指向鼠标去往的那个元素。跨浏览器的脚本如果你想知道鼠标来自哪个元素在mouseover事件中，你可以这样写：1234function 阅读全文
ajax缺点以及解决办法
2013-10-16 13:26 by youxin, 762 阅读, 收藏, 编辑
摘要：
1．缺少一个没有标准之争、没有back和history的浏览器Ajax取消了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作，这是ajax所带来的一个比较严重的问题。作为一个WEB的用户，我们已经习惯了有back按钮，这几乎是每个用户共同的习惯，AJAX下点击链接是不Redirect页面，所以不存在后退和前进了，同样，没有后退和前进也就无存找浏览历史纪录了。back和history存在的根本就是url的改变，在AJAX下人们发现不改url也同样能达到内容改变这个酷酷的特点。用过Gmail的知道，Gmail下面采用的ajax技术解决 阅读全文
javascript预加载和延迟加载
2013-10-15 09:54 by youxin, 2190 阅读, 收藏, 编辑
摘要：
延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：What can your tired old page, once loaded and used and read, can do for your user? It can preload components needed by the next page, so when the users visit the next page, they have the new scripts, styles and images already in the 阅读全文
javascript instanceof
2013-10-14 11:06 by youxin, 527 阅读, 收藏, 编辑
摘要：
object instanceof constructorinstanceof运算符用来检测constructor.prototype是否存在于参数object的原型链上.对于instanceof和typeof，以前偶尔的用到过，特别是typeof用到的相对更多一些，今日研究ext源码，很多地方都用到了instanceof，突然觉得他们两个有些相似但也应该有他们区别，网上看了一些文章，对它们之间的关系有了一定的了解。instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。typeof用以获取一个变量的类型，typeof一般只能返回如下几个结果：number,boole 阅读全文
Object.prototype.toString.call() 区分对象类型（判断对象类型）
2013-10-12 14:26 by youxin, 471 阅读, 收藏, 编辑
摘要：
在 JavaScript 里使用typeof来判断数据类型，只能区分基本类型，即 “number”，”string”，”undefined”，”boolean”，”object” 五种。对于数组、对象来说，其关系错综复杂，使用typeof都会统一返回 “object” 字符串。要想区别对象、数组单纯... 阅读全文
javascript圆形排列
2013-10-12 13:21 by youxin, 1196 阅读, 收藏, 编辑
摘要：
显示效果如下：需要用到的知识：等于半径长的圆弧所对的圆心角叫做1弧度的角，用符号rad表示，读作弧度。用弧度作单位来度量角的制度叫做弧度制。另外一种度量角的方法是角度制。弧度制的精髓就在于统一了度量弧与半径的单位，从而大大简化了有关公式及运算，尤其在高等数学中，其优点就格外明显。一个完整的圆的弧度是2π，所以2π rad = 360°，1 π rad = 180°，我们平时用的sin(x); x为π/2是就相等于90°，为1.sin,cos用弧度制方便一点。var dotLeft = ($(".container").width()-$(&qu 阅读全文
JavaScript实现定点圆周运动
2013-10-12 02:42 by youxin, 1150 阅读, 收藏, 编辑
摘要：
目是这样的：假设有一定点（400px,300px），通过JavaScript使一个直径20px的圆点以 r=180px 为半径围绕该点做匀速圆周运动。这个问题的整体实现思想应该是这样的，看到“半径”，“圆周运动”这些字眼首先应该想到的是数学方法，想到sin,cos这些三角函数。有了定点坐标和半径 r，我们可以初始化一个角度 a，通过 400-cos(a)*r 和 300-sin(a)*r 来分别获取圆点相对于定点在角度为 a 时刻的横纵坐标，至于匀速的问题，可以通过 setInterval()方法来处理。示例：http://shaozhuang.me/demo/yuanzhou.html 阅读全文
转：Javascript异步编程的4种方法
2013-10-07 21:32 by youxin, 356 阅读, 收藏, 编辑
摘要：
你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Syn 阅读全文
从一个实例，看new FunctionName()的内部机制
2013-10-07 20:37 by youxin, 264 阅读, 收藏, 编辑
摘要：
下面的代码：function Dog(name) { this.name = name; Dog.prototype = { shout: function() { alert("I am " + this.name); } }; } var dog1 = new Dog("Dog 1"); dog1.shout();上面的代码看起来很“优美”，可一运行，却报错：Object # has no method 'shout'在YUI 3 学习笔记：oop中，曾提到过，对于代码：Fn() {}; var fn = new Fn();new . 阅读全文
