摘要:事件委托得到如下一个监听,多个函数绑定标签的属性并不被同源策略同协议域名端口所约束,所以可以获取任何服务器上脚本并执行。从上面的代码可以得知,是引用对象,而且是可以更改指定的对象。我记不住的,请求出现语法错误。,服务器拒绝请求。
事件委托
ul#wrap>li.item$*2>{item $}
得到如下
html
- item 1
- item 2
一个监听,多个函数绑定
js document.getElementById("wrap").addEventListener("click", function(e) { if (e.target.nodeName === "LI") { console.log("ok"); switch(e.target.className){ case "item1": f1(); break; case "item2": f2(); break; default: alert("not a li node"); } }; },false) function f1(){ alert("f1"); } function f2(){ alert("f2"); }JSONP
标签的src属性并不被同源策略(同协议、域名、端口)所约束,所以可以获取任何服务器上脚本并执行。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。
以上是网上摘抄,根据自己的理解写下如下代码
js//jsonp.html function getName(data){ console.log(data.name); } var scriptP = document.createElement("script"); scriptP.src = "http://localhost:8000/reponse.php?id=1&&callback=getName"; window.onload=function(){ document.body.appendChild(scriptP); }
php文件如下
php//reponse.php $getId, "name" => "zhangsan" ); echo $getCalFun+"("+json_encode($json)+")"; ?>
但却报错了Uncaught SyntaxError: Unexpected token <,不知道哪里出错了,往大婶指出...
原理很简单,客户端获取数据根据需求动态添加script,并使jsonp的服务端拼接脚本触发函数。
Thisjsvar ob = {}; ob.x = 1; ob.f = function(){ this.x = 2; } ob.f(); console.log(ob.x); // => 2
从上面的代码可以得知,this是引用对象,而且是可以更改指定的对象。
主要应用有两种call和apply
js
function change(s,v){ if(s > v){ console.log("s >v"); }else{ console.log(" s < v"); } } change.call(2,3);// 当前this 指向window ... function changeColor(s,v){ this.style.s = v; } var box = document.querySelector(".box"); changeColor.call(box, "backgroundcolor" , "blue"); //当前this指向changeColor
call和apply的区别只是apply只接受两个参数,第二个参数是数组形式。
疑问:
jsvar obj = { x : 100, y : function(){ setTimeout( function(){ alert(this.x); } //这里的this指向的是window对象,并不是我们期待的obj,所以会弹出undefined , 2000); } }; obj.y();
上面是刚开始遇到的疑问
后来经指点,一段代码理解问题
jswindow.setTimeout();
解决方法:
... y.function(){ var that = this; setTimeout( function(){ alert(that.y); //既然setTimeout指向的是window,我们把它换了就ok } ,2000) } ...
以上代码摘自: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html
前端模块化的AMD和CMD网上已经有很多关于这方面的对比。我只写一下我的理解。
AMD:加载速度快,它是异步加载,预先加载所有资源(这也是缺点?)。
CMD:服务器端模块的规范,同步加载,加载完后才能执行后面的操作。
AMD一般适用于浏览器,CMD则适用于本地或者服务器,例如nodejs就是采用这种模块化(npm)。
圣杯布局初次听说这个,后来网上一搜,原来也就那么一回事
http://www.elonglau.com/33.html
如果是我的话,我会采用flex了。
Cache-Control这个只是简单了解,没做深入,好的博客推荐看这里
http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html
主要了解了 HTTP状态码
1XX表示请求接受成功,待进一步处理
2XX表示访问成功
3XX 访问重定向
4XX 客户端请求错误,包括语法、文件路径
5XX 服务器出现错误
常见的有200访问成功,302 访问重定向(google.com转到google.com.hk),304缓存,404页面不存在。
我记不住的:
400 Bad Request,请求出现语法错误。
403 Forbidden,服务器拒绝请求。
500 服务器发生了不可预知的错误
503 服务器当前无法接受请求,请等待一段时间
对于304缓存,主要有两个标识判断是否需求请求新的文件:
Etag
缓存文件的时间和服务器文件最后一次修改的时间
Cache-ControlCache-Control常见的参数:
public 所有用户均可使用(缓存在服务器上)
private 单个用户专用
no-cache 所有页面都不能缓存
max-age 多少时间不会去访问服务器
参数可以参考: http://fanli7.net/a/bianchengyuyan/C__/20130120/294176.html
JavaScript继承实现可以直接看阮一峰老师的文章
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_...
未写:
继承有好几种方式(待写一个YUI继承方式)
拖拽实现
JavaScript基础算法
Javascript动画算法
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85580.html
摘要:设计模式的定义在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。从前由于使用的局限性,和做的应用相对简单,不被重视,就更谈不上设计模式的问题。 ‘从大处着眼,从小处着手’,以前对这句话一知半解,自从踏出校门走入社会,开始工作以来,有了越来越深的理解,偶有发现这句话用在程序开发中也有用,所以,近段时间开始尝试着分析jQuery源码,分析angularjs源码,学习设计模式。 设...
摘要:这道的面试题,是这样的,页面上有一个按钮,一个,点击按钮的时候,每隔秒钟向的后面追加一个一共追加个,的内容从开始技术,首先我们用闭包封装一个创建元素的函数页面上的个元素点我代码点击按钮的时候,用回调函数嵌套方式,这里我加入个,就已经快受不了 这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技...
摘要:探讨判断横竖屏的最佳实现前端掘金在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端,判断横竖屏的场景并不少见,比如根据横竖屏以不同的样式来适配,抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样,本文就此来探讨下目前有哪些实现方法以及其中的优...
摘要:等等,挺在这里,虽然不仅一篇文章阐述了事件委托是利用了冒泡机制,得益于冒泡机制,但是,怎么得益的,怎么利用的。事件委托和冒泡机制有关系吗接下来我想引出本文的重点事件委托和冒泡机制有关系吗我认为就算有关系,关系也不大。 面试官提出的问题 我们在面试前端的过程中,经常会听到面试官问这样的问题: 如果我有一个页面,里面1000个元素都要绑定click事件,请问你要怎么做 如果你...
摘要:并尝试用为什么你统计的方式是错的掘金翻译自工程师的文章。正如你期望的,文中的前端开发单一职责原则前端掘金单一职责原则又称单一功能原则,面向对象五个基本原则之一。 单页式应用性能优化 - 首屏数据渐进式预加载 - 前端 - 掘金前言 针对首页和部分页面打开速度慢的问题,我们开始对单页式应用性能进行优化。本文介绍其中一个方案:基于 HTTP Chunk 的首屏数据渐进式预加载方案,该方案总...
阅读 1619·2021-09-26 09:55
阅读 1358·2021-09-23 11:22
阅读 2685·2021-09-06 15:02
阅读 2602·2021-09-01 11:43
阅读 3908·2021-08-27 13:10
阅读 3655·2021-08-12 13:24
阅读 2056·2019-08-30 12:56
阅读 2977·2019-08-30 11:22