Blog
Blog copied to clipboard
z2014
Star 就是最大的鼓励👏👏👏
这里是原文链接[Tree-shaking versus dead code elimination](https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80) 我一直致力于一个叫rollup的工具，它可以将js各个模块打包在一起。其中他有一个特性叫tree-shaking，他会只将你程序需要的js代码打包进去。 有人问我这个概念从哪里得来的？ 然后另一个人就说他只是“消除死代码”换了一个名字 又有一个人说这个tree shaking很愚蠢 但是实际上他们是不同的东西，即使他们在做一件相同的事--减少代码 **## Dead code elimination is silly** 我们来做一个不是很恰当的类比：想象一下你在制作蛋糕的过程中将一整个鸡蛋放进碗里，并且正在捣碎它，而不是我们正常的那种将鸡蛋打开，然后将鸡蛋清之类的倒进去搅拌（类似于鸡蛋汤的操作）。当我们把蛋糕拿出锅的时候，再清理一下鸡蛋壳，这个工作除了十分复杂以外，大部分鸡蛋壳还会遗留在那。 这样，你可能只能吃很少的蛋糕了。 先完成整个项目，然后剔除掉你不要的代码，这就是Dead code elimination。tree-shaking,则是完全相反的一方面，告诉我我要做什么蛋糕，混合的时候需要什么原料。 相比较dead code， 我们推荐live code。从结果来说可能是相同的，但是因为在js中静态分析的限制，就不一样了。live code能获取到更好的结果，而且从表面上看，live code用来解决清楚无用代码的方式更符合逻辑。 一旦发生，rollup并不是最好的。更多的介绍在下面。所以最好的方式是两个都用，rollup打包之后用UglifyJS or...
[**这里是原文链接**](https://reactjs.org/blog/2018/03/29/react-v-16-3.html) 一段时间以前，我们写了一篇文章有关我们即将升级我们遗留的生命周期方法，包含着我们慢慢的迁移的策略。在React 16.3.0这个版本中，为了慢慢迁移，我们增加了一些新的生命周期。我们也推荐了一些被长期期待的一些特性：一个官方的context api，一个 forwarding ref，一个ergonomic ref。 ## Official Context API 这么长时间以来，React一直提供了一个实验性的api context.尽管它是一个很有用的工具，我们还是不推荐使用它因为一些隐藏的问题。而且我们一直计划去用一个更好的api去替代它。 16.3这个版本引入了一个新的context api，它更加的高效，而且他支持各种静态类型检查和很深层次的更新。 这有一个例子来说明，你可以想象你注入了了一个“theme”变量去使用新的api ```javascript const ThemeContext = React.createContext("light") class ThemeProvider extends React.Component{ state = {theme: 'light'} render(){...
学习vuex源码
昨天听完同学来我们团队做的分享之后，自己又去看了一遍源码，结合自己之前项目的一些理解，写一篇博客，[这里是原文链接](https://mp.weixin.qq.com/s/8Q_r3cyx1ly28GnkY_DHpQ). 在看源码前，结合之前的自己的项目实践，有以下几个问题: - 1.在mutation以外比如vue组件中修改数据，会报错，是怎么做到的 - 2.我们在一个组件中拿数据的时候要从mapGetters里面映射过来，为什么要存在这个getter呢？ 接下来针对上面的问题，结合源码做一下解答： 我们在一个项目中引入vuex是下面的这样一个注入： ``` Vue.use(Vuex) export default new Vuex.Store({ modules: { artical, editNews, login, label, user } }) ``` 其实从上面的这段代码就不难看出，store应该是一个构造函数，对应着vuex源码中store.js 在store.js中有这样的一段代码，简化如下: ``` class store {...
在你实现一个组件过程中，一定要注意一下几点 - 将代码模块化并且分离。如果你将大量的逻辑或者是代码都放在钩子函数中（比如mounted），那么写出来的组件代码将非常丑陋，这样子写出的代码也往往难以维护。 - 第二就是要注意可扩展性。因为定制一个基础组件，也许当你日后还想对它的功能进行扩展的话，那么一定要注意自己代码的编写结构。 接下来来看一下element ui是如何编写一个table组件的，在看源码之前，首先还是要对他的table组件的大致功能有一个了解，这样我们在看源码的时候才会知道这一段大概实现了什么功能。 点开table的src目录下，有这么几个文件 - dropdown.js - filter-panel.vue（实现表格勾选的组件） - table-body.js （实现表格body的组件） - table-column.js （实现表中中每一列的组件） - table-footer.js （定义表格尾部的组件，会有一些合计的功能） - table-header.js（定义表格thead的文件） - table-layout.js （定义表格布局的文件） - table-store.js（定义事件的方法集中在这里） - table.vue（最终将上述组件整合后的一个最终table组件）...
刚开始学习vue的时候，之前总是听别人说vue实现了双向绑定，主要凸显就是表单那里，后来在学习完vue了以后，我发现vue实现的双向绑定的效果react也能实现实时更新视图的效果，也就一直陷入了react也是双向绑定的怪圈。后来看了和两篇博客之后也对双向绑定有了进一步的理解 - [博客一](http://hcysun.me/2016/04/28/JavaScript实现MVVM之我就是想监测一个普通对象的变化) - [博客二](https://github.com/youngwind/blog/issues/85) 对于如何实现vue的双向绑定，网上已经有很多的博客去介绍了，大致思路就是依靠Object.defineProperty来在set和get里面去执行回调函数，虽然网上已经有了很多的博客，但还是要自己去实现一遍才能深入理解这其中的问题。 - 首先是如果变量是一个基本数据类型，那么它是基于值进行传递的，我们可以直接进行Object.defineProperty - 如果变量是一个对象类型的话，那么我们需要做一次递归 基于此，我们就可以检测一个普通对象的变化，但是做到这里，我们却没有办法对数组进行监测，在vue中，如果你是将一个值push进入数组中，vue是可以在页面上实时更新的，但你用arr[3] = 4这种方式去更新数组时，数组确实得到了改变，但是却不能更新视图。也就是说当我们调用Array.prototype里面的方法时，他才会进行数据的双向绑定。当然我们可以重新写Array.prototype.push = funvction(){},但是这对于用这个框架的人而言就是一件很恶心的事情了,而且速度也没法和原生的进行比较。一个数组对象的__proto__本身是应该指向Array.prototype,但是在这中间，我们可以再加一层，也就是fakePrototype,我们在这个里面去调用原生的Array.prototype. **_具体代码实现如下_** ```javascript const OP = Object.prototype const oam = ['push', 'pop'] class observer { constructor(obj,...
### 对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在文末留言 最近在重构react组件时，学习了一些高阶组件的编写思路，其实是由高阶函数沿伸而来。 一般情况我们编写一个react组件大致样子如下： ``` class App extends Component { constructor(props){} life cycle(){} method(){} render(){} } ``` 在编写一个基础组件我们会更多的将需要配置的东西通过props传递进来，那么高阶组件是什么样子的呢？ 个人理解高阶组件就是react中复用组件逻辑的一种技巧，先来个高阶函数压压惊： ``` function add(a,b){ return a+b } ``` 如果我希望在函数处理的过程中能够实时追踪这个值并且打印出来呢，我们会这样处理： ``` function add(a,b){...
再介绍如何用Decorator做数据处理前，让我们先来看一下Decorator是什么? > 从名字上看，它是用来起装饰作用的，实际上，它是一个wrapper，作用于一个函数或者是一个对象，然后经过一系列处理后，返回一个新的函数或对象。 让我们先来看看decorator如何使用 ``` function decoratorInit(target, key, descriptor) { const method = descriptor.value; descriptor.value = (arg) => { arg = arg.replace('¥', '$') method.call(target, arg) } return descriptor } class...
如今前端工程化，自动化已经成为了新趋势，如果我们要重新开始做一个项目，你会花费多久的时间在前期环境的搭建上呢？在我们前端的的积累中，我们需要将这些技术沉淀下来，便于我们开始一个新的项目，而不必花费过多的经历在环境搭建中。 这次我做的是一个集成了 eslint、stylelint、git hook 的前端代码检查工具。项目已经开源在github上，名字叫做[oishi](https://github.com/z2014/Oishi),一开始想起名叫husky(哈士奇),后来这个名字被占了(无奈脸)。 先来理一下我们这个工具需要做什么事情 1. 需要让他初始化eslint,stylelint的配置文件 2. 安装好我们需要的依赖 3. 挂载git钩子，在代码提交时进行进行eslint检查 有了目标我们开始实现我们这样的一个工具： 1.准备工作 - [ ] 这次我们采用commander来开发我们的命令行， - [ ] 利用chalk来美化我们控制台的输出， - [ ] 利用shelljs来执行我们文件中的一些脚本 在本地调试时需要在package.json中配置bin选项，然后开发好后npm link 发布到本地的全局，就可以开始使用自己的命令行了 2.进入正题...
最近在看张鑫旭老师的《css世界》，记录第二章有关宽高很有意思的东西: 1.如何用html片段实现一个凹和凸字呢？ ```css .ao{ width: 0; display: inline-block; } .ao:before { content: 'love 你 love'; outline: 2px solid black; color: white; } ``` 这个主要是利用英文单词连续不换行的特性,如果想让英文单词以每个字符为最小宽度，那就设置 `word-break:break-all` 2.实现一个宽度为100px，padding为20px，border为1px的的div 我第一时间想到的是用box-sizing属性,但是书中提到了另一种解决思路: **宽度分离** ```css .father{...
1.替换元素 - 替换元素的尺寸计算规则：**css尺寸 > html尺寸 > 故有尺寸** - 当做懒加载时,直接抛弃掉src属性``效率最高 - 替换元素没有::after 和 ::before 2.如何将一个替换元素变成一个非替换 - [去掉src属性](http://demo.cssworld.cn/4/1-2.php) - [替换元素和非替换间隔了一个css的content属性](http://demo.cssworld.cn/4/1-4.php) chrome浏览器所有元素都支持content属性，而在其他浏览器仅在::before或::after中支持 3.content的特性 - content生成的文本是无法复制选中的 - content动态生成的值无法获取 4.content内容生成技术 - 清楚浮动 - content字符内容生成 [正在加载...](http://demo.cssworld.cn/4/1-9.php)...