js代码整洁随笔,js代码整理

发布时间：2023-12-08

js代码整洁随笔,js代码整理

更新：2022-11-20 22:36

本文目录一览：

  1. 如何在页面让JavaScript代码原样显示，用标签不起用，js照常运行。请看问题补充
  2. 怎么让JS文件代码对齐
  3. 怎么样格式化javascript，怎么样格式化js
  4. 为什么一些js特效里引用的js文件代码密密麻麻的，不像是手写的代码
  5. 打开此js文件后看到很多的function(xxxxxxxxx)

如何在页面让JavaScript代码原样显示，用标签不起用，js照常运行。请看问题补充

把用户输入的内容用下面的函数进行HTML编码后再显示到页面上就行了：

// HTML转义函数
function encodeHtml(s){
    return s.replace(
        /"||'|||[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g,
        function($0){
            var c = $0.charCodeAt(0);
            switch(c){
                case 13: return "br /";
                case 32: return "#160;";
                default: return "#" + c + ";";
            }
        }
    );
};

我已经测试过了

怎么让JS文件代码对齐

下载插件：打开Notepad++，然后 插件 → Plugin Manager → Show Plugin Manager
安装插件：找到 JsTool，选中，然后点击 Install 按钮，自动下载安装，重启Notepad++
使用插件：在插件选项里面会多出一个 JSTool 选项，选择 JSFormat 就可以格式化对齐了！效果还不错。

怎么样格式化javascript，怎么样格式化js

格式化的话感觉可以使用 Firefox 来实现，在 Firefox 的开发者工具 中有一个选项，叫 美化原代码，这样就直接格式化了js代码 美化后

为什么一些js特效里引用的js文件代码密密麻麻的，不像是手写的代码

特效效果看着虽然不复杂，而且你每天上网看的很多布局虽然很简洁，没什么，但简单的往往不简单，比如你看一些3D图片，3D动画很酷，但他未必难，也可能是他的开发工具强大，所以很简单就做出强大的效果。HTML5+CSS3，JS这些没有什么强大工具的支持，如果要写复杂的功能都要手写的，别看一个网页简简单单的布局，特效，但是你看一下代码，真是特别多，而且大部分都不是画画，设置一下某个选项就生成的。 这个JS代码应该是压缩后的，要不然老是换行空格的，文件会很大，如果你要看他的代码，也可以美化代码，阅读会方便些，网上很多这种提供压缩或美化JS代码的网站。

打开此js文件后看到很多的function(xxxxxxxxx)

<script src="xxxx.js" type="text/javascript"></script>

这个是引入外部js文件，是为了页面代码的整洁和增强代码的可维护性。 作用就是把这个js文件的内容加载到页面中来，所以无论是直接写在页面中的，还是从外部引用的，都可以直接调用里面的方法。 说白了，就是把 xxxx.js 的内容插在页面中引用的地方！

举个例子

xxxx.js 的内容：

var a = 'test';
alert(a);

例一：

<!-- ....这里有很多行代码 -->
<script src="xxxx.js" type="text/javascript"></script>
<!-- 这样就相当与把 xxxx.js 文件中的内容插在这里！ -->
<!-- ....这里有很多行代码 -->
</html>

例二：

<!-- ....这里有很多行代码 -->
<script type="text/javascript">
var a = 'test';
alert(a);
</script>
<!-- ....这里有很多行代码 -->
</html>

效果对比

例一和例二效果是一样的，但是例一中，代码更为简洁，且要维护js代码比较方便，只需要编辑 xxxx.js 就行了。但例一相对于例二的缺点就是需要额外的加载时间，页面的请求会多点，但一般推荐使用例一引入js文件的方法。

推荐文章