Web前端开发和JS面向对象编程分享
一、前端开发的重要性
1. Web2.0、AJAX、JSON、用户体验
2. HTML5、微网、移动互联网
3. 前端MVC框架：Backbone.js
4. 服务器端Javascript：Node.js
5. Node.js + Jquery Mobile + HTML5 、CSS3 + MongDB
二、工欲善其事，必先利其器
1. Firefox插件
（1）Firebug
集HTML、CSS查看和编辑、Javascript调试、网络状况监视器于一体。
（2）Page Speed(基于Firebug)
用来评估网页的性能，并获得如何改进性能和网页载入速度的建议。Page Speed能自动为用户优化图像，提供可以发布在网页上的压缩图片，它也能识别JS和CSS载入问题，帮助开发者减少浏览者等待网页展示的时间。
（3）YSlow(基于Firebug)
对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。并为每一个规则产生一个整体报告，如果页面可以进行优化，则会列出具体的修改意见。
Yslow-23条规则:
http://baike.baidu.com/link?url=g066BL1gqe6RnzN-bJoCjrbLeDrEjRQh_u8x3haH5NuhDtsrzt8ZvjgOfnMsOBuibky8Oqt1H9gUwdsK7TrwH_
（4）Poster(AJAX)
可以模拟各种http请求，并详细设置请求参数，比如http header，parameter等。
（5）Web Developer Toolbar
（6）解雇IE(fire IE)
是一款仿搜狗浏览器的Firefox双核扩展，能够自动切换到IE内核！
2. 前端工具
（1）FSCapture
（2）IETester
（3）IE8、IE9、IE10浏览器（按F12调出）
设置兼容模式，IE标准可以多IE各版本测试
（4） 响应式设计视图
Firefox浏览器--工具--Web开发者--响应式设计视图
（5）文本编辑器
a). Notepad++
b). Sublime Text 2
备注：你还在用如“UltraEdit、EditPlus”等文本编辑器吗？你Out了！
（6）截图工具Snagit
三、Javascript面向对象编程
1. 使用外部JS、CSS
2. 延迟加载JS脚本
（1）脚本置于<body>最底部
（2）defer属性（在script上添加）
//defer作用：文档加载完毕后再执行脚本【但是：只有IE浏览器支持】
<script type="text/javascript" defer="defer" src="js/jquery.js"></script>
3.压缩js和css
JS和CSS压缩工具：YUICompressor
4.headjs：能使JS并发下载（但是顺序执行）
例子：
<script src="/js/head.min.js"></script>
head.load(["file1.js", "file2.js"]);
或head.load({ label1: "file1.js" }, { label2: "file2.js" });
或head.load(["file1.js", "file2.js"], function() {});
参考：
http://headjs.com/
http://headjs.com/site/api/v1.00.html
5.自调用匿名函数（块级作用域）
(function(){
//使用匿名函数封闭每一个页面中的js代码
})();
好处：
通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。
6.JS命名空间和模块化
（1）JS模块化
（2）JS命名空间
比如approvalList.js文件：
/**
* approvalList.js <br>
* 审批列表页面对于的JS
*/
(function(){
// 审批列表
var approvalList = {
add : function(){
this.showList();
},
showList : function(){
},
im : {
showList : function(){
}
}
};
})();
// 如何调用
approvalList.add();
approvalList.showList ();
approvalList.im.showList ();
（3）使用prototype扩展对象方法
比如approvalList.js文件：
/**
* approvalList.js <br>
* 审批列表页面对于的JS
*/
(function(){
// 审批列表
var approvalList = approvalList || {};
approvalList .prototype.add = funtion(){
};
})();
// 如何调用
approvalList.add();
7. 前端解耦
（1）使用jquery绑定事件和单独js、css文件解耦
（2）使用“前端MVC框架: Backbone.js”解耦
四、Javascript注意点
1. 函数参数传递：使用对象形式
比如：
function1({“name”:”gxw”,”age”:28});
或者
var args1 = {“name”:”gxw”,”age”:28};
function1(args1);
备注：alert(arguments.length); //输出参数的个数
2. 避免多字符串用+号连接
（1）例如下列情况就会出现错误
var str3="3.14";
document.write(str3 - 1); // 如果是减法他回自动将字符串转成数字
document.write(str3 + 1); // 加法会当成字符串的拼接操作
（2）使用Array用join()方法进行连接字符串
var arr = [];
arr.push(“aaa”);
arr.push(“bbb”);
document.write(arr.join(“”));
3. 定义对象用{}，定义数组用[]
4.存储常用的值
多次使用同一个值时，可以将其存储在局部变量中提高访问速度
5. 使用“=== ，!==”进行判断
==用于一般比较 // ==在比较的时候可以转换数据类型
===用于严格比较 // ===严格比较，只要类型不匹配就返回flase
6. Javascript 中的false、0、null、undefined和空字符串对象
（1）类型
//假值
alert(typeof(false) === 'boolean');
alert(typeof(0) === 'number');
alert(typeof("") === 'string');
//空值
alert(typeof(null) === 'object');
alert(typeof undefined === 'undefined');
//空对象
alert(typeof({})==="object");
alert(typeof([])==="object");
（2）== 比较
alert(false == undefined);//flase
alert(false == null);//flase
alert(false == {});//flase
alert(false == []);//flase
alert(false == 0); //true
alert(false == "");//true
alert(null == undefined);//true
（3）=== 比较
alert(false === undefined);//flase
alert(false === null);//flase
alert(false === 0); //false
alert(false === "");//flase
alert(false === {});//flase
alert(false === []);//flase
alert(null === undefined);//flase
（4）在if语句中
//假值
if(false){} //false
if(0){} //false
if(""){} //false
//空值
if(undefined){} //false
if(null){} //false
//空对象
if({}){} //true
if([]){} //true
建议：
a).true都可以用1来替换，而false可以用0来替换
b).if(!oTest){ //do something } // undefined 、null 、false、""、0
7. eval的使用
（1）eval例1：
//eval 他是把一个字符串解析成一个方法并且调用
var str = "var show = function(){alert(100)}()";
eval(str);
（2）eval例2：
//数据库会返回一个字符串(长得像javaScrpit数组)
var a = "[1,2]";
var array = eval(a);
for (var i = 0; i < array.length; i++) {
alert(array[i])
}
8. 学会使用js链式调用
/**
* 从一个实例引出立案时调用的需求
*/
(function(){
//创建一个cat
function Cat(name){
this.name = name;
this.run = function(){
document.write(name+ " start run");
return this;
}
this.sing = function(){
document.write(name+ " start sing");
return this;
}
}
//测试
var c = new Cat("abc");
c.run().sing();
})();
9. 禁止在函数内不使用var申明变量
function outerFun(){
a =0;// 没有使用var申明，就是全局变量了
alert(a);
}
10. 谨慎使用闭包
（1）闭包会使函数中的变量保存在内存中
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。（2）闭包会在父函数外部改变父函数内部变量的值
如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
五、Jquery注意点
1. 总是使用#Id去寻找元素
$('div#content') （错的）
$('#content') （对的）
2. 在class前面使用tags
$('input.on') （对的）
3. 更好的利用链
$(“#id1”).css().click();
4. 限制直接对DOM多次操作
组合成字符串，一次性操作DOM
5. 事件委托（冒泡事件）的两面性
（1）多个元素使用同一事件，在父元素上绑定事件
（2）只有一个元素使用事件，阻止事件冒泡（return false;）
event.stopPropagation(); // 事件停止冒泡到，即不让事件再向上传递到document，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。
event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。
return false; // 相当于同时调用了event.stopPropagation()和event.preventDefault()，事件的默认行为不会被执行，事件也不会冒泡向上传递。
六、Javascript调试
1.alert()
2.console.log() （firebug内置对象）
一般信息console.info()
出错信息console.debug()
警告提示console.warn()
错误提示console.error()
详见：http://gaoxianwei.iteye.com/blog/2077267
3.Firebug 的调试功能
（完）
Web前端开发和JS面向对象编程分享
一、前端开发的重要性
1. Web2.0、AJAX、JSON、用户体验
2. HTML5、微网、移动互联网
3. 前端MVC框架：Backbone.js
4. 服务器端Javascript：Node.js
5. Node.js + Jquery Mobile + HTML5 、CSS3 + MongDB
二、工欲善其事，必先利其器
1. Firefox插件
（1）Firebug
集HTML、CSS查看和编辑、Javascript调试、网络状况监视器于一体。
（2）Page Speed(基于Firebug)
用来评估网页的性能，并获得如何改进性能和网页载入速度的建议。Page Speed能自动为用户优化图像，提供可以发布在网页上的压缩图片，它也能识别JS和CSS载入问题，帮助开发者减少浏览者等待网页展示的时间。
（3）YSlow(基于Firebug)
对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。并为每一个规则产生一个整体报告，如果页面可以进行优化，则会列出具体的修改意见。
Yslow-23条规则:
http://baike.baidu.com/link?url=g066BL1gqe6RnzN-bJoCjrbLeDrEjRQh_u8x3haH5NuhDtsrzt8ZvjgOfnMsOBuibky8Oqt1H9gUwdsK7TrwH_
（4）Poster(AJAX)
可以模拟各种http请求，并详细设置请求参数，比如http header，parameter等。
（5）Web Developer Toolbar
（6）解雇IE(fire IE)
是一款仿搜狗浏览器的Firefox双核扩展，能够自动切换到IE内核！
2. 前端工具
（1）FSCapture
（2）IETester
（3）IE8、IE9、IE10浏览器（按F12调出）
设置兼容模式，IE标准可以多IE各版本测试
（4） 响应式设计视图
Firefox浏览器--工具--Web开发者--响应式设计视图
（5）文本编辑器
a). Notepad++
b). Sublime Text 2
备注：你还在用如“UltraEdit、EditPlus”等文本编辑器吗？你Out了！
（6）截图工具Snagit
三、Javascript面向对象编程
1. 使用外部JS、CSS
2. 延迟加载JS脚本
（1）脚本置于<body>最底部
（2）defer属性（在script上添加）
//defer作用：文档加载完毕后再执行脚本【但是：只有IE浏览器支持】
<script type="text/javascript" defer="defer" src="js/jquery.js"></script>
3.压缩js和css
JS和CSS压缩工具：YUICompressor
4.headjs：能使JS并发下载（但是顺序执行）
例子：
<script src="/js/head.min.js"></script>
head.load(["file1.js", "file2.js"]);
或head.load({ label1: "file1.js" }, { label2: "file2.js" });
或head.load(["file1.js", "file2.js"], function() {});
参考：
http://headjs.com/
http://headjs.com/site/api/v1.00.html
5.自调用匿名函数（块级作用域）
(function(){
//使用匿名函数封闭每一个页面中的js代码
})();
好处：
通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。
6.JS命名空间和模块化
（1）JS模块化
（2）JS命名空间
比如approvalList.js文件：
/**
* approvalList.js <br>
* 审批列表页面对于的JS
*/
(function(){
// 审批列表
var approvalList = {
add : function(){
this.showList();
},
showList : function(){
},
im : {
showList : function(){
}
}
};
})();
// 如何调用
approvalList.add();
approvalList.showList ();
approvalList.im.showList ();
（3）使用prototype扩展对象方法
比如approvalList.js文件：
/**
* approvalList.js <br>
* 审批列表页面对于的JS
*/
(function(){
// 审批列表
var approvalList = approvalList || {};
approvalList .prototype.add = funtion(){
};
})();
// 如何调用
approvalList.add();
7. 前端解耦
（1）使用jquery绑定事件和单独js、css文件解耦
（2）使用“前端MVC框架: Backbone.js”解耦
四、Javascript注意点
1. 函数参数传递：使用对象形式
比如：
function1({“name”:”gxw”,”age”:28});
或者
var args1 = {“name”:”gxw”,”age”:28};
function1(args1);
备注：alert(arguments.length); //输出参数的个数
2. 避免多字符串用+号连接
（1）例如下列情况就会出现错误
var str3="3.14";
document.write(str3 - 1); // 如果是减法他回自动将字符串转成数字
document.write(str3 + 1); // 加法会当成字符串的拼接操作
（2）使用Array用join()方法进行连接字符串
var arr = [];
arr.push(“aaa”);
arr.push(“bbb”);
document.write(arr.join(“”));
3. 定义对象用{}，定义数组用[]
4.存储常用的值
多次使用同一个值时，可以将其存储在局部变量中提高访问速度
5. 使用“=== ，!==”进行判断
==用于一般比较 // ==在比较的时候可以转换数据类型
===用于严格比较 // ===严格比较，只要类型不匹配就返回flase
6. Javascript 中的false、0、null、undefined和空字符串对象
（1）类型
//假值
alert(typeof(false) === 'boolean');
alert(typeof(0) === 'number');
alert(typeof("") === 'string');
//空值
alert(typeof(null) === 'object');
alert(typeof undefined === 'undefined');
//空对象
alert(typeof({})==="object");
alert(typeof([])==="object");
（2）== 比较
alert(false == undefined);//flase
alert(false == null);//flase
alert(false == {});//flase
alert(false == []);//flase
alert(false == 0); //true
alert(false == "");//true
alert(null == undefined);//true
（3）=== 比较
alert(false === undefined);//flase
alert(false === null);//flase
alert(false === 0); //false
alert(false === "");//flase
alert(false === {});//flase
alert(false === []);//flase
alert(null === undefined);//flase
（4）在if语句中
//假值
if(false){} //false
if(0){} //false
if(""){} //false
//空值
if(undefined){} //false
if(null){} //false
//空对象
if({}){} //true
if([]){} //true
建议：
a).true都可以用1来替换，而false可以用0来替换
b).if(!oTest){ //do something } // undefined 、null 、false、""、0
7. eval的使用
（1）eval例1：
//eval 他是把一个字符串解析成一个方法并且调用
var str = "var show = function(){alert(100)}()";
eval(str);
（2）eval例2：
//数据库会返回一个字符串(长得像javaScrpit数组)
var a = "[1,2]";
var array = eval(a);
for (var i = 0; i < array.length; i++) {
alert(array[i])
}
8. 学会使用js链式调用
/**
* 从一个实例引出立案时调用的需求
*/
(function(){
//创建一个cat
function Cat(name){
this.name = name;
this.run = function(){
document.write(name+ " start run");
return this;
}
this.sing = function(){
document.write(name+ " start sing");
return this;
}
}
//测试
var c = new Cat("abc");
c.run().sing();
})();
9. 禁止在函数内不使用var申明变量
function outerFun(){
a =0;// 没有使用var申明，就是全局变量了
alert(a);
}
10. 谨慎使用闭包
（1）闭包会使函数中的变量保存在内存中
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。（2）闭包会在父函数外部改变父函数内部变量的值
如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
五、Jquery注意点
1. 总是使用#Id去寻找元素
$('div#content') （错的）
$('#content') （对的）
2. 在class前面使用tags
$('input.on') （对的）
3. 更好的利用链
$(“#id1”).css().click();
4. 限制直接对DOM多次操作
组合成字符串，一次性操作DOM
5. 事件委托（冒泡事件）的两面性
（1）多个元素使用同一事件，在父元素上绑定事件
（2）只有一个元素使用事件，阻止事件冒泡（return false;）
event.stopPropagation(); // 事件停止冒泡到，即不让事件再向上传递到document，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。
event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。
return false; // 相当于同时调用了event.stopPropagation()和event.preventDefault()，事件的默认行为不会被执行，事件也不会冒泡向上传递。
六、Javascript调试
1.alert()
2.console.log() （firebug内置对象）
一般信息console.info()
出错信息console.debug()
警告提示console.warn()
错误提示console.error()
详见：http://gaoxianwei.iteye.com/blog/2077267
3.Firebug 的调试功能
（完）
相关推荐
书中可能还会介绍如何使用AJAX增强页面的动态性，以及如何利用JavaScript库如jQuery进行前端开发，以提供更加流畅的用户体验。 最后，考虑到可扩展性和维护性，书中可能会提及面向对象编程（OOP）在PHP中的应用，...
Ajax的核心是通过JavaScript与服务器进行异步数据交换，利用XML或者JSON等格式来处理数据，实现更加流畅和高效的用户体验。在2006年，随着Web 2.0概念的兴起，Ajax技术因其对网页交互性的提升而受到广泛关注，本书...
EXT2.0、DWR和Spring Framework是Java开发领域中的三个关键技术和框架，它们在构建高效、可扩展的Web应用程序中发挥着重要作用。下面将详细解释这三个技术，并探讨它们在实际开发中的应用。 EXT2.0是EXT JS的一个...
总的来说，jQuery 2.0是一个面向现代浏览器的JavaScript库，它的发布展示了jQuery对技术演进的适应和对开发者需求的敏锐洞察。对于那些寻求高性能和轻量级解决方案的现代前端项目，jQuery 2.0无疑是一个值得考虑的...
5. **Web前端技术**：HTML、CSS和JavaScript是Web页面的基础，其中，JavaScript在与后端交互（如AJAX）和实现复杂功能方面扮演着重要角色。现代化的前端框架如React、Vue或Angular也日益流行，它们提高了开发效率，...
Struts2.0框架是Java Web开发中广泛使用的MVC（Model-View-Controller）框架，它极大地简化了Java Servlet、JSP和JavaBean之间的交互。而DWR（Direct Web Remoting）则是一个JavaScript库，它允许在浏览器和服务器...
Ext2.0_Src_Zh-ch 是一个与Ext JS库相关的资源，这是一款广泛使用的JavaScript框架，主要用于构建富客户端...通过阅读源码，可以学习到如何组织JavaScript代码，以及如何利用面向对象编程和设计模式来构建大型Web应用。
在Java Web开发中，常用的框架和技术对于构建高效、可维护的Web应用程序至关重要。"javaweb常用jar包.zip"这个压缩文件包含了一些关键的库，它们是Spring、SpringMVC、MyBatis以及Ajax实现的基础。下面将详细介绍...
Struts2、Hibernate、Spring 和 Direct Web Remoting (DWR) 以及 jQuery 是经典的Java Web开发框架和技术，它们一起构建了高效、灵活的企业级应用程序。这些技术分别在模型-视图-控制器（MVC）、对象关系映射（ORM）...
4. **前端技术**：前端界面可能由HTML、CSS和JavaScript构建，可能使用了Bootstrap或Vue.js等前端框架，提供良好的用户体验和交互效果。此外，Ajax技术可能用于实现页面的异步更新，提高用户体验。 5. **RESTful ...
C#是一种面向对象的编程语言，由微软公司开发，广泛应用于Windows平台的应用程序开发，以及游戏开发和Web服务。它的语法简洁明了，支持类、接口、继承、多态等面向对象特性，同时也包含了一些高级特性如LINQ、async...
2004年，PHP 5发布，引入了面向对象编程的支持，提高了性能和稳定性。最新的PHP 7.x系列进一步优化了性能，带来了更强大的类型系统和错误处理机制。 二、jQuery的崛起 jQuery由John Resig于2006年发布，它以其简洁...
1. **Java基础**：作为主要开发语言，Java的基本语法、面向对象编程（OOP）概念，如类、对象、封装、继承和多态，都是构建系统的基础。此外，异常处理和IO流对于处理文件操作和网络通信至关重要。 2. **Spring框架*...
1. **Java编程基础**：作为项目的基石，你需要对Java语言有深入的理解，包括面向对象编程（OOP）、类与对象、接口、继承、多态等核心概念。 2. **Web开发框架**：此项目可能采用了Spring Boot或Struts等Java Web...
Java是一种多平台、面向对象的编程语言，广泛应用于企业级应用开发，因其优秀的性能、可移植性和安全性而受到青睐。在选课系统中，Java主要负责后台逻辑处理，如用户认证、课程管理、选课操作、成绩录入等。开发者...
常见的结构包括模块化（Module）、组件化（Component-Based）和面向对象编程（OOP）思想，如使用Vue.js、React.js或Angular.js等前端框架。 8. **性能优化**：为了提高页面加载速度，可以采用延迟加载（Lazy ...
需要掌握Java面向对象编程，熟悉Java集合框架、多线程、异常处理等基础知识，同时理解Spring框架的相关概念，如IoC（控制反转）和AOP（面向切面编程）。 5. **数据库设计**：在点餐系统中，数据库设计至关重要，...
- Java：这是一种广泛使用的面向对象编程语言，用于开发跨平台的应用程序。 - HTML5：这是最新的超文本标记语言，用于创建网页和Web应用。 - Java EE：这是企业版的Java平台，它包含一套用于开发大型、多层、可伸缩...
- Java语法、面向对象编程概念 - 异常处理、多线程、集合框架 - IO流、网络编程 - JDBC数据库连接 2. **框架和技术**： - Spring Boot/Spring Framework - MyBatis或Hibernate ORM - Maven或Gradle构建工具 ...