blog
blog copied to clipboard
FatDong1
📝 一些生活随笔和技术文章
## 问题描述 select组件在ios无法居中 ## 解决过程 ### 去StackOverflow找找 在StackOverflow上搜索解决的方法，通过搜索`select center`，可以找到对应问题的[链接](https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box)。 解决方案： ``` select { width: 400px; text-align-last:center; } ``` 使用[`text-align-last`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last)属性，意思为最后一行居中。 但是，在ios的safari没有作用，安卓可以居中。 ### 去google全局找一下 终于，在一个github里面找到了解决的方法。[代码链接](https://gist.github.com/nathansmith/c861fbc7b7f39a1a5f516e5305e19890) 解决方案：使用js，用span代替option居中 ```html Option 1 Option 2 Option...
## 问题描述 由于jsEncrypt.js代码里面含有window、document、navigator对象，这些对象可以在pc端的浏览器使用，但是小程序没有这些对象，所以直接在小程序引入jsEncrypt.js会直接报错，下面主要介绍如何在jsEncrypt.js里面对这些对象进行兼容。 ## jsEncrypt.js介绍 ### 功能 一种RSA加密的解决方案。 这种加密模式被称为"非对称加密算法"。 （1）乙方生成两把密钥（公钥和私钥）。公钥是公开的，任何人都可以获得，私钥则是保密的。 （2）甲方获取乙方的公钥，然后用它对信息加密。 （3）乙方得到加密后的信息，用私钥解密。 如果公钥加密的信息只有私钥解得开，那么只要私钥不泄漏，通信就是安全的。 ### 使用场景 加密验证码。 ```js // 实例化JSEncrypt对象。并设置公钥 var cryptFirst = new JSEncrypt(); cryptFirst.setPublicKey('-----BEGIN PUBLIC KEY----- MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBALQCZoxawKSTyMTLEU5QlYNVIOBMafGq vVGp6bFv2gQ8Px5ZJVzIG1TjIUQo1IpGQBgC+JSJFaGLsv196dlcloUCAwEAAQ== -----END...
### Vue代码地址 [https://github.com/FatDong1/todo-list](https://github.com/FatDong1/todo-list) ### 学习vue的双向绑定 自己动手实现一个简单的todo-list > 预览地址： https://fatdong1.github.io/todo-list/index.html ### 参考链接 - https://github.com/DMQ/mvvm - https://github.com/youngwind/blog ### 数据代理 #### 1.简单介绍数据代理 正常情况下，我们都会把数据写在data里面，如下面所示 ```js var vm = new Vue({ el: '#app', data: {...
### Vue.nextTick的作用 在下次DOM更新结束之后执行延迟回调。通常在修改数据之后调用这个方法，便于获取更新之后的DOM。 ### 下面题目的输出是什么 最近在看nextTick相关的文章的时候，看到一些很有意思的题目，可以结合下面的题目了解nextTick源码和watcher源码。 #### 题目一 ```html {{test}} click me ``` ```js export default { data () { return { test: 'begin' }; }, methods () { handleClick...
## Vuex [Vuex源码](https://github.com/vuejs/vuex)代码量不多，并且结构清晰，非常适合新手阅读，可以用来满足自己的好奇心。 花了一下午看了Vuex的源码，以及一些关于Vuex的技术文章，让我对Vuex有了一个更全面的了解。 通过对Vuex源码的研究，解决了我以前对Vuex一些比较疑惑的地方，下面列几个印象比较深的问题： - 为什么每个组件都可以使用`this.$store` - Vuex是如何做到只能通过触发mutation来改变state？ - namespaced的作用是什么？ - Vuex类似一个全局单例对象，但是如何做到数据响应？state改变之后，对应的视图发送变化。 ## Vuex流程图  ### Vuex如何注入$store? 通过`Vue.use(Vuex)`引入Vuex，而`Vue.use`会调用`Vuex.install`方法, 将$store注入到每一个组件 ```js // 目录：src/store.js export function install (_Vue) { // 防止多次引入Vuex...
## 介绍 computed，即计算属性。当其依赖的属性的值发生变化的时，计算属性会重新计算，否则使用缓存中的属性值。 ## 基础例子 ```html My Name is: "{{ fullName }}" ``` ```js var vm = new Vue({ el: '#example', data: { firstName: 'rudy', lastName: 'dong' }, computed: {...
## 前言 本次阅读的React源码是v17.0.1，研究一下React的事件机制 ## 疑问 下面是笔者对合成事件比较好奇的地方。 - React在哪个阶段将事件委托根节点？ - React的冒泡和捕获机制是如何模拟的？ - React事件对象是怎么复用的？ ## 示例demo ```js class About extends Component { constructor () { super() } handleChildClick (e) { console.log('child click',...
## 流（Stream） 流的作用是可以处理大容量的数据，减少内存消耗。 在处理大容量文件的时候，可以用流进行处理，每次处理一部分数据块，而不是一次性在内存中缓冲整个文件。就好比一根水管，慢慢从水池中取水。水管的体积取决于传入流构造函数的`highWaterMark`选项。 流都是`EventEmitter`的实例，类型有四种： - 可读流（Readable）。 - 可写流（Writable）。 - 双工流，可读又可写流（Duplex）。 - 转换流，在读写过程中修改数据的流（Transform）。 ## 可读流 可读流的例子：客户端的http响应、服务端的http请求、fs的读取流等。 主要事件有data事件和end事件。 - data事件。当流将数据块传递给消费者的时候触发。 - end事件。当流没有数据提供消费的时候触发 ### fs的读取流 ```js // node-demo/stream/demo1.1.js const fs = require('fs')...
## 前言 本次阅读的React源码版本是17.0.1，了解一下JSX的相关知识 ## 比较好奇的地方 - JSX被编译后生成了什么？ - JSX生成的对象有哪些属性？ - JSX编译生成的ReactElement对象的作用是什么？ ## JSX被编译后生成了什么？ 使用`plugin-transform-react-JSX`的babel插件，可以将JSX语法转换成js语法，转换成`React.createElement`函数去执行。 例如，假设JSX代码如下 ```JSX hello world ``` 经过babel编译后，会转换成js代码。可以去[babel官网](https://babeljs.io/)直接进行转换。 ```js React.createElement("div", null, "hello world"); ``` ## JSX生成的对象有哪些属性？ React17对JSX进行优化，不再需要React环境，经过babel编译后会自动引入JSX运行时，即`React.createElement`方法。 React17将`React.createElement`单独抽离成一个文件，放在React目录下的`JSX-runtime.js`文件。...
## 前言 本次阅读的React源码版本是17.0.1，分别从Legacy模式和Concurrent模式分析setState。 ## Legacy模式 ### 示例demo ```js class About extends Component { constructor () { super() this.state = { count: 1, } } componentDidMount () { // 异步执行setState，只执行一次setState this.setState({count:...