跳到主要内容

16 篇博文 含有标签「javascript」

查看所有标签

· 阅读需 7 分钟

创建节点

  • document.body 指向的是 body 元素
  • document.documentElement 则指向 html 元素
    //创建节点
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
document.body.appendChild(createNode);
document.documentElement.appendChild(createNode);

插入节点

可以使用

  • appendChild
  • insertBefore insertBefore 接收两个参数,第一个是插入的节点,第二个是参照节点,如 insertBefore(a,b),则 a 会插入在 b 的前面
    //插入节点
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
var div1 = document.getElementById("div1");
document.body.insertBefore(createNode,div1);

替换和删除元素

从 replaceChild 和 removeChild 的字面意思看,就是删除子节点,因此调用者,需要包含子节点 div1,不然调用会报错。返回的节点是替换的或删除的元素,被替换 / 删除的元素仍然存在,但 document 中已经没有他们的位置了。

//替换元素
var replaceChild = document.body.replaceChild(createNode,div1);
//删除元素
var removeChild = document.body.removeChild(div1);

节点的属性

  • firstChild: 第一个子节点
  • lastChild: 最后一个子节点
  • childNodes: 子节点集合,获取其中子节点可以 someNode.childNodes[index] 或者 someNode.childNodes.item(index)
  • nextSibling: 下一个兄弟节点
  • previousSibling:上一个兄弟节点
  • parentNode:父节点

文档片段

好处在于减少 dom 的渲染次数,可以优化性能。

//文本片段
var fragment = document.createDocumentFragment();
var ul = document.getElementById("ul");
var li = null;
for (var i = 4; i >= 0; i--) {
li = document.createElement("li");
li.appendChild(document.createTextNode("item "+i));
fragment.appendChild(li);
}
ul.appendChild(fragment);

克隆元素

  • someNode.cloneNode(true): 深度克隆,会复制节点及整个子节点
  • someNode.cloneNode(false): 浅克隆,会复制节点,但不复制子节点
//克隆
var clone = ul.cloneNode(true);
document.body.appendChild(clone);

注意

childNodes.length 存在跨浏览器的问题

可以看到有关列表的 html 片段没有用

<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>

这种书写格式而是使用没有换行的格式书写,是因为在不同的浏览器中,获取 ul.childNodes.length 的结果有差异: 在 ie 中,ul.childNodes.length 不会计算 li 之间的换行空格,从而得到数值为 4 在 ff、chrome,safari 中,会有包含 li 之间的空白符的 5 个文本节点,因此 ul.childNodes.length 为 9 若要解决跨浏览器问题,可以将 li 之间的换行去掉,改成一行书写格式。

cloneNode 存在跨浏览器的问题

在 IE 中,通过 cloneNode 方法复制的元素,会复制事件处理程序,比如,var b = a.cloneNode(true). 若 a 存在 click,mouseover 等事件监听,则 b 也会拥有这些事件监听。 在 ff,chrome,safari 中,通过 cloneNode 方法复制的元素,只会复制特性,其他一切都不会复制 因此,若要解决跨浏览器问题,在复制前,最好先移除事件处理程序。

· 阅读需 9 分钟

大家都知道事件的用法就是当某个事件 (状况) 被触发了之后就会去执行某个 Function, 尤其是 Javascript, 在当红 AJAX 的催化下 , 了解 Javascript 的 Event 用法更加重要 , 在这里就大概介绍一下 avascript 的 Event 用法。

添加事件

Mozilla 中

addEventListener 的使用方式:

target.addEventListener(type, listener, useCapture);

  • target: 文档节点、document、window 或 XMLHttpRequest。
  • type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
  • listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
  • useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

栗子

document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中

target.attachEvent(type, listener);

  • target: 文档节点、document、window 或 XMLHttpRequest。
  • type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
  • listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

移除事件

W3C 及 IE 同时支持移除指定的事件 , 用途是移除设定的事件 , 格式分别如下 :

W3C 格式

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下

detachEvent(event,function);

浏览器兼容

适应的浏览器版本不同,同时在使用的过程中要注意

  • attachEvent 方法 按钮 onclick IE 中使用
  • addEventListener 方法 按钮 click fox 中使用

两者使用的原理:可对执行的优先级不一样:

  • attachEvent 方法,为某一事件附加其它的处理事件。(不支持 Mozilla 系列)
  • addEventListener 方法 用于 Mozilla 系列

栗子

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

如果这样写 , 那么将会只有 medhot3 被执行

