javascript的实践

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个…

javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编写. 先思考一下一个切换效果需要完成的操作 1.准备阶段,将各个strip归位到动画效果开始的位置. 2.动画效果处理. 3.执行. 3.完成. 所有的切换效果都具备上述3步操作. 既然这样就好抽象了. 可以对上述的操作进行单独定义,然后通过模板方法模式对各个操作进行调用. 所谓的模板方法模式,其实就是有这么…

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq…

高性能JavaScript 编程实践

前言最近在翻<高性能JavaScript>这本书(2010年版丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的有些内容还是相当不错的,譬如第八章编程实践,为了方便以后的查阅,对此做个总结.失效的代码也会在以后做更进一步的探索. 避免双重求值这个优化策略很好理解,我们可能都已经不知不觉地运用在了实际的编程中: // not use this setTimeout('alert("hello world&qu…

jQuery增强了css的选择器功能,是一个简洁快速的脚本库,能够使用短小的代码实现复杂的网页预览效果.如实现表格奇偶行异色 <script language="javascript" src="jQurey.min.js"> </script> <script language="javascript"> $(function(){$("table.datalist tr:nth-child(odd…

【原】javascript最佳实践

摘要:这篇文章主要内容的来源是<javascript高级程序设计第三版>,因为第二遍读完,按照书里面的规范,发觉自己在工作中没有好好遵守.所以此文也是对自己书写js的一种矫正. 1.可维护性 1.1 可理解性——其他人可以接手代码并理解它的意图和一般途径,而无需原开发人员的完整解释. 直观性——代码中的东西一看就能明白,不管其操作过程多么复杂. 可适应性——代码以一种数据上的变化不要求完全重写的方法撰写. 可扩展性——在代码架构上已考虑到在未来允许对核心功能进行扩展. 可调试性——当有地方出错…

JavaScript 最佳实践

这个文档是基于JavaScript社区众多开发者的意见和经验,在开发JavaScript代码上的最佳实践和首选的方案的明细表.因为这是一个推荐的表而非原则性的方案,经验丰富的开发者可能对下面的表达会有略有不同的见解. 1. 总是使用 ‘var’ 在JavaScript中,变量不是全局范围的就是函数范围的,使用”var”关键词将是保持变量简洁明了的关键.当声明一个或者是全局或者是函数级(function-level)的变量,需总是前置”var”关键词,下面的例子将强调不这样做潜在的问题. 不使用…

10 个你需要了解的最佳 javascript 开发实践

原文:Top 10 “Must Follow” JavaScript Best Practices Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站. 尽管很多的开发人员都乐于颂扬 javascript,但是仍旧有人看到它的阴暗面. 使用很多 javascript 代码的 web 页面会加载很慢,过多的使用 javascript 使得网页丑陋和拖沓.很快如何有效地使用 javascript 成为一个非常火热的话题. 这里让我们列出…

JavaScript最佳实践：可维护性

代码约定一.可读性代码缩进包含注释二.变量和函数命名变量名应为名词如car或person 函数名应该以动词开始,如getName().返回布尔类型值的函数一般以is开头,如isEnable(). 三.变量类型透明 1.通过初始化指定变量类型 var fonund = false; //布尔型 var count = -1; //数字 var name = ""; //字符串 var person = null; //对象 2.使用匈牙利标记法来指定变量类型 "o&q…

javascript 最佳实践 ( 24 章 )

代码约定易于维护, 形成了一套 JavaScript 代码书写的约定: 跟别的语言差不多, 不过 javascript 中的大括号一定要放在行尾, 例如: function abc() { // 函数体 } 另外, 由于 javascript 变量是松散类型的, 很容易忘记变量所应包含的数据类型. 所以, 有以下3种方式可以缓解该问题. 1. 初始化:例如: ( 即利用初值来提醒自己, 该变量的类型 ) var found = false; var count = –1; 2. 使用类型注…

JavaScript最佳实践

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5540469.html 举个例子:用户在点击某个链接的时候弹出一个新窗口弹出窗口的方法采用:window.open(url, name, features) 方法1. 采用"javascript:"伪协议代码清单: jsbestpractise1.html js/jsbestpractise1.js 这种方式在支持"javascript:"伪协议的浏览器中运行正常,…

javascript设计模式实践之策略模式--输入验证

策略模式中的策略就是一种算法或者业务规则,将这些策略作为函数进行封装,并向外提供统一的调用执行. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .form{ width: 400px; height: 200px; #margin: 0px auto; } .form-item-label{ width:100px; tex…

javascript设计模式实践之代理模式--图片预加载

图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的onError,onAbort,超时的问题. 只关注代码的结构. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button…

15条JavaScript最佳实践很经典噢

感觉比较经典,特转载腾讯大讲堂.本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深).条目顺序按重要级粗略的从高到低排列. 把外部JavaScript文件放在HTML底部我们的目标是相同的:为用户尽可能快地显示内容.当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕.因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生.如果你的…

学习JavaScript最佳实践方法

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说. 你叫一个大学生去教小学数学,不见得比一个初中生教得好.因为大学生早已经过了那个阶段,都忘记自己怎么走过来的了.而对于初中生,刚好走过那个阶段,对自己怎么走过来的还记忆犹新,或者还有一些自己的总结.比如,很多高手觉得那本犀牛书入门很好,他们觉得太简单了,但以我的经验来看,它不是入门的最好选择. 先说说学js的条件论条件,咱…

Javascript 面向对象实践

踩到了坑,才能学到东西. 记录我在慢慢的转向模块化遇到的问题以及解决的思路. 1.采用立即执行函数,闭包的方式创建模块 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Module</title> <script type="text/javascript" src=…

15条JavaScript最佳实践【转】

本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深).条目顺序按重要级粗略的从高到低排列. 把外部JavaScript文件放在HTML底部我们的目标是相同的:为用户尽可能快地显示内容.当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕.因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生.如果你的JavaScript代码只是增加…

原生Javascript插件开发实践

前言之前公司设计的网站比较混乱,很多地方不统一,其中一个就是弹出层,导致这个原因是因为,公司的UI换了好几个人,而他们每个人做出来的都不太一样.最近公司开始整顿这个问题,对于统一的这种东西当然是做成一个模块,或者插件,而我打算做成插件.之所以写这篇文章是因为,当写完这个插件以后,发现其中有不少的理念,而这些理念我想把它总结一下,虽然这个插件并不复杂. 该怎样架构? 对于架构这个概念,接触的比较少,我的理解,架构就是解决未来可能会发生的事. 之前也封装过一些插件,但后端嫌我封装的太难用,于是分析…

将具有特殊class名img标签替换成[img][/img]标签--javascript正则表达式实践

在项目中,可能有时候需要将一些特殊的东西加一个特别的属性,或者一个特殊的Class.如下:  <img src="abc.jpg" fid="13696" alt="abc" />  <img src="abc.jpg" class="system_fid_13696" alt="abc"…

javascript 设计模式实践之策略模式--输入验证

博客地址:http://www.cnblogs.com/kongxianghai/p/4985122.html,写的挺好的推荐下!…

JavaScript OOP 之「创建对象」

工厂模式工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程.工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题. function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.age); }; return o; } var perso…

JavaScript的陷阱

这本来是翻译Estelle Weyl的<15 JavaScript Gotchas>,里面介绍的都是在JavaScript编程实践中平时容易出错或需要注意的地方,并提供避开这些陷阱的方法,总体上讲,就是在认清事物本质的基础样要坚持好的编程习惯,其实这就是Douglas Crockford很久以前提出的JavaScript风格要素问题了,有些内容直接是相同的,具体请看<Javascript风格要素(1)>和<Javascript风格要素(2)>.在翻译的过程中,我又看到了…

jquery的promise实践--连续加载图片

在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误,超时后显示加载失败图片. 对于功能的要求,肯定会存在对加载状态事件的处理以及完成时回调函数的处理,这样不仅会造成代码上的混乱,甚至破坏各种原则,就不再用普通的方法去写了.针对这种状态通知的特点,比较合适采用promise架构进行处理,promise本质上就是订阅发布设计模式的一种,当前这个功能就用j…

Javascript 语言精粹代码片段合集

Javascript 语言精粹代码片段合集标签:Douglas-Crockford Javascript 最佳实践原文链接更好的阅读体验使用一个method 方法定义新方法 Function.prototype.method = function (name, func) { if (!this.prototype[name]) { this.prototype[name] = func; } return this; } 根据数字的正负来判断是使用Math.ceiling 还是Mat…

45个JavaScript小技巧

原文地址 http://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/ 这篇文章的质量个人感觉一般(有些甚至有些无厘头,比如第五点,构造函数的使用,直接被我去掉了),建议过一遍就好.详细的翻译版本可以参考 JavaScript奇技淫巧45招声明变量时别忘记 var 相等比较请用 === 而不是 == undefined.null.0.false.NaN.''(空字符串)都是假值行末加封…

《数据结构与算法JavaScript描述》

<数据结构与算法JavaScript描述> 基本信息作者: (美)Michael McMillan 译者: 王群锋杜欢丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:9787115363398 上架时间:2014-8-5 出版日期:2014 年8月开本:16开版次:1-1 所属分类:计算机 > 软件与程序设计 > 网络编程 > javascript 更多关于>>> <数据结构与算法JavaScript描述> 编辑推荐随着…

vue2.0 transition -- demo实践填坑

前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果的时候,虽然比1.0版本强大很多,但是实践过程中还是踩了一些不应该踩但是还是踩了的坑.虽然官网文档已经很详细地介绍了各种应用场景,但是这里还是通过几个小demo案例来感受下vue2.0 transition 带来的便利吧! 实践这里将通过四个实践小案例来体验和学习css过渡,css动画,javas…

高质量JavaScript代码书写基本要点

翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:Stoyan Stefanov原文链接:The Essentials of Writing High Quality JavaScript翻译编辑:张鑫旭 //zxx: 俗不可耐的开场白就免了,直接进入翻译内容(其实是因为本文是在太..太..长了,).…

【JavaScript 开发规范】

Javascript 最佳实践http://sofish.de/1171http://sofish.de/1181 总是使用 ‘var’ √ 特性检测而非浏览器检测 √ 使用方括号记法 √ 使用"."号,属性名是硬代码,不能在执行时改变.使用"[ ]"方括号,属性名是一个通过计算属性名而来的字符串.字符串可以是硬代码,也可能是变量推荐使用"[ ]"方括号记法是说当其需要时(明显地)总是使用它.当不是严格需要使用它的时候,它是一个私人的偏好和习惯…

[转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:Stoyan Stefanov原文链接:The Essentials of Writing High Quality JavaScript翻译编辑:张鑫旭 //zxx: 俗不可耐的开场白就免了,直接进入翻译内容(其实是因为本文是在太..太..长了,). 教程相关细节主题:JavaScript最佳实践难度…

【javascript的实践】的更多相关文章