本文目录一览：

• 1、javascript框架是什么意思？有什么作用？怎么理解？最好举个例子
• 2、js编程: 根据搜索值过滤树结构
• 3、如何写出规范的JavaScript代码
• 4、什么是js框架？
• 5、用JS设计一个页面,在页面上显示信息"现在是XXXX年XX月XX日XX点XX分XX秒(星期X),欢迎您到访我的站点".
• 6、如何设计一个基于Node.js和Express的网站架构

javascript框架是什么意思？有什么作用？怎么理解？最好举个例子

浅谈js框架设计 在这个JavaScript框架随处乱跑的时代，你是否考虑过写一个自己的框架？下面的内容也许会有点帮助。

一个框架应该包含哪些内容？

1.语言扩展

大部分现有的框架都提供了这部分内容，语言扩展应当是以ECMAScript为基础进行的，不应当依赖任何宿主环境，也就是说，作为一个框架的设计者，你应当保证你的语言扩展可以工作在任何宿主环境中，而不是仅仅适合浏览器环境。你必须保证把它放到WScript,SpiderMonkeyShell,Rhino Shell,Adobe ExtendScript Toolkit甚至FlashActionScript等环境中都能正确的工作，举个现实一点的例子setTimeout不可以出现在其中，你也不能用XMLHTTP加载脚本运行，尽管它们看起来很贴近语言。保持这一部分的独立性可以让你方便的移植你的框架到其他宿主环境下。　

2.数据结构和算法

JS本身提供的内置对象非常有限，很多时候，框架应该提供一些数据结构和算法来帮助使用者更好的完成逻辑表达。但我认为随便翻本数据结构或者算法书用JS挑几个实现了加到框架中是不负责任的，多数数据结构应当以库的形式存在而非框架。框架中的数据结构应该足够常用而且实现不是非常复杂的，可以考虑的如集合、哈希表、链表、有序数组以及有序数组上的二分搜索。对JS来说，对象是一个天然的字符串哈希表，而集合很容易在哈希表上实现，因此只需要处理掉Object的内置方法，我们就可以实现一个高效的集合或哈希表。

3.DOM扩展

JS主要应用于Web开发，目前所有的框架也都用于浏览器环境，那么，浏览器端环境里重点中的重点DOM当然也是框架的扩展目标了，如果一个框架不提供DOM的扩展，那么其实基本没什么用处了。需要注意的是，DOM扩展也有w3c的标准可依，所以，不要尝试为各种浏览器做一些奇怪的扩展，比如FF下面的element们的prototype，框架的编写者应当无视它们。DOM扩展的主要任务之一是兼容性，不同浏览器上的DOM实现相差很多，框架必须消除这些实现带来的差异，提供统一的访问方式。当然，做为框架，应当提供一些更为方便的接口，将宿主提供的DOM对象用js对象封装是个不错的想法，但是同时这也很可能会造成内存泄露，所以做这事之前，了解内存泄露是必要的。实际上，自己想象的扩展远不如W3C的设计，比如如果你能更完整地实现XPath，你就能比JQuery做的更好。

4.AJAX扩展

大部分现有框架出现的原因都是因为AJAX，所以如果你想设计一个受欢迎的框架，AJAX是必须要做的。跟DOM扩展很相似，AJAX扩展的主要任务是兼容和内存泄露，对AJAX的核心组件XMLHttpRequest对象，必须在IE6中使用ActiveX创建，而ActiveX又有各种版本，而随之而来的内存泄露和兼容性变得非常麻烦，比如：事件函数名大小写、this指向、事件函数的null赋值。处理好这些兼容性的基础上，可以做进一步的工作，提供一些常用的实现。应该指出的是，除非你确定你提供的接口比原来的更好，否则不要改变原来的XMLHttpRequest对象的接口，比如写一个Request函数来代替open和send，如果你不清楚W3C的专家们为什么这么设计，请不要把他们想象成傻瓜。我想自己另外写一个兼容且内存安全的XMLHttpRequest加入到自己框架的命名空间里，使它从外部看上去跟W3C描述的XMLHttpRequest一模一样是不错的办法，对XMLHttpRequest我认为唯一可以考虑的修改是提供onsuccess事件。当然针对一些复杂功能的AJAX扩展也是可行的，比如HTMLHttpRequest类似的扩展可以让AJAX初学者喜欢你的框架。

5.效果

