最近换了工作,其中Webapi这块没有文档,之前有了解过Swagger借此机会好好整理下常用的地方分享给有需要的小伙伴。 概述: 1.swagger 引用 2.swagger 问题1.action 方法名称相同处理 3.swagger 问题2.序列化出来的JSON NULL 值处理 4. 汉化及controller说明 5. 统一返回HttpResponseMessage 返回类型 指定 6. 自定义 HTTP Header (oauth2.0 请求) 7.请求示例remarks 1.swagger 引用 第一步: 第二步:修改SwaggerConfig.cs 如 api 版本号,title 第三步:创建项目XML注释文档 右键项目→属性→生成→选中下方的 "XML文档文件" 然后保存 配置启用: c.IncludeXmlComments(string.Format("{0}/bin/BjxWebApis.XML",System.AppDomain.CurrentDomain.BaseDirectory)); 第四步:启动项目 地址:http://localhost:58303/swagger 哈哈 成功了,不对这个是最终效果,下面一步一步来实现吧。 2.swagger 问题1.action 方法名称相同处理 根据错误提示 很快发现 某位大神 同样的接口名 传递了不同参数,导致了这个错误,解决方式: c.ResolveConflictingActions(apiDescriptions => apiDescriptions.First()); 问题解决了 进行下一步 3.swagger 问题2.序列化出来的JSON NULL 值处理 先上图 等了好半天 一直不出来 打开F12一看原来有错,万能的网友帮了我,原来问题出在http://localhost:58303/swagger/docs/v1这个JSON资源上面, 序列化出来的JSON,包含了为NULL的字段,导致swagger-ui-min-js出现异常。 进一步分析是因为我项目使用的newtonsoft.json这个库的配置导致,应该忽略为NULL的字段, 对应解决办法如图: settings.NullValueHandling = NullValueHandling.Ignore; 问题解决了 开心 继续… 4. 汉化及controller说明 看图:咦 怎么控制器没有说明,这个和汉化一起说吧 第一步:定义一个provider实现ISwaggerProvider接口 包含了缓存 名:SwaggerCacheProvider 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/// <summary> /// swagger显示控制器的描述 /// </summary> public class SwaggerCacheProvider : ISwaggerProvider { private readonly ISwaggerProvider _swaggerProvider; private static ConcurrentDictionary<string, SwaggerDocument> _cache =new ConcurrentDictionary<string, SwaggerDocument>(); private readonly string _xml; /// <summary> /// /// </summary> /// <param name="swaggerProvider"></param> /// <param name="xml">xml文档路径</param> public SwaggerCacheProvider(ISwaggerProvider swaggerProvider,string xml) { _swaggerProvider = swaggerProvider; _xml = xml; } public SwaggerDocument GetSwagger(string rootUrl, string apiVersion) { var cacheKey = string.Format("{0}_{1}", rootUrl, apiVersion); SwaggerDocument srcDoc = null; //只读取一次 if (!_cache.TryGetValue(cacheKey, out srcDoc)) { srcDoc = _swaggerProvider.GetSwagger(rootUrl, apiVersion); srcDoc.vendorExtensions = new Dictionary<string, object> { { "ControllerDesc", GetControllerDesc() } }; _cache.TryAdd(cacheKey, srcDoc); } return srcDoc; } /// <summary> /// 从API文档中读取控制器描述 /// </summary> /// <returns>所有控制器描述</returns> public ConcurrentDictionary<string, string> GetControllerDesc() { string xmlpath = _xml; ConcurrentDictionary<string, string> controllerDescDict = new ConcurrentDictionary<string, string>(); if (File.Exists(xmlpath)) { XmlDocument xmldoc = new XmlDocument(); xmldoc.Load(xmlpath); string type = string.Empty, path = string.Empty, controllerName = string.Empty; string[] arrPath; int length = -1, cCount = "Controller".Length; XmlNode summaryNode = null; foreach (XmlNode node in xmldoc.SelectNodes("//member")) { type = node.Attributes["name"].Value; if (type.StartsWith("T:")) { //控制器 arrPath = type.Split('.'); length = arrPath.Length; controllerName = arrPath[length - 1]; if (controllerName.EndsWith("Controller")) { //获取控制器注释 summaryNode = node.SelectSingleNode("summary"); string key = controllerName.Remove(controllerName.Length - cCount, cCount); if (summaryNode != null && !string.IsNullOrEmpty(summaryNode.InnerText) && !controllerDescDict.ContainsKey(key)) { controllerDescDict.TryAdd(key, summaryNode.InnerText.Trim()); } } } } } return controllerDescDict; } } |
第二步:定义一个JS文件,做成嵌入资源,这个js文件的功能主要有两个,一个是汉化,另一个就是在界面上显示控制器的描述文字
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
'use strict'; window.SwaggerTranslator = { _words: [], translate: function () { var $this = this; $('[data-sw-translate]').each(function () { $(this).html($this._tryTranslate($(this).html())); $(this).val($this._tryTranslate($(this).val())); $(this).attr('title', $this._tryTranslate($(this).attr('title'))); }); }, setControllerSummary: function () { try { console.log($("#input_baseUrl").val()); $.ajax({ type: "get", async: true, url: $("#input_baseUrl").val(), dataType: "json", success: function (data) { var summaryDict = data.ControllerDesc; console.log(summaryDict); var id, controllerName, strSummary; $("#resources_container .resource").each(function (i, item) { id = $(item).attr("id"); if (id) { controllerName = id.substring(9); try { strSummary = summaryDict[controllerName]; if (strSummary) { $(item).children(".heading").children(".options").first().prepend('<li class="controller-summary" style="color:green;" title="' + strSummary + '">' + strSummary + '</li>'); } } catch (e) { console.log(e); } } }); } }); }catch(e) { console.log(e); } }, _tryTranslate: function (word) { return this._words[$.trim(word)] !== undefined ? this._words[$.trim(word)] : word; }, learn: function (wordsMap) { this._words = wordsMap; } }; /* jshint quotmark: double */ window.SwaggerTranslator.learn({ "Warning: Deprecated": "警告:已过时", "Implementation Notes": "实现备注", "Response Class": "响应类", "Status": "状态", "Parameters": "参数", "Parameter": "参数", "Value": "值", "Description": "描述", "Parameter Type": "参数类型", "Data Type": "数据类型", "Response Messages": "响应消息", "HTTP Status Code": "HTTP状态码", "Reason": "原因", "Response Model": "响应模型", "Request URL": "请求URL", "Response Body": "响应体", "Response Code": "响应码", "Response Headers": "响应头", "Hide Response": "隐藏响应", "Headers": "头", "Try it out!": "试一下!", "Show/Hide": "显示/隐藏", "List Operations": "显示操作", "Expand Operations": "展开操作", "Raw": "原始", "can't parse JSON. Raw result": "无法解析JSON. 原始结果", "Model Schema": "模型架构", "Model": "模型", "apply": "应用", "Username": "用户名", "Password": "密码", "Terms of service": "服务条款", "Created by": "创建者", "See more at": "查看更多:", "Contact the developer": "联系开发者", "api version": "api版本", "Response Content Type": "响应Content Type", "fetching resource": "正在获取资源", "fetching resource list": "正在获取资源列表", "Explore": "浏览", "Show Swagger Petstore Example Apis": "显示 Swagger Petstore 示例 Apis", "Can't read from server. It may not have the appropriate access-control-origin settings.": "无法从服务器读取。可能没有正确设置access-control-origin。", "Please specify the protocol for": "请指定协议:", "Can't read swagger JSON from": "无法读取swagger JSON于", "Finished Loading Resource Information. Rendering Swagger UI": "已加载资源信息。正在渲染Swagger UI", "Unable to read api": "无法读取api", "from path": "从路径", "server returned": "服务器返回" }); $(function () { window.SwaggerTranslator.translate(); window.SwaggerTranslator.setControllerSummary(); }); |
[…]
View Details
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//地址 string _url = "https://www.dXXXayup.ink/api/User/Login"; //json参数 string jsonParam = "{ phonenumber:\"18665885202\",pwd:\"tsp\"}"; var request = (HttpWebRequest)WebRequest.Create(_url); request.Method = "POST"; request.ContentType = "application/json;charset=UTF-8"; byte[] byteData = Encoding.UTF8.GetBytes(jsonParam); int length = byteData.Length; request.ContentLength = length; Stream writer = request.GetRequestStream(); writer.Write(byteData, 0, length); writer.Close(); var response = (HttpWebResponse)request.GetResponse(); var responseString = new StreamReader(response.GetResponseStream(), Encoding.GetEncoding("utf-8")).ReadToEnd(); MessageBox.Show(responseString.ToString()); |
View Details
1、普通索引 mysql>ALTER TABLE table_name ADD INDEX index_name ( column ) 普通索引(由关键字KEY或INDEX定义的索引)的唯一任务是加快对数据的访问速度。因此,应该只为那些最经常出现在查询条件(WHEREcolumn=)或排序条件(ORDERBYcolumn)中的数据列创建索引。只要有可能,就应该选择一个数据最整齐、最紧凑的数据列(如一个整数类型的数据列)来创建索引。 2、唯一索引 mysql>ALTER TABLE table_name ADD UNIQUE ( column ) 普通索引允许被索引的数据列包含重复的值。比如说,因为人有可能同名,所以同一个姓名在同一个“员工个人资料”数据表里可能出现两次或更多次。 如果能确定某个数据列将只包含彼此各不相同的值,在为这个数据列创建索引的时候就应该用关键字UNIQUE把它定义为一个唯一索引。这么做的好处:一是简化了MySQL对这个索引的管理工作,这个索引也因此而变得更有效率;二是MySQL会在有新记录插入数据表时,自动检查新记录的这个字段的值是否已经在某个记录的这个字段里出现过了;如果是,MySQL将拒绝插入那条新记录。也就是说,唯一索引可以保证数据记录的唯一性。事实上,在许多场合,人们创建唯一索引的目的往往不是为了提高访问速度,而只是为了避免数据出现重复。 3、主索引 mysql>ALTER TABLE table_name ADD PRIMARY KEY ( column ) 在前面已经反复多次强调过:必须为主键字段创建一个索引,这个索引就是所谓的“主索引”。主索引与唯一索引的唯一区别是:前者在定义时使用的关键字是PRIMARY而不是UNIQUE。 4、外键索引 mysql>ALTER TABLE table_name ADD FULLTEXT ( column) 如果为某个外键字段定义了一个外键约束条件,MySQL就会定义一个内部索引来帮助自己以最有效率的方式去管理和使用外键约束条件。 5、复合索引 mysql>ALTER TABLE table_name ADD INDEX index_name ( column1, column2, column3 ) 索引可以覆盖多个数据列,如像INDEX(columnA,columnB)索引。这种索引的特点是MySQL可以有选择地使用一个这样的索引。如果查询操作只需要用到columnA数据列上的一个索引,就可以使用复合索引INDEX(columnA,columnB)。不过,这种用法仅适用于在复合索引中排列在前的数据列组合。比如说,INDEX(A,B,C)可以当做A或(A,B)的索引来使用,但不能当做B、C或(B,C)的索引来使用。 6、索引的长度 在为CHAR和VARCHAR类型的数据列定义索引时,可以把索引的长度限制为一个给定的字符个数(这个数字必须小于这个字段所允许的最大字符个数)。这么做的好处是可以生成一个尺寸比较小、检索速度却比较快的索引文件。在绝大多数应用里,数据库中的字符串数据大都以各种各样的名字为主,把索引的长度设置为10~15个字符已经足以把搜索范围缩小到很少的几条数据记录了。在为BLOB和TEXT类型的数据列创建索引时,必须对索引的长度做出限制;MySQL所允许的最大索引全文索引文本字段上的普通索引只能加快对出现在字段内容最前面的字符串(也就是字段内容开头的字符)进行检索操作。如果字段里存放的是由几个、甚至是多个单词构成的较大段文字,普通索引就没什么作用了。这种检索往往以的形式出现,这对MySQL来说很复杂,如果需要处理的数据量很大,响应时间就会很长。 这类场合正是全文索引(full-textindex)可以大显身手的地方。在生成这种类型的索引时,MySQL将把在文本中出现的所有单词创建为一份清单,查询操作将根据这份清单去检索有关的数据记录。全文索引即可以随数据表一同创建,也可以等日后有必要时再使用下面这条命令添加: ALTERTABLEtablenameADDFULLTEXT(column1,column2)有了全文索引,就可以用SELECT查询命令去检索那些包含着一个或多个给定单词的数据记录了。下面是这类查询命令的基本语法: SELECT*FROMtablename WHEREMATCH(column1,column2)AGAINST(‘word1′,’word2′,’word3’) 上面这条命令将把column1和column2字段里有word1、word2和word3的数据记录全部查询出来。 from:https://www.cnblogs.com/interdrp/p/8031087.html
View Details1.html
1 2 3 |
<input type="text" @change="specifiName($event)" />//输入框的change事件 <input type="text" @input="specifiName($event)" />//输入框的输入事件 <input type="text" @keyup.enter="specifiName($event)" />//输入框的回车事件 |
2.js
1 2 3 4 5 6 7 8 9 10 |
var vm = new Vue({ el: "#app", methods: { specifiName(e) { var that = this; var val = e.target.value; console.log(val); }, } }); |
from:https://www.cnblogs.com/zhizou/p/10648513.html
View Details同事说decimal转换不了,仔细看了,没有问题,如图: 红色都是有问题的,肉眼是看不出任何问题的。 用正则也把空白,常用的回车换行符什么的都替换,依然转换不了。 后来,我打印一下字串的长度,发现总是比肉眼观察到的多一位,于是就复制了这个字符,直接替换,转换成功! 来看看下面的代码:
1 2 3 4 5 6 7 |
string tt1 = "941501"; string tt3 = "941501"; // 你没看错,以上两个值是不相等的,在tt1的后面有一个神秘的空白字符。 decimal.TryParse(tt1.Replace("", ""), out var tt2); // 别以为我是把空替换为空,前面的双引号里是有个看不见的字符的 MessageBox.Show(tt2.ToString(CultureInfo.InvariantCulture)+"\n"+(tt1.Length+"-"+tt3.Length)); |
通过转码,神秘字符转码后: UrlEncode:%E2%80%AC 十六进制:2623383233363B
View Details问题 提示丢失 VCRUNTIME140.DLL 解决方案 简介分析:建立装时,需要C++应用的必要组件, 去微软官网下载安装程序,安装就可以了。有64位版和32位版,根据计算机配置进行下载,下面是下载链接: 64位版下载地址:http://download.microsoft.com/download/9/E/1/9E1FA77A-9E95-4F3D-8BE1-4D2D0C947BA2/enu_INREL/vcredistd14x64/vc_redist.x64.exe 32位版下载地址:http://download.microsoft.com/download/9/E/1/9E1FA77A-9E95-4F3D-8BE1-4D2D0C947BA2/enu_INREL/vcredistd14x86/vc_redist.x86.exe from:https://blog.csdn.net/qq_41204464/article/details/93408593
View Details一、官方解释: v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 二、个人理解: 相同点:v-show和v-if都能控制元素的显示和隐藏。 不同点: 实现本质方法不同 v-show本质就是通过设置css中的display设置为none,控制隐藏 v-if是动态的向DOM树内添加或者删除DOM元素 编译的区别 v-show其实就是在控制css v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件 编译的条件 v-show都会编译,初始值为false,只是将display设为none,但它也编译了 v-if初始值为false,就不会编译了 性能 v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。 注意点:因为v-show实际是操作display:" "或者none,当css本身有display:none时,v-show无法让显示 总结:如果要频繁切换某节点时,使用v-show(无论true或者false初始都会进行渲染,此后通过css来控制显示隐藏,因此切换开销比较小,初始开销较大),如果不需要频繁切换某节点时,使用v-if(因为懒加载,初始为false时,不会渲染,但是因为它是通过添加和删除dom元素来控制显示和隐藏的,因此初始渲染开销较小,切换开销比较大) from:https://www.cnblogs.com/liutianzeng/p/10978890.html
View Details本篇将简单介绍常用的修饰符。 在上一篇中,介绍了 v-model 和 v-on 简单用法。除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。 一、v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值。 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时,按F12就可以在开发者工具里看到Vue页签。这里需要注意,只有在引用Vue的开发版本文件,即vue.js文件时,Vue Devtools工具才能正常使用。 .lazy 首先在 vm 对象中增加需要绑定的属性 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_lazy: "" } }); 在页面中的 input 的元素上添加指令 1 2 3 4 <div class="row"> <h2>v-model.lazy</h2> <input type="text" v-model.lazy="input_lazy" /> </div> 打开页面,开启Vue Devtools,在文本框中输入字符,查看属性值变化 当在文本框输入内容,并且光标焦点没有离开文本框时,属性值没有实时发生变化 而当焦点离开文本框时,属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。 .number 该修饰符用来将输入内容自动转换成数值。 在 vm 对象里增加一个属性,默认为空字符串 1 2 3 4 5 6 var vm = new Vue({ el: "#app", data: { input_number: "" } }); 在页面的 input 元素上添加指令 1 2 3 4 5 <div class="row"> <h2>v-model.number</h2> <input type="text" v-model.number="input_number" /> <hr /> […]
View DetailsJavaScript规范 目录 类型 对象 数组 字符串 函数 属性 变量 条件表达式和等号 块 注释 空白 逗号 分号 类型转换 命名约定 存取器 构造器 事件 模块 jQuery ES5 兼容性 HTML、CSS、JavaScript分离 使用jsHint 前端工具 类型 原始值: 相当于传值(JavaScript对象都提供了字面量),使用字面量创建对象。 string number boolean null undefined
1 2 3 4 5 6 |
<span class="kwd">var</span><span class="pln"> foo </span><span class="pun">=</span> <span class="lit">1</span><span class="pun">,</span><span class="pln"> bar </span><span class="pun">=</span><span class="pln"> foo</span><span class="pun">;</span><span class="pln"> bar </span><span class="pun">=</span> <span class="lit">9</span><span class="pun">;</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">foo</span><span class="pun">,</span><span class="pln"> bar</span><span class="pun">);</span> <span class="com">// => 1, 9</span> |
复杂类型: 相当于传引用 object array function
1 2 3 4 5 6 |
<span class="kwd">var</span><span class="pln"> foo </span><span class="pun">=</span> <span class="pun">[</span><span class="lit">1</span><span class="pun">,</span> <span class="lit">2</span><span class="pun">],</span><span class="pln"> bar </span><span class="pun">=</span><span class="pln"> foo</span><span class="pun">;</span><span class="pln"> bar</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span> <span class="pun">=</span> <span class="lit">9</span><span class="pun">;</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">foo</span><span class="pun">[</span><span class="lit">0</span><span class="pun">],</span><span class="pln"> bar</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span> <span class="com">// => 9, 9</span> |
对象 使用字面值创建对象。
1 2 3 4 5 |
<span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> item </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Object</span><span class="pun">();</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> item </span><span class="pun">=</span> <span class="pun">{};</span> |
不要使用保留字 reserved words 作为键。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> superman </span><span class="pun">=</span> <span class="pun">{</span> <span class="kwd">class</span><span class="pun">:</span> <span class="str">'superhero'</span><span class="pun">,</span> <span class="kwd">default</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> clark</span><span class="pun">:</span> <span class="str">'kent'</span> <span class="pun">},</span> <span class="kwd">private</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">};</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> superman </span><span class="pun">=</span> <span class="pun">{</span><span class="pln"> klass</span><span class="pun">:</span> <span class="str">'superhero'</span><span class="pun">,</span><span class="pln"> defaults</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> clark</span><span class="pun">:</span> <span class="str">'kent'</span> <span class="pun">},</span><span class="pln"> hidden</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">};</span> |
数组 使用字面值创建数组。
1 2 3 4 5 |
<span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Array</span><span class="pun">();</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span> <span class="pun">[];</span> |
如果你不知道数组的长度,使用push。
1 2 3 4 5 6 7 |
<span class="kwd">var</span><span class="pln"> someStack </span><span class="pun">=</span> <span class="pun">[];</span> <span class="com">// bad</span><span class="pln"> someStack</span><span class="pun">[</span><span class="pln">someStack</span><span class="pun">.</span><span class="pln">length</span><span class="pun">]</span> <span class="pun">=</span> <span class="str">'abracadabra'</span><span class="pun">;</span> <span class="com">// good</span><span class="pln"> someStack</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'abracadabra'</span><span class="pun">);</span> |
当你需要拷贝数组时使用slice. jsPerf。
1 2 3 4 5 6 7 8 9 10 11 |
<span class="kwd">var</span><span class="pln"> len </span><span class="pun">=</span><span class="pln"> items</span><span class="pun">.</span><span class="pln">length</span><span class="pun">,</span><span class="pln"> itemsCopy </span><span class="pun">=</span> <span class="pun">[],</span><span class="pln"> i</span><span class="pun">;</span> <span class="com">// bad</span> <span class="kwd">for</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> len</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln"> itemsCopy</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> items</span><span class="pun">[</span><span class="pln">i</span><span class="pun">];</span> <span class="pun">}</span> <span class="com">// good</span><span class="pln"> itemsCopy </span><span class="pun">=</span><span class="pln"> items</span><span class="pun">.</span><span class="pln">slice</span><span class="pun">();</span> |
使用slice将类数组的对象转成数组。
1 2 3 4 |
<span class="kwd">function</span><span class="pln"> trigger</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> args </span><span class="pun">=</span> <span class="pun">[].</span><span class="pln">slice</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">(</span><span class="pln">arguments</span><span class="pun">);</span> <span class="pun">...</span> <span class="pun">}</span> |
字符串 对字符串使用单引号 "(因为大多时候我们的字符串。特别html会出现")。
1 2 3 4 5 6 7 8 9 10 11 |
<span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span> <span class="str">"Bob Parr"</span><span class="pun">;</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span> <span class="str">'Bob Parr'</span><span class="pun">;</span> <span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> fullName </span><span class="pun">=</span> <span class="str">"Bob "</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">lastName</span><span class="pun">;</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> fullName </span><span class="pun">=</span> <span class="str">'Bob '</span> <span class="pun">+</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">lastName</span><span class="pun">;</span> |
超过80(也有规定140的,项目具体可制定)个字符的字符串应该使用字符串连接换行。 注: 如果过度使用,长字符串连接可能会对性能有影响。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> errorMessage </span><span class="pun">=</span> <span class="str">'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'</span><span class="pun">;</span> <span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> errorMessage </span><span class="pun">=</span> <span class="str">'This is a super long error that \ was thrown because of Batman. \ When you stop to think about \ how Batman had anything to do \ with this, you would get nowhere \ fast.'</span><span class="pun">;</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> errorMessage </span><span class="pun">=</span> <span class="str">'This is a super long error that '</span> <span class="pun">+</span> <span class="str">'was thrown because of Batman.'</span> <span class="pun">+</span> <span class="str">'When you stop to think about '</span> <span class="pun">+</span> <span class="str">'how Batman had anything to do '</span> <span class="pun">+</span> <span class="str">'with this, you would get nowhere '</span> <span class="pun">+</span> <span class="str">'fast.'</span><span class="pun">;</span> |
编程时使用join而不是字符串连接来构建字符串。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<span class="kwd">var</span><span class="pln"> items</span><span class="pun">,</span><span class="pln"> messages</span><span class="pun">,</span><span class="pln"> length</span><span class="pun">,</span><span class="pln"> i</span><span class="pun">;</span><span class="pln"> messages </span><span class="pun">=</span> <span class="pun">[{</span><span class="pln"> state</span><span class="pun">:</span> <span class="str">'success'</span><span class="pun">,</span><span class="pln"> message</span><span class="pun">:</span> <span class="str">'This one worked.'</span> <span class="pun">},{</span><span class="pln"> state</span><span class="pun">:</span> <span class="str">'success'</span><span class="pun">,</span><span class="pln"> message</span><span class="pun">:</span> <span class="str">'This one worked as well.'</span> <span class="pun">},{</span><span class="pln"> state</span><span class="pun">:</span> <span class="str">'error'</span><span class="pun">,</span><span class="pln"> message</span><span class="pun">:</span> <span class="str">'This one did not work.'</span> <span class="pun">}];</span><span class="pln"> length </span><span class="pun">=</span><span class="pln"> messages</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span> <span class="com">// bad</span> <span class="kwd">function</span><span class="pln"> inbox</span><span class="pun">(</span><span class="pln">messages</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> items </span><span class="pun">=</span> <span class="str">'<ul>'</span><span class="pun">;</span> <span class="kwd">for</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln"> items </span><span class="pun">+=</span> <span class="str">'<li>'</span> <span class="pun">+</span><span class="pln"> messages</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">message </span><span class="pun">+</span> <span class="str">'</li>'</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">return</span><span class="pln"> items </span><span class="pun">+</span> <span class="str">'</ul>'</span><span class="pun">;</span> <span class="pun">}</span> <span class="com">// good</span> <span class="kwd">function</span><span class="pln"> inbox</span><span class="pun">(</span><span class="pln">messages</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> items </span><span class="pun">=</span> <span class="pun">[];</span> <span class="kwd">for</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> length</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span><span class="pln"> items</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> messages</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">message</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">return</span> <span class="str">'<ul><li>'</span> <span class="pun">+</span><span class="pln"> items</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="str">'</li><li>'</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">'</li></ul>'</span><span class="pun">;</span> <span class="pun">}</span> |
函数 函数表达式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="com">// 匿名函数表达式</span> <span class="kwd">var</span><span class="pln"> anonymous </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span> <span class="pun">};</span> <span class="com">// 有名函数表达式</span> <span class="kwd">var</span><span class="pln"> named </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> named</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span> <span class="pun">};</span> <span class="com">// 立即调用函数表达式</span> <span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Welcome to the Internet. Please follow me.'</span><span class="pun">);</span> <span class="pun">})();</span> |
绝对不要在一个非函数块里声明一个函数,把那个函数赋给一个变量。浏览器允许你这么做,但是它们解析不同。 注: ECMA-262定义把块定义为一组语句,函数声明不是一个语句。阅读ECMA-262对这个问题的说明。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="com">// bad</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">currentUser</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">function</span><span class="pln"> test</span><span class="pun">()</span> <span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Nope.'</span><span class="pun">);</span> <span class="pun">}</span> <span class="pun">}</span> <span class="com">// good</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">currentUser</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> test </span><span class="pun">=</span> <span class="kwd">function</span><span class="pln"> test</span><span class="pun">()</span> <span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Yup.'</span><span class="pun">);</span> <span class="pun">};</span> <span class="pun">}</span> |
绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象。
1 2 3 4 5 6 7 8 9 |
<span class="com">// bad</span> <span class="kwd">function</span><span class="pln"> nope</span><span class="pun">(</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">,</span><span class="pln"> arguments</span><span class="pun">)</span> <span class="pun">{</span> <span class="com">// ...stuff...</span> <span class="pun">}</span> <span class="com">// good</span> <span class="kwd">function</span><span class="pln"> yup</span><span class="pun">(</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">,</span><span class="pln"> args</span><span class="pun">)</span> <span class="pun">{</span> <span class="com">// ...stuff...</span> <span class="pun">}</span> |
属性 当使用变量和特殊非法变量名时,访问属性时可以使用中括号(. 优先)。
1 2 3 4 5 6 7 8 9 10 |
<span class="kwd">var</span><span class="pln"> luke </span><span class="pun">=</span> <span class="pun">{</span><span class="pln"> jedi</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> age</span><span class="pun">:</span> <span class="lit">28</span> <span class="pun">};</span> <span class="kwd">function</span><span class="pln"> getProp</span><span class="pun">(</span><span class="pln">prop</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">return</span><span class="pln"> luke</span><span class="pun">[</span><span class="pln">prop</span><span class="pun">];</span> <span class="pun">}</span> <span class="kwd">var</span><span class="pln"> isJedi </span><span class="pun">=</span><span class="pln"> getProp</span><span class="pun">(</span><span class="str">'jedi'</span><span class="pun">);</span> |
变量 总是使用 var 来声明变量,如果不这么做将导致产生全局变量,我们要避免污染全局命名空间。
1 2 3 4 5 |
<span class="com">// bad</span><span class="pln"> superPower </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">SuperPower</span><span class="pun">();</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> superPower </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">SuperPower</span><span class="pun">();</span> |
使用一个 var 以及新行声明多个变量,缩进4个空格。
1 2 3 4 5 6 7 8 9 |
<span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">();</span> <span class="kwd">var</span><span class="pln"> goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span> <span class="kwd">var</span><span class="pln"> dragonball </span><span class="pun">=</span> <span class="str">'z'</span><span class="pun">;</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln"> goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> dragonball </span><span class="pun">=</span> <span class="str">'z'</span><span class="pun">;</span> |
最后再声明未赋值的变量,当你想引用之前已赋值变量的时候很有用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> len</span><span class="pun">,</span><span class="pln"> dragonball</span><span class="pun">,</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln"> goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span> <span class="com">// bad</span> <span class="kwd">var</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln"> dragonball</span><span class="pun">,</span><span class="pln"> goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> len</span><span class="pun">;</span> <span class="com">// good</span> <span class="kwd">var</span><span class="pln"> items </span><span class="pun">=</span><span class="pln"> getItems</span><span class="pun">(),</span><span class="pln"> goSportsTeam </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> dragonball</span><span class="pun">,</span><span class="pln"> length</span><span class="pun">,</span><span class="pln"> i</span><span class="pun">;</span> |
在作用域顶部声明变量,避免变量声明和赋值引起的相关问题。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<span class="com">// bad</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln"> test</span><span class="pun">();</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'doing stuff..'</span><span class="pun">);</span> <span class="com">//..other stuff..</span> <span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">name </span><span class="pun">===</span> <span class="str">'test'</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">return</span><span class="pln"> name</span><span class="pun">;</span> <span class="pun">}</span> <span class="com">// good</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span><span class="pln"> test</span><span class="pun">();</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'doing stuff..'</span><span class="pun">);</span> <span class="com">//..other stuff..</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">name </span><span class="pun">===</span> <span class="str">'test'</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">return</span><span class="pln"> name</span><span class="pun">;</span> <span class="pun">}</span> <span class="com">// bad</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">if</span> <span class="pun">(!</span><span class="pln">arguments</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span> <span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span> <span class="pun">}</span> <span class="com">// good</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> getName</span><span class="pun">();</span> <span class="kwd">if</span> <span class="pun">(!</span><span class="pln">arguments</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">return</span> <span class="kwd">false</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">return</span> <span class="kwd">true</span><span class="pun">;</span> <span class="pun">}</span> |
[…]
View DetailsWeb前端开发技术栈 浏览器 Internet Explorer Chrome Firefox Safari Opera Edge Netscape 协议 HTTP/1.1 链接 会话 授权 请求 响应 HTTP/2 压缩 打包 服务器端推送 WebSocket Web三剑客 HTML (HyperText Markup Language) CSS (Cascading Style Sheets) JavaScript 标准 W3C HTML CSS XHTML XML 核心概念 HTML DOM Element Attribute JavaScript Prototype Scope Closure JSON (JavaSript Object Notation) AJAX (Asynchronous JavaScript and XML) CSS Selector Priority Specificity Box Model 渲染引擎 Trident (IE) Blink / prev. WebKit (Chrome) Gecko (Firefox) WebKit (Safari) Blink / prev. Presto (Opera) EdgeHTML (Edge) 脚本引擎 JScript (IE8- / ASP) Chakra (IE9+ […]
View Details