写成这样:

var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为 method3->method2->method1

如果是 Mozilla 系列,并不支持该方法,需要用到 addEventListener

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

执行顺序为 method1->method2->method3

兼容 IE 和 firefox 的事件处理

封装

function addListener(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent('on' + eventName, handler);
}
else {
element['on' + eventName] = handler;
}
}

function removeListener(element, eventName, handler) {
if (element.addEventListener) {
element.removeEventListener(eventName, handler, false);
}
else if (element.detachEvent) {
element.detachEvent('on' + eventName, handler);
}
else {
element['on' + eventName] = null;
}
}

上面函数有两处需要注意一下就是 :

  1. 第一个分支最好先测定 w3c 标准 . 因为 IE 也渐渐向标准靠近 . 第二个分支监测 IE.
  2. 第三个分支是留给既不支持 (add/remove)EventListener 也不支持 (attach/detach)Event 的浏览器 .

优化

对于上面的函数我们是运用 " 运行时 " 监测的 . 也就是每次绑定事件都需要进行分支监测 . 我们可以将其改为 " 运行前 " 就确定兼容函数 . 而不需要每次监测 .

这样我们就需要用一个 DOM 元素提前进行探测 . 这里我们选用了 document.documentElement. 为什么不用 document.body 呢 ? 因为 document.documentElement 在 document 没有 ready 的时候就已经存在. 而 document.body 没 ready 前是不存在的 .

这样函数就优化成

var addListener, removeListener,
/* test element */
docEl = document.documentElement;

// addListener
if (docEl.addEventListener) {
/* if `addEventListener` exists on test element, define function to use `addEventListener` */
addListener = function (element, eventName, handler) {
element.addEventListener(eventName, handler, false);
};
} else if (docEl.attachEvent) {
/* if `attachEvent` exists on test element, define function to use `attachEvent` */
addListener = function (element, eventName, handler) {
element.attachEvent('on' + eventName, handler);
};
} else {
/* if neither methods exists on test element, define function to fallback strategy */
addListener = function (element, eventName, handler) {
element['on' + eventName] = handler;
};
}

// removeListener
if (docEl.removeEventListener) {
removeListener = function (element, eventName, handler) {
element.removeEventListener(eventName, handler, false);
};
} else if (docEl.detachEvent) {
removeListener = function (element, eventName, handler) {
element.detachEvent('on' + eventName, handler);
};
} else {
removeListener = function (element, eventName, handler) {
element['on' + eventName] = null;
};
}

· 阅读需 2 分钟

segmentfault 上看到的一个问直接在文本框中粘贴就可以上传图片的例子。

/** 粘贴上传图片 **/
document.body.addEventListener('paste', function(e) {
var clipboard = e.clipboardData;
for(var i=0,len=clipboard.items.length; i<len; i++) {
if(clipboard.items[i].kind == 'file' || clipboard.items[i].type.indexOf('image') > -1) {
var imageFile = clipboard.items[i].getAsFile();
var form = new FormData;
form.append('image', imageFile);
$.ajax({
url: channel.server+"/u.php?community="+channel.community,
type: "POST",
data: form,
processData: false,
contentType: false,
beforeSend: function() {
$('#uploadmessage').html('正在上传图片...');
},
error: function() {
$('#uploadmessage').html('上传失败请重新上传!');
setTimeout('$(\'#uploadmessage\').html(\'\')', 1000);
},
success: function(url) {
$('#uploadmessage').html('图片上传成功');
setTimeout('$(\'#uploadmessage\').html(\'\')', 1000);
var textarea = $('.textarea');
textarea.val(textarea.val() + '[![]('+url+')]('+url+')')
}
})
e.preventDefault();
}
}
});

这里是帖子原文

http://segmentfault.com/q/1010000002729267

· 阅读需 4 分钟

在 IE9 以下是不支持 JSON.parse 方法来解析 JSON 字符串的。

原来,在 IE8 中使用原生 JSON 对象是有条件的。微软在介绍 JSON 对象时也有下面的一段注释:

Starting with JScript. 5.8, by default, the JScript. scripting engine supports the language feature set as it existed in version 5.7. This is to maintain compatibility with the earlier versions of the engine. To use the complete language feature set of version 5.8, the Windows Script. interface host has to invoke IActiveScriptProperty::SetProperty.

Internet Explorer 8 opts into the JScript. 5.8 language features when the document mode for Internet Explorer 8 is "Internet Explorer 8 Standards" mode. For other document modes, Internet Explorer uses the version 5.7 feature set.

