写好你的JavaScript

用6个字符写出任意的Javascript代码

博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用6个字符写出任意的Javascript代码.…

如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当注意的问题,注:这篇文章多为参考Nicholas C. Zakas 的<编写可维护的JavaScript>一书. 第一部分:基本的格式化 1.四个空格缩进层级 js中有合适的缩进层级才能使得代码在阅读起来更容易,一般有两种方法:直接使用制表符tab.使用四个空格来缩进. 个人比较推荐使用四个空格,…

请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TITLE>click</TITLE> <Script > function validateForm() { if(confirm(“你确认提交这个表单么?”)) { alert(“确定”); }else{ alert(“取消”); } } </Script> <…

自己写的HTML5 Canvas + Javascript五子棋

看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这个小练习. 基本思路是这样的: 使用Canvas绘制棋盘.棋子. 用二维数组保存棋盘状态. 设置一个flag,用以标识落子顺序. 点击时,在数组中检测当前点击位置是否存在棋子,若存在,则不落子:如游戏已结束,亦不落子. 落子时,更新数组,并将当前落子所在的行.列.左上-右下列.左下-右上列四个方向的…

关于微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客知乎专栏:前端呼啦圈前言在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不敢再往下阅读,甚至会影响阅读者一天的心情.这些代码不仅不易阅读,而且难以维护,它们一般会出自刚入门的编程新手,也会出自工作了好几年的老程序员手下.因此本文的目的在于帮助那些没有养成良好的编码风格,缺乏相应编码规范意识的JavaScript学习者们改善他们的编码形象. 编码形象以上我提出了编码形象的…

如何写出规范的JavaScript代码

作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题.本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用"愉快"来形容了.现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用.当然,如果我说的有不科学的地方还希望各路前辈多多指教.下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范…

写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架.谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松的实现类继承,不过javascript的类继承方法还是有的,常见的有构建函数.原型扩展.综合……,也有一些专门写类的函数,例如jQuery的作者有个类继承函数.关于类继承写法可以简单看 ______________________________________________________…

如何写出优美的 JavaScript 代码？

一.变量相关 (1)变量数量的定义 NO:滥用变量 let kpi = 4; // 定义好了之后再也没用过 function example() { var a = 1; var b = 2; var c = a+b; var d = c+1; var e = d+a; return e; } YES: 数据只使用一次或不使用就无需装到变量中 let kpi = 4; // 没用的就删除掉,不然过三个月自己都不敢删,怕是不是那用到了 function example() { var a = 1;…

自写小函数处理 javascript 0.3*0.2 浮点类型相乘问题

const reg = /^([-+]?)([0-9]+)\.([0-9]*)$/; // 判断是不是浮点数 const isFloat = function(number){ return reg.test(number); } // 去除小数点转为整数 0.2 -> 2 1.3 -> 13 const floatToInt = function(matchArr){ let symbol = matchArr[1];//正负,没有为 "" let head = matc…

将javascript函数写在Html标签里

有些时候不想把函数写在script标签里了,想直接在html标签里直接加上js代码,可以这样写: <body onload="javascript:{window.location.href='http://www.speedtest.cn/'}"> 如果是写在script标签里的话就是: <script> function tiao(){ window.location.href="http://www.speedtest.cn/" } &…

作业：JavaScript（数组篇-poker）给我的徒弟出个题。。。记得早点写完，然后大家3人可以早点打牌了

吐槽一下:“今天实际上我左思右想,写个什么东西好呢!手上的笔转了半天....最后还是给自己留点余地!看着他们什么酒店管理系统,呼叫中心系统之类的....简直是把自己固定死了!感觉一撸到底的感觉!!!我们是程序员所以我觉得要思想灵活点HOHO...” 今天只是想写一篇关于JavaScript数组的一篇文章以前我认为我已经完全把数组掌握了!但是去年面试的时候被问呆了!!瞬间感觉自己萌萌哒!!所以把书看完了不算会!所以这次为了让我的徒弟能够不再犯我当年的错误...哼哼!我决定让她来一次实战!!!不能…

