把看过的认为有点意思的,做个链接记录。
2009年 一、学习JavaScript 闭包详见阮一峰链接 有一个可以作为面试题:
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()()); // 2 var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; alert(object.getNameFunc()());二、用Javascript获取页面元素的位置参见链接 讲述浏览器元素位置相关的信息 (相对位置,绝对位置 ,滚动位置)。
2010年 一、JavaScript 面向对象编程(封装)参见链接
明白constructor \ instanceof \ prototype原型 \ isPrototypeOf \ hasOwnProperty 就没啥看 的了。 二、JavaScript 面向对象编程(构照函数的继承)参见链接 重点看看,这个可以作为面试题 ☆
三、JavaScript 面向对象编程(非构照函数的继承)参见链接 2011年 一、 JavaScript 快速 排序的实现 参见链接
“快速排序”的排序过程:
在数据集之中,选择一个元素作为“基准”。所有小于“基准”的元素,都移到“基准”的左边; 所有大于“基准”的元素,都移到“基准”的右边。对“基准”左边和右边的两个子集,不断重复第一步和第二部,直到只剩最后一个元素。 算法如下: var quickSort = function(arr){ if(arr.length <=1 ){ return arr ; } var pivotIndex = Math.floor( arr.length /2 ); var pivot = arr.splice( pivotIndex ,1 )[0]; var left = []; var right = []; for( var i=0;i<arr.length;i++ ){ if( arr[i] < pivot ){ left.push( arr[i] ); } else{ right.push(arr[i]); } } return quickSort( left ).concat( [pivot],quickSort(right) ); };可以作为面试题 ☆ 还有一个要留意的, JavaScript 会自动插入行尾分号(阮一峰那有误)。参看链接
function aa(){ return { i:1 }; } // undefined function aa(){ return { i:1 }; } // { i:1 }数字和对象的区分:(道格拉斯 )
if( arr && typeof arr === 'object' && typeof arr.length === 'number' && !arr.propertyIsEnumerable('length')){ // 是数组 } // 现在可以用 Array.isArray( arr ) // 返回布尔值。二、 新版jquery 的ajax 新写法: ☆ jQuery.Deferred 符合 Promises/A+ 规范和 ES2015 规范 参见链接
$.ajax("test.html") .done(function(){ alert("哈哈,成功了!");} ) .fail(function(){ alert("出错啦!"); } ) .done(function(){ alert("第二个回调函数!");} );新版jQuery 更新的那些功能 对于新版需要注意按需引入对应的js. 1、如果你要兼容更广泛的浏览器,包括IE8,Opera 12,Safari 5等,使用jQuery-Compat 3.0.0包。我们推荐大多数站点使用这个版本,因为它为最多的网站访问者提供了最佳的兼容性。 2、如果你的网站是专为领先的浏览器搭建的,或者是一个webview(例如PhoneGap或Cordova)容器中的HTML应用,并且你知道哪些浏览器引擎会使用它,那就使用jQuery 3.0.0包。
github参看 这种写法可以学习一下。 !
jQuery Api
2012年 一、 JavaScript 编程风格 参见链接 就简单的几个风格和常见的风格。 二、 JavaScript 定义类的三种方法参见链接 重点 Object.create 遇到不支持的Object.create 则如下实现:
if( !Object.create ){ Object.create = function(o){ function F(){} F.prototype = o; return new F(); }; }还讲到了一种,极简主义法 感觉挺新颖的。 可以学习下。
var Cat = { createNew:function(){ // some code here. } } // eg var Cat = { createNew:function(){ var cat = {}; cat.name = 'aa'; cat.makeSound = function{ alert('123') }; return cat; } } var cat1 = Cat.createNew(); cat1.makeSound();文中还模拟了 继承、私有属性和私有方法、数据共享 。 可以面试说出装B神器。 三、 文件上传的渐进式增强参见链接 如果遇到文件上传的时候,可以看看学习下,(ajax 上传、进度条、拖放上传)。 四、 XMLHttpRequest Level 2 使用指南 。参见链接 讲了ajax 2.0 的变化。还是还可以看看 比如新增:
* 可以设置HTTP请求的时限。 * 可以使用FormData对象管理表单数据。 * 可以上传文件。 * 可以请求不同域名下的数据(跨域请求)。 * 可以获取服务器端的二进制数据。 * 可以获得数据传输的进度信息。五、 模块化编程的演变。 Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):require.js的用法 学会合理使用异步编程(promise) ☆
2013年 一、Javascript 严格模式详解 参见链接 二、如何让搜索引擎抓取AJAX内容?(在单页面盛行的今天)这里写链接内容 值得注意的是谷歌曾经提出“井号+感叹号”的结构
http://example.com#!1 http://twitter.com/#!/ruanyf结果用户不接受。 最后采用的是* History API。*
window.history.pushState(state object, title, url);Event Loop是一个程序结构,用于等待和发送消息和事件。
2014年 一、ES6 出书 《ECMAScript 6入门》 二、前端模块管理器简介 讲到了Bower,Browserify,Component和Duo。 最终以推荐Duo 为结尾。 三、重谈 Event Loop? JavaScript 运行机制详解:再谈Event Loop详情看 ☆☆
2015年
一、强类型 JavaScript 的解决方案这里写链接内容
TypeScript 是微软2012年推出的一种编程语言,属于 JavaScript 的超集,可以编译为 JavaScript 执行。 它的最大特点就是支持强类型和 ES6 Class。
这个得好好学习看看。
二、JavaScript 有多灵活?
给原型上加方法
(8).double().square() // 如果要改写,该怎么弄 (8).double.suqare重点来了, ES5规定,每个对象的属性都有一个取值方法get,用来自定义该属性的读取操作。
Number.prototype = Object.defineProperty( Number.prototype, "double", { get: function (){return (this + this)} } ); Number.prototype = Object.defineProperty( Number.prototype, "square", { get: function (){return (this * this)} } );上面代码在Number.prototype 上定义了两个属性 double and square ,以及他们的取值方法get. 这样就可以采用上面的方法写了
(8).double.square // 256三、React 入门实例教程 react 更新神速,这篇的demo 有点过时了,不过可以敲一敲,多一点点感觉。