JScript. 5.8 includes native JavaScript. Object Notation (JSON) support and the accessor methods for Document Object Model (DOM) prototypes.

由于 JSON 对象是在 JScript. 5.8 及其以后的版本引入的,所以,默认情况下,IE8 使用的是 JScript. 5.7 版本,所以,原生 JSON 对象是无法使用的。

1.eval 方式解析,恐怕这是最早的解析方式了

    function strToJson(str){
var json = eval('(' + str + ')');
return json;
}

但是出于安全性的考虑,建议尽量不要使用 eval,如果从第三方获取数据进行解析,会存在恶意脚本代码的风险。

2.new Function 形式,比较怪异。

    function strToJson(str){
var json = (new Function("return " + str))();
return json;
}

· 阅读需 25 分钟

作者 崔康

异步模式在 web 编程中变得越来越重要,对于 web 主流语言 Javascript 来说,这种模式实现起来不是很利索,为此,许多 Javascript 库(比如 jQuery 和 Dojo)添加了一种称为 promise 的抽象(有时也称之为 deferred)。通过这些库,开发人员能够在实际编程中使用 promise 模式。IE 官方博客最近发表了一篇 文章,详细讲述了如何使用 XMLHttpRequest2 来实践 promise 模式。我们来了解一下相关的概念和应用。

考虑这样一个例子,某网页存在异步操作(通过 XMLHttpRequest2 或者 WebWorkers)。随着 Web 2.0 技术的深入,浏览器端承受了越来越多的计算压力,所以“并发”具有积极的意义。对于开发人员来说,既要保持页面与用户的交互不受影响,又要协调页面与异步任务的关系,这种非线性执行的编程要求存在适应的困难。先抛开页面交互不谈,我们能够想到对于异步调用需要处理两种结果——成功操作和失败处理。在成功的调用后,我们可能需要把返回的结果用在另一个 Ajax 请求中,这就会出现“函数连环套”的情况(在笔者的另一篇文章《NodeJS 的异步编程风格》中有详细的解释)。这种情况会造成编程的复杂性。看看下面的代码示例(基于 XMLHttpRequest2):

    function searchTwitter(term, onload, onerror) {

var xhr, results, url;
url = 'http://search.twitter.com/search.json?rpp=100&amp;q=' + term;
xhr = new XMLHttpRequest();
xhr.open('GET', url, true);

xhr.onload = function (e) {
if (this.status === 200) {
results = JSON.parse(this.responseText);
onload(results);
}
};

xhr.onerror = function (e) {
onerror(e);
};

xhr.send();
}

function handleError(error) {
/* handle the error */
}

function concatResults() {
/* order tweets by date */
}

function loadTweets() {
var container = document.getElementById('container');

searchTwitter('#IE10', function (data1) {
searchTwitter('#IE9', function (data2) {
/* Reshuffle due to date */
var totalResults = concatResults(data1.results, data2.results);
totalResults.forEach(function (tweet) {
var el = document.createElement('li');
el.innerText = tweet.text;
container.appendChild(el);
});
}, handleError);
}, handleError);
}

上面的代码其功能是获取 Twitter 中 hashtag 为 IE10 和 IE9 的内容并在页面中显示出来。这种嵌套的回调函数难以理解,开发人员需要仔细分析哪些代码用于应用的业务逻辑,而哪些代码处理异步函数调用的,代码结构支离破碎。错误处理也分解了,我们需要在各个地方检测错误的发生并作出相应的处理。

为了降低异步编程的复杂性,开发人员一直寻找简便的方法来处理异步操作。其中一种处理模式称为 promise,它代表了一种可能会长时间运行而且不一定必须完整的操作的结果。这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象。

考虑这样一个例子,页面代码需要访问第三方的 API,网络延迟可能会造成响应时间较长,在这种情况下,采用异步编程不会影响整个页面与用户的交互。promise 模式通常会实现一种称为 then 的方法,用来注册状态变化时对应的回调函数。比如下面的代码示例:

    searchTwitter(term).then(filterResults).then(displayResults);

promise 模式在任何时刻都处于以下三种状态之一:未完成(unfulfilled)、已完成(resolved)和拒绝(rejected)。以 CommonJS Promise/A 标准为例,promise 对象上的 then 方法负责添加针对已完成和拒绝状态下的处理函数。then 方法会返回另一个 promise 对象,以便于形成 promise 管道,这种返回 promise 对象的方式能够支持开发人员把异步操作串联起来,如 then(resolvedHandler, rejectedHandler); 。resolvedHandler 回调函数在 promise 对象进入完成状态时会触发,并传递结果;rejectedHandler 函数会在拒绝状态下调用。

