Puppeteer 页面切换

Photo by Cristina Gottardi on Unsplash

很多时候,我们需要利用 Puppeteer 进行页面切换。比如点击某个按钮,打开

了一个新的页面(<a target=’blank’>),此时我们想切换到新开的页面,那

么就涉及到了页面的切换。虽然在某些场景下,我们可以通过页面修改元素属

性的方式来阻止跳转避免页面切换。但是在某些场景下,直接切换页面会来的

更加容易。

继续阅读Puppeteer 页面切换

Angular 组件交互(二)@Input

前端组件化带来的需求就是前端框架必须能够实现父子组件之间的通讯。这种

数据从父组件流向子组件的过程也被称为属性绑定(property binding)。属

性绑定反映了 Angular 将组件中的变量与 DOM 元素一一对应的关系。通过属

性绑定可以将变量的变化实时传入其他组件中,由 Angular 变化检测和视图更

新机制将充当视图层与控制层的中间人,负责消息的传递和界面的更新。从而

实现视图层与控制层的解耦,减少代码维护,需求变更带来的开发成本。

既然属性绑定好处多多,现在就让我们来了解一下 Angular 属性绑定的关键成

员——@Input 修饰符。

继续阅读Angular 组件交互(二)@Input

JavaScript 中的 This

Photo by sydney Rae on Unsplash

this 所指向的对象与运行时上下文进行绑定,这就会导致在不同的场景下,函

数的最终运行结果不一样。但是这种灵活的构造给了函数更多的复用机会。

this 所指向的上下文或者说是对象,是在函数调用的时候决定的。但是也无外

两个场景—— this 在函数中和 this 不在函数中。

继续阅读JavaScript 中的 This

Angular Flex Layout 进阶

Photo by Shaah Shahidh on Unsplash

大多数情况下,我们往往希望自己的页面是响应式的。除了使用 BootStrap 等

CSS 框架,我们还有没有其他选择呢?答案当然是肯定的。作为支持指令的前

端框架,Flex Layout 也提供了 Responsive API 帮助我们进行响应式布局。

在实际使用中,我们只需在 Static API 后加上断点(breakpoint )后缀就可以

轻松实现一个响应式页面。

何为断点

在 Flex Layout 中,一个断点可以理解为由一个行为+指定页面尺寸=值组成。

如 fxShow.lg = ‘true’ 就表明,当页面尺寸为 lg 时,该元素执行 fxShow 这个

动作,也就是让该元素隐藏。

下面这个例子中,当页面尺寸为大于 sm 时,这个 div 在主轴方向就会扩展到

容器的100%,否则就占50%。

继续阅读Angular Flex Layout 进阶

手动迁移 WordPress 站点

Photo by Barth Bailey on Unsplash

最近将个人站点从腾讯云迁至阿里云,动手迁移了一下整个站点。

迁移过程比较简单,但是需要提前做好一些准备。

这里我还是使用腾讯云的域名解析,免去阿里云二次备案的麻烦。

腾讯云上原来申请的 SSL 证书也可以使用。

继续阅读手动迁移 WordPress 站点

Angular 路由匹配教程

Photo by Roland Kay-Smith on Unsplash

Angular Router 是 Angular 最重要的内置模块之一。利用它可以非常快速的

生成路由规则,实现前端模块化开发。但是其中有一些细节值得关注。

在本篇中,我会重点介绍 Angular Router 中——路由匹配的概念。

继续阅读Angular 路由匹配教程

Angular forRoot 详解

Photo by Jaanus Jagomägi on Unsplash

在Angular中,常常会看到在 AppModule 中调用某个模块的 forRoot 方法。

其中最常见的应该就是 RouterModule.forRoot()。但是 forRoot 的作用是什

么?什么时候要自己编写 forRoot?读完本文,相信你会有一个答案。

继续阅读Angular forRoot 详解