第一篇:编写高质量代码--Web前端开发修炼之道(写写帮推荐)
ajax是什么 ? ① ajax(asynchronouse javascript and xml)异步的javascript 和 xml ② 是7种技术的综合,它包含了七个技术(javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一个粘合剂, ③ ajax是一个与服务端语言无关的技术.即可以使用在(php/java ee/.net网站/ asp)④ ajax可以给客户端返回三种格式数据(文本格式,xml , json格式)⑤ 无刷新数据交换技术有以下: flash, java applet, 框架, iframe, ajax)
ajax 的运行原理分析
看一个需求:
ajax在什么地方用的多 动态加载数据,按需取得数据。【树形菜单、联动菜单.../省市联动】 2 改善用户体验。【输入内容前提示、带进度条文件上传...】 电子商务应用。【购物车、邮件订阅...】 访问第三方服务。【访问搜索服务、rss阅读器】 5.数据的布局刷新
经典的案例
使用ajax与服务器通信的的步骤 ① 创建一个XMLHttpRequest对象 ② 创建url,data,通过 xmlHttpRequest.send()③ 服务器端接收 ajax的请求,做相应处理(操作数据库),然后返回结果(echo 语句)④ 客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据,然后就完成局部刷新当前页面任务
1.使用 ajax完成用户名的验证
register.php
第二篇:Web前端代码规范
龙图教育,全球游戏50强教育品牌
www.xiexiebang.com
Web前端代码规范
此项目用于记录规范的、高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范。
前端普适性规范 黄金定律
永远遵循同一套编码规范,可以是这里列出的,也可以是你自己总结的。如果你发现本
规范中有任何错误,敬请指正。
不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。
项目命名
项目名全部采用小写方式,以中划线分隔,禁止驼峰式命名。比如:my-project-name 文件命名
文件命名参照上一条规则,多个单词组成时,采用中划线连接方式,比如说: error-report.html 有复数结构时,要采用复数命名法,比如说: scripts, styles, images, data-models
龙图教育,全球游戏50强教育品牌
www.xiexiebang.com
文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成,禁止包含特殊符号,比如空格、$等
为更好的表达语义,文件名使用英文名词命名,或英文简写。
不允许命名带有广告等英文的单词,例如ad,adv,adver,advertising,防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。
index.shtml 引导页&首页 main.shtml 首页
download.shtml 下载页面 act.html 活动列表页面 video.html 视频 cdkey.html CDKEY页面 base.css 基本样式 layout.css 框架布局 module.css 模块样式 global.css 全局样式 font.css 字体样式 index.css 首页样式 link.css 链接样式 print.css 打印样式
龙图教育,全球游戏50强教育品牌
www.xiexiebang.com
HTML 规范
语法
使用四个空格的缩进,这是保证代码在各种环境下显示一致的唯一方式。
嵌套的节点应该缩进(四个空格)。
在属性上,使用双引号,不要使用单引号。
不要在自动闭合标签结尾处使用斜线-HTML5 规范 指出他们是可选的。
不要忽略可选的关闭标签(例如,和
第三篇:WEB前端开发经验总结
ASP.NET前端开发经验总结
通过此次大作业的设计到完成,我负责的是web前端的开发,经过此次作业和结合W3C上的自学,我渐渐有了一些对前端开发的小小经验(仅为个人意见)。WEB标准是什么?
说是WEB标准,不过我这里主要是对HTML5 和 CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了,“WEB标准”是一系列标准的总称,包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下,WEB标准不是我们所说的DIV+CSS。刚刚上面提到了――DIV+CSS,这里要说明下,这样说其实是不正确的。DIV+CSS准确的说法(个人的理解)应该是:采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法,DIV应该指的是HTML标签,而CSS显示是指的CSS样式表了。
采用WEB标准开发的好处
那么W3C为什么会推荐这样的页面制作方法呢?下面我们就简单的看看采用WEB标准开发(个人理解的)相对以前TABLE布局的优势有哪些?
1、节约运营成本
看看我们的WEB标准制作方法是如何做到的?
采用WEB标准制作,我们可以做到表现很形式的分离,我们用XHTML来表现(数据),用CSS来控制(页面元素呈现的)形式。写的好的页面,XHTML代码中基本上都是用户要看的数据,还其他修饰性的东西,全部由我们的CSS来控制。这样一来我们的(XHTML)页面的体积就大大减小了,这样你在带宽上的费用就会大家降低了,这个怎么降低的,你可以想象一下,YAHOO的首页小1K,100W个人一起访问,那么带宽节约了多少?而且可以更充分的利用带宽。
而我们的CSS控制了,所有的页面元素的样式,现在想改网站的整体风格,你只需要花几分钟修改一下一个CSS文件,就可以轻松搞定了。维护的成本也下来了,省了不少钱了吧?还有,你开这个页面的速度会快很多啊,一个让你等半分钟的页面,除非里面的信息对你很有用,不然我们大家基本都没有太多的时间去用来等待的。
2、对用户友好更友好,且有机会获得更多的用户 现在来说说用户友好。首先我想把我们的用户来分下类。第一类:普通用户(每个访问我们网站的人); 第二类:搜索引擎;
采用WEB标准开发的页面,结构清晰,页面体积小,浏览器兼容性好。普通用户访问的时候,页面打开速度快,而且不管用户使用那种浏览器,都能够正常访问(显示)页面,且页面的结构清晰,要找的数据可以很方便的浏览到。
而对搜索引擎来说,一个好的采用WEB标准开发的页面,都是做过SEO优化的,它访问起来很友好,很容易理解你的页面中哪里是标题(H1~H6标签),哪里是段落(p标签),哪里是段落里要强调的内容(strong标签)等,它可以很容易的分析出来。而一个SEO好的站点,大家都知道,被搜索引擎收录的机会更多,这个也意味着您的网站会被更多的普通用户访问到,给你的站点带来更多的用户。
一个能帮我们省下大笔费用,提高工作效率。同时又能够提高页面浏览速度,对用户友好,甚至能够不花钱宣传,就能给你带来更多用户的技术。你说你会不会去使用它?这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可,所以现在需要学习WEB标准啊。合理的布局
前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西,都是我做了合理布局的结果。而且我个人觉得,我们采用WEB标准制作的一切都是从这个知识点开始的,所以我这里就先来说这个话题。
也许有人会问,怎样的一个页面,才算是合理的布局的呢?这个问题问题问得好,也是我们大家刚开始学用WEB标准的问得最多的问题之一,我也曾经常被这个问题所困扰,这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前,我们还是用个实例来讲解会更直观些。先来看看这个图片:
不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局。
这是此次实验中customer(前端的一项)部分的完整代码:
<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Customer.aspx.cs” Inherits=“Customer” %> <%@ Register Src=“Controllers/Bottom.ascx” TagName=“Bottom” TagPrefix=“uc4” %> <%@ Register Src=“Controllers/Top.ascx” TagName=“Top” TagPrefix=“uc1” %> <%@ Register Src=“Controllers/Left.ascx” TagName=“Left” TagPrefix=“uc2” %>
” name=“description”/> ” name=“keywords” />