• 111111
• 222222
• 333333

这一切都是为了程序在嵌套的时候更加方便、明了。方便了他人同时也就方便了自己。程序嵌套的很乱，到时要你去修改那也是一份挺复杂的工序。2、css注释一般会使用在定义某个模块样式的上边，说明这段样式是作用于哪段模块，如： /*通用 - 评论*/.comment{...}/*相册*/.photo{...}/*分享*/.share{...}/*投票*/.vote{...}3、javascript注释一般将注释添加在某段功能函数的上边，说明函数的功能、作者、作者信息、修改时间。 //========================================================// 截断字符// steepvi// rtx:*******// 2010-10-14//========================================================最后，注释也是字符也是会有流量产生。因此当页面发布到正式地址的时候，最好加上一步优化流程。压缩过程为非逆过程，保证本地是最新的而且带有注释的文件，压缩后上传服务器。服务器端的文件不可用作本地调试用。相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！相关阅读：HTML图片的img标签怎样使用HTML5的WEB界面中meta实列详解HTML中如何使用html表单提交的操作
如何编写有质量的JS代码

这篇文章给大家讲述了如何遵循12条方法来写出高质量的JS代码的经验，有这方便需要的朋友参考下吧。书写出高质量的JS代码不仅让程序员看着舒服，更加能够提高程序的运行速度，以下就是我整理方法：一、如何书写可维护性的代码当出现bug的时候如果你能立马修复它是最好的，此时解决问题的四路在你脑中还是很清晰的。否则，你转移到其他任务或者bug是经过一定的时间才出现的，你忘了那个特定的代码，一段时间后再去查看这些代码就 需要：1.花时间学习和理解这个问题 2.化时间是了解应该解决的问题代码还有个问题，特别对于大的项目或是公司，修复bug的这位伙计不是写代码的那个人（且发现bug和修复bug的不是同一个人）。因此，必须降低理解代 码花费的时间，无论是一段时间前你自己写的代码还是团队中的其他成员写的代码。这关系到底线（营业收入）和开发人员的幸福，因为我们更应该去开发新的激动 人心的事物而不是花几小时几天的时间去维护遗留代码。所以创建可维护性代码是至关重要的，一般可维护性的代码有以下几个原则：可读性一致性可预测性看上去就像同一个人写的已记录二、全局变量的问题全局变量的问题在于，你的JavaScript应用程序和web页面上的所有代码都共享了这些全局变量，他们住在同一个全局命名空间，所以当程序的两个不同部分定义同名但不同作用的全局变量的时候，命名冲突在所难免。web页面包含不是该页面开发者所写的代码也是比较常见的，例如：第三方的JavaScript库广告方的脚本代码第三方用户跟踪和分析脚本代码不同类型的小组件，标志和按钮例如说，该第三方脚本定义了一个全局变量，叫做A；接着，在你的函数中也定义一个名为A的全局变量。其结果就是后面的变量覆盖前面的，第三方脚本就一下子失效啦！而且很难debug出来。因此：尽可能少的使用全局变量是很重要的，例如命名空间模式或是函数立即自动执行，但是要想让全局变量少最重要的还是始终使用var来声明变量。三、忘记var作用的副作用隐式全局变量和明确定义的全局变量间有些小的差异，就是通过delete操作符让变量未定义的能力。具体如下：通过var创建的全局变量（任何函数之外的程序中创建）是不能被删除的。没有通过var创建的隐式全局变量（无视是否在函数中创建）是能被删除的。所以隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。属性是可以通过delete操作符删除的，而变量是不能的，具体代码我就不写了。四、访问全局对象在浏览器中，全局对象可以通过window属性在代码的任何位置访问（除非你做了些比较出格的事情，像是声明了一个名为window的局部变量）。但是在其他环境下，这个方便的属性可能被叫做其他什么东西（甚至在程序中不可用）。如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：var global = (function () { return this; }());五、for循环在for循环中，你可以循环取得数组或是数组类似对象的值，譬如arguments和HTMLCollection对象。通常的循环形式如下：// 次佳的循环 for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么 }这种形式的循环的不足在于每次循环的时候数组的长度都要去获取下。这回降低你的代码，尤其当myarray不是数组，而是一个HTMLCollection对象的时候。六、不扩展内置原型扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。增加内置的构造函数原型（如Object(), Array(), 或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作，而不是你另加的方法。另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。七、避免隐式类型转换JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如：false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。var zero = 0; if (zero === false) { // 不执行，因为zero为0, 而不是false } // 反面示例 if (zero == false) { // 执行了... }八、避免eval()如果你现在的代码中使用了eval()，记住该咒语“eval()是魔鬼”。此方法接受任意的字符串，并当作JavaScript代码来处理。当有 问题的代码是事先知道的（不是运行时确定的），没有理由使用eval()。如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目 标。例如，用方括号表示法来访问动态属性会更好更简单：// 反面示例 var property = "name"; alert(eval("obj." + property)); // 更好的 var property = "name"; alert(obj[property]);使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSON.parse()，你可 以使用来自JSON.org的库。同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：// 反面示例 setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // 更好的 setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000);使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。考虑下面这个例子，这里仅un作为全局变量污染了命名空间。console.log(typeof un); // "undefined" console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined" var jsstring = "var un = 1; console.log(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; console.log(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; console.log(trois);"; (function () { eval(jsstring); }()); // logs "3" console.log(typeof un); // number console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined"另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。(function () { var local = 1; eval("local = 3; console.log(local)"); // logs "3" console.log(local); // logs "3" }()); (function () { var local = 1; Function("console.log(typeof local);")(); // logs undefined九、编码规范建立和遵循编码规范是很重要的，这让你的代码保持一致性，可预测，更易于阅读和理解。一个新的开发者加入这个团队可以通读规范，理解其它团队成员书写的代码，更快上手干活。十、缩进代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进，因为它看上去像是遵循了规范，但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。十一、注释你必须注释你的代码，即使不会有其他人向你一样接触它。通常，当你深入研究一个问题，你会很清楚的知道这个代码是干嘛用的，但是，当你一周之后再回来看的时候，想必也要耗掉不少脑细胞去搞明白到底怎么工作的。很显然，注释不能走极端：每个单独变量或是单独一行。但是，你通常应该记录所有的函数，它们的参数和返回值，或是任何不寻常的技术和方法。要想到注 释可以给你代码未来的阅读者以诸多提示；阅读者需要的是（不要读太多的东西）仅注释和函数属性名来理解你的代码。例如，当你有五六行程序执行特定的任务， 如果你提供了一行代码目的以及为什么在这里的描述的话，阅读者就可以直接跳过这段细节。没有硬性规定注释代码比，代码的某些部分（如正则表达式）可能注释 要比代码多。十二、花括号{}花括号（亦称大括号，下同）应总被使用，即使在它们为可选的时候。技术上将，在in或是for中如果语句仅一条，花括号是不需要的，但是你还是应该总是使用它们，这会让代码更有持续性和易于更新。上面是我整理给大家的，希望今后会对大家有帮助。相关文章：使用vue如何实现权限管理功能在webpack-dev-server中如何使用http-proxy（详细教程）在vuejs中如何实现递归树型菜单组件（详细教程）在vue中如何使用echarts

