1.js 异步加载和同步加载

异步加载模式也叫非阻塞模式,浏览器在下载js的同时,同时还会执行后续的页面处理, 在script标签内,用创建一个script元素,并插入到document中,这样就是异步加载js文件了

//以前的一般建议是把<script>放在页面末尾</body>之前,这样尽可能减少这种阻塞行为,而先让页面展示出来。
(function (){
var script=document.createElement('script');
script.type='text/javascript';
script.async=true;
script.src='http://libs.baidu.com/jquery/1.9.1/jquery.min.js'; //不能是file 开头的文档,应为,它是通过src 中的get方式去获取滴呀
var node=document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(script,node); })(); //这么用就会报错了滴呀
$(function (){ //这里会报错了,滴呀$为定义滴呀
var outer=$('#outer');
alert(outer.length);
}) window.onload=function (){
//jq是能够用滴呀 //这种加载方式在加载执行完之前会阻止 onload 事件的触发,
//而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等,
//所以还是会阻塞部分页面的初始化处理
//更多内容:http://www.jb51.net/article/30324.htm
}

同步加载模式

<script src="http://xxxxx/script.js"></script>

同步加载模式又阻塞模式,会阻止浏览器的后续处理,阻止了后续文件的解析,执行,如图像的渲染,浏览器之所以会采用同步模式,因为

记载js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。

通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

同步加载流程是瀑布模型,异步加载流程是并发模型。

2.js对象冒充

    function Person(name,age){
this.name=name;
this.age=age;
this.say=function (){
return "name:"+this.name+"age:"+this.age;
}
}
var o=new Object();
Person.call(o,"jack",18);
console.log(o.say());

3.获取浏览器滚动条的位置(被卷曲的页面)

    function getPostion(){
return {
top: document.documentElement.srollTop || document.body.scrollTop,
left:document.documentElement.srollLeft || document.body.scrollLeft
}
}

4.阻止默认行为

    function preDef(ev){
var e=ev || window.event;
if(e.preventDefault){
e.preventDefault;
}else{
e.returnVaule=false;
}
}

5.浏览器事件的添加和移除

    function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
//ie
obj.attachEvent('on'+type,fn);
}
}
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
//ie
obj.detachEvent('on'+type,fn);
}
}

6.目标对象

    function getTarget(ev){
if(ev.target){
return ev.target;
}else if(window.event.srcElement){
return window.event.srcElement; //ie
}
}

7.获取可视窗口的大小

    function getWindow(){
if (typeof window.innerWidth !='undefined'){
return {
width:window.innerWidth,
height:window.innerHeight
}
}else{
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
}

 8.防止订单重复提交

  function disable(){
//放置订单重复提交
document.getElementById("btn").disabled=true; //方式二
var flag=false;
if(flag==true){return;}
//提交
flag=true;
}

 9.document.body 和 document.documentElement

关键就在于是否声明DTD,符合 web 标准,DTD 当然是不能少的

body是DOM对象里的body子节点,即 <body> 标签; 
documentElement 是整个节点树的根节点root,即<html> 标签;

    var value=document.body.scrollTop; //
var value2=document.documentElement.scrollTop;//
//兼容性写法;
var val=document.body.scrollTop || document.documentElement.scrollTop;

 这里再补充一点

1、各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  ;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;
2、获取scrollTop值
完美的获取scrollTop 赋值短语 :
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值,你发现啥了没??
没错, 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端,即scrollTop值为 0 时。  IE 下 window.pageYOffset  (Safari) 返回为 undefine ,此时将 window.pageYOffset  (Safari) 放在或运算最后面时, scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚,不知道有没有表达清楚。
不过最后总结出来这句实验过OK,大家放心使用;
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

10关于事件源

var obj=document.getElementById('btn1');
obj.onclick=function (e){
var eventObj=e; //这种方式在ie下为undefined
var eventObj=e || window.event;
//第二兼容性问题
//在ie下用 srcElemnt 在火狐下用 target
var eventOri=eventObj.srcElement || eventObj.target;
//现在我们可以取出它额
console.log(this===obj); //结果返回的是true滴呀
console.log(this===eventOri);//返回的也是ture滴
//所以我们可以做很多操作
console.log(this.value) //click
console.log(this.id) //属性;
console.log(this.parentNode); //body
console.log(this.innerHTML);
console.log(this.getAttribute('id'));
//还可以做等等一些的操作i呀 }

关于target 和 currentTarget

<body>
<div id="outer" style="background:#099">
click outer
<p id="inner" style="background:#9C0">click inner</p>
<br>
</div>
</body>
<script type="text/javascript">
//先由文字描述
//target在事件流的目标阶段,current
//target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。
//只有当事件流处在目标阶段的时候,两个的指向才是一样的,
//而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
var $=function (id){
typeof id=='string'&&(id=document.getElementById(id));
return $.fn.call(id)
}
$.fn = function (){//附加2个方法
this.addEvent = function (sEventType,fnHandler){
if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}
else {this["on" + sEventType] = fnHandler;}
} this.removeEvent = function (sEventType,fnHandler){
if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}
else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}
else { this["on" + sEventType] = null;}
} return this;
}; function test(e){
var str='e.target.tagName:'+e.target.tagName+'\n e.currentTarget.tagName:'+e.currentTarget.tagName;
alert(str);
} $('inner').addEvent('click',test); //结果都是p
$('outer').addEvent('click',test); //结果是 p 和 div </script>

