如何才能优雅地书写JS代码
第一:关于匿名函数的使用
要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内。
例如以下代码:
- <script>
- function func1(){
- var list = ["a", "b", "c"];
- for(var i = 0; i < list.length; i++){
- //..
- };
- }
- func1(); // 自动运行
- </script>
上述代码的作用是在页面加载的时候自动执行某些操作, 并不需要被外部调用, 但是它执行过后却留下了一个全局的函数。
像这种情况, 非常有必要使用匿名函数:
如下述代码所示:
- <script>
- (function func1(){
- var list = ["a", "b", "c"];
- for(var i = 0; i < list.length; i++){
- //..
- };
- })(); // 自动运行
- </script>
匿名函数的书写格式(不带参数的情况下):
- (function(){
- // 代码块
- })();
如果后面需要添加参数的话,则这样书写:
- (function(arg1, arg2, argN){
- //..
- })(arg1, arg2, argN);
第二:有关命名空间的使用规范:
命名空间可以有效减少全局变量的使用,是个很不错的规范JS代码的方式,在JS中命名空间需要进行如下操作:
“对象-属性”:
- window.com = {}
- window.com.bytter = {}
- window.com.bytter.hello = function(){
- alert("hello");
- }
那么什么情况下才会使用到命名空间呢?
如果您需要给某个已经存在的页面添加一些功能,有可能需要添加好多个函数,而且正好那个页面当中已经存在了好多的全局变量和函数,甚至还存在某些函数和你要新增加的函数同名,这时我们就可以使用命名空间了:
你创建一个命名空间, 把你的新函数都放在那个命名空间之下, 就可以了:
- <button type="button" onclick="pg.check.userAcc()">检查用户名</button>
- <button type="button" onclick="pg.check.userAcc()">检查帐号</button>
- <script>
- window.pg = {}
- window.pg.check = {
- // 检查用户名
- userName: function(){
- //..
- },
- // 检查帐号
- userAcc: function(){
- //..
- }
- };
- </script>
第三:如何保证多人书写的JS代码互不干扰
我们学习了匿名函数和命名空间,掌握了它们的正确使用方法,接下来我们就可以做到保证JS代码之间互不干扰:
我们把一个页面中自己维护的代码与别人维护的代码或者系统自带的代码分隔开来,做到与外部代码的耦合降低到最小。
- <script>
- // 页面命名空间
- window.pg = {}
- //命名空间的使用
- // 检查用户信息
- // 作者:张三
- // 最后更新: 2012.12.31
- (function(){
- // 私有变量
- var a, b, c;
- // 检查用户信息的相关方法
- window.pg.check = {
- // 检查用户名
- userName: function(){
- //..
- },
- // 检查帐号
- userAcc: function(){
- //..
- }
- };
- })(); // end 张三的代码
- //匿名函数的使用
- // xxx功能
- // 作者:李四
- // 最后更新: 2012.1.1
- (function(){
- window.pg.xxx = {
- //..
- }
- })(); // end 李四的代码
- </script>
第四:使得变量声明美观易读
1、变量必须在使用前用var进行声明;
2、变量的声明应该放在代码块或者函数的头部;
3、可在一行内声明多个变量,尽可能添加上注释信息。
- // 声明变量 银行名称, 银行帐号
- var type, acc;
- // 声明变量 银行名称, 银行帐号
- var type = "中国银行", acc = "xxxxxx";
- var type = "中国银行", // 银行名称
- acc = "xxxxxx"; // 银行帐号
- 尽量使用易于理解的变量名,如:
- var bankType = "中国银行",
- bankAccount = "xxxxxx";
第五:函数和变量的命名
普通变量名和函数名采用"小驼峰式命名法", 如:firstName、lastName
作为构造函数的函数采用"大驼峰式命名法", 如以下代码所示:
- var Person = function(){
- //..
- }
- var me = new Person();
- 常量用大写和下划线表示,如:
- var ROOT_PATH = "/v10/";
第六:正确地使用分号,可保证JS正常压缩
尽量做到每条语句使用分号结尾(特别是需要进行压缩的js,因为省略分号常常会导致压缩失败);
第七:有关数组的定义
尽量使用简便的方式进行数组的定义:
- // 比较好的定义方法
- var list = [1, 2, 3];
- // 不好的定义方法
- var list = new Array();
- list[0] = 1;
- list[1] = 2;
- list[2] = 3;
摘自:iteye技术博客[有删改]
转载于:https://www.cnblogs.com/wenJiaQi/p/6686919.html
如何才能优雅地书写JS代码相关推荐
- python代码书写_如何优雅的书写Python代码, python使用小技巧
博客链接 文章目录 Python使用技巧 变量命名技巧 用有意义易读的命名 同类型使用相同词汇 可搜索的名字 自我描述的变量 不要取隐晦的名字 精简不重复 默认参数代替运算和条件 实用小窍门 变量值交 ...
- 那些优雅灵性的JS代码片段
我的个人网站:拓跋的前端客栈~了解一哈.这里是原文地址,如果您发现我文章中存在错误,请尽情向我吐槽,大家一起学习一起进步φ(>ω<*) 引子 如果您甘于平凡,写代码对您来说可以就是Ctrl ...
- 使用Spring特性优雅书写业务代码
作者:阿里巴巴淘系技术 链接:https://www.zhihu.com/question/60761181/answer/1737592739 来源:知乎 著作权归作者所有.商业转载请联系作者获得授 ...
- 用LaTeX优雅地书写伪代码:Algorithm2e简明指南
点击蓝字 关注我们 作者丨薰风初入弦 来源|https://zhuanlan.zhihu.com/p/166418214 本文已获作者授权,禁止二次转载 极市导读 LaTeX作为理工科科研人员的必备 ...
- $.post请求的参数在后台代码中得到为null_996难得休息,小伙打开steam网页看了一款游戏,输入密码后却习惯性按了F12研究起了JS代码...
登录后才能获取数据也是现在反爬的一个重点,本期我们来看看两种登录方式,分别参考豆瓣与steam,由于js代码过长,所以只截取了部分,完整代码移步 从今天开始种树www.happyhong.cn ,直 ...
- 前端性能优化—js代码打包
现在的 web 应用,内容一般都很丰富,站点需要加载的资源也特别多,尤其要加载很多 js 文件.js 文件从服务端获取,体积大小决定了传输的快慢:浏览器端拿到 js 文件之后,还需要经过解压缩.解析. ...
- 看看这些被同事喷的 JS 代码风格你写过多少
现在写代码比以前好多了,代码的格式都有eslint,prettier,babel(写新版语法)这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个 ...
- Android中使用WebView加载本地html并支持运行JS代码和支持缩放
场景 Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/art ...
- 原生 遍历_前端原生写js代码还是用vue等框架写项目?
其实对于初入前端的同学来说,我个人推荐写原生.因为扎实的js基础是通过写原生代码逐步理解js的数据类型,语法,闭包,原型链,继承等知识,只有在项目中主动应用这些js的基本知识,才能逐步提高你的编码能力 ...
最新文章
- MFC子对话框初始化问题_从一个“断言”报警说起
- php mssql 新 id,MSSQL获取当前插入数据的id
- js(Dom+Bom)第三天(2)
- do{}while(0)只执行一次无意义?你可能真的没理解!
- .net5 不支持winform_.NET 5.0 RC 2 发布,正式版将在11月.NET Conf大会上发布
- 一元php主机,php 一元分词算法
- 西门子em235模块的功能_与其研究人工智能不如研究可编程控制器之德国西门子PLCS7200...
- 如何保障-数据一致性
- 【图像融合】基于matlab小波变换图像融合【含Matlab源码 392期】
- tornado 源码分析 waker
- android 读取wps_Android 默认使用wps打开本地文档
- 量化交易之单因子策略
- FFMPEG音视频开发: 完成摄像头、桌面本地录制与rtmp推流(windows)
- IT运维管理的服务内容包括哪些
- vue js 幸运大转盘
- 克里斯蒂安贝尔_“蝙蝠侠”克里斯蒂安贝尔将加入漫威电影宇宙饰演大反派
- 搜狗输入法android皮肤,搜狗输入法皮肤盒子app
- Systemverilog里面include的使用
- ajax请求-IE缓存处理
- 《电磁场与电磁波》MATLAB 仿真实验
热门文章
- 集合计数 二项式反演_对计数数据使用负二项式
- 无监督学习 k-means_无监督学习-第2部分
- 统计 python_Python统计简介
- python 数组合并排重_并排深度学习:Julia vs Python
- 实例分析objdump反汇编用法
- 电影《麦田》的外景地其实是呼伦贝尔
- 连环卡通漫画《转学第一天》
- python自动发邮件运行正常就是收不到邮件是为什么_python stmp module 163邮箱发送邮件不成功...
- java线程知识梳理_Java多线程——多线程相关知识的逻辑关系梳理
- range函数python2和3区别_range函数python2和3区别