-
Angular:单向数据流
在介绍 Angular 单向数据流之前我们先来看下 Angular 中 component 之间关系树状结构图:比如在 child A component 从 http response 拿到最新 model 的值,并且需要把变化后的值渲染到页面,这个过程会触发 child A component 的变化检测(change detection)。这个变化检测不仅仅会在 child A component 中执行,它会从 root component 开始沿着 component 关系树结构...…
-
Angular:生命周期和钩子函数
Angular 中每个 component/directive 都有它自己的生命周期。包括创建组件,渲染组件,创建渲染子组件,检测绑定属性变化,回收和从 DOM 中移除。生命周期有这几种:OnChanges,OnInit,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy。钩子函数就是在对应的生命周期前面加上前缀 ng,比如 OnInit,对应的钩子函数是 ngOnIni...…
-
在Win10里安装Ruby和Jekyll遇到的问题
问题描述之前在搭自己的github.io的时候,需要在Win10里把整个Jekyll的环境搭起来,按照官网的步骤(如图所示):ruby装成功以后,按照官网步骤跑命令行:gem install jekyll bundler, 会报如下错误:ERROR: SSL verification error at depth 1: unable to get local issuer certificate (20)ERROR: You must add /DC=com/DC=nextestate...…
-
JS:箭头函数
先来看下ES6中箭头函数的基本语法:let func = value => value;相当于:let func = function (value) { return value}如果需要传入多个参数:let func = (value, num) => value * num;上面箭头函数例子中都省略了return关键字和代码的花括号,在箭头函数中如果方法体中只有一行代码,可以省略关键字和方法体的花括号,直接简化成value => value。如果函数的代码块需...…
-
JS:回调函数 Promise Generator Async异步处理应用
JavaScript是单线程的,正是因为有异步处理,JS才不会卡顿,JS的异步处理方式有:回调函数 -> Promise -> Generator -> Async之前一直很困惑,为什么JS异步处理方式有这么多种,Promise能解决大部分实际开发工作中的异步处理。看完Generator和Async的具体用法之后,才恍然大悟,从回调函数到Promise到Generator再到Async,其实也是想让异步代码可读性要好一点,异步代码写得越来越像同步代码,这应该是异步处理的终...…
-
JS:模拟实现call apply和bind方法
首先来说下这三个的区别: call apply都是为了解决this的指向,默认第一参数是this的指向,剩下的参数是函数形参,call接收的形参是一个列表用逗号隔开,apply接收的是一个参数数组。 call apply改变函数的this指向以后立马执行该函数,而bind是返回一个绑定上下文的新函数,后续再执行。 bind函数返回的新函数不可以再通过apply call改变它的this指向。let a = { value: 1}function getValue(name, a...…
-
JS:深浅拷贝
我们先来看下数组的拷贝,通常我们会用slice() concat()方法实现数组拷贝:var arr = [1, 2, 3, 4, 5];var arr1 = arr.concat();var arr2 = arr.slice();console.log(arr1); //[1, 2, 3, 4, 5]console.log(arr2); //[1, 2, 3, 4, 5]slice() concat()都是返回了一个新数组,没有改变原来的数组,看起来像是深拷贝。我们再来看一个例子:var...…
-
Angular:动态创建Form表单
在web应用里通常会有这样一种场景:比如支付宝信用卡还款,假设支付宝收费标准如下: 普通用户,2000元以内免费,2000-50000收费10元,50000元以上收费15元。 砖石会员,5000元以内免费,5000-50000收费5元,50000元以上收费10元。现在需要做一个页面,用来专门用来收集这样的收费标准,以后可能需要增加新的收费标准或者修改现有的收费标准。这个页面可以设计成这样:在angular用dynamic form可以很容易实现这种动态加载表单的效果,并且可以轻松实现对...…
-
JS:let和const
在JS中用var声明变量存在变量提升,比如:if (false) { var a = 1;}console.log(a);//undefined这段代码输出的是undefined,而不是ReferenceError。这是因为var有变量提升,实际这段代码相当于:var a;if (false) { a = 1;}console.log(a);//undefined还有在for循环中:var result = [];for (var i = 0; i < 5; i++) {...…
-
JS:深入理解JavaScript-继承
在文章【JS:深入理解JavaScript-原型】详细介绍了原型和new Object.create()在创建对象和实现继承的区别。JS的继承是基于原型(prototype)实现的,再理解原型之后,就很容易理解JS的继承方式了。在这篇文章里将会详细介绍6中常见的JS继承方式。1. 原型继承function Animal() { this.category = "category";}Animal.prototype.getCategory = function () { con...…