js代码压缩工具 js压缩算法

怎样编写可自定义维护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的分号插入规则非常复杂且很难记住，因此我不要省略分号。大部分的风格指南（除了JaScript Standard Style）都不要省略分号。

关于行的长度: 大部分的语言以及JS编码风格指南都指定一行的长度为80个字符，这个数值来源于很久之前文本编辑器的单行最多字符限制，即编辑器中单行最多只能显示80个字符，超过80个字符的行要么折行，要么被隐藏起来，这些都是我们所不希望的。我也倾向于将行长度限定在80个字符。

关于换行：当一行长度达到了单行字符限制时，就需要手动将一行拆成两行。通常我们会在运算符后换行，下一行会增加两个层次的缩进（我个人认为一个缩进也可以，但不能没有5、在test.html文件内,在js标签内，创建cha（）函数，在函数内，使用getElementById（）方法获得img元素对象，再使用setAttribute（）方法设置img对象的class属性为imagecss。缩进）。例如：

callFunc(document, element, window, 'test', 100, true);

在这个例子中，逗号是一个运算符，应当作为前一行的行尾。这个换行位置非常重要，因为ASI机制会在某些场景下在行结束的位置插入分号。总是将一个运算符置于行尾，ASI就不会自作主张地插入分号，也就避免了错误的发生。这个规则有一个例外：当给变量赋值时，第二行的位置应当和赋值运算符的位置保持对齐。比如：

var result = soming + anotherThing + yetAnotherThing + somingElse +

关于空行：在编程规范中，空行是常常被忽略的一个方面。通常来讲，代码看起来应当像一系列可读的段落，而不是一大段揉在一起的连续文本。有时一段代码的语义和另一段代码不相关，这时就应该使用空行将它们分隔，确保语义有关联的代码展现在一起。一般来讲，建议下面这些场景中添加空行：

在方法之间。

在方法内的逻辑片段之间插入空行，提高可读性。

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规范都不同， 但切记不可在一个项目中混用单引号和双引号。

关于数字：记住两点建议：，为了避免歧义，请不要省略小数点之前或之后的数字；第二，大多数开发者对八进制格式并不熟悉，也很少用到，所以的做法是在代码中禁止八进制直接量。

关于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支持两种注释：单行注释和多行注释。

很多人喜欢在双斜线后敲入一个空格，用来让注释文本有一定的偏移（我非常你这么做）。单行注释有三种使用方法：

独占一行的注释，用来解释下一行代码。这行注释之前总是有一个空行，且缩进层级和下一行代码保持一致。

在代码行的尾部的注释。代码结束到注释之间至少有一个缩进。注释（包括之前的代码部分）不应当超过字符数限制，如果超过了，就将这条注释放置于当前代码行的上方。

被注释的大段代码在多行或单行注释之前。（很多编辑器都可以批量注释掉多行代码）。

虽然多行注释也可以用于注释单行，但是我还是仅在需要使用多行注释的时候，才使用多行注释。多行注释一般用于以下场景：

模块、类、函数开头的注释

需要使用多行注释

我十分你使用Ja风格的多行注释，看起来十分美观，而且很多编辑器支持自动生成，见如下示例：

/

有一个空格，并且左边也有一个空格。

你甚至可以加上一些@参数来说明一些东西。

例如：

@author 作者

/何时添加注释是程序员经常争论的一个话题。一个通行的指导原则是， 当代码不够清晰时添加注释，而当代码很明了时不应当添加注释。 基于这个原则，我你在下面几种情况下添加注释：

难以理解的代码： 难以理解的代码通常都应当加注释。根据代码的用途，你可以用单行注释、多行注释，或者混用这两种注释。关键是让其他人更容易读懂这段代码。

可能被误认为错误的代码： 例如这段代码while(el && (el = el.next)) {}。在团队开发中，总是会有一些好心的开发者在编辑代码时发现他人的代码错误，就立即将它修复。有时这段代码并不是错误的源头，所以“修复”这个错误往往会制造其他错误，因此本次修改应当是可的。当你写的代码有可能会被别的开发者认为有错误时，则需要添加注释。

浏览器特性hack： 这个写过前端的都知道，有时候你不得不写一些低效的、不雅的、彻头彻尾的肮代码，用来让低版本浏览器正常工作。

1.5 语句和表达式

关于 花括号的对齐方式 ，有两种主要的花括号对齐风格。种风格是，将左花括号放置在块语句中句代码的末尾，这种风格继承自Ja；第二种风格是将左花括号放置于块语句首行的下一行，这种风格是随着C#流行起来的，因为Visual Studio强制使用这种对齐方式。当前并无主流的JS编程规范这种风格，Google JS风格指南明确禁止这种用法，以免导致错误的分号自动插入。我个人也使用种花括号对齐格式。

// 种花括号对齐风格if (condition) {

}// 第二种花括号对齐风格if (condition)

{}关于块语句间隔: 有下面三种风格，大部分的代码规范都使用第二种风格：

// 种风格if(condition){

doSoming();

}// 第二种风格if (condition) {

doSoming();

}// 第三种风格if ( condition ) {

doSoming();

}关于switch语句，很多JS代码规范都没有对此做详细的规定，一个是而实际工作中你也会发现使用场景比较少。因为你只有在有很多条件判断的情况下才会用switch（短条件就直接用if语句了），但是熟练的程序员面对很多的判断条件一般都会用对象表查询来解决这个问题。看如下的风格代码：

switch (condition) { case 'cond1': case 'cond2':

doCond1(); break; case 'cond3':

doCond3(); break; default:

}你遵循如下的风格：

switch后的条件括号需要前后各一个空格；

