本文目录一览：
如何让能让jquery的.min.js文件变得可读性
可以下载没加压的jquery文件。一般文件名没带min 的jquery都是没加压的。
如何写高质量的JS，Html5前端代码
首先，本人在前端开发方面有点心得，有什么不对的地方希望给出建议让我更好的进步
1.命名
在开发前必须有个命名规范来对代码统一规范团队代码结构，使代码可读性提高
2.注释
我相信每个人看别人代码时看到密密麻麻的代码结构，相信每个人都会很头疼，即使想看也会看不下去，而且很耗时间，所以注释就变得尤其得重要，注释越清楚越详细我相信代码可维护性越高，而且更容易修改维护
3.变量
在js中变量无处不在，所以这么声明变量就变得尤其得重要，首先少使用全局变量，这样会增加加载速度，从而导致项目用户体验不好
4.声明变量如果不用 var 会导致变量成为全局变量。
5.函数
函数的参数数量
函数的参数不应该超过 3 个。如果函数的参数超过 3 个，应该将一些参数进行封装。
6.函数参数传递
只传函数需要的参数。如
// 不推荐
function greet(data){
console.log(‘Hello, I am ‘ + data.name);
}
// 推荐
function greet(name){
console.log(‘Hello, I am ‘ + name);
}
7.函数的功能
一个函数只做一件事。这有助于测试和代码复用。
函数尽可能无副作用。无副作用指不修改传入的参数和全局变量。
8.减少重复代码
. 记得在某个文章中看到说，如果重复的代码出现 3 次，就应该重构重复的代码。
. 松耦合
. 一个函数只做一件事
. 缓存一些计算结果
9.避免全局变量
. 从分配置和离逻辑代码
. 不要修改不属于你的对象
. 不属于你的对象包括
. 浏览器原生对象，如 Object，Array等
DOM，如 document
BOM，如 window
类库对象
如果想拓展浏览器原生对象的功能，可以创建函数，函数中把浏览器原生对象传入。如 Underscore.js 做 的那样。
10.代码风格的统一
11.尽可能的避免代码重复
. 如何减少重复的代码呢？
. 在JS中，可以将重复的代码写成一个方法，如果是可通用的，可以写在独立的JS文件中。
. 在CSS中，则需要借助Sass，Less之类的预处理语言的Mixins的功能。将重复的部分写成一个Mixins。
12.配置和逻辑分开
. JS中，对于整个站的通用配置，写在config.js里。如果是某个js的配置，在文件的开头，用defaultParam 对象来存放可变的配置，用const来定义不可变的配置
. CSS中，依旧要借助预处理语言。对于整站的配置，定 义在_variables.scss里。对于某个具体CSS文件里，在文件开头用变量来定义
13.减少代码的副作用
1JS中，方法中的沟通尽量不要用全局变量；不要在Array之类的全局对象的原型链上添加方法；尽量不要定义全局的方法和变量：如果确实有很多变量，方法放在全局上，可以学习jQuery,将很多变量，方法放在一个全局对象上；自定义事件，事件的名称也要有命名空间。
2CSS中，要做到无副作用，难度很大。对于简单页面，一个方法是，把页面上的元素都分成一个个组件，写样式时，选择器要用组件选择器 当前元素选择器。当组件变的复杂时，组件也会包含很多子组件。然后，选择器就会越来越长。。。我的解决方案是用的BEM。
14.提高代码的可读性
. 变量，方法等的合理命名，通过名称可以知道这个大概做什么的。
. 如果则要加注释来说明一下。对于不容理解的代码加注释
. 尽可能不用魔法数字
. 对于HTML，选择合适标签
15.一个方法只做一件事
一来提高代码的复用性，二来让调试也变的更容易，三来让测试变的更容易
如何写出优美的 JavaScript 代码
javascript代码和其他脚本语言一样，都要合理的组织好，不然到最后js代码也是比较乱的。
我把JS的组织分成了三个阶段，看看您现在属于哪个阶段。
初级阶段，JS代码从头顺序写到尾,过程化
html
body
input type=”text” name=”username” id=”username” value=”” /
input type=”password” name=”password” id=”password” value=”” /
/body
/html
script type=”text/javascript”
if(document.getElementById(“username”).value == “”){
alert(“用户名不能为空”);
}
if(document.getElementById(“password”).value == “”){
alert(“密码不能为空”);
}
/script
缺点：像这样的代码都是写一个页面里面的，代码基本不能共用，最后的结果js代码冗余比较多。
优点：单个页面修改比较快，不用考虑影响其他页面。不用加载JS文件。
中级阶段，通过JS的function来，组织js代码
在开发的过程中，不断的发现，顺序写JS代码，有太多的麻烦，到最后可能就无法维护，要么维护的时间的太长。在重新开发的时，有意识的对代码进行分块，注意代码的共用性，这个时候function写的比较多。
script type=”text/javascript”
function check_username() {
if(document.getElementById(“username”).value == “”){
alert(“用户名不能为空”);
}
}
function check_password() {
if(document.getElementById(“password”).value == “”){
alert(“密码不能为空”);
}
}
/script
优点：对JS代码，进行分块，共用性较好，修改一处所有调用都可以修改掉，并且代码可读性加强。
缺点：需要加载JS文件，如果function过多，导致找一个function要花很多时间。
高级阶段: 通过方法类，域等对function进行分割
当一个JS文件里面有100多个方法的时候，这个时候看代码其实挺难过的，如果能把里面的function进行分分类是不是就清楚很多，好比，这几个方法是注册时check用的，这个几是对字符串的验证用的等等。
script type=”text/javascript”
function register(){
this.check_username = function(){
if(document.getElementById(“username”).value == “”){
alert(“用户名不能为空”);
}
}
this.check_password = function(){
if(document.getElementById(“password”).value == “”){
alert(“用户名不能为空”);
}
}
}
new register().check_username(); //调用方法
/script
上面的这种用的是方法类，大方法是register，里面定义的二个小方法，一个是对用户名的check,一个是对密码的check.
script type=”text/javascript”
var register = {
check_username:function(){
if(document.getElementById(“username”).value == “”){
alert(“用户名不能为空”);
}
},
check_password:function(){
if(document.getElementById(“password”).value == “”){
alert(“用户名不能为空”);
}
}
}
register.check_username(); //调用方法
/script
个人觉得通过域，来对function进行管理，规划最简单明了。
如何提高代码可读性，可维护性
如何提高代码可读性，可维护性
很多程序员在写代码的时候往往都不注意代码的可读性，让别人在阅读代码时花费更多的时间。其实，只要程序员在写代码的时候，注意为代码加注释，并以合理的格式为代码加注释，这样就方便别人查看代码，也方便自己以后查看了。下面分享十个加注释的技巧： 1. 逐层注释为每个代码块添加注释，并在每一层使用统一的注释方法和风格。例如：针对每个类：包括摘要信息、作者信息、以及最近修改日期等；针对每个方法：包括用途、功能、参数和返回值等。在团队工作中，采用标准化的注释尤为重要。当然，使用注释规范和工具(例如C#里的XML，Java里的Javadoc)可以更好的推动注释工作完成得更好。2. 使用分段注释如果有多个代码块，而每个代码块完成一个单一任务，则在每个代码块前添加一个注释来向读者说明这段代码的功能。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/200365.html
微信扫一扫 
支付宝扫一扫 