【WEB前端开发最佳实践系列】JavaScript篇

一、养成良好的编码习惯,提高可维护性

1、避免定义全局变量和函数,解决全局变量而导致的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上,使其变成对象的属性:

1 var  myCurrentAction = {
2     length : 0 ,
3     init : function(){},
4     action : function(){}
5 }

还可以将全局的变量包含在一个局部作用域中,然后在这个作用域中完成这些变量的定义以及变量使用的逻辑:

1 (function(){
2    var length = 0;
3    function init(){}
4    function action (){}
5 })();

模块之间交互使用return语句(即做到了代码逻辑的封装,又公开了需要访问的接口):

1 var myCurrentAction = (function(){
2      var length = 0;
3      function init(){}
4      function action(){}
5      return {
6          init : init
7  }
8 })();
时间: 2024-12-19 10:13:46

【WEB前端开发最佳实践系列】JavaScript篇的相关文章

移动端WEB前端开发最佳实践

移动端WEB前端开发最佳实践 Safari,Android Browser,Chrome都是以WebKit为核心的 移动设备和PC之间的页面现实存在差异(Safari中定义了viewport) 在移动设备和桌面端WEB前端开发中,事件绑定存在差异(移动触点) 页面控件设计存差异(点触不灵敏,虚拟键盘弹出框) 移动设备的网络带宽普遍比PC慢,移动页面要设置更简洁 PC页面兼容移动设备 使用流式布局 借助CSS Media queries(媒体查询)技术 使用合适的图片显示兼容方案 保持页面简洁,不

web移动开发最佳实践之 css篇

web移动开发最佳实践之 css篇 一.css概述 css即层叠样式表(Cascading Style Sheets),它的作用主要是控制页面元素的样式,包括布局.颜色.字体.字号.空白.边框.属性等等.css的出现使得html的内容和样式分离,极大的提高了工作效率. 目前最新的标准是css3,下面几节将介绍在使用css过程中应遵循的最佳实践方案. 二.使用高效的css选择器 欲创建一个高效的web应用,你要了解浏览器是如何读取你的web页面并呈现出来的.当浏览器读取你的html文档时,它首先对

web移动开发最佳实践之 css篇 ——转

 web移动开发最佳实践之 css篇 一.css概述 css即层叠样式表(Cascading Style Sheets),它的作用主要是控制页面元素的样式,包括布局.颜色.字体.字号.空白.边框.属性等等.css的出现使得html的内容和样式分离,极大的提高了工作效率. 目前最新的标准是css3,下面几节将介绍在使用css过程中应遵循的最佳实践方案. 二.使用高效的css选择器 欲创建一个高效的web应用,你要了解浏览器是如何读取你的web页面并呈现出来的.当浏览器读取你的html文档时,它首先

入门书籍 web前端开发最佳实践

高效web前端开发  book PageSpeed  出自google公司  是一款  免费的工具  性能分析 Timeline网页交互  和渲染  所要花费的时间 Profile谁  可以查看网页cpu以及内存占有的情况报告 Audits  中提供了各种资源及配置的优化建议和未使用的css规则的列表 代码的压缩 文本服务器开启Gzip压缩. UglifyJs  不仅仅是一个压缩工具,同事具有JS语法分析和代码美化工能 图片压缩工具  以在线工具居多  TinyPNG  压缩  PNG格式图片.

<读书笔记>《Web前端开发最佳实践》

P77 P89 CSS Reset P94 给CSS样式定义排序    排序工具:CSScomb P97 什么是CSS的权重?权重是指选择符的优先级 P100 工具:Sass Less P101 框架:YUI.ExtJS P102 hack代码,不易理解且维护困难 P103 条件注释 P104 em px % 2016.3.8 P110 CSS的匹配原理和我们习惯的匹配过程是相反的,它是从右到左进行匹配的. P111 CSS选择器定义的最佳实践(四个避免): 1.* { } 2.referenc

WEB前端开发最佳实践(2)

样式和结构分离 HTML页面链接一个CSS(最优),提高加载速度 HTML内嵌CSS(单一页面最佳,减少加载CSS样式文件的请求数目,加快加载速度 内联CSS样式,可以使用JS动态来统一修改,很少使用,JQ中使用其实现动画效果 在CSS样式文件中引用CSS文件,避免使用 添加JS禁用提示信息 使用noscrpt,HTML4只在body中起作用,HTML5中可以出现在head中,支持HTML,不支持XHTML 最好使用noscript,采用渐进增强的模式,平稳降级 添加必要的meta的标签 met

WEB前端开发最佳实践(3)

选择器注意 尽量不使用ID选择器 减少子选择器的层级(less和Sass的滥用) 使用组合CSS类选择器 兼容IE浏览器 兼容旧浏览器的代码,被称为hack代码 熟悉IE浏览器中常见的兼容样式 分离样式兼容代码 em,px,% px:相对尺寸,但由于同环境,又是绝对尺寸 em:应用元素上字体大小的两倍,%:相对于父元素的百分比 尽量设置相对尺寸 只有在可预知元素尺寸的情况下才使用绝对尺寸 使用em设置字体的大小 使用高效的CSS选择器 匹配原理:从右到左 避免使用通配符 避免使用标签和单个属性选

web移动开发最佳实践之js篇

一.js概述 js即JavaScript,是被设计用来验证表单.检测浏览器.创建cookies.改进设计以及更多应用的网络脚本语言,它非常容易使用.在web应用中,它是主要的编程语言,主要用途是进行各种逻辑控制.行为展现等.对于js的优化,对于整个应用的提升都是非常显著的. 二.使用字面量(literal notation)来声明对象和数组 创建对象和数组的方法有很多,但是使用字面量是最简单最快的.传统的方法是使用内建的构造器声明: //create an object var obj = ne

《web前端开发最佳实践》党建 摘要

1. 各种调试工具.ie dev toolbar. chrome developer tools. firebug .fiddler 2. 压缩合并工具 3. fis 4. 性能工具yslow.  pagespeed 5. 压缩 gzip js压缩 uglifyjs. yui compressor.  closoure compiler. webstorm file watcher css 压缩   css compressor 6. 规范 层级id 公开函数首字母大写 $前缀 输入框的tab顺