变量提升

这里说的变量提升指的是使用var声明的变量 变量提升也可以说是“变量声明前置”,就是把函数里面用到的变量声明提升到前面,赋值步骤在书写的位置进行。 是否使用 var 定义变量的区别 使用 var 定义的变量是函数级变量,只在函数内能访问到。 不使用 var 定义的变量是全局变量,等同于 块级作用域和函数级作用域 使用传统的定义的变量执行的是函数级作用域。 描述一下就是:在函数中使用定义的变量都会将变量声明放在函数的第一行,变量赋值在书写的位置赋值。 使用 let…

关于this

this 是什么 在函数运行时,基于调用位置的条件自动生成的内部对象,可以理解为动态绑定对象到 this 上。 需要强调的是: 只针对函数,在函数内部使用 this 由调用位置的上下文自动的决定,而不是函数声明的位置(代码书写的位置) 必须是运行时才确定,而不是编写时 this 绑定之后可理解为自动生成的内部对象 示例: this 的四个绑定规则及优先级 下面四个为 this 的绑定优先级规则,第一个优先级最高。判断执行流程需要做的就是找到函数的调用位置并判断使用哪条规则。…

dva

路由部分 以下是的导出项: routerRedux dva 中的源码如下: routerRedux 是对的导出, 自身的初始化已在 dva 中完成, 一般用在非 RouteComponent 页面(不是函数式组件), 比如: PC 组件内 外部库 modals 函数式组件 这样使用: RouteComponent 组件可以直接在中拿到. 组件源自插件, 按照源码的说明: The public API for putting history on context…

Fastclick原理浅析

为什么使用 FastClick 在移动端 H5 开发过程中,关于点触可能会遇到如下两个问题: 手动点击与真正触发事件会存在 300ms 的延迟 点击穿透问题(点击行为会穿透元素触发非父子关系元素的事件) 延迟的存在时因为浏览器想知道你是否在进行双击操作;而点击穿透是因为 300ms 延迟触发时的副作用。而使用 fastclick 能很好的解决这个问题,增加使用者的体验。 可以不使用的场景 不必使用的浏览器环境如下: Android + Chrome >32 Android + Chrome…

关于组件库的主题定制

简述 这篇博文主要讲解前端组件库主题定制相关内容,只限于Scss/Sass、Less两种样式预处理语言,这两种语言能够简化 CSS 的工作流,使得开发者维护开发样式更得心应手,便于应对复杂的样式需求。 对组件封装性好的库而我比较熟悉的有两个,React 和 Vue,这里我对这两个前端库封装的组件进行说明,涉及到的组件库包括:element-ui、iview、antd、ionic…

关于Babel最新使用方式

文章总结的时间是 2017/11/20 本文是为了梳理 Babel 配置及使用而整理,因为看过使用 Babel 配置项目和文章,存在项目插件使用混乱、文章各种照搬、插件使用听风是雨、插件升级文章内容不再适用的问题。这里就目前最新使用的配置组合进行整理,涉及的插件包括以下三个: @babel/preset-env(^7.0.0-beta.32) @babel/preset-stage-x(7.0.0-beta.32), x-0,1,2,3 @babel/polyfill(^7.0.0-beta…

TypeScript

代码详解 + 备忘记录 基础类型 变量声明 尽量使用, ‘const’替换 解构和 es6 相同, 注意: 的组合写法 接口 TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 类 函数 泛型

deepLinks

这个词我第一次是在IONIC Deeplinks中看到的,它表示在 H5 中使用一个链接(URL Scheme 或者 Universal Links)就能打开我们指定的 App。这样的需求可以参考下面的流程图: 因此,结合这个需求,我介绍下DeepLinks 的概念和交互设计。 DeepLinks 的概念 在 H5 中点击链接跳转到 App 可以使用两个方式实现:URL Scheme 或者 Universal Links,URL Scheme 较为通用,Universal Links…

JavaScript应用程序设计

这篇文章是的对《JavaScript 应用程序设计》书中的重要概念梳理,便于日后巩固其中的有用知识点。以下章节将按照书中章节依次总结。因为我的语文一直是体育老师教的,写的不好请见谅。 1. JavaScript 的革命时代 JavaScript 具有的以下特性: 高性能、事件驱动、无阻塞 JSON 原生支持,及 NoSQL 数据库 RESTful 接口架构 Nodejs 服务端 NPM 包管理 ES2015 使得 JavaScript 语言可以在各个层面承担从前端到后端的开发任务。…

Flex布局及在移动端的应用

前端发展很快,以前在移动端使用 Flex 布局还要想三想的文章也许已经过时了,这篇文章主要介绍使用 Flex 进行常规布局及在移动端的处理。 Flex 语法 Flex 布局意为”弹性布局”,用来为盒模型提供更多灵活性。此外,Flex 定义的容器可以对块级元素()或行内元素()生效,需要注意的是,如果父元素设置了 Flex 容器,则子元素的、和属性将失效。 Flex 布局需要注意下面几个重要的概念,结合下面这张图也许能更好的理解: flex 容器(flex container) flex…