只用这 6 个字符，就可以写出任意 JavaScript 代码！

你可能在网上见过有人用几个不同的字符写的各种稀奇古怪的 JavaScript 代码,虽然看起来奇怪,但是能正常运行!比如这个: (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] 你猜运行结果是什么?你可以自己去控制台试一下. 看起来很神奇,但这到底是怎么回事呢? 事实上,你几乎可以用下面这 6 个字符写出任意的 JavaScript 程序: []()!+ 很多人都知道这个技巧,但是没有多少开发人员知道它…

深入理解 JavaScript，以及 Linux 下的开发调试工具

前言 JavaScript 是我接触到的第二门编程语言,第一门是 C 语言.然后才是 C++.Java 还有其它一些什么.所以我对 JavaScript 是非常有感情的,毕竟使用它有十多年了.早就想写一篇关于 JavaScript 方面的东西,但是在博客园中,写 JavaScript 的文章是最多的,从入门的学习笔记到高手的心得体会一应俱全,不管我怎么写,都难免落入俗套,所以迟迟没有动笔.另外一个原因,也是因为在 Ubuntu 环境中一直没有找到很好的 JavaScript 开发工具,这种困境直…

href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别

href="javascript:xxx(this);"和onclick="javascript:xxx(this);" 一直以为这两种写法是等同的,今天在项目中使用时发现前者的this根本拿不到触发事件的A标签,而后者可以拿到一般在做分页按钮时会用A标签来做,但是一般都会写<a href="#" onclick="turnPage(1,10)">之类的 href="#"会导致分页在跳转时页面…

浅谈:javascript的面向对象编程之具体实现