时间效果是最能刺激用户神经的，渐隐、缓动、滑动、颜色渐变这些都很不错，其实技术难度也不是很高。拖动效果则是浏览器中一个很重要的效果，用鼠标事件来模拟本来很容易，不过兼容和setCapture也是很麻烦的事情。这一部分内容量力而为就可以了。

7.脚本管理

因为大家非常喜欢C++风格的include或者JAVA风格的import，很多框架提供了基于AJAX的脚本管理，不过同步加载的效率问题是巨大的。之前我们曾经作过各种尝试，希望找到一个浏览器中不用XMLHTTP加载外部js的方法，但是最后得出的结论是：不可能。

关于这个，略微思考就可以知道，Java C++ C#都是编译型语言，include 和import都是编译期处理，在js中做到类似的事情是不太可能的。为了实现类似的功能，我想我们可以利用服务端程序或者编写一个文本工具来实现。

YUI将所有的js文件依赖关系提取出来的做法是可行的，不过这不能算是include的实现方式了，维护依赖关系不是一件很简单的事情。

8.控件

EXT的成功告诉我们：提供优质的控件才是框架的王道。你不能指望优质的扩展会吸引更多使用者。多数人只关心如何快速完成手边的工作。当然不是所有框架都要提供这部分内容。控件好坏取决于能力和美工，不过至少要保证框架里的控件不会内存泄露。

框架设计的若干原则：

1.不要做多余的事

对这框架设计来说，我认为一个非常必要的原则就是不要做多余的事情，举个极端的的例子：

function add(a,b)

{

return a+b;

}

这样的代码如果出现在框架中，就是个十足的笑话。不过大多数时候，事情不是那么明显，很多框架试图用某种形式在JS中"实现"OOP，但是实际上，JS本身是OO的（ECMA262中明确指出来的，不像某些人所说是基于对象云云）只是有一些语法跟Java等语言不同。那么显然这些OOP的"实现"其实是跟上面的例子一样的道理。另一个例子是Array.prototype.clone

Array.prototype.clone=function(){

return this.slice();

}

2.慎用prototype扩展

很多框架利用修改原生对象的prototype来做语言扩展，但我认为应当小心地看待这件事，毫无疑问这将造成一定的命名污染，你无法保证框架的使用者或者与你的框架共存的其他框架不会使用同样的名字来完成其他的事情。特别需要注意的是，Object和Array这两个对象的prototype扩展格外的危险，对Object来说，如果Object被修改，那么框架的使用者将无法创建一个未被修改的干净的对象，这是一个致命的问题，尤其如果你的使用者喜欢用forin来反射一个对象的属性。Array.prototype修改的危险来自js一个不知有意还是无意的小小设计，对原生的Array来说，任何情况下for和forin的遍历结果是相同的，而因为无法控制自定义的属性是不可枚举的，任何Array.prototype的修改都会破坏这种特性。一方面，我认为不应当推荐用forin遍历数组，这其中包含着错误的语义。另一方面，框架的设计者必须尊重这些使用者，因为对于ECMA所定义的语法而言，它是正确的做法。其中包含着这样一个简单的事实：假如你的框架中修改了Array.prototype，那么一些之前能正确工作的代码变得不可正确工作。

直接修改prototype看上去非常诱人，但是在考虑它之前应当先考虑两种可能的方案：

(1)函数

提供一个以对象为第一个参数的函数比如 Array.prototype.each =

function ForEach(arr,f)

{

if(arr instanceof Array)/*...*/;

}

(2)继承

以return的形式继承一个内置对象 比如考虑Array.prototype.each=

function ArrayCollection()

{

var r=Array.apply(this,arguments);

r.each=function(){/*......*/};

return r;

}

套用一句名言，不要修改原生对象的prototype，除非你认为必要。不过修改原生对象的prototype确实有一些特殊的用途（就是"必要的情况"），主要体现在2点：文字量支持和链式表达。举一个例子可以体现这两点：

var cf=function f(a,b,c,d)

{

/*........*/

}.$curry(3,4).$curry(5).$run();

如果希望实现类似上面的表达方式，可能就需要扩展Function.prototype，权衡一下的话，如果你认为命名污染的代价是值得的，那么也是可以提供给使用者的。

一个比较讨巧的办法是把选择权利交给使用者，提供一个扩展器：

function FunctionExtend()

{

this.$curry=function(){/*......*/};

this.$run=function(){/*......*/};

}

