×

支付宝小程序介绍

支付宝小程序 开发者入驻支付宝小程序 创建小程序支付宝小程序 开发准备支付宝小程序 提审、发布与修改

支付宝小程序 开放能力

支付宝小程序 获取会员信息支付宝小程序 接入支付支付宝小程序 芝麻信用评分(普惠版)支付宝卡包产品介绍alipay.system.oauth.token(换取授权访问令牌)蚂蚁金服支付宝开发文档——第三方应用授权支付宝小程序介绍 信用借还支付宝小程序 二维码支付宝小程序 安全检测支付宝小程序DEMO

支付宝小程序开发文档

蚂蚁支付宝小程序开发教程手册文档

支付宝小程序 框架

支付宝小程序框架 概述·overview支付宝小程序框架 App支付宝小程序框架 Page支付宝小程序框架 视图层·axml支付宝小程序框架 事件·events支付宝小程序框架 样式·acss支付宝小程序框架 兼容·compatibility

支付宝小程序 组件

支付宝小程序 视图容器

支付宝小程序组件 视图容器·View支付宝小程序组件 滑块视图容器·Swiper支付宝小程序组件 可滚动视图区域·Scroll View

支付宝小程序 基础内容

支付宝小程序组件 文本·Text支付宝小程序组件 图标·Icon支付宝小程序组件 进度条·Progress

支付宝小程序 表单组件

支付宝小程序表单组件 单选项目·Switch支付宝小程序表单组件 滑动选择器·Slider支付宝小程序表单组件 输入框·Textarea支付宝小程序表单组件 Label支付宝小程序表单组件 Radio支付宝小程序表单组件 输入框·Input支付宝小程序表单组件 嵌入页面的滚动选择器·Picker View支付宝小程序表单组件 多选项目·Checkbox支付宝小程序表单组件 表单·Form支付宝小程序表单组件 按钮·Button支付宝小程序表单组件 Picker

支付宝小程序 导航

支付宝小程序组件 页面链接·Navigator

支付宝小程序 媒体组件

支付宝小程序组件 图片·Image

支付宝小程序 画布

支付宝小程序组件 画布·Canvas

支付宝小程序 地图

支付宝小程序组件 地图·Map

支付宝小程序 开放组件

支付宝小程序 关注生活号组件 lifestyle支付宝小程序 云客服组件 Contact-button

支付宝小程序 API

支付宝小程序 界面

支付宝小程序API 导航栏支付宝小程序API TabBar支付宝小程序API 交互反馈支付宝小程序API 下拉刷新支付宝小程序API 联系人支付宝小程序API 选择城市支付宝小程序API 选择日期支付宝小程序API 动画·Animation支付宝小程序API 画布·canvas支付宝小程序API 地图支付宝小程序API 键盘支付宝小程序API 滚动支付宝小程序API 节点查询

支付宝小程序 开放接口

支付宝小程序API 用户授权支付宝小程序API 客户端获取会员信息支付宝小程序API 小程序唤起支付支付宝小程序API 小程序二维码支付宝小程序API 跳转支付宝卡包支付宝小程序API 芝麻认证支付宝小程序API 信用借还

支付宝小程序 多媒体

支付宝小程序API 图片·Image支付宝小程序API 缓存支付宝小程序API 文件支付宝小程序API 位置支付宝小程序API 网络

支付宝小程序API 设备

支付宝小程序API 获取基础库版本号支付宝小程序API canIUse支付宝小程序API 系统信息支付宝小程序API 网络状态支付宝小程序API 剪贴板支付宝小程序API 摇一摇支付宝小程序API 震动支付宝小程序API 拨打电话支付宝小程序API 获取服务器时间支付宝小程序API 用户截屏事件支付宝小程序API 屏幕亮度支付宝小程序API 扫码

支付宝小程序API 蓝牙

支付宝小程序蓝牙 快速接入支付宝小程序蓝牙 API列表支付宝小程序API 数据安全支付宝小程序API 分享支付宝小程序API 自定义分析

支付宝小程序 开发工具

支付宝小程序开发工具 概览支付宝小程序开发工具 编码支付宝小程序开发工具 调试支付宝小程序开发工具 上传支付宝小程序开发工具 体验版测试支付宝小程序开发工具 设置支付宝小程序开发工具 ESLint支付宝小程序开发工具 历史更新日志支付宝小程序开发工具 下载支付宝小程序 更新日志支付宝小程序 常见问题如何发布支付宝小程序?如何开发支付宝小程序?

