当前位置:  编程技术>WEB前端
本页文章导读:
    ▪Javascript基础与面向对象基础~第五讲 Javascript中的方法，类中的方法      回到目录上一文章主要说的是JS中的类，有很多朋友回复了我的文章，在此很感谢大家，也对一些朋友提出的问题进行了回复，“类”这东西，只是一种思想，我们不应该把重点放在&ldqu.........
    ▪一个完整的基于Node.js web应用详解      前言这篇文章所使用的例子是基于《node.js开发指南》这本书中的例子和源代码来做的。express从2.x到3.x引入了非常大的变化，很多模块都被独立出去，并且调用的接口也发生了很大的变化，所.........
    ▪一些js代码，自己备用的。高手不要笑话我。。（跨浏览器基础事件，浏览器检测，判断浏览器的名称、版本号、操作系统）      跨浏览器基础事件 1 //跨浏览器添加事件 2 function addEvent(obj, type, fn) { 3 if (obj.addEventListener) { 4 obj.addEventListener(type, fn, false); 5 } else if (obj.attachEvent) { 6 obj.attachEvent('on' + type, fun.........

[1]Javascript基础与面向对象基础~第五讲 Javascript中的方法，类中的方法
    来源:    发布时间: 2013-11-06

回到目录

上一文章主要说的是JS中的类，有很多朋友回复了我的文章，在此很感谢大家，也对一些朋友提出的问题进行了回复，“类”这东西，只是一种思想，我们不应该把重点放在“某种语言是否提供类，或者是否实现了类”，这是不重要的，重要的是面向对象中的类的思想！

今天主要说的是方法，JS中的方法也叫做函数function,它将一些有关系的代码组织在一起，形成一个整体，这类似于面向对象中的封装，你不需要了解方法的实现细节，你只要被调用它，了解方法的签名即可。

最简单的函数（方法）：

<script type="text/javascript">
//加运算
function Sum(x, y) {
return parseInt(x) + parseInt(y);
}
//减运算
function Sub(x, y) {
return parseInt(x) - parseInt(y);
}
</script>

表单验证函数

下面是一个表单验证函数，如果验证成功就提交表单，不功能就返回错误消息

<script>
//表单验证，可以在多个表单中使用这一个函数来完成验证
function CheckForm() {
var name = document.getElementById("name");
var password = document.getElementById("password");
var email = document.getElementById("email");
if (name == "") {
alert("请输入用户名");
return false;
}
if (password == "") {
alert("请输入密码");
return false;
}
if (email == "") {
alert("请输入邮件地址");
return false;
}
document.getElementsByTagName("form")[0].submit();
return true;

}
</script>

对象中的方法（函数）

事实上JS中的函数就是这样内容，而函数也可以在对象中出现，类似的代码在之前的文件也出现过，再写一下：

//道具对象
var Props = {
init: function () {//对象中的方法
//对象初始化
},
GetHtmlTags: function () {
//构建HTML代码块
},
Language: ["中文", "英文"],
Name: "道具"
};

方法中的子方法

别外，方法中还可以有子方法，在子方法中可以对父方法里

    
[2]一个完整的基于Node.js web应用详解
    来源:    发布时间: 2013-11-06

前言

这篇文章所使用的例子是基于《node.js开发指南》这本书中的例子和源代码来做的。express从2.x到3.x引入了非常大的变化，很多模块都被独立出去，并且调用的接口也发生了很大的变化，所以原有的代码在express3.x上是不能运行的。在尝试的过程中，做了很多迁移的工作，同时将一些模块进行了一定的分离和整合，使得整个项目更加具有结构性和可扩展性。

这里首先要推荐一下《node.js开发指南》这本书，想学习和使用Node.js的同学，这确实是一本非常全面的介绍Node.js的书籍，看完了之后，结合书中的例子代码，基本可以使用Node进行web应用的开发。

我这里主要结合这个例子，以自己的理解和对例子的修改讲述一下使用Node.js进行web开发的整个过程。 我就直接从代码开始讲，对于环境的搭建，npm包安装，模块引入等大家可以另外找一些文章，或者从《node.js开发指南》这本书的相应章节去了解。

目录结构：

首先贴出目录结构：

从每个文件和文件夹的名字上，相信大家能看出他们各自的功能。

  • main.js是整个应用的启动文件
  • settings.js中存放着系统的配置信息
  • server.js是系统服务配置和创建的地方
  • db.js是与数据库相关的内容
  • models模块中中存放着模型类如User，Post等，类似于Java中的Entity
  • routes中是系统页面跳转和请求分发处理的模块
  • views是系统展现给用户的页面
  • daos中分装了所有对数据库的操作，熟悉J2EE的同学应该都理解这一层做的事情
  • web中是一些静态元素，如html，js，css，images
  • package.json中定义了系统需要的其他的第三方模块，如express,ejs等
  • node_modules中则是存放通过npm安装的第三方包的地方