如果用户喜欢可以FunctionExtend.apply(Function.prototype); 如果不喜欢扩展 则可以

var r=function(){/*......*/};

FunctionExtend.apply(r);

3.保持和原生对象的一致

不知你有没有注意到，内置对象Function Array等都有这样的性质：

new Function()跟Function的结果完全一致（String Number Boolean这种封装型对象没有这样的性质）

如果框架中提供的类也具有这种性质，会是不错的选择。这仅仅是一个例子，如果你注意到了其他细节，并且让框架中的类和原生对象保持一致，对使用者来说是非常有益的。

4.尊重语言 尊重用户

编写框架应该尊重依赖的语言环境，在对原有的元素修改之前，首先应该考虑到原来的合理性，任何语言的原生环境提供的都是经过了精心设计的，在任何修改之前，至少应该考虑这几点：效率、命名规范、必要性、与其他功能是否重复。如果你没有付出至少跟语言的设计者相当的工作量，你的做法就是欠考虑的。

编写框架也应该尊重用户的所有习惯，将编写者的喜好强加给使用者并不是框架应该做的事情。框架应该保证大部分在没有框架环境下能运行的代码都能在框架下正常工作，这样用户不必为了使用你的框架而修改原有的代码。

5.规范命名和使用命名空间

减少命名污染可以让你的框架跟其他框架更好地共存。很多框架使用了命名空间来管理，这是良好的设计。命名应该是清晰且有实际意义的英文单词，如前面3所述，为了保持和原生对象的一致，命名规则最好贴近原生对象，比如类名第一字母大写，方法名用驼峰命名。捎带一提prototype中的$实在是非常糟糕的设计，无法想象$出现的目的仅仅是为了让使用者少写几个字母。这种事情应该交给你的用户在局部代码中使用

js编程: 根据搜索值过滤树结构

1，不要着急看一些复杂网页效果的代码，这样除了打击自信心，什么也学不到。2，别急着加技术交流QQ群，加牛人QQ。如果找张三丰交流武功。3，看网上什么多少天精通JS，啥啥啥从入门到精通，这种教程直接跳过吧，太多的事实证明，以一种浮躁的心态去做任何事都会以失败而告终。4，千万别去弄啥电脑培训，花了钱和时间不说，关键是学不到东西。本来买两本好书自学3个月能学会的，他们硬是能折腾两年。JavaScript DOM编程艺术学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了，老老实实看两遍，看完了就会对JS有一个大概的了解，整本书都围绕着一个网页效果例子展开，跟着老老实实敲一篇，敲完之后，会发现这个效果不是常在网页中看到么，发现自己也能做出来网上的效果了。JavaScript高级程序设计有的书是用来成为经典的，比如犀牛书；还有些书是用来超越经典的，显然这本书就是这种，可以去Ferris这个教程看看他写的这些效果，看看源代码，怎么样，是不是觉得有一部分很简单了，尝试着跟着他写一写这些效果。

如何写出规范的JavaScript代码