有了 promise 模式,我们可以重新实现上面的 Twitter 示例。为了更好的理解实现方法,我们尝试着从零开始构建一个 promise 模式的框架。首先需要一些对象来存储 promise。

    var Promise = function () {
/* initialize promise */
};

接下来,定义 then 方法,接受两个参数用于处理完成和拒绝状态。

Promise.prototype.then = function (onResolved, onRejected) {
/* invoke handlers based upon state transition */
};

同时还需要两个方法来执行理从未完成到已完成和从未完成到拒绝的状态转变。

    Promise.prototype.resolve = function (value) {
/* move from unfulfilled to resolved */
};

Promise.prototype.reject = function (error) {
/* move from unfulfilled to rejected */
};

现在搭建了一个promise的架子,我们可以继续上面的示例,假设只获取IE10的内容。创建一个方法来发送Ajax请求并将其封装在promise中。这个promise对象分别在xhr.onload和xhr.onerror中指定了完成和拒绝状态的转变过程,请注意searchTwitter函数返回的正是promise对象。然后,在loadTweets中,使用then方法设置完成和拒绝状态对应的回调函数。

    function searchTwitter(term) {

var url, xhr, results, promise;
url = 'http://search.twitter.com/search.json?rpp=100&amp;q=' + term;
promise = new Promise();
xhr = new XMLHttpRequest();
xhr.open('GET', url, true);

xhr.onload = function (e) {
if (this.status === 200) {
results = JSON.parse(this.responseText);
promise.resolve(results);
}
};

xhr.onerror = function (e) {
promise.reject(e);
};

xhr.send();
return promise;
}

function loadTweets() {
var container = document.getElementById('container');
searchTwitter('#IE10').then(function (data) {
data.results.forEach(function (tweet) {
var el = document.createElement('li');
el.innerText = tweet.text;
container.appendChild(el);
});
}, handleError);
}

到目前为止,我们可以把promise模式应用于单个Ajax请求,似乎还体现不出promise的优势来。下面来看看多个Ajax请求的并发协作。此时,我们需要另一个方法when来存储准备调用的promise对象。一旦某个promise从未完成状态转化为完成或者拒绝状态,then方法里对应的处理函数就会被调用。when方法在需要等待所有操作都完成的时候至关重要。

    Promise.when = function () {
/* handle promises arguments and queue each */
};

以刚才获取IE10和IE9两块内容的场景为例,我们可以这样来写代码:

    var container, promise1, promise2;
container = document.getElementById('container');
promise1 = searchTwitter('#IE10');
promise2 = searchTwitter('#IE9');
Promise.when(promise1, promise2).then(function (data1, data2) {

/* Reshuffle due to date */
var totalResults = concatResults(data1.results, data2.results);
totalResults.forEach(function (tweet) {
var el = document.createElement('li');
el.innerText = tweet.text;
container.appendChild(el);
});
}, handleError);

分析上面的代码可知,when函数会等待两个promise对象的状态发生变化再做具体的处理。在实际的Promise库中,when函数有很多变种,比如 when.some()、when.all()、when.any()等,读者从函数名字中大概能猜出几分意思来,详细的说明可以参考CommonJS的一个promise实现when.js

除了CommonJS,其他主流的Javascript框架如jQuery、Dojo等都存在自己的promise实现。开发人员应该好好利用这种模式来降低异步编程的复杂性。我们选取Dojo为例,看一看它的实现有什么异同。

Dojo框架里实现promise模式的对象是Deferred,该对象也有then函数用于处理完成和拒绝状态并支持串联,同时还有resolve和reject,功能如之前所述。下面的代码完成了Twitter的场景:

    function searchTwitter(term) {

var url, xhr, results, def;
url = 'http://search.twitter.com/search.json?rpp=100&amp;q=' + term;
def = new dojo.Deferred();
xhr = new XMLHttpRequest();
xhr.open('GET', url, true);

xhr.onload = function (e) {
if (this.status === 200) {
results = JSON.parse(this.responseText);
def.resolve(results);
}
};

xhr.onerror = function (e) {
def.reject(e);
};

xhr.send();
return def;
}

