首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

前端码农之蜕变 — AST(抽象语法树)

2018年12月25日 发布 阅读(406) 作者:懒炖

原文出处: Bohdan Liashenko 译文出处:岁月是把杀猪刀

前言

首先,先说明下该文章是译文,原文出自《AST for JavaScript developers》。很少花时间特地翻译一篇文章,咬文嚼字是件很累的事情,实在是这篇写的太棒了,所以忍不住想和大家一起分享。

该译文出自我的博客:github.com/CodeLittlePrince/blog/issues/19,我的博客会不定时更新各种类型文章,希望大家支持。

OK,我们直接进入正题。

为什么要谈AST(抽象语法树)?

如果你查看目前任何主流的项目中的devDependencies,会发现前些年的不计其数的插件诞生。我们归纳一下有:javascript转译、代码压缩、css预处理器、elint、pretiier,等。有很多js模块我们不会在生产环境用到,但是它们在我们的开发过程中充当着重要的角色。所有的上述工具,不管怎样,都建立在了AST这个巨人的肩膀上。
image

所有的上述工具,不管怎样,都建立在了AST这个巨人的肩膀上

我们定一个小目标,从解释什么是AST开始,然后到怎么从一般代码开始去构建它。我们将简单地接触在AST处理基础上,一些最流行的使用例子和工具。并且,我计划谈下我的js2flowchart项目,它是一个不错的利用AST的demo。OK,让我们开始吧。
image

什么是AST(抽象语法树)?

It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.

image

估计很多同学会和图中的喵一样,看完这段官方的定义一脸懵逼。OK,我们来看例子:
image

这很简化

实际上,正真AST每个节点会有更多的信息。但是,这是大体思想。从纯文纯中,我们将得到树形结构的数据。每个条目和树中的节点一一对应。

那怎么从纯文本中得到AST呢?哇哦,我们知道当下的编译器都做了这件事前。那我们就看看一般的编译器怎么做的就可以了。
image

想做一款编译器是个比较消耗发量的事情,但幸运的是,我们无需贯穿编译器的所有知识点,最后将高级语言转译为二进制代码。我们只需要关注词法分析和预发分析。这两步是从代码中生成AST的关键所在。

第一步,词法分析,也叫做扫描scanner。它读取我们的代码,然后把它们按照预定的规则合并成一个个的标识tokens。同时,它会移除空白符,注释,等。最后,整个代码将被分割进一个tokens列表(或者说一维数组)。
image

当词法分析源代码的时候,它会一个一个字母地读取代码,所以很形象地称之为扫描-scans;当它遇到空格,操作符,或者特殊符号的时候,它会认为一个话已经完成了。

第二步,语法分析,也解析器。它会将词法分析出来的数组转化成树形的表达形式。同时,验证语法,语法如果有错的话,抛出语法错误。
image

当生成树的时候,解析器会删除一些没必要的标识tokens(比如不完整的括号),因此AST不是100%与源码匹配的,但是已经能让我们知道如何处理了。说个题外话,解析器100%覆盖所有代码结构生成树叫做CST(具体语法树)

image

我们最终得到的

想要学习更多关于编译器的知识?
the-super-tiny-compiler,一个贼好的项目。大概200来行代码,几乎每行都有注释。
image

想要自己创建门编程语言?
LangSandbox,一个更好的项目。它演示了如何创造一门编程语言。当然,设计编程语言这样的书市面上也一坨坨。所以,这项目更加深入,与the-super-tiny-compiler的项目将Lisp转为C语言不同,这个项目你可以写一个你自己的语言,并且将它编译成C语言或者机器语言,最后运行它。

我能直接用三方库来生成AST吗?
当然可以!有一坨坨的三方库可以用。你可以访问astexplorer,然后挑你喜欢的库。astexplorer是一个很棒的网站,你可以在线玩转AST,而且除了js,还有很多其它语言的AST库。
image

我不得不强调一款我觉得很棒的三方库,叫做babylon。
image

它被用在大名鼎鼎的babel中,也许这也是它之所以这么火的原因。因为有babel项目的支持,我们可以意料到它将与时俱进,一直支持最新的JS特性,我们可以放心大胆地用,不怕以后JS又出新版导致代码的大规模重构。另外,它的API也非常的简单,容易使用。

