Angular2 动态的创建组件并插入到Shadow Dom中

作者随时修改，为方便读者追本朔源，转载请保留地址。

前言：

  • 为什么会有这个需求？

    因为在开发组件中，难免会有一些组件是需要动态生成的，以减少Document中Dom 数量，节省内存开支。
    例如全局的 message 组件、Alert 组件、Notice 组件等。

  • angular2 中如何动态的编译Template？

    在 Ng2 中， 废除了 $compiled 这个方法，用户将不能直接编译模板，如果想动态的创建组件，必须借助 组件工厂 (componentFactoryResolver)

如何动态创建一个组件：

JavaScript 评论

webpack&React 性能优化

关于 Webpack + React 的性能优化

这篇文章很早就想写了，但是由于工作太忙，一直挤不出时间。正好趁月底挤干货的时间弄出来一篇。
由于本文内容是作者自互联网收集 + 实践与发散思维得出，故可能随时会更新修改，为了方便读者追本索源，转载请保留头部，谢谢
本文链接

另： 本文不是新手教程，关于 WebPack 如何入门配置、React Jsx 的Loader 等，请移步这里： 使用Jsx 或者 优化开发-Webpack & Jsx

JavaScript , 评论

如何快速的创建一个包含100个元素的数组

可能随时修改，若需转载请保留此头部，以便读者追本朔源。

本文地址 ： https://zhukejin.com/2016/creat-100-array/

如题， 最初见到的问题是如何创建100个为元素为0 的数组
研究了一系列的方法，包含Es6 新的API ，不得不说， ES6 好强大！
如果问一个新手，那么得到的回答极有可能就是 循环，当然循环也无可厚非，毕竟能实现就行，但是我们如果闲的话，还是可以探讨一下到底有多少中方式可以解决这个问题

JavaScript 评论

滚动条跳动问题

通过js 控制页面的 overflow: hidden 与 overflow: auto 切换的时候，由于页面总宽度变化导致文档跳动。

解决方案一： （纯CSS）

在页面主体元素上加上

1
margin-left: calc(100vw - 100%) !important;

这个方法需要一个定宽的主体元素，例如总的 wrap。
如果不是定宽而是自适应的，就会在左边出现与滚动条同宽的空白列。

其次： calc是CSS3中的计算，IE10+浏览器支持

CSS 评论

CSS3 rgba() 兼容IE

本文系作者整合互联网资料加个人理解所写，或随时更改， 若需转载请保留此行，以便后来者追本朔源
本文地址：http://zhukejin.com/2017/12/01/creat-100-array/

不登高山， 不知山之高也。之前无过多接触CSS， 固步自封之下也不觉得CSS多么强大， 后来逐渐了解了点CSS3，觉得CSS已有发展为一门独立语言的潜力。

临渊羡鱼，不如退而结网， 总是羡慕别人的网站特效多好， 还是自己来研究CSS3吧。

CSS3效果好归好， 但是总是能碰到一些恶心的兼容问题，比如当下的 rgba …

1
2
3
4
5
.wrap {
    background: rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
}

CSS 评论

七种情况下 This 的指向问题

为方便读者追本朔源，转载请注明本文地址来源，谢谢。

本文地址： http://zhukejin.com/2014/09/24/JavaScript-this/

this 是一个动态指针，它指向当前作用域对象，如果当前定义对象的作用域没有发生变化，那么this就会指向当前对象。
This可以存在于任何位置，并不局限与对象、方法内，也可以是其他特殊的上下文环境。

本文实验了下述七种情况：

  1. 在函数中的 This
  2. 在构造器中的This
  3. 函数的引用和调用中this的变数
  4. call 和 apply 对 this的影响
  5. 原型继承中的 This
  6. 异步调用的 This
  7. 定时器中的 This
  8. 被Evel() 方法解析的 This

JavaScript 评论