怎样编写可自定义维护JS代码

这次给大家带来怎样编写可自定义维护JS代码，编写可自定义维护JS代码的注意事项有哪些，下面就是实战案例，一起来看一下。1.1 格式化关于缩进层次: 我不想挑起“Tab or Space”和“2 or 4 or 6 or 8 Space”的辩论，对这个话题是可以争论上好几个小时的，缩进甚至关系到程序员的价值观。你只要记住以下三点：代码一定要缩进，保持对其。不要在同一个项目中混用Tab和Space。保持与团队风格的统一。关于结尾分号: 有赖于分析器的自动分号插入（Automatic Semicolon Insertion, ASI）机制，JS代码省略分号也是可以正常工作的。ASI会自动寻找代码中应当使用分号但实际没有分号的位置，并插入分号。大多数场景下ASI都会正确插入分号，不会产生错误，但ASI的分号插入规则非常复杂且很难记住，因此我推荐不要省略分号。大部分的风格指南（除了JavaScript Standard Style）都推荐不要省略分号。关于行的长度: 大部分的语言以及JS编码风格指南都指定一行的长度为80个字符，这个数值来源于很久之前文本编辑器的单行最多字符限制，即编辑器中单行最多只能显示80个字符，超过80个字符的行要么折行，要么被隐藏起来，这些都是我们所不希望的。我也倾向于将行长度限定在80个字符。关于换行：当一行长度达到了单行最大字符限制时，就需要手动将一行拆成两行。通常我们会在运算符后换行，下一行会增加两个层次的缩进（我个人认为一个缩进也可以，但绝对不能没有缩进）。例如：callFunc(document, element, window, 'test', 100, true);在这个例子中，逗号是一个运算符，应当作为前一行的行尾。这个换行位置非常重要，因为ASI机制会在某些场景下在行结束的位置插入分号。总是将一个运算符置于行尾，ASI就不会自作主张地插入分号，也就避免了错误的发生。这个规则有一个例外：当给变量赋值时，第二行的位置应当和赋值运算符的位置保持对齐。比如：var result = something + anotherThing + yetAnotherThing + somethingElse + anotherSomethingElse;这段代码里，变量 anotherSomethingElse 和行首的 something 保持左对齐，确保代码的可读性，并能一眼看清楚折行文本的上下文。关于空行：在编程规范中，空行是常常被忽略的一个方面。通常来讲，代码看起来应当像一系列可读的段落，而不是一大段揉在一起的连续文本。有时一段代码的语义和另一段代码不相关，这时就应该使用空行将它们分隔，确保语义有关联的代码展现在一起。一般来讲，建议下面这些场景中添加空行：在方法之间。在方法中的局部变量和第一条语句之间。在多行或单行注释之前。在方法内的逻辑片段之间插入空行，提高可读性。1.2 命名命名分变量、常量、函数、构造函数四类：其中变量和函数使用小驼峰命名法（首字母小写），构造函数使用大驼峰命名法（首字母大写），常量使用全大写并用下划线分割单词。let myAge; // 变量：小驼峰命名const PAGE_SIZE; // 常量：全大写，用下划线分割单词function getAge() {} // 普通函数：小驼峰命名function Person() {} // 构造函数：大驼峰命名为了区分变量和函数，变量命名应该以名字作为前缀，而函数名前缀应当是动词（构造函数的命名通常是名词）。看如下例子：let count = 10; // Goodlet getCount = 10; // Bad, look like functionfunction getName() {} // Goodfunction theName() {} // Bad, look like variable命名不仅是一门科学，更是一门技术，但通常来讲，命名长度应该尽可能短，并抓住要点。尽量在变量名中体现出值的数据类型。比如，命名count、length和size表明数据类型是数字，而命名name、title和message表明数据类型是字符串。但用单个字符命名的变量诸如i、j和k通常在循环中使用。使用这些能够体现出数据类型的命名，可以让你的代码容易被别人和自己读懂。要避免使用没有意义的命名，如：foo、bar和tmp。对于函数和方法命名来说，第一个单词应该是动词，这里有一些使用动词常见的约定：动词 含义can 函数返回一个布尔值 has 函数返回一个布尔值 is 函数返回一个布尔值 get 函数返回一个非布尔值 set 函数用来保存一个值 1.3 直接量JS中包含一些类型的原始值：字符串、数字、布尔值、null和undefined。同样也包含对象直接量和数组直接量。这其中，只有布尔值是自解释（self-explanatory）的，其他的类型或多或少都需要思考一下它们如何才能更精确地表示出来。关于字符串：字符串可以用双引号也可以用单引号，不同的JS规范推荐都不同， 但切记不可在一个项目中混用单引号和双引号。关于数字：记住两点建议：第一，为了避免歧义，请不要省略小数点之前或之后的数字；第二，大多数开发者对八进制格式并不熟悉，也很少用到，所以最好的做法是在代码中禁止八进制直接量。// 不推荐的小数写法：没有小数部分let price = 10.;// 不推荐的小数写法：没有整数部分let price = .1;// 不推荐的写法：八进制写法已经被弃用了let num = 010;关于null：null是一个特殊值，但我们常常误解它，将它和undefined搞混。在下列场景中应当使用null。用来初始化一个变量，这个变量可能赋值为一个对象。用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象。当函数的参数期望是对象时，用作参数传入。当函数的返回值期望是对象时，用作返回值传出。还有下面一些场景不应当使用null。不要使用null来检测是否传入了某个参数。不要用null来检测一个未初始化的变量。理解null最好的方式是将它当做对象的占位符（placeholder）。这个规则在所有的主流编程规范中都没有提及，但对于全局可维护性来说至关重要。关于undefined：undefined是一个特殊值，我们常常将它和null搞混。其中一个让人颇感困惑之处在于null == undefined结果是true。然而，这两个值的用途却各不相同。那些没有被初始化的变量都有一个初始值，即undefined，表示这个变量等待被赋值。比如：let person; // 不好的写法console.log(person === undefined); // true尽管这段代码能正常工作，但我建议避免在代码中使用undefined。这个值常常和返回"undefined"的typeof运算符混淆。事实上，typeof的行为也很让人费解，因为不管是值是undefined的变量还是未声明的变量，typeof运算结果都是"undefined"。比如：// foo未被声明let person;console.log(typeof person); // "undefined"console.log(typeof foo); // "undefined"这段代码中，person和foo都会导致typeof返回"undefined"，哪怕person和foo在其他场景中的行为有天壤之别(在语句中使用foo会报错，而使用person则不会报错)。通过禁止使用特殊值undefined，可以有效地确保只在一种情况下typeof才会返回"undefined"：当变量为声明时。如果你使用了一个可能(或者可能不会)赋值为一个对象的变量时，则将其赋值为null。// 好的做法let person = null;console.log(person === null); // true将变量初始值赋值为null表明了这个变量的意图，它最终很可能赋值为对象。typeof运算符运算null的类型时返回"object"， 这样就可以和undefined区分开了。关于对象直接量和数组直接量: 请直接使用直接量语法来创建对象和数组，避免使用Object和Array构造函数来创建对象和数组。1.4 注释注释是代码中最常见的组成部分。它们是另一种形式的文档，也是程序员最后才舍得花时间去写的。但是，对于代码的总体可维护性而言，注释是非常重要的一环。JS支持两种注释：单行注释和多行注释。很多人喜欢在双斜线后敲入一个空格，用来让注释文本有一定的偏移（我非常推荐你这么做）。单行注释有三种使用方法：独占一行的注释，用来解释下一行代码。这行注释之前总是有一个空行，且缩进层级和下一行代码保持一致。在代码行的尾部的注释。代码结束到注释之间至少有一个缩进。注释（包括之前的代码部分）不应当超过最大字符数限制，如果超过了，就将这条注释放置于当前代码行的上方。被注释的大段代码（很多编辑器都可以批量注释掉多行代码）。单行注释不应当以连续多行注释的形式出现，除非你注释掉一大段代码。只有当需要注释一段很长的文本时才使用多行注释。虽然多行注释也可以用于注释单行，但是我还是推荐仅在需要使用多行注释的时候，才使用多行注释。多行注释一般用于以下场景：模块、类、函数开头的注释需要使用多行注释我十分推荐你使用Java风格的多行注释，看起来十分美观，而且很多编辑器支持自动生成，见如下示例：/** * Java风格的注释，注意*和注释之间 * 有一个空格，并且*左边也有一个空格。 * 你甚至可以加上一些@参数来说明一些东西。 * 例如： * * @author 作者 * @param Object person */何时添加注释是程序员经常争论的一个话题。一个通行的指导原则是， 当代码不够清晰时添加注释，而当代码很明了时不应当添加注释。 基于这个原则，我推荐你在下面几种情况下添加注释：难以理解的代码： 难以理解的代码通常都应当加注释。根据代码的用途，你可以用单行注释、多行注释，或者混用这两种注释。关键是让其他人更容易读懂这段代码。可能被误认为错误的代码： 例如这段代码while(el && (el = el.next)) {}。在团队开发中，总是会有一些好心的开发者在编辑代码时发现他人的代码错误，就立即将它修复。有时这段代码并不是错误的源头，所以“修复”这个错误往往会制造其他错误，因此本次修改应当是可追踪的。当你写的代码有可能会被别的开发者认为有错误时，则需要添加注释。浏览器特性hack： 这个写过前端的都知道，有时候你不得不写一些低效的、不雅的、彻头彻尾的肮脏代码，用来让低版本浏览器正常工作。1.5 语句和表达式关于 花括号的对齐方式 ，有两种主要的花括号对齐风格。第一种风格是，将左花括号放置在块语句中第一句代码的末尾，这种风格继承自Java；第二种风格是将左花括号放置于块语句首行的下一行，这种风格是随着C#流行起来的，因为Visual Studio强制使用这种对齐方式。当前并无主流的JS编程规范推荐这种风格，Google JS风格指南明确禁止这种用法，以免导致错误的分号自动插入。我个人也推荐使用第一种花括号对齐格式。// 第一种花括号对齐风格if (condition) {}// 第二种花括号对齐风格if (condition){}关于块语句间隔: 有下面三种风格，大部分的代码规范都推荐使用第二种风格：// 第一种风格if(condition){ doSomething();}// 第二种风格if (condition) { doSomething();}// 第三种风格if ( condition ) { doSomething();}关于switch语句，很多JS代码规范都没有对此做详细的规定，一个是而实际工作中你也会发现使用场景比较少。因为你只有在有很多条件判断的情况下才会用switch（短条件就直接用if语句了），但是熟练的程序员面对很多的判断条件一般都会用对象表查询来解决这个问题。看如下推荐的风格代码：switch (condition) { case 'cond1': case 'cond2': doCond1(); break; case 'cond3': doCond3(); break; default: doDefault();}推荐你遵循如下的风格：switch后的条件括号需要前后各一个空格；case语句需要相对switch语句缩进一个层级；允许多个case语句共用一个处理语句；如果没有默认执行代码，可以不用加default关于with：JS引擎和压缩工具无法对有with语句的代码进行优化，因为它们无法猜出代码的正确含义。在严格模式中，with语句是被明确禁止的，如果使用则报语法错误。这表明ECMAScript委员会确信with不应当继续使用。我也强烈推荐避免使用with语句。关于for循环：for循环有两种，一种是传统的for循环，是JS从C和Java中继承而来，主要用于遍历数组成员；另外一种是for-in循环，用来遍历对象的属性。针对for循环， 我推荐尽可能避免使用continue，但也没有理由完全禁止使用，它的使用应当根据代码可读性来决定。for-in循环是用来遍历对象属性的。不用定义任何控制条件，循环将会有条不紊地遍历每个对象属性，并返回属性名而不是值。for-in循环有一个问题，就是它不仅遍历对象的实例属性（instance property），同样还遍历从原型继承来的属性。当遍历自定义对象的属性时，往往会因为意外的结果而终止。出于这个原因，最好使用hasOwnProperty()方法来为for-in循环过滤出实例属性。我也推荐你这么做，除非你确实想要去遍历对象的原型链，这个时候你应该加上注释说明一下。// 包含对原型链的遍历for (let prop in obj) { console.log(`key: ${prop}; value: ${obj[prop]}`);}for (let prop in obj) { if (obj.hasOwnProperty(prop)) { console.log(`key: ${prop}; value: ${obj[prop]}`); }}关于for-in循环，还有一点需要注意，即for-in循环是用来遍历对象的。一个常见的错误用法是使用for-in循环来遍历数组成员，它的结果可能不是你想要的（得到的是数组下标），你应该使用ES6的for-of循环来遍历数组。let arr = ['a', 'b', 'c'];for (let i in arr) { console.log(i); // 0, 1, 2}for (let v of arr) { console.log(v); // 'a', 'b', 'c'}1.6 变量声明我们知道JS中var声明的变量存在变量提升，对变量提升不熟悉的同学写代码的时候就会产生不可意料的Bug。例如：function func () { var result = 10 + result; var value = 10; return result; // return NaN}// 实际被解释成function func () { var result; var value; result = 10 + result; value = 10; return result;}在某些场景中，开发者往往会漏掉变量提升，for语句就是其中一个常见的例子（因为ES5之前没有块级作用域）：function func (arr) { for (var i = 0, len = arr.length; i < len; i += 1) {}}// 实际被解释成function func (arr) { var i, len; for (i = 0, len = arr.length; i < len; i += 1) {}}变量声明提前意味着：在函数内部任意地方定义变量和在函数顶部定义变量是完全一样的。 因此，一种流行的风格是将你所有变量声明放在函数顶部而不是散落在各个角落。简言之，依照这种风格写出的代码逻辑和JS引擎解析这段代码的习惯是非常相似的。我也建议你总是将局部变量的定义作为函数内第一条语句。function func (arr) { var i, len; var value = 10; var result = value + 10; for (i = 0; len = arr.length; i < len; i += 1) { console.log(arr[i]); }}当然，如果你有机会使用ES6，那我强烈推荐你完全抛弃var，直接用let和const来定义变量。相信我，抛弃var绝对值得的，let和const提供了块级作用域，比var更安全可靠，行为更可预测。1.7 函数声明与调用和变量声明一样，函数声明也会被JS引擎提升。因此，在代码中函数的调用可以出现在函数声明之前。但是，我们推荐总是先声明JS函数然后使用函数。此外，函数声明不应当出现在语句块之内。例如，这段代码就不会按照我们的意图来执行：// 不好的写法if (condition) { function func () { alert("Hi!"); }} else { function func () { alert("Yo!"); }}这段代码在不同浏览器中的运行结果也是不尽相同的。不管condition的计算结果如何，大多数浏览器都会自动使用第二个声明。而Firefox则根据condition的计算结果选用合适的函数声明。这种场景是ECMAScript的一个灰色地带，应当尽可能地避免。函数声明应当在条件语句的外部使用。这种模式也是Google的JS风格指南明确禁止的。一般情况下，对于函数调用写法推荐的风格是，在函数名和左括号之间没有空格。这样做是为了将它和块语句区分开发。// 好的写法callFunc(params);// 不好的写法，看起来像一个块语句callFunc (params);// 用来做对比的块语句while (condition) {}1.8 立即调用的函数IIFE(Immediately Invoked Function Expression)，意为立即调用的函数表达式，也就是说，声明函数的同时立即调用这个函数。ES6中很少使用了，因为有模块机制，而IIFE最主要的用途就是来模拟模块隔离作用域的。下面有一些推荐的IIFE写法：// 不好的写法：会让人误以为将一个匿名函数赋值给了这个变量var value = function () { return { msg: 'Hi' };}();// 为了让IIFE能够被一眼看出来，可以将函数用一对圆括号包裹起来// 好的写法var value = (function () { return { msg: 'Hi' };}());// 好的写法var value = (function () { return { msg: 'Hi' };})();1.9 严格模式如果你在写ES5代码，推荐总是使用严格模式。不推荐使用全局的严格模式，可能会导致老的代码报错。推荐使用函数级别的严格模式，或者在IIFE中使用严格模式。1.10 相等关于JS的强制类型转换机制，我们不得不承认它确实很复杂，很难全部记住（主要是懒）。所以我推荐你，任何情况下，做相等比较请用===和!==。1.11 eval动态执行JS字符串可不是一个好主意，在下面几种情况中，都可以动态执行JS，我建议你应该避免这么做，除非你精通JS，并且知道自己在做什么。eval("alert('bad')");const func = new Function("alert bad('bad')");setTimeout("alert('bad')", 1000);setInterval("alert('bad')", 1000);1.12 原始包装类型JS装箱和拆箱了解下，原始值是没有属性和方法的，当我们调用一个字符串的方法时，JS引擎会自动把原始值装箱成一个对象，然后调用这个对象的方法。但这并不意味着你应该使用原始包装类型来创建对应的原始值，因为开发者的思路常常会在对象和原始值之间跳来跳去，这样会增加出bug的概率，从而使开发者陷入困惑。你也没有理由自己手动创建这些对象。// 自动装箱const name = 'Nicholas';console.log(name.toUpperCase());// 好的写法const name = 'Nicholas';const author = true;const count = 10;// 不好的写法const name = new String('Nicholas');const author = new String(true);const count = new Number(10);1.13 工具团队开发中，为了保持风格的统一，Lint工具必不可少。因为即使大家都明白要遵守统一的编程风格，但是写代码的时候总是不经意就违背风格指南的规定了（毕竟人是会犯错的）。这里我推荐你使用ESLint工具进行代码的风格检查，你没必要完全重新写配置规则，你可以继承已有的业内优秀的JS编码规范来针对你团队做微调。我这里推荐继承自Airbnb JavaScript Style Guide，当然，你也可以继承官方推荐的配置或者Google的JS编码风格，其实在编码风格上，三者在大部分的规则上是相同的，只是在一部分细节上不一致而已。当然，如果你实在是太懒了，那了解