下面的javascript代码都是需要使用jQuery插件来做的.希望大家可以搭建好工作环境首先我们来做一个练习:在一个删除的超链接中添加一个提示信息,提示是否确认删除. 一般情况下我们都会这么做 <html> <head> <title>delete.html</title> </head> <script type="text/javascript"> function deleteTest(){ windo…

前端er是否忽略了某些东西？——读《ppk谈JavaScript》

关于书 “不知道ppk的网站QuirksMode,说明你可能还没有真正成为资深的JavaScript程序员.” ——Roger Johansson,瑞典资深Web专家. ppk是世界级前端技术专家,Web标准的布道者,在<ppk on JavaScript>中,他向读者介绍了JavaScript这门流行语言. 这本书从第五章开始依次介绍了JavaScript Core,BOM,DOM,和Ajax.整本书通读下来后,发现ppk重点关注原生API在各浏览器下的兼容性,但是限于篇幅,<Java…

JavaScript的三种工业化调试方法

JavaScript的三种工业化玩法软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScript同样需要软件调试技术,希望本文总结的三种工具会对大家的学习有所帮助. 任何语言的学习都离不开实践,不写代码是永远学不会编程的,当然javascript也不例外,很多人推荐直接浏览器调试,个人觉得这个推荐应该是非常初级的,比如Chrome, Firefox确实提供了实用的前端调试工具,但是个人认为…

JavaScript作用域链

之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时候发现作用域和执行环境确实很重要,又很基础,对理解JavaScript闭包很有帮助,所以在写一篇对作用域和执行环境的理解. 作用域作用域就是变量和函数的可访问范围,控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域. 单纯的JavaScript作用域还…

常用的Javascript设计模式

<parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型或强类型,静态或动态语言,命令式或说明式语言.每种语言都有天生的优缺点.一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些. 术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬. 换到程序中, 静态语言里可能需要花很多功夫来实现装饰者,而js由于能随时往对象上…

href使用 javascript:;与javascript:void(0)防跳到顶部

有时候我们在编写js过程中,需要触发事件而不需要返回值,那么就可能需要这样的写法 href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端,当连续快速点击此链接时会导致浏览器巨慢甚至崩溃. 当然我们一般用三个 href="###",不过看了这篇文章我们以后就可以使用javascript:;(一个冒号一个分号) javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. javascript:;好些,javascript:void(0);…

开篇----JavaScript细节的那些事儿

JavaScript现在已经是全世界浏览器通用的语言,目前也完全可以在服务器端做开发,如Node.js,市面上好的JavaScript的书有很多,有的还是经典之作,值得收藏. 趁此东风,打算接下来写一个只关于JavaScript的系列,尽量全面细致一点,也算是对自己学习掌握JavaScript过程的一个全面的总结和回顾,希望可以和同道的新老朋友们一起交流交流. 希望此系列能多少帮助一下初学者,彻底搞清楚这门『全世界最被人误解的语言』----道格拉斯语.…

javascript基础一语法和常用函数

1语法 1.1引入的方式在html中引入javascript,使用script标签,在html页面中包括外部引入js方式和在html内部引入js方式.如下两种: 方式一: <script type="text/javascript">要写的javascript内容</script> 方式二: <script type="text/javascript" src="引入外部的js文件"></script&…

JavaScript prototype 使用介绍

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和…

javascript笔记：javascript的关键所在---作用域链

javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript技巧也是围绕作用域进行的,今天我要总结一下关于javascript作用域的相关知识. 很多人使用javascript时候会把{}作为作用域的边界,所以我们可以看看下面的代码: function ftn01(){ var i = 1; if (i == 1){ var a = "ok"; } console.log("a =…

JavaScript基础—闭包，事件

Js基础-闭包,事件 1:js中的闭包概念:在一个函数内部又定义了一个函数,内部函数能访问到外部函数作用域范围内的变量,这时这个内部函数就叫做闭包,无论这个内部函数在哪里被调用都能访问到外部函数作用域中的那些变量.这些闭包是通过作用域链来实现的. 闭包可以做什么: 改变变量作用域;js中的面向对象都是用闭包来模拟的. 注意:当代码中有闭包的时候,闭包的代码什么时间执行最重要. Eg:下面的代码相当于C#中的局部变量,外面是访问不到的. <script type="text/javascr…

深入理解javascript（一）

此段文章摘自大叔的博客: 此文的目的是书写可维护的javascript代码. 最小的全局变量: JavaScript通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的. 每个JavaScript环境有一个全局对象,当你在任意的函数外面使用this的时候可以访问到.你创建的每一个全部变量都成了这个全局对象的属性.在浏览器中,方便起见,该全局对象有个附加属性叫做window,此window(通常)指向该全局对…

深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存…

javascript日历控件——纯javascript版

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo…

高性能JavaScript 达夫设备

前言在<高性能JavaScript>一书的第四章算法和流程控制中,提到了减少迭代次数加速程序的策略—达夫设备(Duff's device).达夫设备本身很好理解,但是其效果是否真的像书中所说“如果迭代次数超过1000,那么达夫设备的执行效率将明显提升”?还是随着浏览器性能的逐渐增强,这种以牺牲代码阅读性而获取的性能提升已经微不足道? 达夫设备达夫设备真的很简单,说白了就是“循环体展开”.看如下的代码: var a = [0, 1, 2, 3, 4]; var sum = 0; for(va…

JavaScript instanceof 运算符深入剖析

简介: 随着 web 的发展,越来越多的产品功能都放在前端进行实现,增强用户体验.而前端开发的主要语言则是 JavaScript.学好 JavaScript 对开发前端应用已经越来越重要.在开发复杂产品中,需要使用面向对象的机制时,往往会用到复杂的 JavaScript 继承,而 instanceof 运算符是 JavaScript 语言中原生的用来判断实例继承关系的操作符.深入理解 instanceof 运算符的用法,对写好复杂的 JavaScript 程序,会有很大帮助. instanceo…