dojo.ready(function () {
var container = dojo.byId('container');
searchTwitter('#IE10').then(function (data) {
data.results.forEach(function (tweet) {
dojo.create('li', {
innerHTML: tweet.text
}, container);
});
});
});

不仅如此,类似dojo.xhrGet方法返回的即是dojo.Deferred对象,所以无须自己包装promise模式。

   var deferred = dojo.xhrGet({
url: "search.json",
handleAs: "json"
});

deferred.then(function (data) {
/* handle results */
}, function (error) {
/* handle error */
});

除此之外,Dojo 还引入了 dojo.DeferredList, 支持开发人员同时处理多个 dojo.Deferred 对象,这其实就是上面所提到的 when 方法的另一种表现形式。

    dojo.require("dojo.DeferredList");
dojo.ready(function () {
var container, def1, def2, defs;
container = dojo.byId('container');
def1 = searchTwitter('#IE10');
def2 = searchTwitter('#IE9');

defs = new dojo.DeferredList([def1, def2]);

defs.then(function (data) {
// Handle exceptions
if (!results[0][0] || !results[1][0]) {
dojo.create("li", {
innerHTML: 'an error occurred'
}, container);
return;
}
var totalResults = concatResults(data[0][1].results, data[1][1].results);

totalResults.forEach(function (tweet) {
dojo.create("li", {
innerHTML: tweet.text
}, container);
});
});
});

上面的代码比较清楚,不再详述。

说到这里,读者可能已经对 promise 模式有了一个比较完整的了解,异步编程会变得越来越重要,在这种情况下,我们需要找到办法来降低复杂度,promise 模式就是一个很好的例子,它的风格比较人性化,而且主流的 JS 框架提供了自己的实现。所以在编程实践中,开发人员应该尝试这种便捷的编程技巧。需要注意的是,promise 模式的使用需要恰当地设置 promise 对象,在对应的事件中调用状态转换函数,并且在最后返回 promise 对象。

技术社区对异步编程的关注也在升温,国内社区也发出了自己的声音。资深技术专家老赵就发布了一套开源的异步开发辅助库 Jscex,它的设计很巧妙,抛弃了回调函数的编程方式,采用一种“线性编码、异步执行”的思想,感兴趣的读者可以查看 这里

不仅仅是前端的 JS 库,如今火热的 NodeJS 平台也出现了许多第三方的 promise 模块,具体的清单可以访问 这里

注:本文中的所有代码示例均来自于 IE 官方博客。

原文来自 InfoQ :http://www.infoq.com/cn/news/2011/09/js-promise/

· 阅读需 5 分钟

这里分享下怎么样将时间显示的更加人性化。

通常我们在页面上显示日期时间的时候,通常是 yyyy-MM-dd HH:mm:ss,也就是年月日时分秒的格式,这样确实比较规范,但是这样的时间在社交类或博客类网站中是否有好处呢?

答案也不是一定的,也许有人说我就喜欢这样的格式!

但是,在数据爆发的这个时代,我们总会想看一些最新的消息,比如:

当我们百度搜某个新闻的时候,我们通常会在结果中查找比较新的,后面的人性化时间会给我们指导作用。

举个例子:

2014 年感动中国十大人物 刚刚

2014 年感动中国十大人物出炉 3 分钟前

看看 2014 年感动中国十大人物 2014-12-27 12:28

这几个结果中,相信一般的老百姓大都会从第一个开始点吧,不多说废话了,看看 Javascript 代码如何实现的:

function hommizationTime(dateTimeStamp){
var result;
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var month = day * 30;
var now = new Date().getTime();
var diffValue = now - dateTimeStamp;
if(diffValue &lt; 0){
// 非法操作
//alert(" 结束日期不能小于开始日期!");
}
var monthC =diffValue/month;
var weekC =diffValue/(7*day);
var dayC =diffValue/day;
var hourC =diffValue/hour;
var minC =diffValue/minute;

if(monthC&gt;=1){
result="" + parseInt(monthC) + " 个月前发表 ";
}
else if(weekC&gt;=1){
result="" + parseInt(weekC) + " 个星期前发表 ";
}
else if(dayC&gt;=1){
result=""+ parseInt(dayC) +" 天前发表 ";
}
else if(hourC&gt;=1){
result=""+ parseInt(hourC) +" 个小时前发表 ";
}
else if(minC&gt;=1){
result=""+ parseInt(minC) +" 分钟前发表 ";
}else
result=" 刚刚发表 ";
return result;
}

原理就是根据不同的时间单位用当前和发表时的时间差来相除,看,是不是 so easy!