随笔分类 - Javascript攀登之路
摘要：随着前端JavaScript代码越来越重，如何组织JavaScript代码变得非常重要，好的组织方式，可以让别人和自己很好的理解代码，也便于维护和测试。模块化是一种非常好的代码组织方式，本文试着对JavaScript模块化开发的一些基础知识和具体使用做一些阐释。何为模块化开发？“模块是为完成某一功能...
阅读全文
摘要：JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。同源策略限制 同源策略限制：出于安全方面的考虑，浏览器阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。什么是跨域？简单的来说，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制...
阅读全文
摘要：预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。方法一：用CSS和JavaScript实现预加载实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。单纯使用CSS，可容易、高效地预加载图片，代码如下：#preload-01 { background:
阅读全文
摘要：在过去一些的时候，Web开发人员并没有太多的去关注内存泄露问题。那时的页面间联系大都比较简单，并主要使用不同的连接地址在同一个站点中导航，这样的设计方式是非常有利于浏览器释放资源的。即使Web页面运行中真的出现了资源泄漏，那它的影响也是非常有限而且常常是不会被人在意的。 今天人们对Web应用有了高更的要求。一个页面很可能数小时不会发生URL跳转，并同时通过Web服务动态的更新页面内容。复杂的事件关联设计、基于对象的JScript和DHTML技术的广泛采用，使得代码的能力达到了其承受的极限。在这样的情况和改变下，弄清楚内存泄露方式变得非常的急迫，特别是过去这些问题都被传统的页面导航方法给屏蔽..
阅读全文
摘要：1. 请减少HTTP请求 基本原理： 在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。 一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。 而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对
阅读全文
摘要：与类的创建篇一样，这里先贴出最终代码，再做详细分析：// 创建一个父类function SuperType(){ this.company = 'alibaba';}function SubType(){ SuperType.call(this); // 【1. 调用父类的构造函数】 this.name = 'yunos'; }SubType.prototype = Object.create(SuperType.prototype,{constructor:{value:SubType}}); // 【2. 把父类的原型赋给子类】var instance =
阅读全文
摘要：Javascript的设计思路是这样的：（1）借鉴C语言的基本语法；（2）借鉴Java语言的数据类型和内存管理；（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；（4）借鉴Self语言，使用基于原型（prototype）的继承机制。 所以，Javascript语言实际上是两种语言风格的混合产物 ----（简化的）函数式编程+（简化的）面向对象编程。这是由Brendan Eich（函数式编程）与网景公司（面向对象编程）共同决定的。
阅读全文
摘要：为避免Url字符串在传递过程中的乱码，我们一般需要对字符串进行处理。在Javascript中实现此功能的全局对象有3个，分别是：escape(), encodeURI() 和 encodeURIComponent()。javaScript escape() 函数作用 escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。语法 escape(string) 参数: string 描述： 必需。要被转义或编码的字符串。返回 已编码的string的副本。其中某些字符被替换成了十六进制的转义序列。返回值说明 该方法不会对 ASCII 字母和数字进行编码，也不会...
阅读全文
摘要：挖坑，待填。。。
阅读全文
摘要：瀑布流最早出现在Pinterest上。 然后在国内大大小小的网站上疯狂流行。花瓣，美丽说，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等。 这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 —瀑布流式布局。一、总览淘宝UED介绍：http://ued.taobao.com/blog/2011/09/waterfall/ 二、实现思路(1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式，如下图所示:各列固定宽度，并且左浮动；一列中的数据块为一组，列中的每个数...
阅读全文
摘要：先介绍目前在ECMAScript中使用最广泛，认同度最高的默认模式。1.组合使用构造函数及原型function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby","Court"];}Person.prototype = { constructor : Person, sayName : function(){ alert(this.name); }}var person1 = new Person...
阅读全文
摘要：高手请一笑视之......, 新手可以重新认识一下js.Javascript类型转换数据类型/目标类型Boolean ( )Number ()String ( )Boolean0,1"false" "true"Number( 等于0的值 or 非数字 ) —> false等于自身加引号，如：(123 -> "123")String"" —> falseNumber() 整体转化，无法转化则为：NaNparseInt() 从左边数字截取，如：(123aaa -> 123)parseFloat(
阅读全文
摘要：引用外部js乱码在web开发中我们一般都会不可避免的使用js。我们可以将js代码直接放在页面中即通过内部使用js。但是为了给页面良好的"瘦身"我们一般都会将js代码放在外部，然后通过src引用。这个时候我们就需要注意一个问题：编码问题。如果web页面也js采用不同编码，这个时候就会出现乱码。(内部使用js不需要注意编码问题，因为他们采用的是同一种编码)对于大多数的web页面，我们一般都是使用如下两种编码：UTF-8、GB2312。所以我们只需要统一页面和js编码就可以解决乱码问题： 对于GBK页面引用编码为UTF-8编码的JavaScript文件如果出现乱码问题，可以使用下
阅读全文
摘要：从JavaScript引擎的解析机制来探索JavaScript的工作原理，下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序。如果说，JavaScript引擎的工作机制比较深奥是因为它属于底层行为，那么JavaScript代码执行顺序就比较形象了，因为我们可以直观感觉到这种执行顺序，当然JavaScript代码的执行顺序是比较复杂的，所以在深入JavaScript语言之前也有必要对其进行剖析。1 按HTML文档流顺序执行JavaScript代码首先，读者应该清楚，HTML文档在浏览器中的解析过程是这样的：浏览器是按着文档流从上到下逐步解析页面结构和信息的。JavaScrip
阅读全文
摘要：4.1.2 复制变量值Boolean、Number、String、Undefined、Null复制基本类型的值时，会在栈中创建一个新值，然后把该值复制到为新变量分配的位置上;两个值相互独立，参与任何操作均不会相互影响。Object（Array,Function）;复制引用类型的值时，同样也会将存储在栈中的值复制一份放到为新变量分配的空间中，不同的是，这个值的副本实际上是一个指针，指针指向存储在堆中的一个对象，两个变量实际上将引用同一个对象，因此改变其中一个变量，就会影响另一个变量;5.5 Function类型疑惑：function sum(num1,num2){ return num1 + n
阅读全文
摘要：很容易搞混的两个方法: 相同点:两个方法产生的作用是完全一样的 注意：至少有一个参数，第一个参数必须有且是一个对象（Object），因为就是这个家伙偷懒。区分apply,call就一句话 foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3) call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, ...
阅读全文
摘要：当我们在网上冲浪时，总会看到带有 runtime 错误的 Javascript 警告框，同时会询问我们“是否进行 debug？”。像这样的错误信息或许对开发人员有用，对用户则未必。当错误发生时，他们往往会选择离开这个站点。有两种在网页中捕获错误的方法：使用 try...catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)第一种 onerror事件，当错误发生时window.onerror=function(){return true;} 注意：chrome、o
阅读全文
摘要：1.静态代码 2.通过js控制，开启、关闭自动刷新以及刷新间隔时间.$(function(){ $('#controlRefresh').click(function(){ if($(this).val()=="关闭自动刷新"){ $(this).val("开启自动刷新"); }else{ $(this).val("关闭自动刷新"); } }) $('#time').change(function(){ var time = $(t...
阅读全文
浙公网安备 33010602011771号