查阅官方文档的正确姿势


在之前的博文中可能谈到过这个问题:参照官方文档才是解决问题的根本依据。
以一个经典的问题为例,展示一下大致流程。(当然在平时的工作中,很多步骤是可以省略的):

在JavaScript中[] == ![]的结果是什么?

1.要回答这道题,首先应该是明确js中==运算符计算的流程和规则。

ECMAScript官方规范对于== 流程的定义是:

Alt text
即首先对于左右两端的值进行GetValue()操作。

2.再来看GetValue()

Alt text
GetValue 会获取一个子表达式的值(消除掉左值引用),在表达式 [] == ![] 中,[] 的结果就是一个空数组的引用。

more >>

Yarn:一个新的JavaScript包管理器

npm工具存在挺多难以忍受的诟病,包括安装速度慢、每次都要在线重新安装等问题,yarn正是为了解决npm当前所存在的问题而出现的。

yarn亮点

  1. 极致的快速:会缓存已经下载过的包,避免重复下载。
  2. 安全 :下载前会检查签名及包的完整性
  3. 网络优化 : 力求网络资源最大利用化,让资源下载完美队列执行,避免大量的无用请求,下载失败会自动重新请求,避免整个安装过程失败。
  4. 扁平化模式 : 对于不匹配的依赖版本的包创立一个独立的包,避免创建重复的。

安装

如果原先有npm工具的话,安装yarn很简单,只需要一行命令即可

npm install -g yarn

什么,你说你没有npm?那你怎么会找到这篇yarn的文章…
真的没有的话请看这里各平台下yarn工具安装方式

配置

安装yarn之后默认的包安装源和原来npm安装源是一样的,可用查看命令

yarn config get registry

若想提高yarn安装的速度,可将包安装源修改为taobao的安装源,执行以下命令即可

yarn config set registry 'https://registry.npm.taobao.org'

more >>

Vue单文件组件实践

小明是个前端新人,他在开发过程中,拿到一个替换模块的需求,面对茫茫然一堆文件文件,一脸懵逼,于是他开始了以下步骤:

  1. 回想了一下到底html/template模板部分在哪里,找到了,替换;
  2. 又回想了一下css/sass样式部分写在哪,重复上一步。
  3. 找了半天到底逻辑部分写在哪个文件,打开,替换。
  4. 也许小明学了一些模块化开发的步骤,稍微轻松了一些。

但是还是很麻烦,很痛苦不是吗?
没关系,现在我们可以使用Vue的单文件组件构建项目来告别这类问题!

单文件组件介绍

先来看一段官方指南对于单文件组件的描述:

在中大型项目开发过程中,使用模块构建系统非常重要。使用Vue.js中提供的单文件组件的思路,我们可以将界面拆分为多个小组件,每个组件在同一地方封装它的 CSS 样式,模板和 JavaScript 定义。
Alt text

采用单文件组件构建项目:

  1. 利于代码复用,我们可能在同一个项目中多处用到同一个类型的模块,而我们需要做的仅仅只是将这个组件放入它应该在的位置,借助MVVM框架的各种渲染控制,各个模块随意组合,随心所欲。
  2. 替换或者增减相应的模块非常方便。在实际开发过程中,增减功能或者模块十分频繁,在这类情况下,我们只需要改变对应的组件即可。

案例

本文仅描述采用单文件组件构建项目的思路,webpackVue.js等相关基础知识请查阅官方文档。

more >>

ui.router路由实现原理

前端构建SPA必不可少应该就是Router了,不同的MV*对路由的实现各有不同,对于angular这种大而全的框架,它自然也有内置的路由模块ngRoute。

不过,ngRoute功能有限,甚至不能实现路由嵌套。
相比较而言ui-router可以很好的完成一个页面可以嵌套多个视图、多个视图去控制某一个视图的工作。

router的基本原理

我们应该都知道在访问锚点的时候,页面并不会进行刷新,比如在下面的结构中:

<a href="#view">go</a>
<pre id="view">

点击了a标签之后,会找对对应锚点的位置,并且在地址栏中的地址后加上了#view

所以可以通过对#之后部分的解析来获取数据,以此来实现页面不刷新而重新渲染部分内容的效果。

那么如何获取#view呢?

https://www.abc.com:8080/test/index.html?id=10#name为例,我们通过控制台打印出window.location,可以得出其地址结构分为:

more >>

使用ESLint规范你的代码(开发环境及工具配置系列教程)

为了规范代码,提高代码质量,我们可以使用ESLint。ESLint与JSLint类似是一个Javascript静态检查工具,由红宝书《JavaScript高级程序设计》的作者提供,它可以帮你养成良好的编程习惯,使你的JavaScript代码达到国际化的水准。

安装ESLint:

(教程内容在OS X下测试通过并编写,其它系统仅供参考)
安装前请确保已安装node。

依次在命令行内执行:

1.npm install eslint -g
这里的-g选项代表全局。如果你没有设置这个-g选项的话,它会在你当前文件夹下安装ESLint可执行文件。在其他文件夹下面就不能使用了。

2.eslint
如果安装成功,输入这条命令会弹出一系列提示信息。如果提示命令不存在,则没有安装成功,重新进行上一步操作。

官方的教程里面,下一步应该是eslint --init。它相当于一个初始化配置的过程,会问你几个问题,根据个人习惯来生成一个初步规则,在你当前文件夹下生成.eslintrc文件,并且如果你使用包的话,还会要求必须要有package.json文件。其实并没有必要执行这繁琐的一步,所以我们直接跳过。

3.npm install eslint-config-airbnb -g
在Eslint默认推荐的三个规则是:Google标准、Airbnb标准和Standard标准。目前来看,公认的最好的标准是Airbnb标准,它对于ES6要求最严格,比如禁止使用var定义变量,必须使用let或者const等等。所以我们选择安装airbnb标准,依旧全局安装。

more >>

我是王浩然,乐于分享,喜欢折腾。</br>2013年接触前端,从此找到了自己感兴趣的道路。