HexUzHoNG 写道
哈哈,hax
偶用ajax设计模式换你的css蝉意花园看看咋样
或用j2ee development without ejb
发现自己不太会选书,这2本感觉都比较的抽象,理论的东西多些。
现在还看不太懂。:( 呵呵,可以啊,等我看完禅意花园吧（估计国庆节前可以看完）。

相关推荐: 关于翻译《CSS - The Missing Manual》术语表的讨论与建议 AlertBox 弹出层（信息提示框）效果 花瓣网方砖布局 图片内容无限加载 用户体验才是王道 《精通CSS》读书笔记（二） 《精通CSS》读书笔记2 《精通CSS》读书笔记（三） 《精通CSS》读书笔记（七） 《精通CSS》读书笔记（一）
推荐群组: Hadoop
更多相关推荐
CSS 续上篇 。第2章 box model译作“框模型”,我是始作俑者（大约在2003年,在opendl.com的w3c翻译讨论区中提出）。绝大多数是译作“盒模型”。当然据说之前就有人译为“框模型”,但是至少本书的译者估计或多或少受到了我的影响。因为 刘江说译者认为“盒”有3D的意思 ,而这是我在opendl论坛提出的论点。当然不能排除译者与当时的我正好有相同想法的可能。不过我后来觉得“框模型”也有点问题。在Zen of CSS Design（也已购买,等待读完本书后继续）的译者的论坛上,我 留言 到：
引用
“方框模型”或“框模型”很久以前提过,只是因为感到“盒模型”不够好（有三维意思）,但是“方框模型”也未必见得就好。不知有什么更好的译名。……为什么“框模型”更贴切？ 虽然我也是最早将其列为候选的（之一）,但是我还真没有觉得“框模型”就更贴切也。。。“框模型”的主要问题是强调了框,加上border（边框）,就有点乱了。“盒模型”的主要问题就是盒子是3d的。。。 不过好玩的是,Zen的译者认为“框模型”比“盒模型”好,但是实际上用了“盒模型”。 要问我现在我觉得怎么翻译box model好？我也说不上。 首先把box译作“框”是ok的,例如TextBox文本框,radiobox单选框,checkbox复选框,MsgBox消息框。但是“框模型”,容易与“边框”混淆,而且给人感觉重点在框（边界）上。 “盒模型”主要是有三维空间的感觉,但是“盒”有容器的意味,可以表达 “方块套方块”的境界 。其实有时候我想,是不是大白话的“方块模型”才是最好的？ 关于IE/Win的box问题,本章给出的建议是“回避”,等待到第9章。但是这里没有说明,回避其实是有坏处的,因为将padding和margin加到父元素或子元素,很有可能会引入额外的无意义标签,或者破坏样式本身的自明性。 记录IE的bug：相对定位元素内若向右下进行绝对定位,需要设定相对定位元素的高宽。 在IE中模拟fixed定位,本书举了Jonathan Snook的网站作为例子,遗憾的是,他的网站已经改过版了,找不到fixed了。我原来以为首页上方的黑边是fixed的,但是一看,原来是border而已。 IE对于fixed定位有个很大的错误,我不是说不支持fixed就不对,但是既然其接受fixed作为合法参数,就不应把其当成static来处理,至少应当作absolute处理,这样可以graceful degradation。 模拟fixed的一个办法是使用脚本改变元素的绝对定位坐标,但是通常会导致抖动。实际上有两个小技巧可以模拟出不抖动的fixed。一个是使用css expression配合background-attachment:fixed。另一个（偶自行发现的）方法是使用ie的standard mode,然后html元素overflow:hidden,而body元素overflow:auto,这样body上绝对定位的元素在外层没有定位元素的情况下,会始终相对于html元素定位,从而达到和fixed定位一样的效果。这一方法是我在试图解决standard mode下scrollbar抢夺焦点的Bug（IE7似乎仍有这个bug）时偶然发现的。 关于containing block如何包围float元素（似乎有很多人以为这是FF的bug）,需要额外的空元素来clear。为了避免引入无意义的标签,使用::after是个好方法,类似的,也许也可以用:last-child伪类,不过这两种方法无法用在IE上。但是IE可以用Holly hack,实际上就是让containing block获得hasLayout。 待 续 ...

又见这个介绍帖能不能上点实在点的东西？ 比如web应用？ 至于源码,看个人喜好吧

相关推荐: 在Extjs中使用MVC时对象选择的问题 用Ext4.0 MVC模式搭建一个应用程序框架 吐血的Ext4 JavaScript凌厉开发：ExtJS3详解与实践 ExtJS 4 MVC架构讲解 – ExtJS4中文教程 Extjs4.1MVC详解 Extjs MVC开发模式详解 ExtJS4 MVC开发教程：搭建开发环境
推荐群组: EXT
更多相关推荐
JavaScript EXT
关于一个ext4MVC的例子,代码中有相关注释;
详细见附件(是一个myEclipse项目)
 
本人在使用中的感受:
如果我们这样分层了,有利于组件重用,软件开发和维护,但学习成本很高,要新人接受需要一段时间,在开发中要按照一定规范.
建议不要随便使用这样分层!
 
每一层的介绍:
1,model和store其实就是管数据的,
2,view层,纯界面,极少逻辑代码,逻辑代码都写到controller中,这样好管理.
3,controller,建议逻辑代码都写到这里,这样好管理.
 
关于文件夹名称:
注意文件夹起名controller/model/store/view文件夹名称一定的,
这样每个相应的类名也可以根据这个来取,如:"keel.view.goods.GoodsListView"
keel是整个应用程序的命名空间,view就是view文件夹,goods.GoodsListView就是view文件夹下的goods文件夹的
GoodsListView.js文件;
这样程序就可以用动态加载功能了;
 
controller介绍:
其实我们很大一部分工作就在controller了,例子代码如下:
 
/* 商品控制层, 所有逻辑代码都在这里写 */ Ext.define('keel.controller.GoodsCtrl', { extend: 'Ext.app.Controller', stores: ['GoodsStore'],//声明该控制层要用到的store models: ['GoodsModel'],//声明该控制层要用到的model views: ['goods.GoodsListView','goods.GoodsWinView'],//声明该控制层要用到的view refs: [//相当于一个映射,这样就可以在控制层方便的通过geter取得相应的对象了 { ref: 'goodslistview', selector: 'goodslistview' }, { ref: 'goodswinview', selector: 'goodswinview' } ], init: function() { this.control({//这里的this相当于这个控制层 'viewport > goodslistview': { afterrender: function(gp){//侦听goodslistview渲染 gp.down('button[action=testBtn1]').on('click',function(){ //侦听goodslistview工具条上action=testBtn1的按钮单击事件 this.showWin(); },this); gp.down('button[action=testBtn2]').on('click',function(){ //侦听goodslistview工具条上action=testBtn2的按钮单击事件 alert(this.getGoodslistview().title) },this); } }, 'goodswinview button[action=ok]': { //侦听goodswinview中action=ok的按钮单击事件 click: function(){ this.getGoodswinview().setTitle(Ext.util.Format.date(new Date(),'Y-m-d H:i:s')); } } }); }, showWin : function(){ Ext.create('keel.view.goods.GoodsWinView').show(); } });  
 

文件：ext-2.3.0/source/core/Ext.js
 
概述：Ext.js主要负责创建Ext全局对象,构建其命名空间,定义extend类继承方法,探测浏览器信息和对Javascript原生库进行扩展。
 
分析：
 
一、创建Ext全局对象 // 创建Ext全局对象,大多数JS库为了避免和其他JS库命名冲突,都会把自己创建的类或函数封装到一个全局变量中去, // 这样就相当于创造了自己的命名空间,可以算是一个单例模式。例如,jQuery就是全部都封装到$变量中去。 Ext = {version: '2.3.0'};
 
二、设置全局undefined变量 // 兼容旧浏览器,早期的浏览器实现中,undefined并不是全局变量。就是说,你要判断一个变量是否是没定义, // 你需要这样写if (typeof a == 'undefined'),不可以写成if (a == undefined)。所以,上面的代码就可以理解了。 // 右面的window["undefined"],因为window对象没有undefined属性,所以其值为undefined, // 把undefined赋值给window的undefined属性上,就相当于把undefined设置成了全局变量, // 这样以后你再判断一个变量是否是未定义的时候,就不需要使用typeof,直接判断就可以了。 window["undefined"] = window["undefined"];
 
三、定义apply方法属性复制函数 // apply方法,把对象c中的属性复制到对象o中,支持默认属性defaults设置。这个方法属于对象属性的一个浅拷贝函数。 Ext.apply = function(o, c, defaults){ if(defaults){ // 如果默认值defaults存在,那么先把defaults上得属性复制给对象o Ext.apply(o, defaults); } if(o && c && typeof c == 'object'){ for(var p in c){ o[p] = c[p]; } } return o; };
 
四、扩展Ext对象 (function(){ // idSeed,用来生成自增长的id值。 var idSeed = 0; // ua,浏览器的用户代理,主要用来识别浏览器的型号、版本、内核和操作系统等。 var ua = navigator.userAgent.toLowerCase(), check = function(r){ return r.test(ua); }, // isStrict,表示当前浏览器是否是标准模式。 // 如果正确的设置了网页的doctype,则compatMode为CSS1Compat,否则为BackCompat isStrict = document.compatMode == "CSS1Compat", // isOpera,表示是否是opera浏览器。 isOpera = check(/opera/), // isChrome,表示是否是谷歌浏览器。 isChrome = check(/chrome/), // isWebKit,表示当前浏览器是否使用WebKit引擎。 // WebKit是浏览器内核,Safari和Chrome使用WebKit引擎。 isWebKit = check(/webkit/), // isSafari,表示是否是苹果浏览器,下面代码是对其版本识别。 isSafari = !isChrome && check(/safari/), isSafari2 = isSafari && check(/applewebkit\/4/), // unique to Safari 2 isSafari3 = isSafari && check(/version\/3/), isSafari4 = isSafari && check(/version\/4/), // isIE,表示是否是IE浏览器,下面代码是对其版本识别。 isIE = !isOpera && check(/msie/), isIE7 = isIE && check(/msie 7/), isIE8 = isIE && check(/msie 8/), isIE6 = isIE && !isIE7 && !isIE8, // isGecko,表示当前浏览器是否使用Gecko引擎。 // Gecko是浏览器内核,Firefox使用Gecko引擎。 isGecko = !isWebKit && check(/gecko/), isGecko2 = isGecko && check(/rv:1\.8/), isGecko3 = isGecko && check(/rv:1\.9/), // isBorderBox,表示浏览器是否是IE的盒模式。 // 众所周知,IE的盒模式和W3C的盒模式不一致。当IE浏览器在怪异模式下,就会导致错误的盒模式。 isBorderBox = isIE && !isStrict, // isWindows,表示是否是windows操作系统。 isWindows = check(/windows|win32/), // isMac,表示是否是苹果操作系统。 isMac = check(/macintosh|mac os x/), // isAir,AIR（Adobe Integrated Runtime）,是adobe开发的一个平台吧,不太了解,没用过。 isAir = check(/adobeair/), // isLinux,表示是否是Liunx操作系统。 isLinux = check(/linux/), // isSecure,表示是否是https连接。 isSecure = /^https/i.test(window.location.protocol); // 缓存一下CSS的背景图像,防止图像闪烁,应该是IE6的一个bug。 if(isIE6){ try{ document.execCommand("BackgroundImageCache", false, true); }catch(e){} } // 扩展Ext对象,有一些属性,这个文件中没有使用,现在先不解释其作用,后面遇到了再讲。 Ext.apply(Ext, { // isStrict,表示是否是标准模式。 isStrict : isStrict, // isSecure,表示是否是https连接。 isSecure : isSecure, // isReady,表示Dom文档树是否加载完成 isReady : false, // enableGarbageCollector和enableListenerCollection这两个变量在Element中使用了,解析到Element时再解释其含义。 enableGarbageCollector : true, enableListenerCollection:false, // SSL_SECURE_URL,这个值在构造隐藏的iframe时,用来设置src属性的,只是当是https连接的时候才用。 SSL_SECURE_URL : "javascript:false", // BLANK_IMAGE_URL,1像素透明图片地址 BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif", // emptyFn,空函数 emptyFn : function(){}, // applyIf,把对象c的属性复制到对象o上,只复制o没有的属性 applyIf : function(o, c){ if(o && c){ for(var p in c){ if(typeof o[p] == "undefined"){ o[p] = c[p]; } } } return o; }, // addBehaviors函数可以一次给多个Ext.Element添加不同的事件响应函数 addBehaviors : function(o){ // 判断Dom树是否已经加装成功 if(!Ext.isReady){ // 如果Dom树没有加载好,那么等到加载好了,再执行此函数 Ext.onReady(function(){ Ext.addBehaviors(o); }); return; } // cache,简单缓存一下选择过的CSS Selector。 var cache = {}; // 遍历对象o,b的格式应该是selector@eventName for(var b in o){ // parts[0]=selector,parts[1]=eventName var parts = b.split('@'); if(parts[1]){ // 如果事件名称存在,s为selector var s = parts[0]; // 判断一下cache缓存中是否已经查询过该selector if(!cache[s]){ // 如果没有查询过,那么用select方法查询一下 cache[s] = Ext.select(s); } // 调用Element的on方法来注册事件函数 cache[s].on(parts[1], o[b]); } } // 释放cache变量,防止内存泄露 cache = null; }, // 取得el的id属性。el可以是Ext.Element或者是Dom元素。 // 如果el不存在,那么生成一个自增长的id,并返回这个id。 // 如果el存在,但是没有id属性,那么生成一个自增长的id,并赋值给el的id属性,最后返回id值。 // 如果el存在,并且也有id属性,那么直接返回el的id值。 // prefix表示生成自增长的id的前缀,默认值为ext-gen id : function(el, prefix){ prefix = prefix || "ext-gen"; el = Ext.getDom(el); var id = prefix + (++idSeed); return el ? (el.id ? el.id : (el.id = id)) : id; }, // 类继承函数,基于javascript的prototype,模仿面相对象的继承特性。 // 整个ExtJS框架的继承机制就是这个函数实现的。 extend : function(){ // override函数,用来覆盖prototype上的属性的(私有对象,仅下面的return function内部可以使用) var io = function(o){ for(var m in o){ this[m] = o[m]; } }; // Object的构造函数(私有对象,仅下面的return function内部可以使用) var oc = Object.prototype.constructor; return function(sb, sp, overrides){ // sb表示subclass,sp表示superclass,overrides是默认值为对象型 // 如果sp是对象,表示没有传sb变量进来,所以重新设置一下参数 if(typeof sp == 'object'){ overrides = sp; sp = sb; // 如果overrides中提供了构造函数,那么就用提供的, // 否则用下面这个匿名函数,匿名函数会调用父类的构造函数 sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; } // F是一个临时的类,其prototype指向superclass的prototype, // 同时也把subclass的prototype指向了F对象, // 这样可以避免在类继承的时候,调用superclass的构造函数 var F = function(){}, sbp, spp = sp.prototype; F.prototype = spp; sbp = sb.prototype = new F(); sbp.constructor=sb; sb.superclass=spp; if(spp.constructor == oc){ spp.constructor=sp; } // 覆盖函数 sb.override = function(o){ Ext.override(sb, o); }; sbp.override = io; // 设置默认值 Ext.override(sb, overrides); // 继承函数,这样写方便,可以直接从别的类继承新类 sb.extend = function(o){Ext.extend(sb, o);}; return sb; }; }(), // 覆盖函数,直接把属性复制到origclass的prototype上 override : function(origclass, overrides){ if(overrides){ var p = origclass.prototype; for(var method in overrides){ p[method] = overrides[method]; } // 下面是处理IE浏览器在枚举对象的属性时, // 原生的方法toString枚举不出来,即使是自定义的toString也不行 if(Ext.isIE && overrides.toString != origclass.toString){ p.toString = overrides.toString; } } }, // 生成命名空间。javascript语言没有命名空间这么一说,所以只好用对象的属性来实现。 namespace : function(){ var a=arguments, o=null, i, j, d, rt; for (i=0; i五、创建Ext所用的命名空间 Ext.ns("Ext", "Ext.util", "Ext.grid", "Ext.dd", "Ext.tree", "Ext.data", "Ext.form", "Ext.menu", "Ext.state", "Ext.lib", "Ext.layout", "Ext.app", "Ext.ux");
 
六、扩展原生Function Ext.apply(Function.prototype, { // 创建回调函数,这个有点太简单了,并且this指向了window,不可以自定义。功能不是很强 createCallback : function(/*args...*/){ var args = arguments; var method = this; return function() { return method.apply(window, args); }; }, // 创建委托（注：Delegate在C#里是叫委托的,其实就是c语音里的函数指针,js中叫匿名函数） // createDelegate比createCallback高级了一点可以设置this指针,同时也可以设置传入的参数 createDelegate : function(obj, args, appendArgs){ var method = this; return function() { var callArgs = args || arguments; if(appendArgs === true){ callArgs = Array.prototype.slice.call(arguments, 0); callArgs = callArgs.concat(args); }else if(typeof appendArgs == "number"){ callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first var applyArgs = [appendArgs, 0].concat(args); // create method call params Array.prototype.splice.apply(callArgs, applyArgs); // splice them in } return method.apply(obj || window, callArgs); }; }, // defer是createDelegate的延迟版,可以延迟执行 defer : function(millis, obj, args, appendArgs){ var fn = this.createDelegate(obj, args, appendArgs); if(millis){ return setTimeout(fn, millis); } fn(); return 0; }, // 这个函数可以在你执行完原函数以后,执行一下自定义的函数。 createSequence : function(fcn, scope){ if(typeof fcn != "function"){ return this; } var method = this; return function() { var retval = method.apply(this || window, arguments); fcn.apply(scope || this || window, arguments); return retval; }; }, // 这个就是完全的函数代理了,和Spring的AOP是一个概念。 createInterceptor : function(fcn, scope){ if(typeof fcn != "function"){ return this; } var method = this; return function() { fcn.target = this; fcn.method = method; if(fcn.apply(scope || this || window, arguments) === false){ return; } return method.apply(this || window, arguments); }; } });  
七、扩展原生String Ext.applyIf(String, { // 转义单引号和反斜杠 escape : function(string) { return string.replace(/('|\\)/g, "\\$1"); }, // 这个函数是对数组进行空格补位 leftPad : function (val, size, ch) { var result = new String(val); if(!ch) { ch = " "; } while (result.length < size) { result = ch + result; } return result.toString(); }, // 这个是格式化字符串,很多语言都有的功能 format : function(format){ var args = Array.prototype.slice.call(arguments, 1); return format.replace(/\{(\d+)\}/g, function(m, i){ return args[i]; }); } }); // 切换值函数 String.prototype.toggle = function(value, other){ return this == value ? other : value; }; // 去空格函数 String.prototype.trim = function(){ var re = /^\s+|\s+$/g; return function(){ return this.replace(re, ""); }; }();  
八、扩展原生Number Ext.applyIf(Number.prototype, { // 对当前数值取一个范围 constrain : function(min, max){ return Math.min(Math.max(this, min), max); } });  
九、扩展原生Array Ext.applyIf(Array.prototype, { indexOf : function(o){ for (var i = 0, len = this.length; i < len; i++){ if(this[i] == o) return i; } return -1; }, remove : function(o){ var index = this.indexOf(o); if(index != -1){ this.splice(index, 1); } return this; } });  
十、扩展原生Date // 返回一个时间差 Date.prototype.getElapsed = function(date) { return Math.abs((date || new Date()).getTime()-this.getTime()); };  
 

相关推荐: 利用多叉树实现Ext JS中的无限级树形菜单（一种构建多级有序树形结构JSON的方法） 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法） 多叉树及其应用：多叉树结合JavaScript树形控件实现无限级树形结构（一种构建多级有序树形结构JSON（或XML）数据源的方法） 无限极二叉树,数据结构,经典算法 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法） 利用多叉树实现Ext JS中的无限级树形菜单（一种构建多级有序树形结构JSON的方法）...
推荐群组: EXT
更多相关推荐
EXT 多叉树 无限级树形菜单 多级树形结构JSON
利用多叉树实现Ext JS中的无限级树形菜单 （一种构建多级有序树形结构JSON的方法）                                                  
 
 
一、问题研究的背景和意义
目前在Web应用程序开发领域,Ext JS框架已经逐渐被广泛使用,它是富客户端开发中出类拔萃的框架之一。在Ext的UI控件中,树形控件无疑是最为常用的控件之一,它用来实现树形结构的菜单。TreeNode用来实现静态的树形菜单,AsyncTreeNode用来实现动态的异步加载树形菜单,后者最为常用,它通过接收服务器端返回来的JSON格式的数据,动态生成树形菜单节点。动态生成树有两种思路：一种是一次性生成全部树节点,另一种是逐级加载树节点（ 利用 AJAX ,每次点击节点时查询下一级节点 ）。对于大数据量的菜单节点来说,逐级加载是比较合适的选择,但是对于小数据量的菜单来说,一次性生成全部节点应该是最为合理的方案。在实际应用开发中,一般不会遇到特别大数据量的场景,所以一次性生成全部菜单节点是我们重点研究的技术点,本文就是介绍基于Ext JS的应用系统中如何将数据库中的无限级层次数据一次性在界面中生成全部菜单节点（例如在界面中以树形方式一次性展示出银行所有分支机构的信息）,同时对每一个层次的菜单节点按照某一属性和规则排序,展示出有序的菜单树。
 
解决 Ext JS 无限级树形菜单的问题,可以拓展出更多的应用场景,例如树形结构表格TreeGrid,一次性生成树形表格,对树形表格进行完整分页,对表格列进行全排序 ；或者可以利用本文的思路扩展出其他的更复杂的应用场景。
 
先看两个图例,有个直观上的认识：
图一,银行分支机构树形结构菜单
 
图二,树形结构表格
 
 
二、详细设计方案
让我们先看一段代码片段：
文件一,branchTree.html （Ext树形控件页面）
  Ext.onReady( function(){ var tree = new Ext.tree.TreePanel({ height: 300, width: 400, animate:true, enableDD:true, containerScroll: true, rootVisible: false, frame: true, // getBranch.do请求服务器返回多级树形结构的JSON字符串 loader: new Ext.tree.TreeLoader({dataUrl:'getBranch.do'}), root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'}) }); tree.expandAll(); } );
 
 
文件二,branchTreeJSON.jsp （接收getBranch.do请求,返回无限级JSON字符串）
  <% // 读取银行分支机构的层次数据 List result = DataAccess.getBankInfoList(); // 将层次数据转换为多叉树对象（本文下面会详细介绍该数据结构的实现方法） Node root = ExtTreeHelper.createExtTree(result); %> [ <%=root.toString()%> ]
 
 
以上两个程序文件是一次性生成无限级树形菜单所必须的,其中最为关键的部分就是如何生成一个无限级的JSON字符串,返回给客户端的Ext树形控件。对于银行分支机构来说,需要返回类似如下的JSON串：
  { id: '100000', text: '廊坊银行总行', children: [ { id: '110000', text: '廊坊分行', children: [ { id: '113000', text: '廊坊银行开发区支行', leaf: true }, { id: '112000', text: '廊坊银行解放道支行', children: [ { id: '112200', text: '廊坊银行三大街支行', leaf: true }, { id: '112100', text: '廊坊银行广阳道支行', leaf: true } ] }, { id: '111000', text: '廊坊银行金光道支行', leaf: true } ] } ] }
 
 
同时还可能需要对树中每一个层次的节点按照某一属性（比如分支机构编号）进行排序,以展示出有序的树形菜单。
 
现在可以把问题概括为：
1、 把 数据库中的 层次数据转换成JSON格式的字符串
2、 对树中每一个层次的节点按照某一属性（比如分支机构编号）进行排序
 
下面介绍解决问题的思路：
在数据结构这门课中,我们都学过树 ,无限级树形菜单就可以抽象成一种多叉树结构,即每个节点下包含多个子节点的树形结构,首先就需要把数据库中的层次数据转换成多叉树结构的对象树,也就是构造出一棵多叉树。
有了数据结构,还要实现相应的算法,我们需要实现两种算法：
1、兄弟节点横向排序算法,对隶属于同一个父节点下面的所有直接子节点按照某一节点属性和规则进行排序,保持兄弟节点横向有序；
2、先序遍历算法,递归打印出无限级JSON字符串。
 
概括起来分为三步：
1、 构造无序的多叉树结构
2、 实现兄弟节点横向排序方法
3、 实现先序遍历方法,打印出JSON字符串
 
如图所示：
 
 
 
 
 
三、源代码实现（Java语言版）
实现这样一颗树,需要设计三个类：树类（MultipleTree.java）、节点类（Node.java）、孩子列表类（Children.java）；为了方便演示,还需要构造一些假的层次数据,因此还需要建一个构造假数据的类（VirtualDataGenerator.java）,以下代码拷贝出来之后可直接运行测试：
  package test; import java.util.ArrayList; import java.util.Comparator; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import java.util.Set; import java.util.Collections; /** * 多叉树类 */ public class MultipleTree { public static void main(String[] args) { // 读取层次数据结果集列表 List dataList = VirtualDataGenerator.getVirtualResult(); // 节点列表（散列表,用于临时存储节点对象） HashMap nodeList = new HashMap(); // 根节点 Node root = null; // 根据结果集构造节点列表（存入散列表） for (Iterator it = dataList.iterator(); it.hasNext();) { Map dataRecord = (Map) it.next(); Node node = new Node(); node.id = (String) dataRecord.get("id"); node.text = (String) dataRecord.get("text"); node.parentId = (String) dataRecord.get("parentId"); nodeList.put(node.id, node); } // 构造无序的多叉树 Set entrySet = nodeList.entrySet(); for (Iterator it = entrySet.iterator(); it.hasNext();) { Node node = (Node) ((Map.Entry) it.next()).getValue(); if (node.parentId == null || node.parentId.equals("")) { root = node; } else { ((Node) nodeList.get(node.parentId)).addChild(node); } } // 输出无序的树形菜单的JSON字符串 System.out.println(root.toString()); // 对多叉树进行横向排序 root.sortChildren(); // 输出有序的树形菜单的JSON字符串 System.out.println(root.toString()); // 程序输出结果如下（无序的树形菜单）（格式化后的结果）： // { // id : '100000', // text : '廊坊银行总行', // children : [ // { // id : '110000', // text : '廊坊分行', // children : [ // { // id : '113000', // text : '廊坊银行开发区支行', // leaf : true // }, // { // id : '111000', // text : '廊坊银行金光道支行', // leaf : true // }, // { // id : '112000', // text : '廊坊银行解放道支行', // children : [ // { // id : '112200', // text : '廊坊银行三大街支行', // leaf : true // }, // { // id : '112100', // text : '廊坊银行广阳道支行', // leaf : true // } // ] // } // ] // } // ] // } // 程序输出结果如下（有序的树形菜单）（格式化后的结果）： // { // id : '100000', // text : '廊坊银行总行', // children : [ // { // id : '110000', // text : '廊坊分行', // children : [ // { // id : '111000', // text : '廊坊银行金光道支行', // leaf : true // }, // { // id : '112000', // text : '廊坊银行解放道支行', // children : [ // { // id : '112100', // text : '廊坊银行广阳道支行', // leaf : true // }, // { // id : '112200', // text : '廊坊银行三大街支行', // leaf : true // } // ] // }, // { // id : '113000', // text : '廊坊银行开发区支行', // leaf : true // } // ] // } // ] // } } } /** * 节点类 */ class Node { /** * 节点编号 */ public String id; /** * 节点内容 */ public String text; /** * 父节点编号 */ public String parentId; /** * 孩子节点列表 */ private Children children = new Children(); // 先序遍历,拼接JSON字符串 public String toString() { String result = "{" + "id : '" + id + "'" + ", text : '" + text + "'"; if (children != null && children.getSize() != 0) { result += ", children : " + children.toString(); } else { result += ", leaf : true"; } return result + "}"; } // 兄弟节点横向排序 public void sortChildren() { if (children != null && children.getSize() != 0) { children.sortChildren(); } } // 添加孩子节点 public void addChild(Node node) { this.children.addChild(node); } } /** * 孩子列表类 */ class Children { private List list = new ArrayList(); public int getSize() { return list.size(); } public void addChild(Node node) { list.add(node); } // 拼接孩子节点的JSON字符串 public String toString() { String result = "["; for (Iterator it = list.iterator(); it.hasNext();) { result += ((Node) it.next()).toString(); result += ","; } result = result.substring(0, result.length() - 1); result += "]"; return result; } // 孩子节点排序 public void sortChildren() { // 对本层节点进行排序 // 可根据不同的排序属性,传入不同的比较器,这里传入ID比较器 Collections.sort(list, new NodeIDComparator()); // 对每个节点的下一层节点进行排序 for (Iterator it = list.iterator(); it.hasNext();) { ((Node) it.next()).sortChildren(); } } } /** * 节点比较器 */ class NodeIDComparator implements Comparator { // 按照节点编号比较 public int compare(Object o1, Object o2) { int j1 = Integer.parseInt(((Node)o1).id); int j2 = Integer.parseInt(((Node)o2).id); return (j1 < j2 ? -1 : (j1 == j2 ? 0 : 1)); } } /** * 构造虚拟的层次数据 */ class VirtualDataGenerator { // 构造无序的结果集列表,实际应用中,该数据应该从数据库中查询获得； public static List getVirtualResult() { List dataList = new ArrayList(); HashMap dataRecord1 = new HashMap(); dataRecord1.put("id", "112000"); dataRecord1.put("text", "廊坊银行解放道支行"); dataRecord1.put("parentId", "110000"); HashMap dataRecord2 = new HashMap(); dataRecord2.put("id", "112200"); dataRecord2.put("text", "廊坊银行三大街支行"); dataRecord2.put("parentId", "112000"); HashMap dataRecord3 = new HashMap(); dataRecord3.put("id", "112100"); dataRecord3.put("text", "廊坊银行广阳道支行"); dataRecord3.put("parentId", "112000"); HashMap dataRecord4 = new HashMap(); dataRecord4.put("id", "113000"); dataRecord4.put("text", "廊坊银行开发区支行"); dataRecord4.put("parentId", "110000"); HashMap dataRecord5 = new HashMap(); dataRecord5.put("id", "100000"); dataRecord5.put("text", "廊坊银行总行"); dataRecord5.put("parentId", ""); HashMap dataRecord6 = new HashMap(); dataRecord6.put("id", "110000"); dataRecord6.put("text", "廊坊分行"); dataRecord6.put("parentId", "100000"); HashMap dataRecord7 = new HashMap(); dataRecord7.put("id", "111000"); dataRecord7.put("text", "廊坊银行金光道支行"); dataRecord7.put("parentId", "110000"); dataList.add(dataRecord1); dataList.add(dataRecord2); dataList.add(dataRecord3); dataList.add(dataRecord4); dataList.add(dataRecord5); dataList.add(dataRecord6); dataList.add(dataRecord7); return dataList; } }
 
 
好了,通过上面的代码,就可以实现多叉树的兄弟节点横向排序和先序遍历了,实现了将层次数据转换为有序无限级JSON字符串的目的。
 
在实际的项目中,可以把上面的有效代码融入其中,或者在此基础上进行一些扩展：
1、 实现对指定层次的排序（例如只排序第一层的节点,或者只排序某一父节点下的所有子节点）
2、 遍历输出树形结构时可以加入判断条件过滤掉某些节点
3、 实现节点的删除功能
4、 在节点类中增加一个父节点的引用,就可以计算出某一节点所处的级别
5、 在不支持层次查询的数据库应用系统中使用该算法实现相同的效果
 
四、思考与总结
这篇文章的重点是如何构造有序的无限级的树形结构JSON字符串,一次性生成树形菜单,而不是利用AJAX的方式,反复向服务器端发送请求,一级接一级的加载树节点。
 
既然可以构造无限级的 JSON 字符串,那么也可以根据这个思路构造无限级的 XML 字符串,或者构造具有层次结构的 UL – LI 组合（用 UL - LI 来展示树形结构）,或者构造具有层次结构的 TABLE （用 TABLE 来展示树形结构）。 如下所示：
 
（1）XML层次结构
 
 
（2） UL - LI 层次结构
 

• 廊坊银行总行
• 廊坊分行
• 廊坊银行开发区支行
• 廊坊银行解放道支行
• 廊坊银行三大街支行
• 廊坊银行广阳道支行
• 廊坊银行金光道支行

 
 
（3）TABLE层次结构
 

廊坊银行总行

廊坊分行

廊坊银行开发区支行

廊坊银行解放道支行

廊坊银行三大街支行

廊坊银行广阳道支行

廊坊银行金光道支行

 
 
另外对 TreeGrid 树形表格也有一定的价值：
   1、   一次性构造树形表格,实现数据分级展示
   2、   通过更换比较器,实现对不同表格列的全排序 （ 全排序指的是对所有页的数据进行排序,而不是只对当前页的数据排序 ）
   3、   实现对树形表格的完整分页（每次分页时,只取固定数目的第一层节点,之后调用 toString 方法,展示出完 整条数的分级数据）



五、参考书籍
   1、Mark Allen Weiss,数据结构与算法分析（Java语言描述）
   2、Bruce Eckel,Thinking In Java Third Edition
   3、David Flanagan,JavaScript: The Definitive Guide, 5th Edition
   4、OCA Oracle Database 11g SQL Fundamentals I Exam Guide
 
 
六、联系方式
multipletree@163.com
 
 *
注：在另一篇文章《 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法） 》中,对代码进行了优化,去掉了Children类,
链接见：  http://www.iteye.com/topic/1122125  
 
 
 
 

相关推荐: javascript 父窗口（父页面）— 子窗口 (子页面)互相调用的方法 jquery-easyui中创建Window窗口 花瓣网方砖布局 图片内容无限加载 用户体验才是王道 打开新窗口并关闭当前的窗口的实现办法 打开新窗口的js代码 html css Div+Css控制网页排版小记. HTML5和CSS3新特性一览
推荐群组: EXT
更多相关推荐
PHP
利用CSS控制链接在新窗口中打开很简单,只需要定义一句CSS即可： .openInBlankWindow a:active {test:expression(target="_blank");}  
然后在某个容器（比如div/span）中使用：  
 
但是这样使用有个问题,就是这个CSS只在IE中有效,至少在Firefox/Opera中是无效的,其它的浏览器没有测试。不知大家是否有什么好办法,在不修改原来html的情况下,是链接在新窗口中打开。

表面上看起来和原型设计非常的相似,原型设计的目的是进行产品规划,面对的工程师和项目实施成员,甚至是boss,是产品经理一个很重要的工作。但是面向界面设计的目的是为了摸清用户的需求,用户不会去看更多的解释和文档。所以就会遇见上边的兄弟说的ui设计很大的难度,但是从项目整个风险来说降低了。

相关推荐: 区块（Block）数据绑定技术 方便使用 CMSPAD Console 对JavaScript脚本进行跟踪调试 ruby+flex实现天气预报 RIA编程-神奇的FLEX实战 CMSPAD支持Flex了！ 把PHP应用和Flex结合起来！ Flex 支持 chrome浏览器debug flex的使用实例
推荐群组: flex
更多相关推荐
PHP
1.3.2版开始,CMSPAD正式支持Flex,也就是说Flex程序可以远程调用CMSPAD的Portlet模块。下面咱们看看它是怎么做的：
 
这是后台的Portlet代码,Flex调用函数以 flex 开头,有一个参数（$params）用于传递远程Flex变量： "world"); } } ?>
 
首先,如果你是使用Flex Builder,需要先将CMSPAD包内的 kernel/lib/cmspad.swc 库导入到项目中,然后就可以通过使用 com.cmspad.Request 类来调用远程Portlet。 看看进行远程调用的Flex代码：
 
这样运行这个Flex应用程序并点击那个按钮就会看到：
 
 
此刻,用户就可以使用Flex很容易地调用CMSPAD的Portlet了。
 
CMSPAD项目地址： http://code.google.com/p/cmspad

相关推荐: 翻译：Appendix A：Introduction to Ruby 今天完成了一个较实用的android Gallery Demo 网络读取图片,定时切换,正反无限循环,图片满屏,遮罩标题文字,切换圆点显示,多线程控制 精通 JavaScript中的正则表达式 关于浏览器对于html的input标签中name的命名特殊字符处理(GET)与script+js跨域实现 深入剖析PHP输入流 php://input PHP+JavaScript+HTML变量之间赋值及传递 PHP输入流php://input 深入剖析PHP输入流 php://input与POST/GET的区别
推荐群组: EXT
更多相关推荐
PHP 当input 中的name值有"."这个符号时. 在PHP的传递中会把这个小圆点替换成"_"下划线.. 今天做项目时偶然把name的值放了小圆点测试出来的.

相关推荐: 关于REST一些最新的业界动态 Two extractors couldn't work together 求求你们,千万别再说自己是REST了 webservice入门到精通（备java基础,xml,javaee框架） XML从入门到精通（备java基础,javaee框架webservice必经之路） android基础知识10：webservice 02:REST C#/.Net企业级系统架构设计实战精讲教程 WebService之基于REST机制的实现实例（Java版）
推荐群组: HTML5
更多相关推荐
PHP REST是什么 REST是英文Representational State Transfer的缩写,中文翻译：表述性状态转移。 他是由Roy Thomas Fielding博士在他的论文 《Architectural Styles and the Design of Network-based Software Architectures》中提出的一个术语。
REST本身只是为分布式超媒体系统设计的一种架构风格,而不是标准.
Restful Web Service面向资源,不是面向动作(Action) REST风格Web Service报文格式 什么,你一点都不懂我说什么？那么先看看 Rest基本概念 有效的XML格式都可以说是Rest风格的报文。如YAHOO提供的Restful Web Service的一个例子 : http://api.search.yahoo.com/WebSearchService/V1/webSearch?query=%5C%22XML%20Query%5C%22&appid=YahooDemo 下面是访问后返回结果片断

Language that allows for flexible query facilities to extract data from real and virtual documents on the Web.

http://www.w3.org/XML/Query http://uk.wrs.yahoo.com/_ylt=A0Je5Vx_EWpHwV0AkC7dmMwF;_ylu=X3oDMTB2cXVjNTM5BGNvbG8DdwRsA1dTMQRwb3MDMQRzZWMDc3IEdnRpZAM-/SIG=11fuf4pkj/EXP=1198220031/**http%3A//www.w3.org/XML/Query www.w3.org/XML/Query 1198051200 text/html http://uk.wrs.yahoo.com/_ylt=A0Je5Vx_EWpHwV0AkS7dmMwF;_ylu=X3oDMTBwOHA5a2tvBGNvbG8DdwRwb3MDMQRzZWMDc3IEdnRpZAM-/SIG=16gufb4vc/EXP=1198220031/**http% 3A//66.218.69.11/search/cache%3Fei=UTF-8%26query=%255C%2522XML%2BQuery%255C%2522%26appid=YahooDemo%26u=www.w3.org/XML/Query%26w=%2522xml%2Bquery%2522%26d=DYOEo7XiP-1e%26icp=1%26.intl=us 58502

Don Chamberlin (XML Query WG), IBM Almaden Research Center, via http://www. ... has been developed by the W3C XML Query Working Group, which is part of the ...

http://www.w3.org/TR/xquery/ http://uk.wrs.yahoo.com/_ylt=A0Je5Vx_EWpHwV0Aky7dmMwF;_ylu=X3oDMTB2ZjQ4dDExBGNvbG8DdwRsA1dTMQRwb3MDMgRzZWMDc3IEdnRpZAM-/SIG=11g15fbj0/EXP=1198220031/**http%3A//www.w3.org/TR/xquery/ www.w3.org/TR/xquery/ 1169193600 text/html http://uk.wrs.yahoo.com/_ylt=A0Je5Vx_EWpHwV0AlC7dmMwF;_ylu=X3oDMTBwZG5hOWwzBGNvbG8DdwRwb3MDMgRzZWMDc3IEdnRpZAM-/SIG=16hn3aelo/EXP=1198220031 /**http%3A//66.218.69.11/search/cache%3Fei=UTF-8%26query=%255C%2522XML%2BQuery%255C%2522%26appid=YahooDemo%26u=www.w3.org/TR/xquery/%26w=%2522xml%2Bquery%2522%26d=YBKWrbXiP9TA%26icp=1%26.intl=us 525624 .... 下面是我使用CakePhp（一个PHP框架）在本机构建了一个rest服务, 当访问http://localhost/hostel/rest/countries/listing 时,得到下面的XML 830 831 .... 再次强调：Restful Web Service是一种风格,XML是任意的。不过最近好像出了WADL规范应用于Rest,好像WSDL规范SOAP一样,有空可以研究一下。 访问Restful Web Service(客户端代码) 再次确认,你理解了Restful?---风格,是一种风格,所以： Restful webservice客户端像解析一般的xml一样,获得Restful Web Service返回的XML流,用DOM/SAX/SimpleXML解析它均可。 这里使用php的SimpleXML API操纵前面提到Yahoo服务。 SimpleXML 扩展适合于操纵不很复杂或者嵌套不太深并且没有混合内容的 XML 文档。SimpleXML 比 DOM 更容易编码,就像名称所暗示的那样。如果处理的文档结构已知,就更加直观。libXML2 架构的互操作性大大增强了 DOM 和 SimpleXML 的灵活性,能够随意在 DOM 和 SimpleXML 之间交换导入格式。 下面的代码使用 SimpleXML 扩展解析查询结果。 attributes() as $name=>$attr) { $res[$name]=$attr; } //Use one of those "informational" elements to display the total //number of results for the query. echo "

The query returns ".$res["totalResultsAvailable"]." total results The first 10 are as follows:

"; //Unlike with DOM, where we loaded the entire document into the result object, // with SimpleXML, we get back an object in thefirst place, // so we can just use the number of results returned to loop through the Result members. for($i=0; $i<$res['totalResultsReturned']; $i++) { //The object represents each piece of data as a member variable //rather than an array element, so the syntax is a little bit //different from the DOM version. $thisResult = $xml->Result[$i]; echo "". $thisResult->Title.": "; echo $thisResult->Summary; echo "

"; } ?> 输出结果类似如下HTML效果： 写一个自己的Restful Web Service 别嫌我啰嗦,再一次地,前面说过：Restful Web Service是任意的有效的XML。所以使用php/jsp等服务器端技术,不需要任何框架都可以生成你想要得XML流。如此说来：这个Restful Web Service例子也没什么好写的喽 CakePHP是一个基于PHP的web框架,提供了更好的输出Restful风格的Web Service的能力。Y有兴趣请看官方Cakephp文档

相关推荐: 基于AJAX的应用程序架构汇总 交流我的Flex心得 RIAMeeting第三次活动记录 weborb .net 配置 flex学习笔记02 - WebORB 使用Flash Builder Data Plugin集成Flex与.NET(WebORB) Flex入门指南—PHP开发者 第3部 AJAX框架汇总
推荐群组: flex
更多相关推荐
PHP weborb为PHP提供了一套灵活的远程执行。用weborb , PHP开发者能整合Flex客户端应用程序与部署在PHP中的对象应用。 此外, weborb为PHP可以作为一个FLASH Remoting的网关,从而支持FLASH客户端应用。本指南提供了一个概述建立一个Flex客户利用Flex Builder的2.0和与之连接的同一个PHP应用。 结果该漫游是一个Flex应用沟通的一个PHP对象暴露透过weborb对于PHP 。 起步-weborb安装 确保下列软件安装在下载weborb对于PHP ： PHP5 or Zend Platform with PHP5 support或把php5的Zend平台,把php5支持 Any web server supporting PHP5 or later任何网络服务器支持把php5或更高版本 Flex Builder 创造了一个空的Flex应用。 下面的步骤将指导,通过建立一个Flex应用和连接,它与一个PHP对象。 配置-Flex Builder weborb对PHP产品分布载成品Flex应用演示flex能够weborb连接和远程调用。拷贝和粘贴的内容,该example.mxml文件位于 \Examples\SampleApp\ \实例\ sampleapp \ 进入mxml创建的文件Flex Builder。该守则在应用连接到一个PHP对象,并检索出一些基本的计算机的信息当物体正在运行。 配置-weborb Flex 应用需要申报的暴露班为"目的地" 。 目的地必须被配置在远程- config.xml文件位于\ \Weborb\WEB-INF\flex文件夹。应用在这个例子中使用了" infoservice "目标之定义为： InfoService Flex Builder中读取配置文件,在编译的时候。 重要提醒：当您编译项目在挠性建设者,一定要查找的目录挠性建设者地方编译客户端应用。这是非常重要的地方,一本weborb.php到同一个目录下。 weborb.php必须包含下列PHP代码： processRequest(); ?> 非常重要 ：第一线, 必须经过剪辑后,以该点至weborb目录,从产品分布。举例来说,看看weborb.php坐落于 / 控制台文件夹 运行Flex应用 :当你运行该应用程序在Flex建设者时,它会打开一个浏览器和负荷应用： http://localhost/Examples/SampleFlexToPHPProject.html http://localhost/examples/sampleflextophpproject.html 应用连接到后端服务后,启动或当用户点击"发送请求"按钮： 代码审查 Flex应用宣布一项远程对象使用RemoteObject API： remoteObject = new RemoteObject(); remoteObject.destination = "InfoServiceDestination"; remoteObject.getComputerInfo.addEventListener("result", onResult); remoteObject.addEventListener("fault", onFault); 通知目的地的名称相匹配的目的地输入远程- config.xml文件。 当用户点击'获得计算机信息'按钮时,下面的函数执行一个远程方法调用： private function getInfo():void { invokeButton.enabled = false; currentUserText.text = ""; processIdText.text = ""; osText.text = ""; phpVersionText.text = ""; remoteObject.getComputerInfo(); } 当调用响应的情况下,灵活调用响应处理器在标签。 响应处理器在举例中,填充的文本字段与现有的数据,在返回的对象： private function onResult(event:ResultEvent):void { var computerInfo:Object = event.result; currentUserText.text = computerInfo.currentUser; processIdText.text = computerInfo.phpProcessId; osText.text = computerInfo.operatingSystem; phpVersionText.text = computerInfo.phpVersion; invokeButton.enabled = true; } 源代码服务器端的对象是如下： class InfoService { public function getComputerInfo() { $compInfo = new ComputerInfo(); $compInfo->currentUser = get_current_user(); $compInfo->phpProcessId = getmypid(); $compInfo->operatingSystem = php_uname( 'a' ); $compInfo->phpVersion = phpversion(); return $compInfo; } } class ComputerInfo { public $currentUser; public $phpProcessId; public $operatingSystem; public $phpVersion; }

相关推荐: Java为什么不能动态部署,为什么没有PHP/RoR简单 PHP框架的繁荣是正确的发展方向吗？ JavaEye网站的RoR性能优化经验谈 LAMP部署-CentOS、Apache、MySQL、PHP配置优化 PHP+Laravel实战博客项目 微信网页授权开发-微信公众号开发10-微信开发php php程序内存优化之数组操作优化 PHP性能优化
推荐群组: D语言
更多相关推荐
PHP 首先我们了解一下我们的php程序是怎样执行的,首先他被编译为中间代码,然后中间代码被送入执行引擎执行,然后销毁。每个请求的中间代码在执行完之后被销毁,这样的好处在于他完全隔离了不同的请求,使内存使用率降低。但是这样的缺点也显而易见,因为他需要再重复请求一个界面的时候对一个代码连续编译两次,编译的中间代码没有一点复用性。我们拿ZPS来说事,看他能提供什么优化功能： 一, 自动优化 ,也就是我们的zend optimizer提供的功能,他可以对中间代码进行优化,这些优化是语言方面的,将效率低的转化为效率高的,但他的优化目标只限定在中间代码,因此不会影响你编写的源代码。这个能提高20%左右的性能。 二, 代码编译缓存 ,就是使中间代码更有复用性。因为他会把中间代码进行缓存,下次使用的时候就不需要编译了,这个有50%到300%的性能提升。 三, 动态内容缓存 ,也就是把php代码执行完之后生成的内容进行缓存,这个适用于幂等的请求,而且请求不会对服务器端的数据造成修改,而只是get数据内容。这个提升效果最大,但对于个性化的界面不太适合,您可以选择使用部分缓存的方式,但明显提高了复杂度。 四, 内容压缩 ：他主要是提高HTTP的传输效率,使传输量减少90%左右,但他也有牺牲,就是增加了两端（c/s）的计算量。但ZPS使用对压缩文件也进行缓存的方式来减少压缩所带来的性能影响。 另外就是细节方面的性能考虑： 1.对于require和include: 不是说使用上apc就一劳永逸了。 Include_once(),require_once()比include,require要慢,因此可以考虑将require_once()换成require(). 另外包含一个文件会增加许多内存使用,因此对于大的包含文件你应该考虑如何切割成多个小文件,因为opcode缓存只能优化加载时间,而不会减少内存使用大小。 2.少用define ,在类中使用const变量来代替,因为据说后者可以被opcode缓存,而前者不能。 3.使用C语言。很多人认为“你应该到达不到这种优化需求吧”,但是确实我在写一个推荐系统的时候遇到这个需求,如何在php中使用c来优化性能这个问题留给以后吧,等我研究明白了再贴。 4.使用面向过程代替面向对象。具体原因不知道为什么。另外 http://www.iteye.com/topic/143440 这篇文章中提到的”php的最佳实践就是数组编程”也很有新意,大部分也是基于性能的考虑。 另外一些小的优化技巧,我这里就不说了,看下面链接。 40条优化PHP代码的小提示： http://www.huomo.cn/archives/40_tips_for_optimizing_your_php_code.html php效率优化 http://cnhawkwing.iteye.com/blog/69100

相关推荐: JavaSE6.0 Web Service学习笔记 使用CXF生成的WSDL,如何才能带ws-security5 实战WebService I: XML-PRC篇(基于php) 实战WebService II: SOAP篇(基于php) 主题：实战WebService II: SOAP篇(基于php)
推荐群组: WebServices
更多相关推荐
PHP 概述（SOAP和XML-PRC比较） 在Web服务发展的初期,XML格式化消息的第一个主要用途是,应用于XML-RPC协议,其中RPC代表远程过程调用。在XML远程过程调用 (XML-RPC)中,客户端发送一条特定消息,该消息中必须包括名称、运行服务的程序以及输入参数。 　　XML-RPC只能使用有限的数据类型种类和一些简单的数据结构。人们认为这个协议还不够强大,于是就出现了SOAP——其最初的定义是简单对象访问协议。之后,大家逐渐意识到SOAP其实并不简单,而且也不需要必须使用面向对象语言,所以,现在人们只是沿用SOAP这个名称而已。 　　XML-RPC只有简单的数据类型集,取而代之,SOAP是通过利用XML Schema的不断发展来定义数据类型的。同时,SOAP也能够利用XML 命名空间,这是XML-RPC所不需要的。如此一来,SOAP消息的开头部分就可以是任何类型的XML命名空间声明,其代价是在系统之间增加了更多的复杂性和不兼容性。 　　随着计算机行业的觉醒,人们发现了基于XML的Web服务的商业潜力,于是,各家公司开始不断地发掘想法、观点、论据以及标准化尝试。W3C曾经设法以“Web服务活动”的名义来组织成果展,其中也包括实际做出SOAP的XML协议工作组(XML Protocol Working Group)。与Web服务有关的标准化成果(从某种程度上说与SOAP相关或者依赖于SOAP)的数量已经倍增了到了令人惊讶的程度。 　　最初,SOAP是作为XML-RPC的扩展而发展起来的,它主要强调的是,通过从WSDL文件中所获得的方法和变量名来进行远程过程调用。现在,通过不断进步,人们发现了更多的使用SOAP的方式,而不仅仅是采用“文件”方式——基本上是使用一个SOAP信封来传送XML格式化文件。无论如何,要掌握SOAP,了解WSDL所扮演的角色是最根本的。 SOAP数据包结构解析 SOAP的消息被称为一个SOAP Envelope,包括SOAP Header和SOAP Body。其中,SOAP Header可以方便的插入各种其它消息来扩充Web Service的功能,比如Security（采用证书访问Web Service）,SOAP Body则是具体的消息正文,也就是Marshall后的信息。 SOAP调用的时候,也就是向一个URL（比如 http://api.google.com/search/beta2 ）发送HTTP Post报文（根据SOAP规范,HTTP Get报文也可被支持）,调用方法的名字在HTTP Request Header SOAP-Action中给出,接下来就是SOAP Envelope了。服务端接到请求,执行计算,将返回结果Marshall成XML,用HTTP返回给客户端。 以下[是移动MISC接入]Wap1.6业务订购数据包样例 MISC1.6的业务订购关系同步的请求包 00110100037392 1.5.0 SyncOrderRelationReq 0 0011 400 0 2 00116000000286 2 00116000000286 SP 1 1 919102 0000000064 2 MISC1.6的业务订购关系同步的响应包： 00110100037392 1.5.0 SyncOrderRelationResp 0 实战SOAPI 现在做SOAP开发一般有三种方式选择 * PEAR自带的soap扩展, * PHP自带的SOAP扩展, * NuSOAP(纯PHP,似乎已经过时) 注：还有WSO2.org(关于WSO2.org可以考虑尝试一下) PHP 5 中新增了内置的 SOAP 扩展,我们称之为 ext/soap。它是作为 PHP 的一部分提供的,因此不需要下载、安装和管理单独的包。这是第一个用 C 而不是 PHP 为 PHP 编写的 SOAP 实现,因此作者声称它的速度要快得多。 因为新的扩展是 PHP 的完整组成部分之一,相关文档包含在 PHP 手册的 Function Reference 部分(php_soap.dll)。 SOAP 参考是以一个重要的免责声明开始的： 警告：该扩展是试验性的（EXPERIMENTAL）。本扩展的行为,包括关于本扩展的函数名和其他内容,在以后的 PHP 版本中随时可能改变,不另行通知。使用该扩展的风险自负。 警告看起来有点让人担心,但实际上这个扩展似乎得到了很好的支持。和任何新代码一样,该扩展也存在缺陷,但是报告的问题通常很快就能得到修正。在 PHP 站点上可以看到缺陷列表。我们估计,在将来的 PHP 版本中,该扩展将从试验性功能转为主流功能 一个访问.NET WEB服务的客户端例子 '12209'); $out=$objSoapClient->ValidateZip($param); $data=$out->ValidateZipResult; echo $data; ?> 运行后输出 在实验的过程当中,使用了一个抓包工具Wireshark来分析报文。Wireshark很不错,在Filter处设置ip.addr == 208.109.78.12(208.109.78.12 是 www.webservicemart.com 的IP),然后启动监控,可以分析上述调用过程中HTTP包是什么样的。 实战SOAPII 用PHP建立SOAP服务 建立soap_server.php（虚拟路径为:http://172.16.0.24/php/soap/soap_server.php） SOAP_1_2)); $server->setClass("math"); $server->handle(); ?> 注意几点：
math类是即将公开的webservice. 注$server→setClass,不是$server→addClass 用PHP客户端访问刚建立SOAP服务 div(8, 2); // will cause a Soap Fault if divide by zero print "The answer is: $result"; } catch(SoapFault $e) { print "Sorry an error was caught executing your request: {$e->getMessage()}"; } ?> 本质上,http://localhost/php/soap/soap_server.php?WSDL就是要访问到注释行所指的wsdl描述文件,所以这个WSDL文件必须事先生成。而对于其他语言如Java则可以动态生成。我目前的学习发现对于php自带的SOAP扩展要求这个WSDL文件必须事先生成好。 可以用ZendStudio生成静态的WSDL文件,此时用到math类的phpdoc作为生成WSDL的元数据。 用ZendStudio生成wsdl文件时,必须正确说明web服务目标地址,片断如下： ... .... 特别注意：我发现调用php webserver的方法和调用.net web服务的方法不一样。 调用.net service方法必须传入命名参数；而调用php web服务方法,一定不能传入命名参数,只能按顺序传入,为什么？这一点尤其要注意

相关推荐: RoR部署方案深度剖析 在lighttpd上安装rails后不能启动了.. 在Ubuntu下安装和配置Rails 3详解 (LightTPD + FastCGI) 追溯fastcgi之历史 PHP及mysql数据库常考面试题集锦 PHP+Apache+MySQL配置过程 PHP 面试总结（持续更新） --小丑 PHP7正式版测试,性能惊艳！
推荐群组: Jetty学习交流
更多相关推荐
PHP 在研究fastcgi的时候,我感觉有必要研究下fastcgi的历史。这样能够对fastcgi把握得更好一些。我想知道,fastcgi只是一个规范,open market提供了这个规范,他对这个规范的支持只是一些书面文件吗？有没有对这个规范进行完全实现？fastcgi是不是他提供的？在提供这个 fastcgi外,还提供了哪些对其他语言的支持？比如c/c++,是吗？他只是提供了一些库,就算对这些语言进行支持了,对吧？但是对于服务器和一些新兴的脚本,他没有提供支持,还需要那些服务器开发者自己编写fastcgi模块以支持fastcgi规范,比如apache和lighttpd的 mod_fastcgi模块,同时php支持者也必须自己开发fastcgi支持程序:php-cgi。是这样的吗？希望跟人探讨,对于这个的理解,能够让我明白fastcgi是如何一步一步开发并进入实用的,进而对fastcgi的基本原理有个全局的把握。

相关推荐: RoR部署方案深度剖析 JavaEye网站的RoR性能优化经验谈 linux上配置lighttpd+PHP+FastCGI实现web与应用分开 Lighttpd 配置fastcgi fastcgi + lighttpd的问题（附文章） lighttpd+fastcgi模块分析 Apache Nginx lighttpd HAProx Litespeed 缓冲原理解析fastcgi性能 Apache、nginx 、lighttpd
推荐群组: Python
更多相关推荐
PHP fastcgi specification:http://docs.google.com/Doc?id=dgf68zg4_224ch7p47dt fastcgi简介： http://docs.google.com/Doc?id=dgf68zg4_226ffwfbvcn lighttpd提供了多服务器之间实行负载均衡的功能,这个和单个服务器的负载均衡相比,优点在哪里？ 听说在fastcgi的1.3.14版本之后,adaptive process spawning功能就被取消了？为什么？是因为不稳定吗？lighttpd里面是不是有自带的process management,他能代替它实现相同的功能？ fastcgi中的各个role的执行先后顺序是什么？ 在filter role的解释中：“The FastCGI application filters the requested Web server file before sending it to the client.”,好像filter是在responder完成之后才执行的,比如对于.php的filter,在responder要将那些php文件发送到客户端之前由这个filter截获进行处理,客户端才能得到动态的页面。是这样的吗？ 配置过lighttpd服务器的请问一下,在server的配置中的mode和fastcgi规范里说的role有什么不同？

相关推荐: 与阳光相拥 不会后悔现在的选择！ 于北京之我的收获之旅 如果你也23岁（2） 带有Node,React和Redux 1的Retrogames库：服务器API和React前端 转载 ----MAVEN相关学习 Android - 收藏集（全了） 一个程序员的多年珍藏--收藏
推荐群组: IT80后
更多相关推荐
CSS HTML5 岁月,匆匆。白了父辈的发梢,在这岁月失去中,我庆幸来到了这,兄弟连PHP培训学校！每次老爸出门回到家里,总要先问我一句：“我看起来很老么？怎么总有人喊我老人家？”每当这个时候我都笑着说不老,但心中总有种想掉泪的感觉。老爸很早就退了休,但是还是常年在外地打工,只是到过年的时候才回家一次。上学的时候,总是缠着爸爸轻摇着他的手臂,多想他多陪陪我。年少不太懂事的我总是劝他不要出去打工,就说年纪都这么大了,又有退休工资拿,还独自一个人跑外面风吹日晒的图个什么？每当这个时候他总是微笑着摸着我的头,说为了给你攒学费呀。直到后来离开了象牙塔,工作了步入了社会。他还在外面闯,自认懂事了的我拿着同样的问题问他,他还是在回答,为了给你攒买房子的钱呀。但是在笑时,那圈起的皱纹,高起的颧骨刺得我的心都痛！于是也不再劝说,只是在那一刻在发誓,我要努力！努力的让赚钱的速度超过父母衰老的速度！用自己的双手去拼到自己的那一片天空！让父母不再操心,让他们过上他们应该拥有的幸福生活。 这时一个声音自心田响起！我努力的方向在哪里,又该如何去努力呢？我开始不断地问自己。所以在大学的四年中,学习了很多的方向,证书拿了不老少！毕业了,却发现自己陷入了迷茫。什么都只会那么一点,都没有学精,你有能力办到的别人也办的到甚至办的更好,而别人能办到的而你却不一定能办得到。就像名言说的那样机会只给有准备的人,而我一次次被更有准备的人挡在机会的门外。在经历了很多,也思考了很对之后,才明白需要为自己找准一个方向,然后朝着这个方向不断的走下去,哪怕一头撞到南墙也要把南墙撞到。就像那句网络名言,自己选的路跪着,也得走完！在网上看到,兄弟连的变态严管,让你破茧成蝶的广告语！顿时,身子都麻木了,这不就是我想要的吗？于是,我就背着行囊来到了北京,独自一人来到了LAMP兄弟连,在这里开启了为期五个月的php学习。我的那些朋友知道后,就有人问我你一个女生,咋就能对自己这么狠。更提醒我,你应该找个好人家直接嫁了就行了,瞎折腾啥,有瘾啊？这让我也陷入了思考。直到后来李明老师的一句话才让我明白这些问题都是那么的微不足道！我就是要选择自己所爱的,爱自己所选择的！ 弹指一瞬间如白驹过隙,我来兄弟连已有一个多月了,这样的一个大家庭氛围里,我不断的朝着好的方向改变着,改掉了很多不好的习惯。以前的自己,懒懒散散,有目标却不去实施,喜欢拖延,有解决不了的问题会搁置,早睡晚起,每天都不知道干了些什么就过去了。现在的自己,每天都会给自己制定学习任务,然后把任务一个个去完成,有了问题,自己解决不了的找老师找同学也要把它解决掉,每天早起晚睡,很清楚的知道自己每天都干了些什么,完成到什么样的一个程度,还有哪些急需解决的问题,还有哪些没有干完的,就像晓光老师学习要形成加速度！以前的自己,周围充斥着抱怨充斥着一些不好的情绪。而现在,在我的周围没有抱怨,只有埋头努力学习,没有负面情绪,全部都是正能量。你失落时,鼓励你,帮助你；你懈怠时,激励你,鞭策你；你得意忘形时,告诫你,提醒你。我相信,四个月后,因为有这些兄弟姐妹们,有这样的师资团队,有这样的一个兄弟连,我能努力地成长成一个更好的让自己满意自己,因为越努力,才会越幸运。 最后用我相信这首歌的歌词作为结束,我相信自己,我相信明天,我相信伸手就能够到天！ 兄弟会高洛峰免费收徒：http://www.hdb.com/manage/post_info 免费领取LAMP兄弟连原创PHP视频教程光盘/《细说PHP》精要版,详情咨询官网客服： http://www.lampbrother.net 【兄弟连IT教育】学PHP、Linux、HTML5、UI、Android等视频教程（课件+笔记+视频）！ 网盘教程下载：http://pan.baidu.com/s/1mg8ANMg

相关推荐: 最初的梦想 最初的梦想 来兄弟连的点滴—兄弟连IT教育 如果你也23岁（2） IT行业都有哪些职位,初学者（0基础,新人）该如何选择,才能够快速进入这个行业？... IT行业都有哪些职位？工作内容及升职路线 IT行业都有哪些职位 2014年Windows平台软件推荐：神器小工具（骨灰级
推荐群组: 老八婆的八卦堡
更多相关推荐
CSS HTML5 5月09号晚6点,刚跟宿舍的小伙伴打完篮球,穿着湿透了的衣服走在去教室的路上,微风轻轻掠过满是汗水的脸,此时此刻我的心情是那么的平静和舒畅。停下来想想过去,回忆起这两个多月兄弟连生活,渐渐的能感觉的到自己的改变,有种莫名的感动。在我决定来兄弟连之前 ,其实我很犹豫,不知道自己能不能学得会 ,不知道自己有没有勇气走完这段路,不知道还能不能扮演好一个学员的角色,太多的不知道,太多的不确定,太多的不自信。 许多人浪费了整整一生的时间,去等待适合他们心愿的机会 ,不去勇敢的做选择而是去等待和寻找,我不想做这样的人 ,我要紧紧抓住青春的尾巴,做自己想做的事。人们总是害怕改变 ,是因为改变会有陌生而新的开始往往就是陌生的。如果你想拥有从未拥有过的东西,那么你必须去做你从未做过的事情。我明白其中的含义所以来到了兄弟连这个大家庭 ,我为我自己感到高兴,因为我去做了。从现在开始勇敢的把自己交给未知的来。 2014年2月27号,北京终于告别连续十几天的雾霾。记得那天阳光是特别的灿烂,空气也是那么的清新,这天也是我来兄弟连的第一天,心情就像天气一样这么明媚。这就是我新的路程的起点,我对自己说给自己一个承诺,给自己一个坚持,让自己坚定的走下去。 来兄弟连我再也没有像以前在11点之前睡觉,跟以前相比睡眠时间也不充足,而且开始的时候学习节奏就很快,每天要接受新知识的同时还要掌握旧的知识,可能是因为没有完全适应或者从未接触过这方面的知识,所以再学习的过程中有点力不从心,有时候会心灰意冷,学习的脚步也越来越沉重。但是李明老师说过一句话,没有人在走下坡路的时候觉得累,只有处在上坡路的时候才觉得步伐的沉重,只要坚持下去就会到达人生的另一个高度。我觉得这句话说的真的太棒了！每当我抱怨自己为什么会这么笨的时候都会很2的用这句话来安慰自己鼓励自己……现在看来这种阿Q精神效果还不错,至少我没有痛苦的去渡过每一天,反而感觉到一种特别的充实和愉悦,我好像体会到什么样的感觉是才是痛苦并快乐着。 已经渡过两个多月的学习生活,我想我已经完全的融入这个充满正能量的lamp80,在这样的环境中学习某种程度上说是一种享受。同时结识了许多的可爱的小伙伴 ,在学习和生活中我们相互帮助和关心,每当我遇到问题的时候都会去请教一个人,他都会不厌其烦的为我决解问题,也许只有这里才能找得到这种无条件的帮助,才能体会到最纯真的友谊,我觉得这才是我最应该珍惜的。我特别的感谢他（其实就是我的组长）,也感谢这个能够给我动力的班级。 在以后的学习的过程中还会遇到各种问题,但是我已经做好准备去解决去克服,我知道往往成功更容易光顾磨难和艰辛,只有经过泥泞的道路才会留下脚印。所以这段5个月的马拉松每一天都是一种坚持与磨练,我不去想我离目标有多远,我只要做好每一天,一步一步的走下去…… 最后我想说的是我很爱这个班级,很爱我们组！希望我们都能用一种愉的心态去面对今后的学习和生活,让我们肩并肩为心中目标一起加油吧! 兄弟会高洛峰免费收徒：http://www.hdb.com/manage/post_info 免费领取LAMP兄弟连原创PHP视频教程光盘/《细说PHP》精要版,详情咨询官网客服： http://www.lampbrother.net 【兄弟连IT教育】学PHP、Linux、HTML5、UI、Android等视频教程（课件+笔记+视频）！ 网盘教程下载：http://pan.baidu.com/s/1mg8ANMg

相关推荐: 高洛峰收徒第三期！你值得拥有-兄弟连IT教育 兄弟连IT教育与LUPA签约 开创PHP培训新纪元 兄弟会开创新教育模式,打造高端IT人才培养基地 HTML5+CSS3+JavaScript学习笔记 你需要了解的 Chrome 45 的改变-兄弟连IT教育 Html5、CSS、JavaScript小知识---ios 前端必看的8个HTML+CSS技巧 《Web前端设计与开发》学习笔记（HTML+CSS+JavaScript+HTML5+jQuery）
推荐群组: 电脑DIY
更多相关推荐
JavaScript CSS HTML5 兄弟连IT教育：• 9年培养了近2万名程序员 • 收获了包括竞争对手在内良好口碑 • 成为地球上最大的PHP培训机构 • 对教育有了较为深刻的理解 现在还能干点啥NB的事情呐？——高洛峰收徒第三期！ 师徒制 加入【高老师收徒】要拜师,师傅手把手带你。 直到出徒并掌握真正的本领。 没有任何代沟,有困难直接向师傅开口。 你在未来的工作中遇到困难,师傅都会协助你解决。 纯免费 学习不收费,学完也不收费。 真正的一分钱不要,就是这么任性。但也不是谁想来就来的,需通 过严格的测试,才会成为兄弟会的一员。 收徒资格 • 相关工作在一年以上,有一定的技术基础,通过技术测试。 • 精力充沛、脑子清晰、对未来有着强烈渴望。 • 肯吃苦、人品好、服从安排。 • 年龄在20到35岁之间,男女不限,一定要身体健康。 • 学历不限自我管理严格、自学能力强、有灵气。 培养体系 第一阶段：强化技术功底 第二阶段：主攻一个学科 第三阶段：讲师项目OR外包项目 高洛峰收徒第三季 一个免费的高端技术培养基地已经诞生！ 只为等你的加入！ 兄弟会高洛峰免费收徒：http://www.hdb.com/manage/post_info 免费领取LAMP兄弟连原创PHP视频教程光盘/《细说PHP》精要版,详情咨询官网客服： http://www.lampbrother.net 【兄弟连IT教育】学PHP、Linux、HTML5、UI、Android等视频教程（课件+笔记+视频）！ 网盘教程下载：http://pan.baidu.com/s/1mg8ANMg

相关推荐: bootstrap模态弹出框 Bootstrap 教程 介绍一个jQuery的Dialog插件 Bootstrap速成实战 Bootstrap开发框架视频教程 Bootstrap 导入插件 HTML5开发基础培训（包含jquery、css、javascript、bootstrap）
推荐群组: Groovy on Grails
更多相关推荐
JavaScript CSS HTML5 u=2721599714,2937226223&fm=21&gp=0导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。 一次性导入： Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js（压缩版本：bootstrap.min.js）。 具体使用如下（或见右侧代码编辑器28-29行）： 特别声明：jQuery版本库也可以加载你本地的jQuery版本。 单独导入： 为方便单独导入特效文件,Bootstrap V3.2中提供了12种JavaScript插件,他们分别是： ☑ 动画过渡（Transitions）:对应的插件文件“transition.js” ☑ 模态弹窗（Modal）:对应的插件文件“modal.js” ☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” ☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js” ☑ 选项卡（Tab）：对应的插件文件“tab.js” ☑ 提示框（Tooltips）：对应的插件文件“tooltop.js” ☑ 弹出框（Popover）：对应的插件文件“popover.js” ☑ 警告框（Alert）：对应的插件文件“alert.js” ☑ 按钮（Buttons）：对应的插件文件“button.js” ☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js” ☑ 图片轮播Carousel：对应的插件文件“carousel.js” ☑ 自动定位浮标Affix：对应的插件文件“affix.js” 上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。 动画过渡（Transitions） 这一小节我们先来讲“动画过渡（Transitions）”这个插件的使用,源文件：transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法： ☑ 调用统一编译的bootstrap.js； ☑ 调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）。 transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果。 默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果： ☑ 模态弹出窗（Modal）的滑动和渐变效果； ☑ 选项卡（Tab）的渐变效果； ☑ 警告框（Alert）的渐变效果； ☑ 图片轮播（Carousel）的滑动效果。 “模态弹出窗（Modal）的滑动和渐变效果”源代码例子。 点击我

相关推荐: [转载]13个在线web2.0风格生成器 10个顶级的CSS3代码生成器-兄弟连IT教育 你应当了解的几个CSS3新技术 基于HTML5、JavaScript和CSS3的网页开发应用技术的网页 （近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备 响应式Web设计：HTML5和CSS3实战（读书笔记） HTML5 + CSS3面试题整理 快速上手Vue（适合懂基础html、css和js的人）
推荐群组: 代码生成器
更多相关推荐
JavaScript CSS HTML5 屏幕快照 2015-11-25 上午8.27.56HTML5和CSS3是一入门就能用的最好的语言,最简单同时也最好的的方式就是直接开始做！那么生成器就在自动生成代码时扮演者重要角色,它们非常适用于那些要做很多重复性工作的开发人员和设计人员,生成器可以帮他们解决这些繁琐的工作。在本文中,我们精心挑选了一些经验丰富开发人员和设计人员常用HTML5、CSS3代码生成器。 HTML5代码生成器 网上有五六种可以生成优质代码的HTML5生成器,其中的真谛是HTML5样板文件,我们不要自以为然的把样板文件当成是生成器,虽说这样,大多数开发者还是把它当作是他们第一个网站的模板。回到主题,要找到一个好的HTML5生成器并不是那么容易的事,因为网上有成千上万的网站提供各种各样的代码生成器。正因为如此,我们经常会被搞的稀里糊涂。不过,我们还是设法找到了一些比较好的生成器在本文中分享给大家。 Shikiryu HTML5生成器 Shikiryu HTML5生成器可以让你为应用程序添加一个中介器,而且很多人都喜欢这么用。你可以在模板里面增加特性和修改布局。事实上,这个是非常实用的。开发人员更钟爱这个生成器,因为相比其他的生成器,这个语义性更强,更易懂。 Initializr生成器 如果你要新建一个以HTML5样板文件为基础的项目,这将是你要开始你项目的好工具。它可以生成一个简洁的可自定义的模板。当你从各式各样的框架和类库中选择或是自定义模板时,模板就会以压缩文件的格式下载下来,然后你就可以拿这些代码来设计你的网站了。 Quackit HTML5生成器 Quackit 不仅可以给你提供一系列的代码,还允许你输入你的所有信息。这对初学者非常有帮助。所以,如果一开始你学的是CSS和HTML,你就可以用这个生成器来简化你的工作任务了。这些生成器可以说是非常棒的,因为它们专注于圆角边框,阴影,颜色渐变以及和html5模板的设计。 Modernizr生成器 Modernizr是一个开源的脚本类库,它可以帮助你建立HTML5和CSS3来使你的网站更强大。这样你就可以创建一些很好的,而且可以完美运行你代码的网站,不管用户用的是什么样的浏览器或是什么样的设备,都能优雅的展现。 CSS 代码生成器 CSS3 Maker 你可以很容易在网上找到这个生成器。一旦你开始用这个生成器,我相信你一定会完全依赖它的。有了它,你可以做很多动画、自定义字体、文本滚动、盒子模型阴影、圆角边框、文字阴影、过渡、渐变等等方面的效果。 me 个人而言,我是很喜欢这个生成器, CSS3.me是由设计师Eric Hoffman设计出来的。它使用起来很简便,是一个轻量级的、个性化而又功能强大的生成器。你可以用它来设置透明度、下拉阴影,改变和设置圆角边框,增加渐变效果等等。 CSS3-Tricks 按钮生成器 这是一个很经典古老的按钮生成器,它是非常线性的,而且没有图形界面。你可以在你的项目中用它来生成没有任何效果的按钮。 图片边框和圆角边框生成器 1.圆角边框生成器（Border-Radius） 这是个非常好的、轻量级的工具,主要拿来设置边角的圆角边框。一旦完成了边角设置,就可以在浏览器上检查你想要包含的前缀,这些都是已经完成了的。是个界面很简洁友好的生成器。 2.图片边框生成器（Border-Image) 假如你要画一个箭头或是一个三角形时,想让生成器把它平铺到你的网站边框或者是元素边框。这是最好用的图片边框生成器,当它要复制图片去找到最合适的边框样式时候。也就是说,届时,你就可以操作设置它的大小、偏移量,可以平铺这张图片等等。开发者经常喜欢拿它来设置背景。 CSS3渐变效果生成器 Color Zilla Gradient 生成器 此编辑器绑定了非常多的特性,用起来也非常容易。你可以单单稍微移动一下画笔就可以观察到他们的变化。它也可以在浏览器上直接使用,非常适合在网页上开发的开发人员和设计人员。 @fontface 生成器 这个生成器可以让你上传网页上的字体或是系统里面的字体。然后生成一个可以拿来用的输出文件。这个生成器给字体属性生成了一个CSS文件,然后字体就可以显示在HTML文件里了。这是一个非常好的检查字体工具,尤其是你没有足够的时间去创建一个使用许多重复性字体的完整的网站时候。 CSS3下拉阴影生成器 Webestools 阴影生成器 如果你想要对下拉阴影效果有更深、更具体的运用,这个生成器是我最强烈推荐的。因为它自带调节栏,外部阴影,内部阴影的设置,还可以设置阴影的颜色,偏移量和很多你意想不到的炫酷效果。 HTML5与CSS3相互协调使用,可以轻松提供给你最好的编码技术。你可能经常要找可以减少你工作量的工具,这样你就可以把更多精力放在主要工作上,就不用花那么多精力在一下繁琐的小事上,像按钮或盒模型的样式。网上有大把你可以用的工具,以上列出的只是最常用的代码生成器。不过,这些工具好不好,就看你对它标准是怎样的了。希望本文对你有意想不到的帮助！

相关推荐: Bootstrap导入JavaScript插件 介绍一个jQuery的Dialog插件 坑爹呀！flex4中的css写法 bootstrap精讲 Bootstrap 模态弹出框（Modals） Bootstrap导入JavaScript插件 Bootstrap基础-模态弹出框 Bootstrap弹出模态框的运用
推荐群组: wicket
更多相关推荐
JavaScript CSS HTML5 这一小节我们先来讲解一个“模态弹出框”,插件的源文件：modal.js。右侧代码编辑器（30行）就是单独引入 bootstrap 中发布出的“modal.js”文件。 样式代码： ☑ LESS版本：modals.less ☑ Sass版本：_modals.scss ☑ 编译后的Bootstrap：对应bootstrap.css文件第5375行～第5496行 在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片。如下图所示： mii 模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分： ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮 模态弹出窗的结构如下： 弹出窗的主体样式实现： 但是对于一个模态弹出窗而言,modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。 /*bootstrap.css文件第5412行～第5423行*/ .modal-content { position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); } 除此之外,modal-content中的modal-header、modal-body和modal-footer三个部分样式设置： /*bootstrap.css文件第5441行～第5461行*/ .modal-header { min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #e5e5e5; } .modal-header .close { margin-top: -2px; } .modal-title { margin: 0; line-height: 1.42857143; } .modal-body { position: relative; padding: 15px; } .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } 这三个部分主要控制一些间距的样式。而modal-footer都是用来放置按钮,所以底部还对包含的按钮做了一定的样式处理。 /*bootstrap.css文件第5462行～第5471行*/ .modal-footer .btn + .btn { margin-bottom: 0; margin-left: 5px; } .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .modal-footer .btn-block + .btn-block { margin-left: 0; } 模态弹出框--实现原理解析（一） 实现原理解析： bootstrap中的“模态弹出框”有以下几个特点： 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮,在全屏状态下,模态弹出窗宽度是自适应的,而且modal-dialog水平居中。 3、当浏览器视窗大于768px时,模态弹出窗的宽度为600px。 固定在浏览器(源代码)实现： /*bootstrap.css文件第5379行～第5389行*/ .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } 水平居中(源代码)实现： /*bootstrap.css文件第5407行～第5411行*/ .modal-dialog { position: relative; width: auto; margin: 10px; } 当浏览器视窗大于768px时,模态弹出窗的宽度为600px（源代码）实现： /*bootstrap.css文件第5479行～第5491行*/ @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); } .modal-sm { width: 300px; } } 模态弹出框--实现原理解析（二） 蒙板样式实现： 大家或许注意到了,在做模态弹出窗时,底部常常会有一个透明的黑色蒙层效果： 在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”,只不过他默认情况下是全屏黑色的： /*bootstrap.css文件第5424行～第5432行*/ .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } 同样,给其添加了一个过渡动画,从fade到in,把opacity值从0变成了0.5。上图展示的就是in状态下的效果： /*bootstrap.css文件第5433行～第5440行*/ .modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; } .modal-backdrop.in { filter: alpha(opacity=50); opacity: .5; } 两种尺寸选择： 除此之外,Bootstrap框架还为模态弹出窗提供了不同尺寸,一个是大尺寸样式“modal-lg”,另一个是小尺寸样式“modal-sm”。其结构上稍做调整：