本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用"愉快"来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求，这些要求都是针对同事编码毛病提出来的，好些行业约定的其它规范可能不会再提及。1. 保证代码压缩后不出错对于大型的JavaScript项目，一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理，比如可以利用Google Closure Compiler Service对代码进行压缩，新版jQuery已改用这一工具对代码进行压缩，这一般会去掉开发时写的注释，除去所有空格和换行，甚至可以把原来较长的变量名替换成短且无意义的变量名，这样做的目的是加快文件的下载速度，同时也减小网站访问带来的额外数据流量，另外在代码保护上也起到了一点点作用，至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩，一般要求语句都要以分号正常结束，大括号也要严格结束等，具体还要看压缩工具的要求。所以如果一开始没有按标准来做，等压缩出错后再回去找错误那是浪费时间。2. 保证代码能通过特定IDE的自动格式化功能一般较为完善的开发工具（比如Aptana Studio）都有代码"自动格式"化功能，这一功能帮助实现统一换行、缩进、空格等代码编排，你可以设置自己喜欢的格式标准，比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码，可能是因为你写的是通用方法，他在其它模块开发过程中也要使用到，阅读你的代码能最深入了解方法调用和实现的细节，这是简单API文档不能达到的效果。3. 使用标准的文档注释这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebook.com应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。4. 使用规范有意义的变量名使用规范有意义的变量名可以提高代码的可读性，作为大项目开发成员，自己写的代码不仅仅要让别人容易看懂。开发大项目，其实每个人写的代码量可能都比较大，规范命名，日后自己看回自己的代码也显的清晰易懂，比如日后系统升级或新增功能，修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了，那还真是天大的笑话了。当然，使用有意义的变量名也尽量使用标准的命名，比如像这里：var me = this也许没有var self = this好，因为self是Python中的关键字，在Python中self就是通常语言this的用法。再看下面一个例子，加s显然比没有加来的科学些，这样可以知道这个变量名存的是复数，可能是数组等： var li = document.getElementsByTagName('li') var lis = document.getElementsByTagName('li') 5. 不使用生偏语法JavaScript作为一门动态脚本语言，灵活性既是优点也是缺点，众所周知，动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样，规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则才是大家应该做的。比如这语句：typeof(b) == 'string' alert(b)应该改为：if (typeof(b) == 'string') alert(b)，像前面那种用法，利用了运算符解析机制：如果检测到前语句返回false就不再检测后面语句，在代码优化方面也有提到把最可能出现的情况首先判断，像这种写法如果条件少还好，如果条件较多而且语句也长，那代码可读性就相当差。又比如：+function(a){var p = a;}( 'a')应该改为：(function(a){var p = a;})( 'a')，其实function前面的+号与包含function的()括号作用是一样的，都是起运算优先作用，后者是常见且容易看明白的防止变量污染的做法，比如好些流行JavaScript框架就是采用后面这种方式。再说个降低代码可读性的例子，如：function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}应该改成：function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是从0开始不间断的整数，那么直接使用数组还更简单，这种结果看起来就清晰多了，看到前面那种多层三元表达式嵌套头不晕吗。6. 不在语句非赋值地方出生中文语句中不应该出现中文我想一般人都知道，虽然这样做不影响程序运行，但是显然有背行业标准要求，当然我们也不是在使用"易语言"做开发。关于这一个问题，我本来不想把它拿出来说的，但我确实遇到有人这样做的，也不知道是不是因为他的英语实在太烂了，至少还可以用拼音吧，另外寻求翻译工具帮忙也不错的选择。我举例如下，像以下写法出现在教学中倒还可以理解：this.user['名字'] = '张三' 或者 this.user.名字 = '张三'7. 明确定义函数固定数量的参数固定数量参数的函数内部不使用arguments去获取参数，因为这样，你定义的方法如果包含较多的脚本，就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面： var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);} 8. 不必热衷动态事件绑定虽然知道事件可以动态绑定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用动态事件绑定可以让XHTML更干净，但是一般情况下我还是建议直接把事件写在DOM节点上，我认为这样可以使代码变得更容易维护，因为这样做，我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法，简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。9. 降低代码与XHTML的耦合性不要过于依赖DOM的一些内容特征来调用不同的脚本代码，而应该定义不同功能的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法的调用都是一样的，比如像下面的实现显然会存在问题： function myBtnClick(obj) { if (/确定/.test(obj.innerHTML)) alert('OK'); else if (/取消/.test(obj.innerHTML)) alert('Cancel'); else alert('Other'); } a herf="javascript:;" onclick="myBtnClick(this)"确定/aa herf="javascript:;" onclick="myBtnClick(this)"取消/a 上面例子其实在一个函数内处理了两件事情，应该分成两个函数，像上面的写法，如果把链接换成按钮，比如改成这样：input type="button" onclick="myBtnClick(this)" value="确定" /，那么myBtnClick函数内部的obj.innerHTML就出问题了，因为此时应该obj.value才对，另外如果把按钮名称由中文改为英文也会出问题，所以这种做法问题太多了。10. 一个函数应该返回统一的数据类型因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子： function getUserName(userID) { if (data[userID]) return data[userID]; else return false; } 应该改为： function getUserName(userID) { if (data[userID]) return data[userID]; else return ""; } 这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作"非"，即与false一样，除非我们使用全等于"==="或typeof进行判断。11. 规范定义JSON对象，补全双引号使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。12. 不在文件中留下未来确定不再使用的代码片段当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。13. 不重复定义其他团队成员已经实现的方法对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢"单干"，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。14. 调用合适的方法当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。15. 使用合适的控件存储合适的数据曾发现有人利用DIV来保存JSON数据，以待页面下载后将来使用，像这样：div id="json"{ "name":"Tom"}/div，显然这个DIV不是用来界面显示的，如果非要这样做，达到使用HTML文件进行数据缓存的作用，至少改成用隐藏域来存这数据更合理，比如改成：input type="hidden" value=" { "name":"Tom"}" /。其实也可以利用window对象来保存一些数据，像上面的例子，我们可以在AJAX请求页直接包含这样的脚本块：scriptwindow.userData = { "name":"Tom"};/script，当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后，在window上就马上有了这一变量。如果采用第一种方法，将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话，这些数据不用时要及时手动清理它们，它们是要等浏览器刷新或重启后才会消失的，这就会增加内存开销。16. 永远不要忽略代码优化工作代码最优化是每个程序员应该努力达到的目标，也应该成为程序员永远的追求。写代码的时候，不应该急着把功能实现出来，要想一下如何写代码，代码的执行效率才是较好的。举个例子：假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)}，那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv"))，其实这里执行了两次getElementById DOM查找，如果改成这样将更好：var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快，如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。当然，代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的，因为他们网站用的是至强四核服务器，我觉得这是很可笑的。17. 会分析策划文档，能用面向对象方法进行接口定义和代码组织这一能力对于每一个程序员来说都是非常重要的，这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类，然后有条理地编写代码，使代码结构清晰，可读性高，代码易于维护，不至于太过程化而且杂乱无章，这样才算是一个优秀的程序员。