支付宝小程序开发工具 ESLint


很多开发者都反馈近期 IDE 升级后,出现很多红色的波浪线提示,这些提示其实都来自于 ESLint;在这里我简单介绍什么是 ESLint,以及为什么我们要推广 ESLint

Why ESLint

大家都知道,JavaScript 是一门非常灵活的语言,往往实现一个功能会有很多种写法。然后这种灵活性也给我们带来了很多问题,ESLint 作为一个语法风格检查工具,除了可以让你的代码更一致,易读以外,也会提供一些最佳实践的提示,帮助规避一些常见的 Bugs

举例而言,我们都知道在 JS 中给未声明的变量赋值时,其实是声明了一个全局变量:

a = 123; // 当你忘记使用 var 时,很有可能是创建了一个全局变量 a

通过 ESLint,我们可以第一时间发现这个错误:

什么是 ESLint

ESLint & ES2015

很多人都听说过,Brendan Eich 当年仅仅花了 10 天时间开发了 JavaScript 这门语言,他也许完全没有想到 JS 会发展到今天,成为时下最流行的语言之一。虽然这在业界称为了一段佳话,但是由于早期 JavaScript 的定位与今日完全不同,导致其设计上有很多不如意的地方,一直以来备受业界的吐槽,每个学习 JS 的开发者估计都会知道一堆该如何规避xx问题的最佳实践

为了解决这些问题,这几年 JS 的语法一直在不断的优化中,于是有了大家经常听到的 ES6(ES2015)ES7(ES2016) 等等,新的语法不仅更加简洁,尤其去掉了很多旧语法中的糟粕。

举例而言,我们以前经常会遇到 for-loop 中闭包引用的问题:

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

执行这段代码后输出的是:

My value: 3
My value: 3
My value: 3

我们在 ESLint 规则中默认配置的 ES2015+,鼓励大家使用新的语法,比如你再用 var 的时候 ESLint 会提示你使用 let or const 代替。

ESLint

进一步了解 ES2015,大家可以看下阮一峰的 ECMAScript 6 入门

ESLint 规则

我们默认配置的 ESLint 为 airbnb 的规则,是业界主流的标准。具体的规则详见 Airbnb JavaScript Style Guide

当然,你也可以在其基础上做一些自定义的调整,在新建的项目中我们提供一个 .eslintrc 文件,其内容为:

{
  // 请不需要修改 extends
  "extends": ["airbnb-base", "appx"],

  // 根据需要修改 rules,详见 http://eslint.org/docs/rules/
  // 推荐的编码风格 https://github.com/airbnb/javascript
  "rules": {
    "arrow-body-style": [0],
    "class-methods-use-this": [0],
    "consistent-return": [0],
    "generator-star-spacing": [0],
    "global-require": [0],
    "import/extensions": [0],
    "import/first": [0],
    "import/no-extraneous-dependencies": [0],
    "import/prefer-default-export": [0],
    "import/no-unresolved": [0],
    "import/no-absolute-path": [0],    
    "linebreak-style": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "no-console": [0],
    "no-else-return": [0],
    "no-nested-ternary": [0],
    "no-restricted-syntax": [0],
    "no-trailing-spaces": [0],
    "no-use-before-define": [0],
    "no-useless-escape": [0],
    "prefer-template": [0],
    "require-yield": [1]
  }
}

目前还不支持自定义 extends,大家如果觉得 airbnb 的规则太过严格,可以把不需要的规则设为 [0],类似 "no-console": [0],(在 airbnb 的规则中不推荐大家在生产环境使用 console,也就是调试时可以写,但是生产环境建议去掉,我们觉得这条太严格了,在这里将其注释了,大家可以参考调整自己偏好的规则)

另外,针对一些对齐的问题,大家可以直接在编辑器中右键 format 下,至少可以去掉部分红线。

后记

ESLint 的作者是 Nicholas C. Zakas,相信做前端的同学都知道,他编写了《Maintainable JavaScript | 编写可维护的 JavaScript》、《Professional JavaScript for Web Developers | JavaScript 高级程序设计》、《High Performance JavaScript | 高性能 JavaScript》,我们非常感谢这位大牛为业界的付出。


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)