接下来会对这些部分分别做详细的介绍和分析。

基于express和ejs的MVC

在后台的各个模块中其实有一个基于express和ejs的MVC模式。对应的三个模块为：models(M)-views(V)-routes(C)，具体会在后面讲解他们三者是如何工作的。

express

关于express，我在这里不做详细的介绍，大家可以上它的官网做比较详细的了解。简单的讲，就是一套在Node.js上创建web应用的框架。提供了包括服务创建、启动、会话、路由等接口和实现。一个最基本的基于express的服务代码如下：

var express = require('express');
var app = express(); //创建服务

app.get('/', function(req, res){ //路由所有的到根目录的请求
res.send('hello world');
});

app.listen(3000); //启动服务，监听3000端口

ejs

ejs: ejs是一种基于js的模版技术，即通过在html片段中插入js代码。在发送到客户端之前现在服务器端进行解析处理，动态设置一些字段或者添加一些节点。JSP就是一种基于java的模版语言。

在最新的ejs中可以支持以html文件作为模版文件，并且引入了include机制，可以使用include语句来引入其他的页面内容。这点和jsp很像。

一个基于ejs的html文件可以写成如下：

<% include header.html %>
<% if (!locals.user) { %>
<div >
<h1>欢迎来到 Microblog</h1>
<p>Microblog 是一个基于 Node.js 的微博系统。</p>
<p>
<a href="/login/index.html">登录</a>
<a href="/reg/index.html">立即注册</a>
</p>
</div>
<% } else { %>
<% include say.html %>
<% } %>
<% include footer.html %>

在使用ejs的时候，可以在js代码中调用res.render('index',{user:"Owen"})方法。这个方法有两个参数，第一个为模版文件的名字，第二个为需要传入到模版中使用的参数。

exports.index = function(req, res) {
res.render('index', {
title: '首页',
posts: posts
});
};

在最新的ejs中，加入了作用域的概念，在模版文件中不能直接引用变量名来访问变量，而需要使用locals.xxx来访问相应的变量。这样做是为了避免全局变量的污染和冲突。

MVC

在这个MVC模式中主要用到了express的route功能和ejs的模版机制。

在models模块中定义一些模型模块如User,Post等，这些类似与java中的Pojo或者Entity类。定义了模型的一些属性和方法。这些属性与数据库的字段相对应。比如一个简单的User model的模块可以定义如下：

function User(user) {
this.name = user.name;
this.password = user.password;
};
module.exports = User;

routes中定义了请求分发处理的过程。比如到所有到根目录(/)的请求都经过一定的处理然后转发到index view中，到/login的请求应该返回login.html页面。这个与j2ee项目中的web.xml或者使用struts时的struts.xml类似。在node中，遵循代码即配置的原则，下面先看一下/routes/index.js模块中的code。

    
[3]一些js代码，自己备用的。高手不要笑话我。。（跨浏览器基础事件，浏览器检测，判断浏览器的名称、版本号、操作系统）
    来源:    发布时间: 2013-11-06

跨浏览器基础事件

1 //跨浏览器添加事件
2 function addEvent(obj, type, fn) {
3 if (obj.addEventListener) {
4 obj.addEventListener(type, fn, false);
5 } else if (obj.attachEvent) {
6 obj.attachEvent('on' + type, function () {
7 fn.call(obj);
8 });
9 }
10 }
11
12 //跨浏览器移除事件
13 function removeEvent(obj, type, fn) {
14 if (obj.removeEventListener) {
15 obj.removeEventListener(type, fn, false);
16 } else if (obj.detachEvent) {
17 obj.detachEvent('on' + type, fn);
18 }
19 }
20
21 //跨浏览器阻止默认行为
22 function preDef(evt) {
23 var e = evt || window.event;
24 if (e.preventDefault) {
25 e.preventDefault();
26 } else {
27 e.returnValue = false;
28 }
29 }
30
31 //跨浏览器获取目标对象
32 function getTarget(evt) {
33 if (evt.target) { //W3C
34 return evt.target;
35 } else if (window.event.srcElement) { //IE
36 return window.event.srcElement;
37 }
38 }
39
40 //跨浏览器获取字符编码
41 function getCharCode(evt) {
42 var e = evt || window.event;
43 if (typeof e.charCode == 'number') {
44 return e.charCode;
45 } else {
46 return e.keyCode;
47 }
48 }

浏览器检测

var client = function(){

//rendering engines
var engine = {
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,

//complete version
ver: null
};

//browsers
var browser = {

//browsers
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,

//specific version
ver: null
};


//platform/device/OS
var system = {
win: false,
mac: false,
x11: false,

//mobile devices
iphone: false,
ipod: false,
ipad: false,
ios: false,
android: false,
nokiaN: false,
winMobile: false,

//game systems
wii: false,

    
最新技术文章:
 




特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3