case语句需要相对switch语句缩进一个层级；

允许多个case语句共用一个处理语句；

如果没有默认执行代码，可以不用加default

关于with：JS引擎和压缩工具无法对有with语句的代码进行优化，因为它们无法猜出代码的正确含义。在严格模式中，with语句是被明确禁止的，如果使用则报语法错误。这表明ECMAScript委员会确信with不应当继续使用。我也强烈避免使用with语句。

关于for循环：for循环有两种，一种是传统的for循环，是JS从C和Ja中继承而来，主要用于遍历数组成员；另外一种是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 () {

}} else { function func () {

alert("Yo!");

}}这段代码在不同浏览器中的运行结果也是不尽相同的。不管condition的计算结果如何，大多数浏览器都会自动使用第二个声明。而Firefox则根据condition的计算结果选用合适的函数声明。这种场景是ECMAScript的一个灰色地带，应当尽可能地避免。函数声明应当在条件语句的外部使用。这种模式也是Google的JS风格指南明确禁止的。

一般情况下，对于函数调用写法的风格是，在函数名和左括号之间没有空格。这样做是为了将它和块语句区分开发。

// 好的写法callFunc(params);// 不好的写法，看起来像一个块语句callFunc (params);// 用来做对比的块语句while (condition) {}

1.8 立即调用的函数

IIFE(Immediay 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 JaScript Style Guide，当然，你也可以继承的配置或者Google的JS编码风格，其实在编码风格上，三者在大部分的规则上是相同的，只是在一部分细节上不一致而已。

当然，如果你实在是太懒了，那了解

js 压缩后的代码如何调试？

的方法是使用在线工理论上不会有任何冲突，uglify-js只是对JaScript代码进行混淆和压缩等预处理，一方面减少js文件的大小，一方面让查看源码的人不容易理解代码的意思，并不对与代码功能本身产生影响，因此uglify-js无论对angular还是jquery等插件来说都不会产生影响。具HCJCompress，不仅压缩HTML、CSS、JS，具有还原功能。

1、进入HCJCompress。

4、压缩代码，保存带可以看到,80%压缩质量肉眼基本上分辨不出来区别,但是文件大小下降了三分之二。有调试辅助信息的源代码。

5、调试代码时，根据浏览器的提示代码错误位置，将错误位置输入到HCJCompress中，系统自动定位被压缩的代码的原始状态。

这种方法完美将代码还原到源代码中，根据上下文和注释，调试工作，应该顺利一些吧。

js压缩只是对js代码格式化，百度搜索 JS 压缩/解压工具，可以把压缩后对js代码格式化成便于阅读的代码。

js文件过大，小程序无法发布

可以进行压缩后再上传。

首先将自己需要压缩的视频文件准备 Ja风格的注释，注意和注释之间好，放置到同一个文件夹中，方便添加文件。将视频压缩软件安装到自己的电脑中，打开软件找到视频压缩，点击视频压缩进入到压缩的页面。

如何还原压缩过的css或Js文件，如下图

1、首先新建一3、设置代码的类型。个html文件，命名为test.html。

2、在test.html文件内,使用img标签创建一张显示，并设置其id属性为pic。

3、在test.html文件内,使用button标签创建一个按钮，按钮名称为“改变样式”。

4、在test.html文件内,给button绑定onclick点击，当按钮被点击时，执行cha()函数。

6、在test.html文件内,使用css定义imagecss的样式，设置为红色5px边框，$.ajax({宽度为300px，就可以了。

jscompress压缩失败文件

压缩文件失败，很大的原因就是因为原文件太大了，电脑的虚拟内存不足以使那么大的内存压缩成功。

解决方法就是，可以使原来的大文件分成几个小文件，然后在重新分开压缩，这样的话，可以减少一次性的对电脑虚拟内存的消耗，从而使对文件的压缩成功。

nodejs压缩-如何用nodejs压缩文件，生成tar包

jquery怎么压缩质量与大小？

jquery不能更改的体积。你可以试试服务端语言,如japhpnodejs之类的

如何用nodejs压缩文件，生成tar包

你好,

我不知道如何直接使用代码逻辑生成tar包,但我可以给你提供一个使用调if(fileList[i].size/1024>100){//大于100kb,进行压缩上传用Linux命令生成tar包的方法。

首先,在npm中有一个叫做shelljs的包,在项目中安装它:

npm_--se_helljs

然后,在执行打包任务的js文件中使用它:

var_hell=_equire('shelljs');

if(('tar-zvcf_募._淮虬奈募(夹)').code!==0)_

_('Error:...');

}这样就可以在当前目录生成一个“文件名.”的压缩包了,而“文件名”和“被打包的文件(夹)”都可以通过参数的形式进行传递。

好了,更多信息可以github上搜索shelljs,希望能解决你的问题。

Squoosh批量高质量压缩

最近手里有一大批相机,需要分享给团队人员。但是原文件出来的太大,整整有几十个G。团队人员又不需要原图,只需要有全部的照片即可。为此,想把压缩成高质量以减少体积。

由于一直在用Google相册,对它之前采用高质量上传的印象不错,于是搜了搜Google的高质量压缩工具,找到了Squoosh。

浏览器输入网址/即可访问Squoosh。Squoosh本身可离线使用,而且拥有美观界面,单独压缩几张相当给力。

在界面下方找到了SqooshCLI,应该是命令行版本的,点进去进入GitHub仓库。

[上传失败...(image-ed2ba2-1624621975)]/cli/

]()

看了下说明,应该不需要安装别的东西,能直接使用:

注意

:这里有个坑,出来的参数直接用会报错,需要把'和"给全部去掉才可以。