水平居中垂直居中line-height法绝对居中法负外边距法负位移法（推荐）表格法行内块法flex参考水平居中水平居中比较简单，这里只简单概述一下： 对于行内元素来说（span、img、input等），直接text-align:center;即可搞定；对于块级元素，使用margin: 0 auto;也可以搞定； 还有其它一些方法，比如借助绝对定位等，不过更麻烦也不太推荐，所以不讲。 垂直... 阅读全文

前言我喜欢把复杂问题简单化，把简单问题更简单化，看到网上介绍CSS盒模型的文章写那么多，觉得还是有必要自己再总结一下。 CSS3出现以前首先，CSS3之前，关于盒模型有这两种，一种是W3C标准盒模型，一种是IE盒模型（低版本IE或者缺少!DOCTYPE会触发此模式）。 所谓W3C标准盒模型，就是实际内容宽度等于设置的宽高度（不包括padding和border）；所谓IE盒模型，就是实际内容... 阅读全文

概述视频播放可以自己写原生代码实现，然后注入JS。如果对视频播放没有特殊要求的话，可以直接使用现成插件。 到官方推荐的插件网站搜索找到下载量第一的插件：react-native-video。 安装安装很简单： npm install -g react-native-video配置配置过程官网已经介绍的很详细了，这里再复述一遍。 首先运行react-native link来链接react-n... 阅读全文

什么是BFCBFC全称Block Formatting Context，意思是块级格式上下文，它是一个独立的布局环境，一个BFC中的元素布局不受外界的影响。 W3C中关于BFC的定义： 浮动元素、绝对定位元素、非块级元素的块级容器（如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为visiable的元素，都会为他们的内... 阅读全文

概述一个网页可以通过适当增加子域名个数来突破浏览器单个域名下资源下载的并发连接限制，但是子域名用的太多也不好，因为DNS解析会消耗一定时间，可以通过DNS预解析来让浏览器提前解析DNS以达到加快资源加载速度，从而加快页面显示。 正文通过在meta中增加相关标签来实现这个功能： <meta http-equiv="x-dns-prefetch-control" content="on" /... 阅读全文

几种对象NodeNodeListHTMLCollection节点查找API节点创建APIcreateElementcreateTextNodecloneNodecreateDocumentFragment节点修改APIappendChildinsertBeforeremoveChildreplaceChild节点关系API父关系API子关系API兄弟关系型API元素属性型APIsetAttribu... 阅读全文

CSS选择器种类CSS有很多选择器，按照类型我们简单分为以下几种： ID #id类 .class标签 如p通用 *属性 [type="text"]伪类　：hover伪元素　如::after子选择器、相邻选择器、索引选择器等 补充：伪元素只有如下几种：::after、::before、::first-letter、::first-line、::selecton。 CSS权重CSS有... 阅读全文

newJavascript中的new运算符是用来实例化一个类，从而在内存中分配一个实例对象。 在javascript中, 通过new可以产生原对象的一个实例对象，而这个实例对象继承了原对象的属性和方法。因此，new存在的意义在于它实现了javascript中的继承，而不仅仅是实例化了一个对象！ 一个模拟new实现过程的代码如下（注意仅仅是模拟其实现过程，并不能替代new！）： fun... 阅读全文

事件的三个阶段捕获阶段 -> 目标阶段 -> 冒泡阶段，IE低版本不支持捕获阶段。addEventListener的第三个参数useCapture就是表示是否在捕获阶段触发，默认false。 事件的绑定和解绑一般有3种写法。 属性方式此方式不推荐。如，直接在div上面写onclick： <input type="button" value="测试" onclick="t... 阅读全文