什么是js框架？

Javascript框架是指以Javascript语言为基础搭建的编程框架。

JavaScript框架如今正融入到属于自己的Web和移动应用程序中，构建后端API和丰富的前台客户端是一大趋势，而这些又多由JavaScript框架编写而成。

在开发前台界面时应用API，便会更加熟悉API，也会对工作内容了如指掌，当应用该项技术编写客户端，编写顶级iPhone或者Android应用程序就会变得非常容易。

在JavaScript框架出现之前，开发人员只能在页面上进行jQuery操作。这种方式很容易引起开发人员对编码操作的困惑，而且也不易管理。

Backbone是最初的领跑者，提供了一个基本的结构和组织以及开发者友好的框架，如Angular和Ember。

扩展资料：

javascript的特点：

1、一种解释性执行的脚本语言。

同其他脚本语言一样，javascript也是一种解释性语言，其提供了一个非常方便的开发过程。

2、一种基于对象的脚本语言。

其也被看作是一种面向对象的语言，这意味着javascript能运用其已经创建的对象。因此，许多功能可以来自于脚本环境中对象的开发方法 与脚本的相互作用。

3、一种简单弱类型脚本语言。

javascript是一种基于java基本语句和控制流之上的简单而紧凑的设计，从而对于使用者学习java或其他c语系的编程语言是一种非常好的过渡。

4、一种相对安全脚本语言。

javascript作为一种安全性语言，不被允许访问本地的硬盘，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失或对系统开发的非法访问。

参考资料来源：百度百科-JavaScript框架

用JS设计一个页面,在页面上显示信息"现在是XXXX年XX月XX日XX点XX分XX秒(星期X),欢迎您到访我的站点".

script

//setTimeout

var info = "现在是"+date.getFullYear()+"年";

info += (date.getMonth()+1)+"月";

info += (date.getDate())+"日";

info += date.getHours() + "点";

info += date.getMinutes()+"分";

info += date.getSeconds()+"秒";

info += "（星期"+(date.getDay()+1)+"）";

/script

运行模式

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

如何设计一个基于Node.js和Express的网站架构

推荐使用Webstorm打开项目。打开项目后，代码结构如下图所示：

在主体结构中从上到下介绍。 app 文件夹包含了所有后端代码； build 文件夹中包含了最新数据库备份； config 包含有网站整体的配置； logs 文件夹包含网站后端记录的日志文件； node_modules 是包含所有的 node.js 依赖包（源代码中初始没有此文件夹，运行 npm install 命令后所有加载的依赖包放置在此文件夹中）； public文件夹包含了所有的前端代码，包括JavaScript、less、图片、Webfont等； .bowerrc中定义了 bower 管理前端库的下载地址； bower.json 则配置了项目需要的前端库；.jshintre-client 和 .jshintrc-server 分别为前后端JavaScript代码规范检查规则；.travis.yml 为[travis]（travis-ci.org/）自动编译配置； app.js 为node.js启动脚本文件； build.sh 为单独编写的自动发布bash命令；gruntfile.js为 grunt 配置文件；newrelic.js为 newrelic 的配置文件，用于监控网站性能； package.json 包含了所有node.js依赖包配置。