javascript知识点记录(2)的更多相关文章

  1. Javascript知识点记录(三)设计模式

    Javascript设计模式记录,这个方面确实是没写过,工作中也没有用到js设计模式的地方. prototype与面向对象取舍 使用prototype原型继承和使用面向对象,都可以实现闭包的效果.那么 ...

  2. javascript知识点记录(1)

    javascript一些知识点记录 1.substring,slice,substr的用法 substring 和slice 都有startIndex 和 endIndex(不包括endInex),区 ...

  3. Javascript知识点记录(二)

    Javascript入门易,精通难,基本上是共识的一个观点.在这个篇幅里,主要对一些难点进行记录. 鸭子类型 Javascript属于动态类型语言的一种.对变量类型的宽容,给了很大的灵活性.由于无需类 ...

  4. JavaScript算法与数据结构知识点记录

    JavaScript算法与数据结构知识点记录 zhanweifu

  5. 【千纸诗书】—— PHP/MySQL二手书网站后台开发之知识点记录

    前言:使用PHP和MySQL开发后台管理系统的过程中,发现有一些通用的[套路小Tip],这里集中记录一下.结合工作中ing的后台业务,我逐渐体会到:除了技术知识外.能使用户体验好的“使用流程设计”积累 ...

  6. C#知识点记录

    用于记录C#知识要点. 参考:CLR via C#.C#并发编程.MSDN.百度 记录方式:读每本书,先看一遍,然后第二遍的时候,写笔记. CLR:公共语言运行时(Common Language Ru ...

  7. spring mvc开发过程知识点记录

    给一个客户做的一个小项目,需求就是输入类似一个短网址http://dd.yy/xxxx然后跳转到另外一个域名下的图书文件.(实际很多短网址站都提供API供调用吧,不过客户需求是他自己建立一个短网址服务 ...

  8. JavaScript知识点整理(一)

    JavaScript知识点(一)包括 数据类型.表达式和运算符.语句.对象.数组. 一.数据类型 1) js中6种数据类型:弱类型特性 5种原始类型:number(数字).string(字符串).bo ...

  9. javascript知识点积累

    8年javascript知识点积累   08年毕业就开始接触javascript,当时是做asp.net发现很多功能用asp.net控件解决不了,比如checkbox单选,全选问题,自动计算总价问题, ...

随机推荐

  1. SQLyog 配置SQL Assitant

    在上一篇博文“MySQL配置SQL Assistant提示”中,我介绍了配置SQL Assitant自带的SQL Editor连接MySQL数据库的配置,但是试用两天后发现,SQL Editor不支持 ...

  2. ZXing二维码的生成和解析

    Zxing是Google提供的关于条码(一维码.二维码)的解析工具,提供了二维码的生成与解析的方法, 现在我简单介绍一下使用Java利用Zxing生成与解析二维码 注意: 二维码的生成需要借助辅助类( ...

  3. python中迭代器和生成器

    l=[1,2,3,4] for n in l: print n 在看上面这段代码的时候,我们没有显式的控制列表的偏移量,就可以自动的遍历了整个列表对象.那么for 语句是怎么来遍历列表l的呢?要回答这 ...

  4. 通过SEP禁用USB

    1      Introduction 1.1      Scope This document provides comprehensive information of the reinforce ...

  5. Excel中如何在两个工作表中查找重复数据

    有时我们可能会在两种工作表中查找重复记录,当数据记录很多时,就必须通过简单的方法来实现.下面小编就与大家一起分享一下查看重复记录数据的方法,希望对大家有所帮助. 方法/步骤   为了讲解的需要,小编特 ...

  6. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  7. 20145317彭垚 《Java程序设计》第7周学习总结

    20145317彭垚 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1 时间的度量·即使标注为GMT(格林威治时间),实际上谈到的的是UTC(Uni ...

  8. sshd调优

    sshd调优:禁用dns查找,加快速度在sshd_config中设置:UseDNS no禁用root登录:建立普通用户在sshd_config中设置PermitRootLogin no以上设置需要重启 ...

  9. convert from base 10 to base 2

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Hence, we convert fro ...

  10. heapsort

    Introduction to Algorithms Third Edition The (binary) heap data structure is an array object that we ...