Ok,现在你知道怎么将代码生成AST了,让我们继续,来看看现实中的用例。

第一个用例,我想谈谈代码转化,没错,就是那个货,babel。

Babel is not a ‘tool for having ES6 support’. Well, it is, but it is far not only what it is about.

经常把beble和支持es6/7/8联系起来,实际上,这也是我们经常用它的原因。但是,它仅仅是一组插件中的一个。我们也可以使用它来压缩代码,react相关预发转译(如jsx),flow插件等。
image

babel是一个javascript编译器。宏观来说,它分3个阶段运行代码:解析(parsing),转译(transforming),生成(generation)。我们可以给babel 一些javascript代码,它修改代码然后生成新的代码返回。那它是怎样修改代码的呢?没错!它创建了AST,遍历树,修改tokens,最后从AST中生成新的代码。

我们来从下面的demo中看下这个过程:
image

像我之前提到的,babel使用babylon,所以,首先,我们解析代码成AST,然后遍历AST,再反转所有的变量名,最后生成代码。完成!正如我们看到的,第一步(解析)和第三步(生成)看起来非常常规,我们每次都会做这两步。所以,babel接管处理了它俩。最后,我们最为关心的,那就是AST转译这一步了。

当我们开发babel-plugin的时候,我们只需要描述转化你AST的节点“visitors”就可以了。
image

将它加入你的babel插件列表中,设置你webpack的babel-loader配置或者.babelrc中的plugins即可

You may check out Babel-handbook if you would like to learn more about how to build your first babel-plugin.
如果你想要学习怎么创建你的第一个babel-plugin,可以查看Babel-handbook
image

让我们继续,下一个用例,我想提到的是自动代码重构工具,以及神器JSCodeshift。

比如说你想要替换掉所有的老掉牙的匿名函数,把他们变成Lambda表达式(箭头函数)。
image

你的代码编辑器很可能没法这么做,因为这并不是简单地查找替换操作。这时候jscodeshift就登场了。

如果你听过jscodeshift,你很可能也听过codemods,一开始挺这两个词可能很困惑,不过没关系,接下来就解释。jscodeshift是一个跑codemods的工具。codemod是一段描述AST要转化成什么样的代码,这思想和babel的插件如出一辙。
image

所以,如果你想创建自动把你的代码从旧的框架迁移到新的框架,这就是一种很乃思的方式。举个例子,react 16的prop-types重构。
image

有很多不同的codemodes已经创建了,你可以保存你需要的,以免手动的修改一坨坨代码,拿去挥霍吧:
https://github.com/facebook/jscodeshift
https://github.com/reactjs/react-codemod
image

最后一个用例,我想要提到Prettier,因为可能每个码农都在日常工作中用到它。
image

Prettier 格式化我们的代码。它调整长句,整理空格,括号等。所以它将代码作为输入,修改后的代码作为输出。听起来很熟悉是吗?当然!
image

思路还是一样。首先,将代码生成AST。之后依然是处理AST,最后生成代码。但是,中间过程其实并不像它看起来那么简单。

同样,如果你想学习更多在美化打印背后理论,这里有一本你可以深入的书 《A prettier printer》
image

文章迎来尾声,我们继续,今天最后一件事,我想提及的就是我的库,叫做js2flowchart(4.5 k stars 在 Github)。
image

顾名思义,它将js代码转化生成svg流程图

这是一个很好的例子,因为它向你展现了你,当你拥有AST时,可以做任何你想要做的事。把AST转回成字符串代码并不是必要的,你可以通过它画一个流程图,或者其它你想要的东西。

js2flowchart使用场景是什么呢?通过流程图,你可以解释你的代码,或者给你代码写文档;通过可视化的解释学习其他人的代码;通过简单的js语法,为每个处理过程简单的描述创建流程图。

马上用最简单的方式尝试一下吧,去线上编辑看看 js-code-to-svg-flowchart

你也可以在代码中使用它,或者通过CLI,你只需要指向你想生成SVG的文件就行。而且,还有VS Code插件(链接在项目readme中)

那么,它还能做什么呢?哇哦,我这里就不废话了,大家有兴趣直接看这个项目的文档吧。

OK,那它是如何工作的呢?
image

