如何才能优雅地书写JS代码

第一:关于匿名函数的使用要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内. 例如以下代码: <script> function func1(){ var list = ["a", "b", "c"]; for(var i = 0; i < list.length; i++){ //.. }; } func1(); // 自动运行 </script> 上述代码的作…

几个你所不知道的技巧助你写出更优雅的vue.js代码

1. watch 与 computed 的巧妙结合如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ this.fetchData() } } 如果参数比较多,比如上图关键字筛选, 区域筛选, 设备ID筛选, 分页数, 每页几条数据, 可能会是这样: data(){ return { keyword:'', region:'', deviceId:'', page:1 } }, methods:…

优雅的敲JS代码的几个原则

一.条件语句 1,使用 Array.includes 来处理多重 || 条件 // ----- 一般 ------ if (fruit == 'apple' || fruit == 'strawberry' || fruit == 'banana' ) { console.log('red'); } //------- 优雅 ------ // 把条件提取到数组中 const redFruits = ['apple', 'strawberry', 'banana'…

优雅的vue.js

优雅的vue.js代码 https://www.cnblogs.com/zhengrunlin/p/9164951.html watch 与 computed 的巧妙结合如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ this.fetchData() } } 如果参数比较多,比如上图关键字筛选, 区域筛选, 设备ID筛选, 分页数, 每页几条数据, 可能会是这样: data(){ retur…

淘系工程师讲解的使用Spring特性优雅书写业务代码

使用Spring特性优雅书写业务代码大家在日常业务开发工作中相信多多少少遇到过下面这样的几个场景: 当某一个特定事件或动作发生以后,需要执行很多联动动作,如果串行去执行的话太耗时,如果引入消息中间件的话又太重了: 想要针对不同的传参执行不同的策略,也就是我们常说的策略模式,但10个人可能有10种不同的写法,夹杂在一起总感觉不那么优雅: 自己的系统想要调用其他系统提供的能力,但其他系统总是偶尔给你一点"小惊喜",可能因网络问题报超时异常或被调用的某一台分布式应用机器突然宕机,我们想…

如何在一个网站或者一个页面，去书写你的JS代码

// JavaScript Document //如何在一个网站或者一个页面,去书写你的JS代码: //1.js的分层(功能) : jquery(tools) 组件(ui) 应用(app), mvc(backboneJs) //2.js的规划(管理) : 避免全局变量和方法(命名空间,闭包,面向对象) , 模块化(seaJs,requireJs) window.onload = function(){ mv.app.toTip(); mv.app.toBanner(); mv.app.toSel…

JS代码中加上alert才能正常显示效果

模拟一个生成验证码的效果,发现JS代码中加上alert可以正常刷新,没有alert时图片就会丢失,找到解决方法,但是还不是很明白,先记录下来. 生成验证码的servlet代码如下: package servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import…

webstorm的live templates快速编辑功能,让你的css JS代码书写速度飞起来

前言: Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码, 大大提高了HTML/CSS代码编写的速度,比如下面的演示: 但是对于我们来说这远远不够,我还想写css js呢,有些编辑器会提供一部分快捷功能,但是对于一些我自己常用的,编辑器没有的,我想自己定义,那怎么办呢, 下边的这篇教程对你来说,肯定大有帮助:kissing_closed_eyes: 简介: webStrom IDEA , live temp…

JS代码的简单重构与优化

JS代码的简单重构与优化(适合新手) 原文 http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) { return true; } else { return false; } //good return age > 20; 这种一看就明白吧,没什么说的. Demo . 2 //bad for (var i = 0; i < arr.length; i++) { //do something…

js代码之编程习惯

编程习惯: 异常处理如果你没有使用异常处理的习惯,这可能是因为你并未真正的理解它的作用.当你正确使用异常处理之后,你会发现你的代码最显著的变化就是:少了很多的 if-else 语句 . 虽然在 JS 中,只有错误(Error),没有异常(Exception),但是我们很多人还是喜欢将之成为异常( 我觉得并没什么不好,反而会更形象),js 把异常分为以下6种: EvalError: raised when an error occurs executing code in eval() Ran…

JS代码执行机制

JS代码从编译到执行我们写出一段JS代码,JS的引擎并不是按照我们书写的顺序从上到下顺序编译并且执行的,首先是按照自己的规则对我们的代码先进行编译,然后从上到下执行编译的代码. 在全局作用域中,JS首先会对我们的函数进行声明,然后就是我们经常听到的变量提升机制,然后才是按照我们书写代码的顺序,来进行编译,然后在执行编译的代码. 看如下代码: function fn(){ console.log(a); } fn(); var a = "value"; 非常常见的一个面试题fn函数执行…

浏览器控制台js代码与后台不同步

原因:浏览器会缓存js 如果是将js代码直接通过<script>标签插入jsp页面中则不存在这个问题在加载页面的时候会重新加载js代码如果直接将js代码以文件的形式引入,那么每次在修改之后需要清除浏览器缓存控制台才能更新js代码解决办法:关闭浏览器缓存我用的Google浏览器,这里以关闭chrome缓存功能为例: 1.打开chrome 2.按F12打开开发者工具 3.按F1打开Settings界面 4.找到NetWork类中Disable cache,勾选上即可 5.之后每次修改完js…

纯js代码实现手风琴特效

我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html><html><head lang="en"> <m…

