【javascript】随手记代码

//js实现的当前界面的刷新、前进、后退

<input type="button" value="刷新" onclick="window.location.reload()">

<input type="button" value="前进" onclick="window.history.go(1)">

<input type="button" value="后退" onclick="window.history.go(-1)">

<input type="button" value="前进" onclick="window.history.forward()">

<input type="button" value="后退" onclick="window.history.back()">

console.log Firefox最先提出的,后来被各个浏览器采用;即在控制台输出日志,不会像alert一样打断程序进程,适合用于与Firebug或者是其他的开发者工具配合进行调试

//全局变量

function sum1(x,y){
   result = x+ y;
   return result;  
}
/*上面这个函数中,result没有用var进行声明,实际上result变成了隐式的全局变量,result在其他函数中也可以访问;若写成var result其生存期就仅在函数内部,所以因为在一个项目中引用的js文件过多、很多地方使用到简单易用的全局变量,所以为了使自己引用的变量不被挂掉,尽量减少使用全局变量*/
 
 function temp(){
  var a= b =0;
  var c,d;
}
/*同样进行链式声明的时候也应该注意全局变量,
 上面这句中a是本地变量,b就是全局变量;c,d均为局部变量(前提是这个函数被调用一次后,要不变量压根不被声明出来)*/
/*全局变量可以通过delete来删除*/
var a=0;
delete(a);
/*删除成功的话会返回true,不成功返回false
  继续测试一下,是否删除    
*/
console.log ( typeof(a) );
/*如果删除成功的话,可以知道这个是输出undefined,没删出成功会输出正常的值number
 用var声明的显示全局变量没办法delete,但是隐式的局部变量都可以delete    
*/

js置顶解析:

所有函数内部新定义 var 的变量都会置顶解析,也算是一种预解析

 所以全局变量可能在函数内部受影响,尽量避免函数内部使用全局变量的变量名称

myname = "global"; // 全局变量
function func() {
    alert(myname); 
    var myname = "local";
    alert(myname); // 
}
func();

//最后结果是:第一个alert的是undefined,第二个alert的是myname

----------

window.onload()  和 $(document).ready(){}的区别:

1.window.onload是在等待界面内元素加载完毕前执行的函数,可以用于制作等待加载的遮罩效果

   $(document).ready()并不是针对于界面内所有元素,而是针对于Dom对象,就是当浏览器经过渲染之后生成DomTree之前会执行。而图片、声音等不包括在内。所以适合做一些动画特效或者是css控制。

2. window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
   $(document).ready()可以同时编写多个,并且都可以得到执行。

3.$(document).ready()可以简写成$(function(){});

 在zepto中$被定义成了function,function直接调用了Init方法,Init方法中对$("参数")中的参数进行判断,其中一条就是若参数类型也为function的话,直接令其在文档加载后执行,

也就是类似的$(function(){我是函数})中,直接就把里面的function置于文档加载后即$(document).ready执行。  

4.jquery中live方法能够为未来的元素绑定事件,即可以绑定所有后dom写入的元素

而bind只对当前文档内已有元素进行绑定,

.one方法是绑定后只能执行一次,若执行过后则自动取消绑定。

5.js获取某元素的属性值:

  1.document.getElementbyId("input1").getAttributes("name")    //type,classname,alt,title,id   没有该属性直接返回"",不报错

  2.document.getElementbyId("input1").name                                   //.type,.classname,.alt,.titlke  用什么点什么。

6.js插件形式

 1 (function($){
 2     $.fn.temp = function(){
 3         //添加ele元素事件        this指向当前元素
 4     }
 5 })(jQuery);
 6 (function($){
 7     $.fn.temp = function(options){
 8         //插件设置参数,可直接使用默认参数  
 9         var defaults = {    
10             bgcolor:"red",
11             height:300,
12             400    
13           };    
14         var opts = $.extend(defaults, options); 
15 
16 })(jQuery);
17 //面向元素标签的插件调用方法: $("#ele").temp();

7.同一页面下多jQuery库共存(不推荐这么做,应该就插件本身做更新,而不应该将就着加载两个库)

  $.noConflict函数,jQuery内部实现的共存机制函数,也可以用作多库共存函数。

  使用方法:

<script type="text/javascript" src="jquery.1.7.2.min.js"></script>
<script type="text/javascript">
    var jquery172 = $.noConflict(true);
</script>
<script type="text/javascript" src="jquery.1.9.0.min.js"></script>
<script type="text/javascript">
    var jquery190 = $.noConflict(true);
</script>
<script type="text/javascript">
    <!--具体使用方式-->
    (function($){
        //……函数代码……
    })(jquery172);
</script>

  noConflict函数实现原理:jQuery在种子模块中保存了全局对象中$和jQuery的状态,noConflict函数中可以将已经赋值的$和jQuery再还原,并返回当前库所对应的jQuery对象。

  

8. call&apply&bind

var obj = {
name:"Lee",
job:"f2e",
sayHello:function(){
console.log("Hello,I'm "+this.name+",my job is "+this.job);
}
}
var t = {name:"T",job:"XXX"};

obj.sayHello();
obj.sayHello.call(t);
obj.sayHello.apply(t,{});
var anotherSayHello = obj.sayHello.bind(t);
//bind函数不会自动执行sayHello函数,而是返回新的经过包装的函数
anotherSayHello();

9.看Node.js总结的一些异步方式

(1)CPS后继传递风格

CPS是指通过在函数内部调用回调函数的方式来实现异步,也称为标准回调模式。

readFile等IO函数都是此风格的回调模式;

CPS属于程序的控制权转让,JS单线程通过转让线程控制权来实现异步回调

function A(data,cb){
  // deal with data
  cb(newdata);
}
function B(nd){
  //cout B
  console.log(nd);
}

//调用  先执行A函数,直至A执行完再执行其回调函数B 
A(10,B);

(2)事件发射器模式

Node.js里面称为事件发射器模式,前端库里面称为PUB-SUB模式,设计模式中称为观察者模式;

通过事件发射器发射事件,注册响应事件来处理该事件、执行响应函数;

Node.js中不是所有对象都可以发射事件,发射事件的对象必须集成events中的EventEmitter接口;继承方法直接调用inherits函数即可:

var util = require('util');
var EventEmitter = require('events').EventEmitter;

var Ani = function(){
     //  class init
}

util.inherits(Ani,EventEmitter);

注册事件之间不会覆盖,即如果先后声明过两次em.on('data',function1)和em.on('data',function2),f1和f2都会执行

var em = new (require('event').EventEmitter)();

em.emit('change',123456);    //无任何输出

//注册事件响应函数
em.on('change',function(data){
   console.log('change to '+data); 
})

em.emit('change',654321);    //因已经注册了事件响应函数,显示输出

回调模式适合处理单次的异步,比如文件读取、数据库写入等;

事件发射器模式适合多次重复的事件响应,比如HTTP获取数据等。

原文地址:https://www.cnblogs.com/limingxi/p/3536037.html