2014
学习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)...
1.border - border-width不支持百分比 2.单位ex（相对字体和字号的单位） 利用ex使图标居中 ```css .icon{ display: inline-block; width: 20px; height: 1ex; background: url() no-repeat center } ``` 此时调节字体大小，图标都会居中 3.line-height - line-height就是内联元素的完全高度；是替换元素前一个空白幽灵节点的高度；块级元素无影响 - line-height有数值，百分比值，长度值（em），都是相对于font-size计算得来，如果是数值，子元素继承的就是这个数值，而如果是其他，那么子元素继承的就是计算得来的值 -
我们业务在 CI 中接入了 [[statoscope](https://github.com/statoscope/statoscope)] 插件，帮助我们分析构建产物的内容，通过 statoscope 插件，发现了构建产物中引入了一些重复的npm包 我们将内容进行简化归类得到下面 3 种重复包的情况 **1. package-a 有两个不同的版本** **2. package-a 有两个相同的版本，但是链接符后面的包版本不一致** ``` node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@ten_el4uhwub3qermsb2ug24hbwt4q/node_modules/pkg-a node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@ten_l3pmpxjfhmbdedp66axwibu23u/node_modules/@pkg-a ``` **3. package-a 有两个相同的版本，连接符后面的包版本也是相同的** ``` node_modules/.pnpm/@[email protected]_@[email protected]_@tenc_wzqvgos5wvtse35fehnxnhj2da/node_modules/@pkg-a node_modules/.pnpm/@[email protected]_@[email protected]_@tenc_7zuxjpgexhn6u5ehnylczjhybe/node_modules/@pkg-a ``` ### 问题分析 **1....