也谈谈规范JS代码的几个注意点

也谈谈规范JS代码的几个注意点写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优雅的姿势.所以后来慢慢规范了自己写的代码,再后来觉得仅仅规范自己的代码还不行,这个团队其他人的也需要保持一致,再再后来就开始尝试写了一份代码规范,用于规范团队的代码质量.网上有不少讲代码规范的书,我也就不再献丑了,大家可以去看看阿里\百度\腾讯他们的代码规范,写的非常不错.我就仅仅把自己遇到的尝试做…

编写高质量JS代码的68个有效方法（十三）

No.61.不要阻塞I/O事件队列 Tips: 异步API使用回调函数来延缓处理代价高昂的操作以避免阻塞主应用程序 JavaScript并发的接收事件,但会使用一个事件队列按序地处理事件处理程序在应用程序事件队列中绝不要使用阻塞的I/O JavaScript程序是构建在事件之上的.在其他一些语言中,我们可能常常会实现如下代码: var result = downFileSync('http://xxx.com'); console.log(result); 以上代码,如果downFileSyn…

JavaScript手札：《编写高质量JS代码的68个有效方法》（一）（1~5）

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg…

使用seajs来引入js代码

注意的是:引入jquery的代码最好放在html文件中,本文是为了说明seajs中require如何使用的,才将jquery放入seajs中的. html中对应的代码: <script type="text/javascript" src="../js/lib/sea.js"></script> <script type="text/ja…

动态加载JS代码

到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载"); } 后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <…

JS代码的几个注意点规范

也谈谈规范JS代码的几个注意点也谈谈规范JS代码的几个注意点写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优雅的姿势.所以后来慢慢规范了自己写的代码,再后来觉得仅仅规范自己的代码还不行,这个团队其他人的也需要保持一致,再再后来就开始尝试写了一份代码规范,用于规范团队的代码质量.网上有不少讲代码规范的书,我也就不再献丑了,大家可以去看看阿里\百度\腾讯他们的代码规范,写的非常…

JS代码平面化

重构JS代码 - 让JS代码平面化 js中的嵌套函数用的很多,很牛叉,那为何要平面化? 易懂(自己及他人) 易修改(自己及他人) 平时Ajax调用写法(基于jQuery) $.post('url', jsonObj, function (data) { if(data) { var tips = $.ligerDialog.tip({ title: 'Tip', content: 'Operation successful!' }); setTimeout(function () { tip…

IE6-能让png图片有透明效果的js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UT…

四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样

去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某种 CPU 指令翻译成等价的 JS 逻辑?这样就能在浏览器里直接运行. 注意,这里说的是「翻译」,而不是模拟.模拟简单多了,网上甚至连 JS 版的 x86 模拟器都有很多. 翻译原则上应该在运行之前完成的,并且逻辑上也尽可能做到一一对应. 为了尝试这个想法,于是选择了古董级 CPU 6502 摸索.…

试着讲清楚：js代码运行机制

一. js运行机制 js执行引擎经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了. js代码如何运行? 在js代码执行的时候,js的代码是按照顺序执行的,从上到下,这个时候是同步的,不过,有几个例外: 异步的网络请求事件绑定.事件监听器时间触发函数我们模拟一下,js引擎遇到这三类代码的情况: js执行的好好的,正在顺序执行代码,这个时候呢,遇到了异步的网络请求的代码,这个…

使用VBA进行JS加密的反混淆，还原JS代码。

本文地址:http://www.cnblogs.com/Charltsing/p/JSEval.html 联系QQ:564955427 类似下面的代码是登陆全国企业信用信息公示系统(安徽)(网址:http://www.ahcredit.gov.cn/search.jspx)时得到的,需要反混淆. eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>32?String.fromCha…

JS代码指导原则

一.什么是平稳退化? 如果含有JS代码的网页在用户浏览器不支持JS(或者禁用JS)时,用户仍然能够顺利浏览(网站功能正常,只是视觉效果可能差一些),那么这个网页就能够平稳退化网页能够平稳退化是很必要的,因为JS向来名声不好(各种广告,各种弹窗,甚至还有XSS等等阴暗的东西),所以有一个用户群是习惯禁用浏览器的JS支持的,这个用户群可能不大,但是作为编码人员应该尽量让自己的代码尽可能的完善(就像培养自己的孩子一样),我们应该考虑到这种情况,给各种用户完美的体验如果上面的理由还不够充分,那么可能…

IOS-网络（网页开发-UIWebView，HTML，CSS，JavaScript，OC和JS代码互调）

一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 2016年博文科技. All rights reserved. // #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIWebView *webView;…

一个用于将sql脚本转换成实体类的js代码

以前写过一段C#,苦于编译才能用.这样的小工具最好是用脚本语言来编写,易于执行,也易于修改. js 代码 convert.js -------------------------------------------------- String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } String.prototype.ltrim=function(){ return this.repl…

[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

写在前面前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病,总感觉不完美,心里一直惦记着那件事,也是在我写过那篇文章之后,没多久,在博客园首页看到了一篇文章较复杂js的书写格式,这里的代码看着比较简介,就想着抽时间将之前的那段js代码进行重构.说做就做,不想一想起之前写过那样的代码,心里就有疙瘩.所以也就有了这篇文章. $.extend 在开始重构之前,需要先学习一…