目录
12. 使用Google API 有条件加载jQuery.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
<!-- Grab Google CDN jQuery. fall back to localif necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
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"/>
<input type="file" name="files[]" multiple/>
<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);
}
}
});窗体顶端
窗体底端
扫一扫
4679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