项目后端结构

项目后端代码架构如下图所示：

主要分为两大部分： app 和 config 。 app 里面按照职责不同来分类，每个脚本文件对应于不同的模块； api 文件夹包含了所有api对应的业务逻辑代码， helper 放置一些公用方法，如邮件发送、日志记录、数据库连接等等； templates 放置的是静态邮件模板； views 是后端页面模板，使用了 handlebar 模板引擎，其中 http 中放置系统错误显示页面， layouts 放置模板页； routes 是 express 对应的路由配置，所有的页面和API的路由配置都在这个文件中。 config 文件夹中为系统配置，按照不同环境分为开发和现场两个环境配置， all.js 放置共通配置， development.js 放置开发环境对应配置而 production.js 放置线上环境配置。配置内容包括邮件发送、数据库连接及一些第三方API所需的key等等。

项目前端结构

项目前端代码结构如下所示：

前端代码全部放置于 public 文件夹下。 data 目录包含一些静态json格式数据，后期可能会考虑放到数据库中。 helper 中是浏览器下载引导页面； images 包含了所有项目中用到的图片，我们尽量使用第三方的图片服务器保存图片，一些小图标也尽量使用webfont。 JavaScripts 文件夹包含所有JavaScript文件，其中 app 子目录放置业务代码，业务代码都是按照业务不同封装成了不同的 angularjs controller； debug 子目录放置调试用代码，而 libs 方式前端JavaScript库，项目中使用得JavaScript库有angularjs 、 jQuery 及一些插件； clients.js 是所有ajax请求函数； erealm.js 是angularjs的主模块； language.js 包含了所有多语言配置，目前支持中英文。stylesheets 包含了所有的css样式及webfont，除了第三方库之外，自定义的样式全部使用了 less 。作为一种惯例，项目中添加了 humans.txt 文件，表明项目的作者信息。有关humans.txt，可以参考官方网站 humans.txt 。

自动化构建工具

项目自动化构建使用 grunt 。grunt的使用涉及开发、调试、发布阶段。开发阶段使用了图片压缩和前端代码格式美化，使用的工具是 imagemin 和 jsbeautifier ，运行grunt prepare 命令。调试阶段使用了代码规范检查、less编译、自动添加浏览器前缀、自动加载运行nodejs并打开浏览器、实时监控代码变化并刷新页面等。开发中，使用 grunt 命令即可，为默认grunt命令。发布阶段包含了JavaScript及css合并压缩，并在文件路径上添加哈希值来避免浏览器缓存问题，同时删除开发环境中使用的代码，使用 grunt build 命令即可把代码切换为发布环境。

具体的使用grunt方法及相关工具的介绍，后期会有专门的技术文章讲解，这里不会详细设计技术细节。

后期持续的改进点

项目完成的比较仓促，但是我们尽量保持代码的整洁和可维护性，一些编码方式也借鉴当前流行的最佳实践。但理想是美好的，现实总是不会做到那么完美，需要不断的完善。目前存在的问题是后端代码结构不够清晰、整体代码中无用代码还没有来得及移除。框架上期望把 jQuery 去掉，只使用 Angularjs ，目前只做到了尽量不用jQuery 中的方法。小图标的使用上 Bootstrap 和 Font Awesome 重复，后期会逐步删除 Font Awesome 而只使用 Bootstrap 中带的小图标。目前，最大的问题是项目没有完整的自动化测试，这个后期会逐步添加。

总结

以上是这个开源项目的整体技术结构介绍。在这个项目中，我们会持续使用最流行的Web技术，希望得到大家的持续关注，如果有开发者能一块贡献一些代码，我们将会非常高兴。我们已经在github.io上构建了一个技术平台来发布Web技术文章，网址是blog.erealm.cn。博客网址也同样开源，使用了 Jekyll 构建。 Jekyll 非常强大，最大的特点是使用markdown格式来发布文章。博客的代码在这里： github 。

我们做这个开源的项目的目的有两个，其一是通过这个项目来展示我们做Web项目的实力，及培养团队技术水平。其二是借助这个项目，能和同行们有个技术上的互动和交流。如果我们的项目能让一些新手们学到一些做Web项目的经验，我们就很知足了。技术是不断革新的，而国内Web技术向来是落后于国外好几年，这个是不争的事实。我们erealm团队乐意为国内Web贡献自己的力量，也欢迎国内同行们和我们交流Web开发经验。