随笔分类 - 前端技术
Javascript/jQuery/Ajax/XHTML/CSS
摘要：JS只是一门支持面向对象编程的语言，通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚。 其实通俗的讲类就是对象的模板，为了增强JS的OO特性，受mootoos框架启发我们可以使用一个JSON对象来描述这个对象的模板。在这个模板中我们可以模拟实现私有成员，受保护成员，静态成员。 这是一个在JS中模拟的类定义语法，代码中Class是一个自定义函数，它接受两个参数，第一个参数是类名、第二个参数是一个JSON用来一个对象的模板。在这个JSON对象中其中字段 "extend"，,&quo
阅读全文
摘要：图片减速度滚动,一般用于产品的展示效果。作为前端，互联网上一些常见效果都要尝试去实现，不能因为公司用不到就不做。
阅读全文
摘要：电子商务网站经常用到简单模仿一下,用得着的点击"html"选项卡可以复制源码当鼠标移动到缩略小图上时，在它上面显示半透明的放大蒙板并计算其位置，移开时隐藏半透明的放大蒙板 鼠标指针移动到放大蒙板的中心才会开始移动蒙板，半透明蒙版位置计算：鼠标指针当前位置 - 图片的位置 - 蒙版的宽度/2。 根据比例计算出大图的偏移演示代码View Code <!DOCTYPE html><html><head><meta charset="gb2312" /><title>放大镜</title>&
阅读全文
摘要：有效的团队协作开发，可以提高工作效率。但在实际的协作开发中情况并非总是这样一帆风顺，最常见的一种情况是当大家都完成各自负责的部分后需要进行集成时往往会让我们大费周章。如过您也有类似烦恼，下面是我对如何改善这一状况的思考，欢迎探讨交流。一 模块化模块化概念：和模块化相关的一个概念就是样式作用域，作用域是模块化基本条件。样式作用域是一条样式规则可以影响的范围，在不同样式作用域中的同名.class可以互不影响。CSS模块就是把一些相关的样式定义同一个样式作用域中。模块化优点：模块化可以方便复用模块代码，可以减少复制黏贴产生重复代码，重复的代码不仅增加代码的可维护性同时也会增加文件尺寸，导致样式加载时
阅读全文
摘要：这个示例是使用HTML/CSS实现的，对于一个给定宽高的元素，不管有没拖动滚动条，让它始终处于屏幕水平方向和垂直方向居中的位置。CSS:<style> html,body{ height:100%; overflow:hidden;} body{ overflow:auto} .test{width:500px; height:500px; position:absolute; left:25%; top:25%; background-color:#000;} h1{ height:1500px;/*测试滚动条*/} </style>HTML:<body>
阅读全文
摘要：网站性能优化中首要的一条就是要减少HTTP请求，那么为要减少HTTP请求呢？其实有些HTTP分析工具可以帮我们了解当浏览器请求一个资源时大致需要经历的哪些过程。1 域名解析(DNS Lookup): 这个没什么好说的就是把域名解析到指定IP地址的服务器所需要的时间。2 创建连接(connection)： 创建一个Tcp 连接到服务器或代理服务器所需要的时间，如使用的是https链接这个时间还包括SSH握手过程。通常在HTTP头中使用keep-alive 连接以避免重复连接到web 服务器的开销。3 发送请求(Send): 发送HTTP请求消息到服务器所需的时间，所需时间取决于发送到服...
阅读全文
摘要：背景半透明，覆盖整个可视区域的遮罩层效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现，高手请绕道。html代码很简单 <div class="mask opacity"></div>1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码:.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }2 、要覆盖整个可视区域通常的
阅读全文
摘要：相对于实现需求来说代码的发布部署工作是一项重复的体力劳动，如：代码的压缩、资源URL的替换、资源文件在多台服务器上的同步工作、重启相应Windows服务。对于每次发布部署来说这都是一个固定的流程。显然我们对代码部署这种重复的体力劳动比较不感兴趣，对于实现新需求有更高的积极性。另外作为做程序员，我们这类典型的脑力劳动者除了实现工作中业务需求外，我们也应该要充分利用自身优势，尽可能的通过程序代码来自动化那些可有计算机完成的体力工作。 在这篇博客中介绍了我为改善工作中的代码部署流程，使用WSH、Javascript和Bat实现的一个自动化构建工具。WSH是windows宿主的脚本技术，宿主指的是脚.
阅读全文
摘要：var ie = !-[1,]； 这句代码在IE9之前曾被称为世界上最短的IE判定代码。代码虽短但确包含了不少javascript基础知识在里面。在这个例子中代码执行时会先调用数组的toString()方法，执行[1,].toString()在IE6,7,8中将会得到“1,”。然后表达式就变为!-“1,”。再尝试把“1，”转换成数值类型得到NaN ,再对NaN取负得到值仍为NaN。最后执行!NaN返回true。下面通过分解这个语句来回顾下代码中所涉及到的javascript知识：浏览器的数组字面量解析差异 [1,]表示使用javascript的数组字面量定义了一个数组。 在IE6,7,8中数组
阅读全文
摘要：先看一道JavaScript题目，据说是国内某知名互联网企业的JavaScript笔试题，如果对正则的全局匹配模式不了解的话可能会对下面的输出结果感到疑惑。View Code var str = "123#abc";var re = /abc/ig;console.log(re.test(str)); //输出tureconsole.log(re.test(str)); //输出falseconsole.log(re.test(str)); //输出tureconsole.log(re.test(str)); //输出false在创建正则表达式对象时如果使用了“g”标识符或
阅读全文
摘要：通常大多数浏览器是并行下载资源的，但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构、脚本之间的存在依赖关系、使用document.write 向页面输出HTML等。浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载。 在页面的加载过程中如果可以做到内容的逐步呈现，对于良好的用户体验来说是非常重要的。通常我们也会在wondow对象的onload事件处理函数中做一些事情，但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发，另一方面也延迟了用户所期待的反馈。这就需要我们使用一些方法来让浏览器以非阻塞.
阅读全文
摘要：面试的时候如果主考官让你使用JavaScript来实现对数组元素进行插入、删除、替换操作。如果不知道Array.prototype.splice的使用的方法那很有可能就要被扣分了。使用javascript数组类型内置的splice方法仅需一行代码即可轻松实现对数组元素进行插入、删除、替换操作。方法签名：Array.prototype.splice(index,count[,elm1,elm2...n])描述：使用Array类型的splice方法可以对数组元素进行插入、替换、删除。该方法讲直接影响当前的数组对象(与.slice(index1,index2)方法不同)并返回被删除的数组项。参数：i
阅读全文
摘要：使用JavaScript Lint可以检查 JavaScript 语法是否规范。在工作中经常会遇到使用压缩工具压缩的代码代码不可用的情况。现在可以把Javascript Lint 集成到VS2008，在压缩之前自动检查代码。点击这里下载使用方法：1、解压压缩包到任意目录如d:\jsl-0.3.0。目录下包含如下文件： jsl.default.conf ：配置JavaScript验证选项的 jsl配置文件 jsl.exe ：是JavaScript Lint的主程序文件 jsl-sample.bat ：示例 jsl-test.js：测试文件创建configuration 目录，拷贝jsl.defa
阅读全文
摘要：在最近的编程实践中由闭包的使用引起了我对javascript代码可维护性的思考。面向对象的其中一个特性封装性通过封装可以降低类与类之间或模块与模块之间耦合性从而使我们的设计更加高内聚低耦合，在大规模的程序开发中这是度量程序可维护性的一个指标，在大量应用了基于javascript的RIA的项目中javascript代码的可维护性也变得越来越值得我们去关注。因为在javascript中没有类的概念，所以我通常会借用闭包来将数据和操作这些数据的方法封装在一起来解决设计中对象的高内聚和对象之间的松耦合的问题，然而当我试图把一个对象的构造函数定在一个闭包中时却对我产生了一些迷惑。 在下面这个演示中两个.
阅读全文
摘要：这个相册初看上去给人的感觉是很简陋，好像想没什么技术含量。如果您仔细看了页面的源文件后就会发现它的精妙之处了。通常我们做相册应用一般都会借助Javascript来完成其中的交互，然而这个简易相册仅使用了HTML/CSS 技术。效果可以看这里：http://www.ctrly.cn/我下面就简单给大家说说它的实现原理。在这个相册中主要使用了HTML中的“描点”， “描点”的作用大家都知道，单击描点可以定位到页面中某个指定位置。在这个简易相册中给每个大图分别定义了一个“描点”，左边缩略图链接指向与它的大图对应的描点位置。 放置大图描点的容器大小只可以容纳一个大图，并且在CSS中使用了overfol
阅读全文
摘要：这里使用原生的javascript，用面向对象的方式创建一个容易维护使用方便的滑动菜单，调用方式如下：[代码]演示代码分为slide.js和slide.html两个文件slide.htm:代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--<!D...
阅读全文
摘要：什么是 JavaScript 注入攻击？ 每当接受用户输入的内容并重新显示这些内容时，网站就很容易遭受 JavaScript 注入攻击。让我们研究一个容易遭受 JavaScript 注入攻击的具体应用程序。假设已经创建了一个客户反馈网站。客户可以访问网站并输入对产品的反馈信息。当客户提交反馈时，反馈信息重新显示在反馈页面上。 客户反馈网站是一个简单的网站。不幸的是，此网站容易遭受 JavaScri...
阅读全文
摘要：与网上广为流传的特权方法有所不同，这里是使用闭包来实现的。并以一个简单的JS时钟示例作为演示。 各位如果觉得有什么不妥的地方欢迎指出。代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--(functionJSClock(){//partialclass...
阅读全文
摘要：请看看编码是否规范，使用是否方便HTML:代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--<tableid="customTableView"><thead><tr><td>编号</td>...
阅读全文