首先,解析代码成AST,然后,我们遍历AST并且生成另一颗树,我称之为工作流树。它删除很多不重要的额tokens,但是将关键块放在一起,如函数、循环、条件等。再之后,我们遍历工作流树并且创建形状树。每个形状树的节点包含可视化类型、位置、在树中的连接等信息。最后一步,我们遍历所有的形状,生成对应的SVG,合并所有的SVG到一个文件中。

结尾

寻找和筛选资料着实辛苦,希望同学们可以多多支持!

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • Fetch进阶指南

    发布:2019-08-21 阅读(33)

  • JS包装对象

    对象是 JavaScript 语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”

    发布:2019-08-20 阅读(37)

  • JavaScript数组去重(12种方法)

    JS数组去重的各种方法~

    发布:2019-08-07 阅读(102)

  • iviewui-admin框架的一些坑

    使用iviewui-admin框架构建管理系统时,遇到的各类问题

    发布:2019-08-01 阅读(100)

  • 使用es6的exports和import 进行模块化开发

    使用es6的exports和import 进行模块化开发

    发布:2019-06-14 阅读(338)

  • vue项目v-for中动态图片路径拼接

    vue项目中动态图片路径拼接

    发布:2019-04-04 阅读(638)

  • vue之js调用filter

    vue下filter方法的调用

    发布:2019-03-29 阅读(492)

  • 深入学习Cache-Control

    对于 HTTP头Cache-Control,我们经常使用,也非常"熟悉",然后经常会有问题,为什么我使用了"no-cache",然后为什么还有缓存? 看这个文章你就知道为什么了。

    发布:2019-03-15 阅读(271)

  • IntersectionObserver API

    在之前,我们要判断一个元素是否出现在视窗内,需要使用`scroll`或`setInterval`来不断计算元素的位置,这样非常损耗性能,Chrome在2016年的时候推出了IntersectionObserver APi,现在看看它是做什么的

    发布:2019-03-12 阅读(468)

  • 推荐21个顶级的Vue UI库!

    21个vue顶级UI框架: Vuetify,Quasar,Vue Material,Keen-UI,Buefy,Bootstrap Vue,Muse-UI,AT-UI,Vux,iView,Uiv,Vuikit,Onsen UI+Vue,Semantic UI+Vue,Fish-UI,Mint UI,Framework7 Vue,Cube UI,Vueblu,Ant Design Vue

    发布:2019-03-04 阅读(474)

  • 收集的一些轻量高效的开源JavaScript插件和库

    轻量高效的开源JavaScript插件和库

    发布:2019-02-25 阅读(504)

  • input输入时,实时格式化

    格式化input输入~

    发布:2019-02-25 阅读(432)

  • 什么是vue的sfc?怎么解析成SFCDescriptor?

    ".vue"文件是如何解析成js对象的~

    发布:2019-01-29 阅读(477)

  • vue源码阅读1--目录结构及package.json

    立个flag,看过年这段时间能不能把vue的源码读完?多年前看过jQuery的部分源码,如果想要更深入的了解vue,还是得从源码开始

    发布:2019-01-29 阅读(502)

  • Vue之源码解读

    vue源码阅读,慢慢学习

    发布:2019-01-29 来源:github

  • Vue的生命周期及相关问题

    vue的生命周期函数

    发布:2019-01-29 阅读(493)

  • react服务器端渲染之--nextjs

    Next.js 是一个轻量级的 React 服务端渲染应用框架。

    发布:2019-01-24

  • window.atob和btoa进行base64编码解码

    使用原生window.atob和btoa进行base64编码解码

    发布:2019-01-17 阅读(452)

  • nodejieba "结巴"中文分词安装使用

    NodeJieba是"结巴"中文分词的 Node.js 版本实现, 由CppJieba提供底层分词算法实现, 是兼具高性能和易用性两者的 Node.js 中文分词组件。

    发布:2019-01-16 阅读(815)

  • React的两种事件传参方式

    通过箭头函数或bind方式,对绑定事件传参

    发布:2019-01-09 阅读(428)

  • vue data为什么是函数?而不是对象

    vue组件的数据data为什么一定要是函数 ?

    发布:2019-01-07 阅读(787)

  • 回顾一下NaN,isNaN,Number.isNaN

    回顾一下NaN,isNaN,Number.isNaN

    发布:2018-12-28 阅读(467)

  • 利用react-hot-loader实现局部更新

    React Hot Loader是一个插件,允许React组件在不丢失状态的情况下进行实时重新加载。它适用于Webpack和其他支持热模块替换(HMR)和Babel插件的捆绑器

    发布:2018-12-27 阅读(526)

  • 前端码农之蜕变 — AST(抽象语法树)

    如果你查看目前任何主流的项目中的`devDependencies`,会发现前些年的不计其数的插件诞生。我们归纳一下有:javascript转译、代码压缩、css预处理器、elint、pretiier,等。有很多js模块我们不会在生产环境用到,但是它们在我们的开发过程中充当着重要的角色。所有的上述工具,不管怎样,都建立在了AST这个巨人的肩膀上

    发布:2018-12-25 阅读(406)

  • 为什么要在javascript中进行静态类型检查.Part2&3[译]

    在第一部分中我们了解了许多基础知识,结束了语法的学习,我们可以进入下一个更有趣的部分:使用静态类型的优势和劣势

    发布:2018-12-21 来源:AlienZHOU

  • 为什么要在javascript中进行静态类型检查.Part1[译]

    作为一个JavaScript开发者,你可以编写一整天编写也不会遇到任何静态类型检查得问题。那么为什么要自找麻烦得去学习它呢? 然而学习静态类型并不仅仅是一个思维拓展的训练。如果你愿意花点时间来学习一些静态类型的优势、劣势以及使用的案例,那将会极大的帮助你进行编码。 怎么样,有意思吧?要是你感兴趣的话,那接下来四个部分将会向你详细解释

    发布:2018-12-21 来源:AlienZHOU

  • Mint-ui this.$messagebox报 Uncaught (in promise) cancel

    Mint-ui this.$messagebox点取消时,报错:Uncaught (in promise) cancel

    发布:2018-11-16 阅读(595)

  • vue vee-validate验证插件使用

    vue-validate使用

    发布:2018-11-08 阅读(785)

  • vue之query和params,$router和$route

    这就是个vue的坑。。。

    发布:2018-11-08 阅读(523)

  • vue监听Enter事件

    vue如何监听enter事件?

    发布:2018-11-08 阅读(809)

  • vue使用axios进行form表单提交

    vue使用axios进行form表单提交

    发布:2018-11-07 阅读(730)

  • ECMA-262-5 详解 - 3.1 词法环境:通用理论 – ds.laboratory

    这一节,我们会讨论词法环境的细节,它是在一些编程语言中用于管理静态作用域的一种机制。为了确保能充分理解这一主题,我们会简要讨论下其对立面:动态作用域(并没有直接用于 ECMAScript)。我们会看到环境是如何管理代码中的词法嵌套结构,以及为闭包提供全面支持。

    发布:2018-11-03 阅读(311)

  • vue中如何改变title标题

    vue中如何改变title标题

    发布:2018-11-02 阅读(475)

  • vue2.0中使用NProgress进度条

    如果在vue2.0中使用NProgress进度条

    发布:2018-11-02 阅读(549)

  • vue2.0 Axios中文说明

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。也是vue2.0官方推荐的,同时不再对vue-resource(vue1.0使用)进行更新和维护

    发布:2018-11-01 阅读(517)

  • React资源、教程、案例

    React 的核心思想是:封装组件。 各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件。 基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素,然后操作 DOM 去更改 UI

    发布:2018-10-29 阅读(243)

  • ECMA-262-5详述 第一章. 属性和属性描述符

    这一章专门讨论了ECMA-262-5 规范的新概念之一 — 属性特性及其处理机制 — 属性描述符。 当我们说“一个对象有一些属性”的时候,通常指的是属性名和属性值之间的关联关系。但是,正如在ES3系列文章中分析的那样,一个属性不仅仅是一个字符串名,它还包括一系列特性—比如我们在ES3系列文章中已经讨论过的{ReadOnly},{DontEnum}等。因此从这个观点来看,一个属性本身就是一个对象

    发布:2018-10-26 阅读(277)

  • Vue.js 技术揭秘

    分析Vue.js源码

    发布:2018-10-25 来源:github.io

  • 运行npm run dev,vuejs二级路由,刷新页面静态资源404(路径不对)

    npm run dev模式下,webpack4+vue2项目下,类似'/user/login'二级路由,刷新时静态资源路径不对,静态资源返回404

    发布:2018-10-23 阅读(731)

  • vuejs报错:[Vue warn]: Error in render: TypeError: Cannot read property 'matched' of undefined

    [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

    发布:2018-10-22 阅读(1015)

  • Unknown custom element:- did you register the component correctly

    did you register the component correctly? For recursive components, make sure to provide the "name" option

    发布:2018-10-22 阅读(1055)

  • vue.js查看注册了哪些基础组件

    vue.js如何查看注册了哪些组件,获取组件名称

    发布:2018-10-22 阅读(381)

  • [阮一峰]JavaScript 教程

    本教程全面介绍 JavaScript 核心语法,从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。

    发布:2018-10-19 来源:wangdoc.com

  • [阮一峰]ECMAScript 6 入门

    《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。

    发布:2018-10-19

  • snabbdom——Virtual DOM实现

    vue底层的Virtual DOM就是基于snabbdom修改的

    发布:2018-06-29 来源:snabbdom

  • ECMA-262-3 in detail——第七章:OOP(第二部分:ECMAScript实现)

    这一章的第二部分是关于EMCAScript中的面向对象编程。在第一部分中我们讨论了OOP的基本理论并勾画出和ECMAScript的相似之处。在阅读第二部分之前,如果有必要,我还是建议首先阅读这一章的第一部分.基本理论,因为后面将会用到其中的一些术语。

    发布:2015-05-26 阅读(290)

  • ECMA-262-3 in detail——第七章:OOP(第一部分:一般理论)

    这一章我们讨论ECMAScript中面向对象编程(object-oriented programming)的几个主要方面。由于这一主题已经在许多文章中谈论过,本章并不打算“老调重弹”,而是试图更多地着眼于这些过程内在的理论方面。尤其是,我们将研究对象创建的算法,看看对象间的关系(包括最基本的关系——继承)是如何实现的,并且给出一些讨论中将用到的准确定义(我希望这样能够打消一些术语和思路上的疑惑以及一些关于Javascript文章中OOP部分的常见的混淆)。

    发布:2015-05-06 阅读(259)

  • ECMA-262-3 in detail——第六章:闭包

    在这一章中我们来谈谈Javascript中被讨论最多的话题之一——关于闭包(closures)。事实上这个主题并不是新鲜的。然而我们在这里将试着更多从理论的角度去分析和理解它,然后我们还会看一下ECMAScript内关于闭包的内容。

    发布:2015-04-28 阅读(260)

  • ECMA-262-3 in detail——第五章:函数

    在这章里我们讨论ECMAScript中的一个基本对象——函数。我们将会看到不同类型的函数如何影响一个上下文中的变量对象,以及这些函数的作用域链中都包含什么。我们将会回答像下面这样经常被问到的问题:“下面这两种创建函数的方式有什么区别吗(如果有的话,区别是什么呢)?”

    发布:2015-04-17 阅读(259)

  • ECMA-262-3 in detail——第四章:作用域链

    正如我们从第二章.变量对象中了解到的,执行上下文的数据(变量,函数声明,函数形参)以变量对象的属性的方式储存。

    发布:2015-04-07 阅读(243)

  • ECMA-262-3 in detail——第三章:this关键字

    许多程序员习惯于认为在编程语言中,this关键字是与面向对象编程紧密相关的,而且引用的是由构造式最新创建的对象。在ECMAScript中,这个概念也被实现了,然而我们将看到,在这里它不仅仅指向已创建的对象。

    发布:2015-03-25 阅读(247)

  • ECMA-262-3 in detail——第二章:变量对象

    在程序中我们总是声明变量和函数然后用它们来搭建我们的系统。但是解释器(interpreter)是在哪里和以什么方式来找到我们的数据(函数,变量)的呢?

    发布:2015-03-24 阅读(269)

  • ECMA-262-3 in detail——第一章:执行上下文

    第1章:在这一章里,我们将会讨论ECMAScript中的执行上下文(execution context)以及与它们相关的可执行代码(executable code)的类型。

    发布:2015-01-10 阅读(471)

  • javascript检测浏览器的缩放状态,页面放大了或缩小了

    检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放。这里提供javascript的方法来检测浏览器的缩放。

    发布:2014-10-13 阅读(485)

  • javascript判断是否有夏令时(Daylight Saving Time)

    当你的项目中的时间需要考虑时区,夏令时时,下面判断夏令时的方法就很有用了!

    发布:2014-07-22 阅读(214)

  • for in循环的输出顺序问题

    在以前的编码过程中,对for...in遍历对象的循环的,一直以为是没有顺序的。直到遇到有对象有的key值为纯数字时,发现现代浏览器对for...in循环是有顺序之分的。

    发布:2014-05-29 阅读(146)

  • 使用js禁用右键菜单、F5刷新和Ctrl+R刷新、backspace键、esc键

    有时候我们需要把网页的右键菜单禁用,然后启用自己模似的右键菜单。或者我们为了避免用户习惯性的使用F5刷新或使用Ctrl+r键刷新导致表单数据的丢失,我们还需要把F5键和ctrl+r键都屏蔽掉。甚至根据需要还可能会屏蔽退格键(Backspace)和退出键(Esc)。

    发布:2014-05-26 阅读(189)

  • js中preventDefault、stopPropagation、return false三者之间的区别及使用

    preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type="submit">等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的

    发布:2014-05-26 阅读(247)

  • javascript检测是否联网,是否为脱机状态

    通过JS检测网络是否OK,最简单粗暴的方式就是加载网络资源,JS文件或者图片文件...

    发布:2014-05-19 阅读(201)

  • jQuery对象中类数组的概念及操作

    什么是类数组?相信我们对function方法的arguments很熟悉,arguments就像一个数组,但instanceof Array检测会返回false,可以称为“类数组”。

    发布:2014-04-10 阅读(228)

  • 利用iframe实现跨域访问

    利用iframe实现跨域

    发布:2014-03-19 阅读(198)

  • javascript方法setMonth设置2月份变成3月份的小问题

    项目使用了setMonth来设置时间,发现了一个问题,2月份设置下去,显示出来变成3月份了。

    发布:2013-12-22 阅读(200)

  • jquery使用不当导致内存泄漏

    jQuery是现在最流行的js库,一般情况下我们都会放心的使用它,不用考虑其内存泄漏的问题。 最近的项目是基于MVC模式的管理系统,期间要采用ajax不断轮询服务器,以获得最新的数据,这时候使用jQuery的时候就要注意了,一不小心俺们最可爱的IE内存就up up up了~~

    发布:2013-12-10 阅读(231)

  • javascript严格模式(use strict)

    除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。

    发布:2013-11-13 阅读(228)

  • IE提示expected 错误,如expected ';' expected '}' expected ')'等等

    IE提示expected 错误,如果语法没问题,不防检查下是不是文件编码问题,改为utf-8试试

    发布:2013-11-01 阅读(202)

  • javascript原始数据类型相互转换

    javascript原始数据类型相互转换示例,如字符串、数字、布尔类型的相互转换

    发布:2013-10-19 阅读(329)

  • javascript Arguments对象之length、callee属性

    arguments是调用对象的一个属性,它与形参及局部变量是一样的,它实际上是调用了一个Arguments对象,Arguments对象与数组相似,但它又不是数组,因为它不具备数组的一些常用方法,如push,sort,shift等等。Arguments对象有两个属性:

    发布:2013-09-30 阅读(220)

  • Javascript容错处理,window.onerror或try{}catch(err){}

    利用javascript开发WEB功能时,代码量小还OK,如果代码非常庞大,这就不可避免的出现一些未知的错误。如果web已经上线,这时却出现了js脚本错误,这对WEB的用户体验是致使的,因为一但出现js脚本错误,网页将停止加载,从而不能正常显示出页面,而失去用户。

    发布:2013-08-15 阅读(185)

  • 利用Object.prototype.toString判断javascript数据类型(数组,函数,类对象{},布尔类等)

    一般情况下,判断javasceript数据类型,使用typeof 或 instanceof 就够了,但偶觉得用起来还是别别扭扭的。这里介绍一个完美的方法,我们可以轻松的判断数组,对象(这里对象暂且指{}),函数(function),布尔(Boolean),null,undefined,number,时间对象(date),正则表达式(RegExp)。

    发布:2013-08-12 阅读(234)

  • 高效javascript模板引擎——doT.js原理及应用

    目前完成的一个基于MVC模式的管理系统,综合考虑后,选择了doT.js,这篇文章主要也是介绍下它的优势及使用方法。

    发布:2013-08-09 阅读(274)

  • js移动光标到文字末尾

    移动光标到文字末尾,如果使用<input><textarea>时,需要把光标定位在文字的后面

    发布:2013-07-28 阅读(168)

  • Javascript数字类型小数表示方式的三种方法:toFixed,toExponential,toPrecision

    javascript提供了三个方法来计算表示小数点的位数:toFixed,toExponential,toPrecision

    发布:2013-05-30 阅读(283)

  • jQuery.support源码分析(检测浏览器兼容)

    jquery.support主要是检测浏览器兼容性,支持力度的方法,用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员,提供给jquery内部函数,告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。

    发布:2013-05-08 阅读(40)

  • IE下javascript:void(0)触发onbeforeunload

    使用MVC模式开发一些项目时,我们一般会添加onbeforeunload方法,以防止客户无意识的跳出页面,丢失数据。

    发布:2013-03-22 阅读(141)

  • iframe跨域加载页面cookie丢失的问题

    利用iframe跨域加载页面,cookie失效的问题: 主要是浏览器不接受第三方cookie引发的

    发布:2013-03-05 阅读(212)

  • javascript typeof运算符

    typeof操作符,typeof是返回“表达式”的数据类型的字符串

    发布:2013-01-27 阅读(243)

  • javscript原始数据类型相互转换

    发布:2013-01-22 阅读(305)

  • Javascript基本数据类型[Undefined,null,String,Number,Boolean]

    Javascript有五种基本的数据类型:Undefined,null,String,Number,Boolean,这五种数据类型都可以用typeof来检测

    发布:2013-01-05 阅读(246)

  • javascript检测IE6/7/8,chrome,safari,firefox,opera等主流浏览器类型

    利用javascript检测浏览器的类别,网上也会有很多的代码,这里总结写了一下,主要检测主流的五款浏览器(IE,Chrome,Opera,Safari,Firefox)的类别,IE可以检测到IE6-IE9的本种版本,IE10没有检测过。

    发布:2012-11-27 阅读(251)

  • jQuery跳出each循环(替换break,continue)

    jQuery each循环中,如果要实现类似break或continue的功能,不用跟原生javascript for循环一样用break或continue了,而必须用reaturn false、return true

    发布:2012-11-14 阅读(319)

  • 理解javascript函数柯里化(Currying)

    在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术

    发布:2012-11-05 阅读(279)

  • IE6,IE7下onresize事件被执行多次的问题之解决方法

    IE下给window对象定义其onresize事件,在拉伸缩小窗口时,其onresize方法将被执行多次,并且其具体执行的次数在不同的电脑有不同的值,相当诡异,Firefox等其他浏览器则无此现象

    发布:2012-11-05 阅读(394)

  • javascript获取地址栏(url)QueryString(参数)值

    通过浏览器获取URL参数值

    发布:2012-10-30 阅读(333)

  • javascript获取浏览器窗口的宽度、高度

    通过原生js获取浏览器宽高、可视区域、滚动区域等等

    发布:2012-10-29 阅读(325)

  • iframe同域或异域下高度自动适应(兼容种浏览器)

    利用javascript来控制iframe的高度自动适应,介于javascript对不同域名权限的限制,分为两种情况

    发布:2012-10-25 阅读(356)

  • js添加收藏夹代码(兼容IE,firefox,其他浏览器弹信息提示)

    完全兼容IE和firefox的“添加收藏夹代码,chrome,safari会提示信息"添加收藏失败,请同时按"CTRL+D"添加“

    发布:2012-10-23 阅读(306)

  • 获取当前时间、日期、星期(兼容IE,Firefox,Chrome,Opera,Safari...)

    获取当前时间代码,用原生JS所写,兼容种浏览器

    发布:2012-10-22 阅读(464)