Web前端相关整理

目录

1.     jQuery实现图片延迟加载...2

2.     JSON对象和JSON字符串之间的转换...2

3.     闭包的用途...2

4.     定义自己的函数属性...3

5.     关联数组...4

6.     Module模式...4

7.     原型...4

8.     设备引擎...4

9.     获得当前月份的天数...5

10.       日期比较...5

11.       最小高度设置，兼容所有浏览器...5

12.       使用Google API 有条件加载jQuery.6

13.       JQuery插件...6

a)     左右滚动插件...6

b)    fileupload插件...6

14.    在apache中发布网站

1.       jQuery实现图片延迟加载

lazyload.js

http://zmingcx.com/jquery-lazy-to-achieve-picture.html

2.       JSON对象和JSON字符串之间的转换

// 这是JSON字符串，比如从AJAX获取字符串信息

var my_json_string = '{ "prop":"val" }';

 

// 将字符串反序列化成对象

var my_obj = JSON.parse( my_json_string );

 

console.log( my_obj.prop == 'val' ); //  提示 true, 和想象的一样!

 

// 将对象序列化成JSON字符串

var my_other_json_string = JSON.stringify(my_obj );

console.log(my_other_json_string);

 

3.       闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

　function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其 次，nAdd的值是一个匿名函数（anonymousfunction），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

 

1.        使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

参考：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

 

2.        可选参数

functioncalculate(a,b,c){

console.log("arguments.length:"+arguments.length+",arguments[1]:"+arguments[1]);

//实际传入的参数个数 //2,4

console.log("实际传入的参数个数:"+arguments.length+",函数的参数个数："+arguments.callee.length);//实际传入的参数个数 //2,3

c=c||0;//当c为:'',"",null,undefined时,||左边都为"false",都会设置c为0.只有当c为其他值时,才不会设置为0

return a+b+c;

}

console.log(calculate(3,4));//此处没有传c的值  //7

 

4.       定义自己的函数属性

calculate2.count=0;//区别于全局变量 由于信息是由函数自己使用的,没有必要使用全局变量

function calculate2()

{

console.log("calculate2.count:"+calculate2.count++);

}

calculate2();//0

calculate2();//1

 

5.       关联数组

var relationArray={};

relationArray["A"]=90;

relationArray["B"]=80;

relationArray["C"]=70;

console.log(relationArray.length);//结果：undefined，结论：关联数组没有length属性

//遍历关联数组

var sum=0;

for(var i in relationArray )

{

sum+=relationArray[i];//i:A,B,C

}

console.log("sum:"+sum);//240

6.       Module模式

参考：http://www.cnblogs.com/TomXu/archive/2011/12/30/2288372.html

Module模式的基本特征：

1. 模块化，可重用
2. 封装了变量和function，和全局的namaspace不接触，松耦合
3. 只暴露可用public的方法，其它私有方法全部隐藏

7.       原型

每个javascript对象从它的原型那里继承属性

8.       设备引擎

window.navigator.userAgent.toLowerCase()

如：firefox=> Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101Firefox/12.0

9.       获得当前月份的天数

function getDaysOfCurrentMonth(){

var d = new Date();

return {days:newDate(d.getFullYear(), d.getMonth() + 1, 0).getDate(),month:d.getMonth()};

//获得当前月份的天数：下个月的第0天就当前月的最后一天

// new Date().getDate():取今天是当前月份的第几天（从1开始）

// new Date(“2012”,”5”,”1”) 表示2012-6-1

// new Date().getDay() 取本周的第几天(从1开始)

}

10.    日期比较

function  compareDate(date1,date2){

    var date1Parse=Date.parse(date1);

var date2Parse=Date.parse(date2);

    if(date1Parse< date2Parse){}

    else if(date1Parse==date2Parse){}

else{}

}

11.    最小高度设置，兼容所有浏览器

一个DIV的最小高度是400PX,当内容高度不足400PX时,其高度设置为400PX, 当内容高度大于400PX, 则按实际高度伸展。
IE6和FIREFOX都要有效!
答案：a{height:400px;height:auto;min-height:400px;width:500px;}

12.    使用GoogleAPI 有条件加载jQuery

13.    JQuery插件

a)        左右滚动插件

http://www.gmarwaha.com/jquery/jcarousellite/

示例：$(".carousel").jCarouselLite({

            btnNext:".next",

            btnPrev:".prev",

            visible:7,

            scroll:7,

            start:startIdx,

            speed:1000,

            circular:false

        });

b)        fileupload插件

https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

JS引入：

  Html：

                           

                               

                               

                                

                               

                               

                            

 

    

   JS：

$("#tt"+id).fileupload({

                            dataType: 'json',

                            url:'/mission/upload/',

                            done: function (e,data) {

                                self.$('forma').css('display','inline-block');

                                self.$('form.loading_pic').css('display','none');

                               if(data.result.code==1){

                                    //图片不符合要求

                                   MakeItCount.message.showError(self,data.result.message);

                                    return ;

                                }else{

                                   self.$(".up-box img").eq(0).attr("src",data.result);

                                }

                            }

                       });窗体顶端

窗体底端

窗体底端

14.    在apache中发布网站

1)        在httpd-vhosts.conf文件中添加VirtualHost:

文件路径一般在wamp目录下

添加节点示例如下:

#[email protected]

DocumentRootD:\projects\NIKEHOME

ServerNamenikehome.com.cn

ErrorLoglogs/localhost-nikeaction-error_log

CustomLoglogs/localhost_nikeaction_log common

"D:\projects\NIKEHOME">

OptionsIndexes FollowSymLinks

AllowOverrideALL

OrderDeny,Allow

Allowfrom all

SetEnvYII_ENVIRONMENT DEVELOPMENT

2)        ServerName与IP地址映射

文件路径如下:

127.0.0.1  nikehome.com.cn //本机

#42.120.49.156  nikehome.com.cn //网络服务器