加法原理很简单，就是从右往左遍历相加，有进位的就把左边的数加1： /** * 大整数加法，不考虑小数和负数 */function add(a, b){ a = a.split(''); b = b.split(''); let carry = 0, result = ''; // 这里一定不要忘了加上“ || carry”，否则最后面一个进位会被漏掉 while... 阅读全文

已经发现的bug或者问题 Android不支持shadow属性；Animated.Image的borderRadius不生效；setNativeProps无法修改图片的source；没有直接设置组件显示与隐藏的属性，只能变相实现；require加载图片不能是变量或者拼接的字符串；require加载json也是一样，也不支持动态加载；图片拉伸时默认效果是cover，而不像html中的stretch... 阅读全文

关于跨域前言做前端的经常会接触一个名词：跨域，那何为跨域？为什么要跨域？ 同源策略出于安全考虑，浏览器会限制脚本中发起的跨域请求，比如，使用 XMLHttpRequest 对象发起 HTTP 请求就必须遵守同源策略。 具体而言，默认情况下Web 应用程序能且只能使用 XMLHttpRequest 对象向其加载的源域名发起 HTTP 请求，而不能向任何其它域名发起请求。 跨域只要protocol... 阅读全文

概括关于RN的热更新，网上有很多现成方案，但是一般都依赖第三方服务，我所希望的是能够自己管控所有一切，所以只能自己折腾。 热更新的思路热更新一般都是更新JS和图片，也就是在不重新安装apk的情况下更新JS和图片，这个需求是很普遍的。通过前面的了解我们知道RN的JS都被打包成了一个bundle文件，默认是在assets文件夹下面，但是这个文件夹是只读不可写的，那怎么办呢？好在RN有一个getJSB... 阅读全文

各种命令个人习惯在项目根目录下把一些常见命令写成bat文件，以后每次要执行什么只需要双击即可： 编译、生成、运行并启动packager（debug模式）： react-native run-android 所谓packager其实就是一个文件同步服务，默认监听8081端口，启动它之后，运行debug模式的ReactNative应用可以随时reload我们的JS。有时候使用上面的命令之后p... 阅读全文

综合这段时间对ReactNative（下称RN）和NativeScript（下称NS）的简单学习了解，分别从不同方面分析对比二者的优缺点。 页面结构NS一个页面的目录结构： RN的一个页面一般就是一个JS文件，样式、XML、JS全部写在一个文件里： 对比报告 ReactNative NativeScript 对比结果 与传统web开发的差异性（学习... 阅读全文

没有成功，但是暂时把经过记下来。 方法首先在node_modules\react-native\Libraries\Image\Image.android.js文件找到fadeDuration属性： fadeDuration: PropTypes.number然后在如下文件找到如下参数，说明默认这个效果是300毫秒： node_modules\react-native\ReactAndroi... 阅读全文

区别关于二者的关系，你只需要这4点： exports 只是 module.exports 的引用，也就是后者的偷懒写法而已，所以，绝大部分情况下，二者没有区别！require() 返回的是 module.exports 而不是 exports一旦你给exports重新赋值，它将不再是module.exports的引用，所以无法正常导出；虽然module.exports默认值为一个空对象{}（... 阅读全文

前言文件系统对于写一些小脚本、小工具而言非常重要，所以最先介绍文件系统相关方法的使用。 常见APIconst fs = require('fs');const path = 'test.txt';const content = '这是新写入的文件内容';// 写入文件，编码默认就是utf8fs.writeFileSync(path, content, 'utf-8');// 读取文件，如果指... 阅读全文

前言阮一峰的《ECMAScript 6入门》太过详细了，全部看完需要花很长时间，所以，本文只是前者的一个超级精简版。 ES6简介ECMAScript6.0，简称ES6，又叫ES2015，是JavaScript语言的下一代标准，对JavaScript语法进行了比较大的修改。 对于不支持ES6的浏览器可以将ES6代码用转换工具转换成ES5语法。 ECMAScript是JavaScript的标准，... 阅读全文

一个最简单的HelloWorld页面先不多解释，直接上代码： import React, { Component } from 'react';import {AppRegistry, StyleSheet, Text, View} from 'react-native';export default class helloworldComponent extends Component{ ... 阅读全文