Web前端相关整理

来源：互联网发布：手机磁力搜索软件编辑：程序博客网时间：2024/05/23 01:15

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模式的基本特征：

模块化，可重用
封装了变量和function，和全局的namaspace不接触，松耦合
只暴露可用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引入：

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<scriptsrc="js/vendor/jquery.ui.widget.js"></script>

<scriptsrc="js/jquery.iframe-transport.js"></script>

<scriptsrc="js/jquery.fileupload.js"></script>

Html：

<divclass="upfile">

<formmethod="post" action="/mission/upload/" enctype="multipart/form-data" >

<ahref="javascript:void(0);" title="选择文件" class="btn btn10"></a>

<imgsrc="http://nikemic.cdn.aliyun.com/nikemic_assets/images/MIC/loading.gif"title="图片缓冲中" class="loading_pic"style="display: none"/>

<inputtype="hidden" class="missionresultid"name="missionresultid" />

<inputtype="hidden" class="gameid" name="gameid" />

</form>

</div>

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);

}

});窗体顶端

窗体底端