AngularJs自定义指令可以如何来设置以及自定义指令的命名规范

AngularJS为我们提供了自定义指令的功能，通过此功能，我们可以自定义一些标签，为我们自己的开发来提供帮助。下面的内容我将给大家分享关于AngularJs通过directive和restrict来设置自定义指令的方法。一、AngularJs自定义指令directive的restrict属性说明：今天公用的html部分：

JavaScript部分：var m = angular.module('app', []);m.directive('zymBlog', [function(){ return { restrict : 'AEC', template : '

hello world

', replace : true };}]);通过directive设置自定义指令，第一个参数是指令名称，第二个参数是数组，包含一个回调函数，函数的返回值是一个json对象，其中：restrict表示指令的形式：A是属性、E是元素、C是class类，为了避免和style中的class类混淆，不推荐使用C。template是模板内容，表示使用这个自定义属性的标签中要插入的内容。replace的值默认是false，如果是true，说明要用templace中的标签替换html代码中使用这个自定义指令的标签。注意，如果使用replace，那么template中必须包含html元素，不能只是几个文字，否则angular会报错。下面再来看一个属性，templateUrl和template不能同时出现，templateUrl是引用的模板地址：var m = angular.module('app', []);m.directive('zymBlog', [function(){ return { restrict : 'AEC', templateUrl : './46-1.html', replace : true };}]);注意，因为这里使用了replace，所以templateUrl对应的模板内容中必须包含html标签元素。二、自定义指令的标准命名规范：directive指令名称用驼峰命名法，例如【zymBlog】，那么在html代码中进行调用时，需要在大写字母之前加一个横杠，例如【zym-blog】。三、自定义指令template函数式操作：template不仅可以是一个字符串，也可以是一个函数，例如：var m = angular.module('app', []);m.directive('zymBlog', [function(){ return { restrict : 'AEC', template : function(){ return '

赵一鸣个人技术博客

'; }, replace : true };}]);四、自定义指令transclude属性：有一种情况，在html中使用了自定义指令，但是标签内部原来就有内容，这样的话，自定义指令里边的内容会把标签原来的内容替换掉，所以需要一个添加一个属性来解决这个问题（ng-transclude）：html部分：

赵一鸣博客http://www.zymseo.com

js部分：var m = angular.module('app', []);m.directive('zymBlog', [function(){ return { restrict : 'AEC', template : function(){ return '

赵一鸣AngularJs学习笔记

'; }, replace : true, transclude : true };}]);设置ng-transclude的值为true之后，还必须在自定义指令的内部再加入一个标签，并且制定ng-transclude，这样是把原来html标签里边的内容放到这个标签里边！
前端开发，如何写出优秀js代码

每位前端工程师都喜欢易理解、可扩展、易维护的代码，如何写出优秀的JavaScript代码，也是每位前端工程师的功课。如何才能写出优秀的JavaScript代码呢？
1.写代码前一定要搞清楚你要解决的问题是什么，你的方案是否能够解决问题。
2.拥有良好的命名规范，注意变量名区分大小写，允许包含字母、数字、美元符号（$）和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。
3.多写代码注释。编写代码时的注释应当尽量全面一些，这便于自己再次浏览代码时好理解。
4.能不使用with语句的时候尽量不要使用with语句，尽量少使用eval ,每次使用eval需要消耗大量时间。
拥有一手好代码的前端开发者，更具有大神风范，所以好代码不仅要精炼，更要易读。

javascript基础篇1什么是js建立第一个js程序_基础知识

javascript是一个基于对象和事件驱动，并且具有安全性的脚本语言，应用很广泛，不仅仅是网页，不要被jsp给困住。 基于对象，就是不需要指定变量的类型，你给他一个3，它知道是整型，如果给赋值'3'，它就知道是char。 事件驱动，就是单击啊，之类的事件进行驱动。 javascript优点：网页互动性强，简单易用。js主要是基于客户端运行，很大程度上减少了服务器的负荷。 javascript是脚本编程语言：采用程序段方式实现，与HTML结合，java的编译器其实就是浏览器本身。 安全性：HTML页面中不能访问本地硬盘，只能对网络文档进行删除和修改，只能通过浏览器实现信息浏览或动态交互。 跨平台性：只要有支持js的浏览器，就可以运行。 javascript是ECMAScript规范的一种实现。 js的编程通常在eclipse环境下，这里推荐一个插件spket，它可以智能提示代码，非常好用，下载地址 spket IDE 1.6.22 根据需求选择就好，我们一般是选Spket IDE啦。如果用的是myeclipse，可以选择不安装，因为它本身就带了类似的组件。插件的安装的话，如果你下的是压缩包(就是里面有俩文件夹plugin 和feature，那么把这俩个文件夹的内容跟eclipse安装目录下相同文件夹合并就好。)如果选择的是可执行jar包，那个安装的时候记得选择plugin选项。目录选择eclipse的安装目录。接下来，打开eclipse吧~(不是我说，eclipse图标真的很难看，所以作为外貌协会的我其实一般来说用的是myeclipse~)←这句话看清楚了，我说的是图标，是图标！麻烦不要跑我这里吐槽UI！打开以后，可以看到window菜单下preference选项里面有了spket，就是我们刚才说的插件了，至于怎么用，今后会提到的。接着，让我们来建立一个js相关的project。file ->new -> java project 我就命名它为testJs了。查看工程的workspace目录相信大家都知道怎么看吧？在myeclipse中，右击工程的话就会有myeclipse，鼠标跟随，右边出现菜单，选择open in explorer。eclipse中，右键点工程，选择properties，查看属性，里面有工程目录，复制一下到窗口打开就行了。接着要建立一些标准路径。(我是越想越觉得苦逼啊，如果是myeclipse的话可以选择web project，直接想要的就都有了啊..._rz，但是为了符合大部分人的需求，还是得用eclipse来学。).因为我们是要建立一个jsp的project，所以在project下要有一些标准路径，参照下面的图片建立(我是把myeclipse下建立的web project后自动生成的文件夹复制过来了)：其中MANIFEST.MF的代码内容如下： 代码如下: Manifest-Version: 1.0 Class-Path: web.xml的内容如下： 代码如下: main.html 建立一个新的文件(New->File main.html 后缀不可少)，main.html 代码如下: 代码如下: (*￣_￣) This is my page. 接下来我们就要靠编辑这个玩意儿来享受js带给我们的快感啦~！ 首先，为了代码规范，我比较建议大家把js的内容都存放在新建的.js文件中，一来可以实现代码共享，而来也好看好编辑。 作为一个A型血的微强迫症，我如果看到代码乱七八糟的话是绝对写不下去的。 所以，这里我们首先在WebRoot目录上点击右键，选择New->Folder+ (不是说建立js文件吗魂淡！)=.=别急别急，我们把js文件放到一起这样比较好看啊~ 新建一个名叫js的文件夹。然后再在这个文件夹上右击，new->file 随便写个名字，记得加后缀，我命名它为output.js。 编辑js文件前我们示范下spket的用法，它可以帮助我们建立代码模板，过程如下： 这样，我们就建立了一个名字叫做func的模板，打开js文件，输入func，按ALT+/ 提示中找到模板，回车，就出现了pattern中我们定义的代码：这样 我们js文件中就有一个函数啦~！这样大家就明白了吧~ spket可以用来自定义提示，同时它已经自带了js的模板，自己点点preference下spket里的各个东西，也就差不多熟悉了。不过我们一般会导入一个extjs包，今后肯定有用，下载地址 senta在spket中加载方法是：接下在最后一步是 add file，然后把刚才下载的东西加载进去就行了。最后，来来来，我们在html中引用一下js文件，今天就算大获成功啦ヘ(￣_￣ヘ)：在main.html中，编写代码如下： 代码如下: O.O testOutput("Dumpling");// use function This is my JSP page. 引用文件 使用 src=“xxxxx.jsp” 接下来，找到工程目录，双击html文件看下效果吧~上面是在不同浏览器下的测试信息，很兼容吧~