建站系统下载,上海企业网站制作哪家专业,网站建设分为哪几种,wordpress大门户主题在学习编程的时候#xff0c;每次看到那些整齐规范的代码#xff0c;心里顿时对这个程序员表示点点好感#xff0c;有时#xff0c;比如看到自己和朋友写的代码时#xff0c;那阅读起来就是苦不堪言#xff0c;所以#xff0c;一些基本的开发规范是必须的#xff0c;是…在学习编程的时候每次看到那些整齐规范的代码心里顿时对这个程序员表示点点好感有时比如看到自己和朋友写的代码时那阅读起来就是苦不堪言所以一些基本的开发规范是必须的是为了自己方便阅读代码也方便他人阅读修改代码。 命名 驼峰式命名法介绍 Pascal Case 大驼峰式命名法首字母大写。egStudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法首字母小写。egstudentInfo、userInfo、productInfo 文件资源命名 文件名不得含有空格 文件名建议只使用小写字母不使用大写字母。( 为了醒目某些说明文件的文件名可以使用大写字母比如README、LICENSE。 ) 文件名包含多个单词时单词之间建议使用半角的连词线 ( - ) 分隔。 引入资源使用相对路径不要指定资源所带的具体协议 ( http:,https: ) 除非这两者协议都不可用。 推荐 script src//cdn.com/foundation.min.js/script 1变量命名 命名方式 小驼峰式命名方法 命名规范 类型对象描述的方式如果没有明确的类型就可以使前缀为名词 类型 小写字母 array a boolean b function fn int i object o regular r string s 函数 命名方式小驼峰方式 ( 构造函数使用大驼峰命名法 ) 命名规则前缀为动词 动词 含义 返回值 can 判断是否可执行某个动作 ( 权限 ) 函数返回一个布尔值。true可执行false不可执行 has 判断是否含有某个值 函数返回一个布尔值。true含有此值false不含有此值 is 判断是否为某个值 函数返回一个布尔值。true为某个值false不为某个值 get 获取某个值 函数返回一个非布尔值 set 设置某个值 无返回值、返回是否设置成功或者返回链式对象 推荐 //是否可阅读
function canRead(){ return true; } //获取姓名 function getName{ return this.name } 常量 命名方法:全部大写 命名规范使用大写字母和下划线来组合命名下划线用以分割单词 推荐 var MAX_COUNT 10;var URL http://www.baidu.com; 12类的成员 公共属性和方法同变量命名方式私有属性和方法前缀为下划线(_)后面跟公共属性和方法一样的命名方式推荐将name换成this是不是更熟悉了呢 function Student(name) {var _name name; // 私有成员 // 公共方法 this.getName function () { return _name; } // 公共方式 this.setName function (value) { _name value; } } var st new Student(tom); st.setName(jerry); console.log(st.getName()); // jerry输出_name私有变量的值 注释规范 单行注释// 单独一行//(双斜线)与注释文字之间保留一个空格在代码后面添加注释//(双斜线)与代码之间保留一个空格并且//(双斜线)与注释文字之间保留一个空格。 注释代码//(双斜线)与代码之间保留一个空格。 推荐 // 调用了一个函数1)单独在一行
setTitle();
var maxCount 10; // 设置最大量2)在代码后面注释
// setName(); // 3)注释代码 多行注释 / 注释说明 / 若开始(/和结束(/)都在一行推荐采用单行注释若至少三行注释时第一行为/最后行为/其他行以开始并且注释文字与保留一个空格。推荐 /*
* 代码执行到这里后会调用setTitle()函数
* setTitle()设置title的值
*/
setTitle(); 函数方法注释 函数(方法)注释也是多行注释的一种但是包含了特殊的注释要求参照 javadoc(百度百科) 语法 /**
* 函数说明
* 关键字
*/ 常用注释关键字 注释名 语法 含义 示例
param param 参数名 {参数类型} 描述信息 描述参数的信息 param name {String} 传入名称
return return {返回类型} 描述信息 描述返回值的信息 return {Boolean} true:可执行;false:不可执行 author author 作者信息 [附属信息如邮箱、日期] 描述此函数作者的信息 author 张三 2015/07/21 version version XX.XX.XX 描述此函数的版本号 version 1.0.3 example example 示例代码 example setTitle(测试) 如下 推荐 /**- 合并Grid的行- param grid {Ext.Grid.Panel} 需要合并的Grid - param cols {Array} 需要合并列的Index(序号)数组从0开始计数序号也包含。 - param isAllSome {Boolean} 是否2个tr的cols必须完成一样才能进行合并。true完成一样false(默认)不完全一样 - return void - author polk6 2015/07/21 - example - _________________ _________________ - | 年龄 | 姓名 | | 年龄 | 姓名 | - ----------------- mergeCells(grid,[0]) ----------------- - | 18 | 张三 | | | 张三 | - ----------------- - 18 --------- - | 18 | 王五 | | | 王五 | - ----------------- ----------------- */ function mergeCells(grid, cols, isAllSome) { // Do Something } HTML规范 文档规范 HTML5的文档类型声明!DOCTYPE html DOCTYPE标签是一种标准通用标记语言的文档类型声明它的目的是要告诉标准通用标记语言解析器它应该使用什么样的文档类型定义DTD来解析文档。使用文档声明类型的作用是为了防止开启浏览器的怪异模式。没有DOCTYPE文档类型声明会开启浏览器的怪异模式浏览器会按照自己的解析方式渲染页面在不同的浏览器下面会有不同的样式。如果你的页面添加了脚本加载 推荐 htmlheadlink relstylesheet hrefmain.css /head body !-- body goes here -- script srcmain.js async/script /body /html 只兼容现代浏览器推荐 htmlheadlink relstylesheet hrefmain.css script srcmain.js async/script /head body !-- body goes here -- /body /html 语义化 语义化是指根据元素其被创造出来时的初始意义来使用它。
意思就是用正确的标签干正确的事而不是只有div和span。 12推荐 html 代码:
!-- The page header should go into a header element --
header!-- As this title belongs to the page structure its a heading and h1 should be used --h1My page title/h1 /header !-- All navigation should go into a nav element -- nav classtop-navigation !-- A listing of elements should always go to UL (OL for ordered listings) -- ul li classnav-itema href#homeHome/a/li li classnav-itema href#newsNews/a/li li classnav-itema href#aboutAbout/a/li /ul /nav !-- The main part of the page should go into a main element (also use rolemain for accessibility) -- main classnews-page rolemain !-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -- section classpage-section news !-- A section header should go into a section element -- header !-- As a page section belongs to the page structure heading elements should be used (in this case h2) -- h2 classtitleAll news articles/h2 /header !-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other re-usable module / section that can occur multiple times on a page) a article element should be used -- article classnews-article !-- An article can contain a header that contains the summary / introduction information of the article -- header !-- As a article title does not belong to the overall page structure there should not be any heading tag! -- div classarticle-titleGood article/div !-- Small can optionally be used to reduce importance -- small classintroIntroduction sub-title/small /header !-- For the main content in a section or article there is no semantic element -- div classcontent pThis is a good example for HTML semantics/p /div !-- For content that is represented as side note or less important information in a given context use aside -- aside classarticle-side-notes pI think Im more on the side and should not receive the main credits/p /aside !-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -- footer classarticle-foot-notes !-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time while the actual text in the time element can also be more human readable / relative -- pThis article was created by David time datetime2014-01-01 00:00 classtime1 month ago/time/p /footer /article !-- In a section, footnotes or similar information can also go into a footer element -- footer classsection-footer pRelated sections: Events, Public holidays/p /footer /section /main !-- Your page footer should go into a global footer element -- footer classpage-footer Copyright 2014 /footer alt标签不为空 标签的 alt 属性指定了替代文本用于在图像无法显示或者用户禁用图像显示时代替图像显示在浏览器中的内容。 假设由于下列原因用户无法查看图像alt 属性可以为图像提供替代的信息 网速太慢src属性中的错误浏览器禁用图像用户使用的是屏幕阅读器结构、表现、行为三者分离 尽量在文档和模板中只包含结构性的 HTML而将所有表现代码移入样式表中将所有动作行为移入脚本之中。 在此之外为使得它们之间的联系尽可能的小在文档和模板中也尽量少地引入样式和脚本文件。 建议 不使用超过一到两张样式表不使用超过一到两个脚本学会用合并脚本不使用行内样式不在元素上使用 style 属性不使用行内脚本不使用表象元素i.e. , ,, , 不使用表象 class 名i.e. red, left, centerHTML只关注内容 HTML只显示展示内容信息不要引入一些特定的 HTML 结构来解决一些视觉设计问题不要将img元素当做专门用来做视觉设计的元素样式上的问题应该使用css解决推荐 html 代码:
!-- Thats clean markup! --
span classtext-boxSee the square next to me? /span css 代码: /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */ .text-box:before { content: ; display: inline-block; width: 1rem; height: 1rem; background-color: red; } 图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。 推荐 html 代码:
!-- Thats clean markup! --
span classtext-boxSee the square next to me? /span css 代码: /* We use a :before pseudo element with a background image to solve the problem */ .text-box:before { content: ; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; } js规范 避免全局命名空间污染 防止全局命名空间被污染我们通常的做法是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)创建独立隔绝的定义域。也使得内存在执行完后立即释放。 IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改i.e. 第三方库window 引用被覆盖的未定义的关键字等等。 推荐 // We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){use strict; var x 10, y 100; // Will output true true log((w.x undefined) (w.y undefined)); }(window.console.log, window)); use strict;// Code goes here }()); 如果你想引用全局变量或者是外层 IIFE 的变量可以通过下列方式传参 (function($, w, d){use strict;$(function() { w.alert(d.querySelectorAll(div).length); }); }(jQuery, window, document)); 严格模式 ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮运行的也更加快速。 严格模式会阻止使用在未来很可能被引入的预留关键字。 你应该在你的脚本中启用严格模式最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式这有可能会引发一些第三方类库的问题。 变量声明 总是使用 var 来声明变量并且使用单var模式将所有的变量在函数最前面只使用一个var定义。例如 (function (){use strictvar a 0, b 0, c 0, i, j, myObject(); }()) js声明提前 javascript会自动将函数作用域内的变量和方法的定义提前只是提前声明赋值还是在原处 例如 (function(log){use strict;var a 10; for(var i 0; i a; i) { var b i * i; log(b); } if(a 10) { var f function() { log(a); }; f(); } function x() { log(Mr. X!); } x(); }(window.console.log)); 提升后的js (function(log){use strict;// All variables used in the closure will be hoisted to the top of the function var a, i, b, f; // All functions in the closure will be hoisted to the top function x() { log(Mr. X!); } a 10; for(i 0; i a; i) { b i * i; log(b); } if(a 10) { // Function assignments will only result in hoisted variables but the function body will not be hoisted // Only by using a real function declaration the whole function will be hoisted with its body f function() { log(a); }; f(); } x(); }(window.console.log)); 使用严格等 总是使用 精确的比较操作符避免在判断的过程中由 JavaScript 的强制类型转换所造成的困扰。例如 (function(log){use strict;log(0 0); // true log( false); // true log(1 true); // true log(null undefined); // true var x { valueOf: function() { return X; } }; log(x X); }(window.console.log)); 等同 和严格等的区别 两边值类型不同的时候要先进行类型转换再比较。不做类型转换类型不同的一定不等。等同操作符 如果两个值具有相同类型会进行比较返回的比较值如果两个值不具有相同类型也有可能返回true如果一个值是null另一个值是undefined返回true如果一个值是string另个是number会把string转换成number再进行比较如果一个值是true会把它转成1再比较false会转成0console.log( false null ) // false console.log( false undefined ) // false console.log( false 0 ) // true console.log( false ) // true console.log( false NaN ) // false console.log( null undefined ) // true console.log( null 0 ) // false console.log( null ) // false console.log( null NaN ) // false console.log( undefined 0) // false console.log( undefined ) // false console.log( undefined NaN) // false console.log( 0 ) // true console.log( 0 NaN ) // false 总结 false 除了和自身比较为 true 外和 0”” 比较也为 truenull 只和 undefined 比较时为 true 反过来 undefined 也仅和 null 比较为 true没有第二个0 除了和 false 比较为 true还有空字符串 ”” 和空数组 []空字符串 ” 除了和 false 比较为 true还有一个数字 0, , , , -, … 这些操作符所造成的隐式类型转换都是无副作用的它不会改变变量本身保存的值。但是如果你覆写某个对象的 valueOf/toString的话就会产生副作用. 例如 Array.prototype.valueOf function() {this[0]; return this; } var x [1, 2, 3]; x 0; console.log(x); // [2, 2, 3] 1234567操作符 要是两个值类型不同返回false要是两个值都是number类型并且数值相同返回true要是两个值都是stirng并且两个值的String内容相同返回true要是两个值都是true或者都是false返回true要是两个值都是指向相同的ObjectArraya或者function返回true要是两个值都是null或者都是undefined返回true真假判断 js中以下内容为假 falsenullundefined0’ ‘(空字符串)NaN设置默认参数 逻辑操作符 || 和 也可被用来返回布尔值。如果操作对象为非布尔对象那每个表达式将会被自左向右地做真假判断。基于此操作最终总有一个表达式被返回回来。这在变量赋值时是可以用来简化你的代码的。例如:如果x不存在且y不存在x1如果x存在y存在x y 不适用eval()函数 如eval的字面意思来说恶魔使用eval()函数会带来安全隐患。 eval()函数的作用是返回任意字符串当作js代码来处理。 this关键字 只在对象构造器、方法和在设定的闭包中使用 this 关键字。this 的语义在此有些误导。它时而指向全局对象大多数时时而指向调用者的定义域在 eval 中时而指向 DOM 树中的某一节点当用事件处理绑定到 HTML 属性上时时而指向一个新创建的对象在构造器中还时而指向其它的一些对象如果函数被 call() 和 apply() 执行和调用时。 正因为它是如此容易地被搞错请限制它的使用场景 在构造函数中在对象的方法中包括由此创建出的闭包内首选函数式风格 函数式编程让你可以简化代码并缩减维护成本因为它容易复用又适当地解耦和更少的依赖。 接下来的例子中在一组数字求和的同一问题上比较了两种解决方案。第一个例子是经典的程序处理而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。 不推荐: (function(log){use strict;var arr [10, 3, 7, 9, 100, 20], sum 0, i; for(i 0; i arr.length; i) { sum arr[i]; } log(The sum of array arr is: sum) }(window.console.log)); 推荐函数式编程 (function(log){use strict;var arr [10, 3, 7, 9, 100, 20]; var sum arr.reduce(function(prevValue, currentValue) { return prevValue currentValue; }, 0); log(The sum of array arr is: sum); }(window.console.log)); 修改内建对象原型链 修改内建的诸如 Object.prototype 和 Array.prototype 是被严厉禁止的。修改其它的内建对象比如 Function.prototype虽危害没那么大但始终还是会导致在开发过程中难以 debug 的问题应当也要避免。 三元条件判断if 的快捷方法 用三元操作符分配或返回语句。在比较简单的情况下使用避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。 不推荐 if(x 10) {return valid;
} else { return invalid; } 推荐 return x 10 ? valid : invalid JSHint 在js规范中有很多规范都是样式上的规范而不是逻辑上的规范比如尽量使用而不是我们可以使用JSHint或者JSLintJavascript代码验证工具这种工具可以检查你的代码并提供相关的代码改进意见。我个人使用的是JSHint所以就以这个为例. webstorm内置JSHint 对于ws爱好者来说我没有用过其他的编译器ws基本上能满足你的所有需求最新的ws集成了vue。 在Settings language frameworks JavaScript Code Quality Tolls JSHint 其余规范参考官方文档http://jshint.com/docs/ CSS规范 id和class的命名 ID和class的名称总是使用可以反应元素目的和用途的名称或其他通用的名称代替表象和晦涩难懂的名称。 不推荐 .fw-800 {font-weight: 800; } .red { color: red; } 推荐 .heavy {font-weight: 800; } .important { color: red; } 合理的使用ID 一般情况下ID不应该被用于样式并且ID的权重很高所以不使用ID解决样式的问题而是使用class 不推荐 #content .title {font-size: 2em; } 推荐 .content .title {font-size: 2em; } css选择器中避免使用标签名 从结构、表现、行为分离的原则来看应该尽量避免css中出现HTML标签并且在css选择器中出现标签名会存在潜在的问题。 使用子选择器 很多前端开发人员写选择器链的时候不使用 直接子选择器注直接子选择器和后代选择器的区别。 有时这可能会导致疼痛的设计问题并且有时候可能会很耗性能。 然而在任何情况下这是一个非常不好的做法。 如果你不写很通用的需要匹配到DOM末端的选择器 你应该总是考虑直接子选择器。 不推荐: .content .title {font-size: 2rem; } 推荐 .content .title {font-size: 2rem; } 尽量使用缩写属性 尽量使用缩写属性对于代码效率和可读性是很有用的比如font属性。 不推荐 border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; 推荐 border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em; 0后面不带单位 省略0后面的单位 推荐 padding-bottom: 0;
margin: 0; 属性格式 为了保证一致性和可扩展性每个声明应该用分号结束每个声明换行。属性名的冒号后使用一个空格。出于一致性的原因属性和值但属性和冒号之间没有空格的之间始终使用一个空格。每个选择器和属性声明总是使用新的一行。属性选择器或属性值用双引号””而不是单引号”括起来。URl值url()不要使用引号。作为实践遵循以下顺序 结构型属性 displayposition,left,top,right,etcoverflow,float,clear,etcmargin,padding表现型属性 background,border,etcfont,text不推荐 .box {font-family: Arial, sans-serif; border: 3px solid #ddd; left: 30%; position: absolute; text-transform: uppercase; background-color: #eee; right: 30%; isplay: block; font-size: 1.5rem; overflow: hidden; padding: 1em; margin: 1em; } 推荐 .box {display: block; position: absolute; left: 30%; right: 30%; overflow: hidden; margin: 1em; padding: 1em; background-color: #eee; border: 3px solid #ddd; font-family: Arial, sans-serif; font-size: 1.5rem; text-transform: uppercase; } 原文地址转载于:https://www.cnblogs.com/yr0215/p/8025671.html
