有人看过《JavaScript火影忍者羁绊秘籍秘籍》这本书吗

时间的脚步总是不等人,很快新的一年2016就要来到了,而我也即将从学校走向社会了。2015年因缘巧合买了几本图灵的书,至此我便爱上了图灵丛书。
我是一名计算机学院的学生,准备从事前端相关的工作,当然啦,我梦想是当一名高级前端开发工程师,我会努力去实现它。我想在追寻梦想的过程中,图灵程序设计丛书一定会给予我很大的帮助。就目前看来,我也就买了几本图灵的书,然而每一本我都是爱不释手。
通过我读的几本图灵的书,我发现图灵的书有这样的特点:
1、通俗易懂,很容易去理解并深入下去。
2、作者的水平很高,读他们的书仿佛就和他们是在面对面交流,他会一步步教我们如何进行下一步。
3、图灵程序设计丛书大部分都是国外的经典书籍,都是相关领域大师级人物写的书如javascript高级程序设计(前端传说中的红宝书)、DOM编程艺术(前端入门必备书籍)等等无一不是久负盛誉的经典书籍。
好啦,说了这么多我已经迫不及待地想列出我新的一年的读书计划了。
要想作为一名合格的前端开发工程师,这样的一本书应该是人手一份的吧,用来当作字典来查。这是一部知识点很全面的的书籍,涵盖了html、css、javascript相关的知识点。这本书的作者是畅销技术图书作家Adam Freeman,这本书也沿袭了他一贯的写作特点:幽默风趣、简约凝练、逻辑性强。这样的一本书身为前端开发者能不入手一部么?
我想如果你想学好css样式,那么这本出自大师Andy Budd的书你一定要看。所谓站在巨人的肩膀上,我们通过学习前辈们的经验才能够获得更好的知识与技能。前辈们已经能够为我们铺好了路,在这本书里他告诉我们最好应该怎样运用css样式。
Molly E. Holzschlag,Web标准项目负责人和W3C HTML工作组专家曾这样评价这本书:
Andy Budd对CSS设计的底层技术和方法有着深刻的理解,而且更善于将这些知识娓娓道来。在跨浏览器支持问题上,无人可以望其项背。
看完并理解这本书后我们的css应用能力会提高一个层次,完全有能力设计出一个酷炫界面。
这是一部世界网站设计师经典力作,就凭这个理由我就觉得我很有必要读一下这本书。
jquery作为一个优秀的javascript库,不用说的了前端开发人员必须得掌握了,jquery的核心思想 :write less do more,jquery可以大大提高我们的开发效率。因此我们急需掌握这项技能,于是这样的一本书——
《jQuery基础教程》便应运而生了。这本书注重理论与实践相结合,由浅入深、循序渐进,适合各个层次的前端Web开发人员学习和参考,像我这样的初级学者当然也不容错过啦。
在已经学习了《jQuery基础教程》后,我们的能力肯定提升了一个层次,要想再拔高,接下来的这本书便不容错过啦——《jQuery实战》。这本书是jQuery创建者John Resig作序推荐的,所以你懂得这本书是该有多好啦。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它的出现使得网页的交互更加方便快捷。然而这本书不仅有对于基础知识的介绍,还有对于Ajax开发中重大的体系架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等等。这本书还有联外俩本,合在一起成为《Ajax实战三部曲》我很想买来这三本书来读,无奈买不到,绝版了,看来只能看电子版咯。
这本书我听一个学长推荐,他说这本书打通了他的奇经八脉,评价相当高啊,我搜索了一下的确这本书相当出名,不幸的是这本书也绝版了,想买买不到啊,同样只能读电子版了。
这本书是jQuery创建者John Resig的一力作。也是别人大力推荐的一本忍者秘密啊,对于提高javascript的能力有很大帮助,从中可以学到许多大家们的编程风范。
这本书虽然看上去很薄,但浓缩的都是精华啊,作者以短短的篇幅便勾勒出了javascript的重点,足见作者功力的深厚啊。这本书适合有一定的javascript编程经验的人看,所以在看了前面那些书之后,便可以看这本书了。
身为一名合格的前端开发工程师,我想懂点设计、学点艺术是很有必要的。
这本书出自世界著名设计师、技术专家和畅销书作家之手,她就是大名鼎鼎的RobinWilliams。我看了下这本书的电子版,看后收获颇多,深感作者功力深厚,我这样的一个设计小白也能看得津津有味,看完便想入手一本,偶尔翻来看看。
这本书同样出自大师RobinWilliams之手,是《写给大家看的设计书》姊妹篇。
一位读者这样评论:
无论是尚未入门的Web设计新手,还是具有一定经验的Web设计人员,都应该把它作为案头必备书。我之所以喜欢这本书,是因为书中有许多富有创意的精彩实例。如果设计网站时遇到困难了,这本书会给我灵感。
读完了《写给大家看的设计书》,再来读这本书是再好不过的选择了,递进互补,提高我们的设计美感感知能力。
在现实生活中我们总是追求复杂完美的东西,有时候可能我们把问题想复杂了,其实简约也是一种美,那么这本书就会告诉我们简约至上的主题。追求简单易用才是我们人类的本性。
值得看得书实在太多了,上面列的数目中有图灵出版的(大部分都是)也有不是图灵出版的。大师们的经典著作简直让我痴迷啊,不经感叹大师就是大师,总是后悔没有早点发现图灵这系列图书。对于读书我的终极愿望便是读完图灵的书,哈哈哈,谁让图灵的书如此有魅力呢。(嗯,有时候想买几本图灵的书,去各大网站一搜索,都缺货,额,这让我很不好受啊,买不到想看的图灵的书!)
这个是所有内容都在了代码块里吗..格式看着怪怪的
缺货的话看看社区能不能兑换吧...一些书可能已经是很老的了.推荐这篇日记的豆列
······
&(869人关注)JavaScript忍者秘籍 - 简书
JavaScript忍者秘籍
JavaScript常用测试框架:
单元测试框架的核心是断言方法,通常叫做assert()。该方法通常接受一个值——需要断言的值,以及一个表示该断言目的的描述。如果该值执行结果为true,断言就会通过;否则断言就会被认为是失败的。
3. 函数是第一型对象:
对象在JavaScript中有如下功能:
它们可以通过字面量进行创建;
它们可以赋值给变量、数组或其他对象的属性;
它们可以作为参数传递给函数;
它们可以作为函数的返回值进行返回;
它们可以拥有动态创建并赋值的属性;
在JavaScript中,函数拥有全部这些功能,也就是说可以像这门语言中的其他对象一样使用。因此,我们说函数是第一型对象。函数还有一个特殊的功能,它们可以被调用。
4. 浏览器的事件轮询:
浏览器的事件轮询是单线程的,每个事件都是按照在队列中所放置的顺序来处理的。
5. 回调概念:
当我们定义一个函数稍后执行时,无论何时定义,在浏览器执行还是在其他地方执行,我们定义的就是所谓的回调。
6. 函数声明:
JavaScript函数是使用函数字面量进行声明从而创建函数值的,就像使用数字字面量创建数字值一样。函数字面量由四个部分组成:
function关键字;
可选名称;
括号内部的参数;
函数体,包含在大括号内的一系列JavaScript语句;
7. 作用域和函数:
在Javascript中,作用域是由function进行声明的,而不是代码块。声明的作用域创建于代码块,但不是终结于代码块。例如:
if(window){
var x= 213;
alert(x);//213
8. 使用apply()和call()方法:
在函数调用的时候,JavaScript为我们提供了一种方式,可以显示指定任何一个对象作为其函数的上下文。JavaScript的每个函数都有apply()和call()方法。通过函数的apply()方法来调用函数,我们要给apply()传入两个参数:一个是作为函数上下文的对象,另外一个是作为函数参数所组成的数组。call()方法的使用方式类似,唯一不同的是,给函数传入的参数是一个参数列表,而不是单个数组。代码示例:
&script type = "text/javascript"&
function juggle() {
var result = 0;
for (var n = 0; n & arguments. n++) {
result += arguments[n];
this.result =
var ninja1 = {};
var ninja2 = {};
juggle.apply(ninja1,[1,2,3,4]);
juggle.call(ninja2,5,6,7,8);
console.log(ninja1.result == 10);//true
console.log(ninja2.result == 26);//true
9. arguments.callee属性:
代码示例:
var ninja = {
chirp: function(n) {
return n & 1 ? arguments.callee(n - 1) + "-chirp" : "chirp";
callee属性引用的是当前所执行的函数。该属性可以作为一个可靠的方法引用函数自身。
10. 自记忆函数:
记忆之前计算出的值:
function isPrime(value) {
if (!isPrime.answers) {
isPrime.answers = {};
if (isPrime.answers[value] != null) {
return isPrime.answers[value];
var prime = value != 1;
for (var i = 2; i & i++) {
if (value % i == 0) {
return isPrime.answers[value] =
缓存记忆DOM元素
function getElements(name) {
if (!getElements.cache) {
getElements.cache = {};
return getElements.cache[name] = getElements.cache[name] || document.getElementsByTagName(name);
11. 模拟类似数组的方法
var elems = {
length: 0,
add: function (elem) {
Array.prototype.push.call(this, elem);
gather: function (id) {
this.add(document.getElementById(id));
12. 使用apply()支持可变参数
在这里指定Math为上下文是没有必要的
function smallest(array) {
return Math.min.apply(Math, array);
function largest(array) {
return Math.max.apply(Math, array);
重载函数的方法:
function addMethod(object, name, fn) {
var old = object[name];//保存原有的函数,因为调用的时候可能不匹配传入的参数个数
object[name] = function () {
if (fn.length == arguments.length) {
//如果该匿名函数的形参个数和实数个数匹配,就调用该函数
return fn.apply(this, arguments);
} else if (typeof old == 'function') {
//如果传入的参数个数不匹配,则调用原有的参数
return old.apply(this, arguments);
addMethod方法共接受三个参数:
要绑定方法的对象
绑定方法所用的属性名称
要绑定的方法
13. 什么是闭包:
闭包是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域。换句话说,闭包可以让函数访问所有的变量和函数,只要这些变量和函数声明时的作用域内就行。
14. 在封闭的作用域内,强制使用一个名称:
(function ($) {
$("img").on("click", function (e) {
$(e.target).addClass("clickOn");
})(jQuery);//jQuery作为参数绑定到$上
15. 利用即时函数妥善处理迭代问题:
for (var i = 0; i & i++) {
(function (n) {
16. 使用hasOwnProperty()方法辨别Object原型扩展:
Object.prototype.keys = function () {
var keys = [];
for (var i in this) {
//使用hasOwnProperty()忽略原型对象上的属性
if (this.hasOwnProperty(i)) {
keys.push(i);
var obj = {a: 1};
console.log(obj.keys());
17. 在Number原型上添加一个方法
Number.prototype.add = function (num) {
return this +
var n = 5;
console.log(n.add(3));
18. 子类化Array对象:
function MyArray() {}
MyArray.prototype = new Array();
var mine = new MyArray();
mine.push(1, 2, 3);
console.log(mine.length == 3);//true
19. 模拟Array功能,而不是扩展出子类:
function MyArray() {}
MyArray.prototype.length = 0;
(function () {
var methods = ['push', 'pop', 'shift', 'unshift', 'slice', 'splice', 'join'];
for (var i = 0; i & methods. i++) {
(function (name) {
MyArray.prototype[name] = function () {
return Array.prototype[name].apply(this, arguments);
})(methods[i])
var mine = new MyArray();
mine.push(1, 2, 3);
console.log(mine);//[1, 2, 3]
20. 判断函数是否是作为构造器进行调用的
function Test(){
return this instanceof arguments.
通过arguments.callee可以得到当前执行函数的引用;
“普通”函数的上下文是全局作用域(除非有人做了强制修改);
利用instanceof操作符测试已构建对象是否构建于指定的构造器;
基于这些事实,函数在作为构造器进行执行的时候,表达式:this instanceof arguments.的结果是true,如果作为普通函数执行,则返回false。
21. 用eval()方法进行求值:
基本功能:
该方法将执行传入代码的字符串;
在调用eval()方法的作用域内进行代码求值;console.log(eval("5+5") == 10);//true
求值结果:eval()方法将返回传入字符串中最后一个表达式的执行结果。
console.log(eval("3+4;5+6"));//11
在使用eval()方法求值的时候,求值执行的作用域就是调用eval()时的作用域,而不是全局作用域。
22. 用函数构造器进行求值:
JavaScript中的所有函数都是Function的实例,可以直接使用Function构造器来实例化函数。
var add = new Function("a", "b", "return a +");
console.log(add(3, 4));//7
Function构造器可变参数列表的最后一个参数,始终是要创建函数的函数体内容。前面的参数则表示函数的形参名称。
所以,上面的示例代码等价于如下代码:
var add = function(a, b) { return a +}
虽然这些代码在功能上是等同的,但采用Function构造器方式有一个明显的区别,函数体由运行时的字符串所提供。
另外一个极其重要的实现区别是,使用Function构造器创建函数的时候,不会创建闭包。在不想承担任何不相关闭包的开销时,这可能是一件好事。
23. 将JSON字符串转化成JavaScript对象
var json = '{"name":"Ninja"}';
var object = eval("(" + json + ")");
console.log(object);//Object {name: "Ninja"}
使用eval()做JSON解析时需要注意的是:通常,JSON数据来自于远程服务器,而且,盲目执行远程服务器上的不可信代码,基本是不可取的。
最受欢迎的JSON转换器脚本是由JSON标记的创造者Douglas Crockford所编写。在该转换器中,他做了一些初步的JSON字符串解析,以防止任何恶意信息通过。Github:JSON-js
24. with语句
with语句是一个强大的、但经常被误解的、有争议的Javascript特性。with语句允许我们将一个对象的所有属性引用到当前作用域,允许我们无需使用拥有者对象的前缀,就可以对这些属性进行引用和赋值操作。
var use = "other";//定义一个全局变量
var katana = {//创建一个对象
isSharp: true,
use: function () {
this.isSharp != this.isS
with (katana) {//建立一个with作用域,在该作用域内,可以直接引用属性名称,而不必使用katana前缀,好像它们就是全局变量和全局方法一样
console.log(use !== "other" && typeof use == "function");//作用域内进行测试,true
console.log(this !== katana);//true
console.log(use === "other");//作用域外进行测试,true
console.log(typeof isSharp === "undefined");//true
注意:在with语句的作用域内,对象属性的优先级绝对高于在更高层作用域内定义的同名变量。函数上下文(this)是不受with语句影响的。
25. 判断一个浏览器是否支持opacity:
var div = document.createElement("div");
div.setAttribute("style", "opacity:0.5");
var OPACITY_SUPPORTED = div.style.opacity === "0.5";
console.log(OPACITY_SUPPORTED);
26. 获取计算样式的值:
function fetchComputedStyle(element, property) {//定义新函数
if (window.getComputedStyle) {
var computedStyles = window.getComputedStyle(element);//获取接口
if (computedStyles) {
property = property.replace(/[A-z]/g, '-$1').toLowerCase();//获取样式值
return computedStyles.getPropertyValue(property);
} else if (element.currentStyle) {//使用专有方式,IE浏览器
property = property.replace(/-([a-z])/ig, function (all, letter) {
return letter.toUpperCase();
return element.currentStyle[property];
window.onload = function () {
var div = document.getElementsByTagName("div")[0];
console.log(fetchComputedStyle(div, "display"));
27. 绑定和解绑事件处理程序:
在DOM2下,对于兼容于DOM的现代浏览器,我们绑定和解绑事件处理程序使用的是addEventListener()和removeEventListener()方法;而对IE老版本使用的则是attachEvent()和detachEvent()方法。&br/&
注意:IE没有提供事件捕获阶段的监听方式,只支持时间处理过程中的冒泡阶段。此外,IE的实现给绑定处理程序设置了错误的上下文,使得处理程序内的this引用的是全局上下文,而不是事件目标元素。另外,IE没有将事件信息传递给处理程序,而是将事件信息定死在全局上下文了——window对象。
这意味着,在处理如下类型的事件时,我们需要根据不同的浏览器来指定不同的方式。
绑定一个处理程序时;
解绑一个处理程序时;
获取事件信息时;
获取事件目标时;
如何解决多API的问题,以及IE不能正确设置上下文问题:代码:绑定事件处理程序时,设置正确的上下文
if (document.addEventListener) {
this.addEvent = function (elem, type, fn) {
elem.addEventListener(type, fn, false);//false表示使用冒泡处理
this.removeEvent = function (elem, type, fn) {//DOM解绑函数
elem.removeEventListener(type, fn, false);
} else if (document.attachEvent) {//检测是否支持IE
this.addEvent = function (elem, type, fn) {
var bound = function () {
return fn.apply(elem, arguments);//改变上下文
elem.attachEvent("on" + type, bound);
this.removeEvent = function (elem, type, fn) {
elem.detachEvent("on" + type, fn);
28. 将事件委托给祖先元素:
假设一个表格在初始化加载的时候,所有的单元格都是白色背景,我们很想直观地表明,表格中的哪个单元格在与用户交互的时候被单机了。
丑陋的代码:
var cells = document.getElementsByTagName("td");
for (var n = 0; n & cells. n++) {
addEvent(cells[n], "click", function () {
this.style.backgroundColor = "yellow";
优雅的写法:
var table = document.getElementById("#someTable");
addEvent(table, "click", function (event) {
if (event.target.tagName.toLowerCase() == "td") {
event.target.style.backgroundColor = "yellow";//一个元素被单击的时候可以通过event.target获取该元素的引用
存在一个问题:在老版本IE浏览器中,submit和change事件根本没有冒泡,那么如何进行事件委托?
29. 事件冒泡检测代码:
console.log(isEventSupported("click"));//true
function isEventSupported(eventName) {
//创建一个div用于测试,通常各个事件都可以冒泡到div上来,包括change和submit
var element = document.createElement("div"), isS
eventName = "on" + eventN
isSupported = (eventName in element);//检测元素是否有一个属性表示该事件
//如果检测到没有这个属性,那就创建一个ontype并插入一点代码,然后判断该元素是否可以将其转换为一个函数
//如果转换为一个函数,说明该元素知道如何解释冒泡事件
if (!isSupported) {
element.setAttribute(eventName, "");
isSupported = typeof element[eventName] == 'function';
element =//删除临时元素
return isS
街角有人祝福。

我要回帖

更多关于 javascript忍者禁术 的文章

 

随机推荐