从关注点分离到css-in-js

2019年12月07日
/ /
css-in-js
一直以来,前端推崇“关注点分离”的原则:即HTML、CSS、JavaScript被拆分在不同的(一个或者若干个)文件里。写页面时,需要按照需要,引入不同的css和js文件。这样做的好处显而易见:页面结构清晰,没有css样式的杂糅,方便抽取公共组件。由于大部分任务都是页面级别的,粗粒度开发,这一点是很有必要的。再加上网络带宽限制,在很长一段时间里,前端程序员以抽 ...

React-差异对比(diff)和commit的大体流程

2019年11月29日
/ /
react-hexagon
一转眼距离上篇的React-Fiber已经一个月了。这段时间依旧在继续写React-native,虽然写的东西看起来跟以前差别不大,和起初接触的新鲜感已经不同,更多的内容需要深挖代码才能懂。不过只要保持好奇心,有意思的东西就会不断出现。 就像一遍一遍地对源代码debug。当我们看的比较多的时候……就可能陷入代码细节,无法弄清楚自己到底在搞啥。就像沉迷于基建忘记主线 ...

React-Fiber介绍及组织结构

2019年10月25日
/ /
react-hexagon
最近几个项目都是React Native,所以对React的执行机制越来越好奇,比如为什么React Native也要先import React?为什么看起来声明周期没什么差别,但是渲染的结果(标签)却完全不同?怀着这些疑问,决定还是再看一下代码。之前草草撸过一遍基本操作,对结构和流程有个大概轮廓,但都只是粗浅的了解。尤其对于16.x以来的Fiber,还是一片广阔的未知,正好趁着这个 ...

React-Native两个图片展示问题

2019年09月26日
/ /
react-hexagon
项目需要客串开发react-native的应用。壳已经准备好,加js代码就行。虽然完全没有接触过APP开发的我有些手足无措,不过看到熟悉的生命周期和声明/调用方法,觉得这个活儿也能干。经过数天的“手册级”开发,最终成品看起来还不错,确实比内嵌html5页面顺畅太多了。下面撷取两个坑,证明一下,咱确实做过rn开发。 iOS图片不显示,onLoad等函数不执行 图片设置宽度占 ...

Vue-事件的注册和触发

2019年08月31日
/ /
vue-logo
写Vue最常用的就是各种交互事件,各种v-on:xxx比如DOM事件click、hover,还有自定义的那些更加乱七八糟。 不同于React,Vue里的事件是否为自定义事件,是按照是否写在组件标签上来区分的。如果是组件,除加额外的:native等属性,否则一众事件都使用$on/$emit的模式来调用,哪怕是on:click这些DOM事件。如果是普通tag,哪怕是自定义事件,也会以addEventListener ...

Vue-组件的初始化和渲染过程

2019年08月25日
/ /
vue-logo
组件(Component)是Vue一个重要的功能。一般用于包装可重用代码,或者是定义高级组件。对于小型项目,(可能)会增强代码的结构性,但是并非必须。对于稍大型的项目,它则是模块化的基础,也是代码拆分常用的形式。 组件有很多内容,比如组件消息传递、数据传递、slot、异步组件等等,作为一个有品味的博主,以上内容本篇统统不涉及。本篇只从一个注册+创建角度 ...

Vue-初始化和渲染过程

2019年08月18日
/ /
vue-logo
因为最近在用Vue,所以想把代码看一下,我觉得,越多的了解运行机制,越能更好的解决问题和……避坑。 本文必须提前要了解的两个概念是:defineProperty特性,观察者模式。 我们以一个简单的结构来开始 123456 new Vue({    el: '#app',    data: {   ...

Vue-组件的data属性为什么必须是函数?

2019年07月13日
/ /
vue-logo
一般在公司环境使用中,各种前端框架都会用一下,因为不同框架理念和使用场景有些许区别,有的重规模化,有的追求轻便易上手;有的模块化程度很高,有的通常全部写一起;有的规则安排的明明白白,有的又需要各种语法糖……虽然最近几个月工作特别忙,但是还是拿出了一点点时间来扩充一下Vue的背景知识。 为什么组件的data属性必须是函数? 在自定义模块的新手上路 ...