前端
Colin_Mindset
你关注到了我,是个概率极低的事件......
展开
-
【React Native入门系列文章 八】Android打包发布
本节介绍如何把React Native代码打包成Android apk。一、生成签名密钥1、生成签名密钥: keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 100002、把密钥复制到app目录下 ...原创 2017-09-14 11:27:06 · 539 阅读 · 0 评论 -
【css布局】display、position、float、overflow
css布局主要有两种方式:传统的布局方式是基于盒状模型,目前广泛使用的是基于flex布局。本文主要介绍盒状模型的三个最基本的概念display、position、float,这算是盒状模型的基础中的基础了。 一、块级元素与行内元素:1、块级元素:p、ul、form、div2、内联元素(行内元素):span、input3、两者区别:块级元素会从上到下垂直排列,内联元素在一行中...原创 2017-09-06 10:26:59 · 599 阅读 · 0 评论 -
JavaScript的事件循环与宏微任务
本文记录了作者在研究JS的宏任务和微任务的过程中如何抽丝剥茧,理清原理的。阅读本文大概需要二十分钟一. 理论基础1. 引擎和runtime引擎:解释并编译代码,把它变成能在机器上运行的代码。我们都知道JS是解释型语言,因为JS是没有办法直接运行在机器上的,需要一个引擎把它变成能在机器上运行的代码。JavaScript引擎的基本工作就是把开发人员编写的代码转换成高效、优化的代码,很多人把...原创 2019-02-28 21:04:12 · 423 阅读 · 0 评论 -
聊一聊如何使用context,这是学习redux源码的基础哦
在学习redux源码一段时间之后,我发现不懂得context如何使用已经阻碍到我理解redux的设计思想了。。所以,这里介绍一下react的context如何使用,不过这个api可能你在业务开发时永远不会用到。。好了,废话不多说,我们来讲解下context如何使用。一. 如何使用context?想象一下,我们有现在这样一个页面(Index),其组件树长成如下这个样子:假设这个组件树里的...原创 2019-03-05 13:45:20 · 652 阅读 · 0 评论 -
颤抖吧!一起手写一个redux框架!
redux是一个前端架构,经常和react一起使用。你要用react.js基本上都要用到redux和react-redux,但这两者并不是一个东西!redux是一个前端框架,你可以把它用到react、vue,设置jquery。react-redux是把redux这个前端架构结合到react形成的库,就是redux架构在react中的体现。话不多说,我们来从头手写一个redux框架。用c...原创 2019-03-06 20:51:48 · 623 阅读 · 0 评论 -
JS数组的几个有逼格操作
1. 去重Array.from(new Set([1,2,3,3,4,4]) //[1,2,3,4][...new Set([1,2,3,3,4,4])] //[1,2,3,4]2. 排序[1,2,3,4 ].sort (); // [1, 2,3,4],默认是升序[1,2,3,4].sort((a,b) => b - a); // [4,3,2,1] 降序3. 求和[1,...原创 2019-03-19 23:39:21 · 372 阅读 · 0 评论 -
封装一个在react上更易用的redux框架
redux框架相信大家都已经用的很多了,不知道你们用的还习惯吗?我们在项目里反正用的都是原创 2019-03-24 22:40:34 · 526 阅读 · 2 评论 -
require和import有啥区别?
今天在研究react的lazyRequire时突然想到了这个问题,于是展开了一些列研究。。要回答这个问题,必须从模块化说起。所谓模块化主要就是解决代码分割、作用域隔离、模块之间的依赖管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。流行的模块化规范有:CommonJS、AMD、CMD、ES6的模块系统。这里简单介绍下CommonJS规范和ES6 Module...原创 2019-04-10 21:26:42 · 1451 阅读 · 0 评论 -
不妨这样去理解JavaScript中的dom和bom
JavaScript是由三大部分组成:核心ECMAScript、文档对象模型-DOM、浏览器对象模型-BOM。这里我们主要来讲解下BOM和DOM。一. DOMJavaScript可以通过DOM来获取文档里的标签、属性等内容,也可以用来操控文档内容Document文档,这里的文档指的是XML和HTML的页面。当你创建一个页面并且加载到浏览器中,DOM就悄然而生。Object在学习Jav...原创 2019-04-09 00:10:34 · 300 阅读 · 0 评论 -
摆脱create-react-app,来让我们自己搭建一个react脚手架
创建一个文件夹REACT-CNODE-TEACHmkdir REACT-CNODE-TEACH在文件夹中npm init(我们使用npm来管理依赖包)一路点回车就行,当然你也可以去详细配置下工程信息。装一个webpack一个react工程,怎么能不安装react?这个时候我们要配置一下webpack,我们先在工程根目录创建一个文件夹build,然后创建一个webpack配置文件...原创 2019-04-09 00:03:33 · 709 阅读 · 0 评论 -
【跨域】jsonp看完这篇文章就够了
jsonp是一种jQuery提供的跨域解决方案,我们今天来好好讲讲jsonp。同源策略所有浏览器都会使用同源策略这个安全策略。所谓同源,是指协议、域名、端口号都相同。没有同源的两个危险场景设想在用户访问淘宝时,进行了登录操作,并且登录信息写进了cookie。这时,你突然看到了一个广告,点击跳转进了一个广告链接。如果没有同源策略,这个广告页可以向淘宝发起请求,而由于登录信息已经写进了co...原创 2019-04-21 16:36:06 · 332 阅读 · 0 评论 -
箭头函数this指向的陷阱
箭头函数没有this!箭头函数没有this!!箭头函数没有this!!!重要的事情说三遍!那你可能要问我在箭头函数中明明可以取到this啊!function foo() { this.a = 1 let b = () => console.log(this.a) b()}foo() // 1以上箭头函数中的this其实是父级作用域中的this,箭头函数...原创 2019-04-27 17:33:15 · 1057 阅读 · 1 评论 -
【web安全】深入浅出XSS攻击
在学习JS的过程中,你一定听说过CSRF攻击和XSS攻击。关于CSRF攻击,我已经在之前的文章中介绍过了,本文就来介绍一下XSS攻击。XSS定义和原理发出请求时,XSS代码出现在url中,作为输入提交到服务端,服务端解析后响应,XSS代码随响应内容一起回传给浏览器,最后浏览器解析并执行XSS代码。XSS防御措施一般xss防御措施有三种:编码过滤:原样显示用户输入内容时,要把不合法的内...原创 2019-05-02 14:56:35 · 5287 阅读 · 6 评论 -
【如何学习一门新语言】HTML5基础培训总结
1、修改html标签属性(1)修改html:innerHTML(2)修改图片:src(3)修改css属性:style.color、style.background 2、数据类型:整形、字符串、数组、对象(1)isNaN判断是否是数字(2)var a = “3”, b=""a; var c = a + b;(3)数组(定义、初始化) var cars = ...原创 2017-09-10 11:06:34 · 470 阅读 · 0 评论 -
【如何学习一门新语言】JQuery培训总结
一、JQuery选择器1、JQuery元素选择器$("p")选取<p>元素$("p.intro")选取所有class=“intro”的<p>元素$("p#demo")选取所有id="demo"的<p>元素2、JQuery属性选择器$("[href]")选取所有带有href属性的元素$("原创 2017-09-20 16:52:36 · 269 阅读 · 0 评论 -
【React Native入门系列文章 六】实战写一个电影列表页
React Native入门系列文章第一篇:《小白扫盲篇》第二篇:《如何编写样式》第三篇:《如何手动开始写一个组件》第四篇:《组件间通信》第五篇:《踩过的坑》第六篇:《实战写一个电影列表页》第七篇:《网络通信和缓存处理》第八篇:《Android打包发布》第九篇:《如何从零开始学redux》这一节介绍,如何用React Native实现一个电影列表页。...原创 2017-09-12 17:14:22 · 2079 阅读 · 0 评论 -
【React Native入门系列文章 四】组件间通信【重要】
可以说,组件间通信是react native开发的基础中的基础,但凡具有一定规模的项目,都一定会涉及组件间通信。组件间通信大体有下面几种情况:父组件向子组件通信 子组件向父组件通信下面依次说下这几种通信方式。一、父组件向子组件通信父组件通过向子组件传递props,子组件得到props后进行相应的处理。下面是演示代码:父组件ParentComponent.js:...原创 2017-09-12 11:20:09 · 500 阅读 · 0 评论 -
【React Native入门系列文章 五】踩过的坑
开发React Native的过程中,简直处处遇到坑啊!!!!!遇到一个问题,常常要花几个小时才能解决。这里开一个blog,记录一下在使用React Native过程中遇到的坑。一、报错一:Application untitled3 has not been registered这个问题是因为xxx和yyy必须保持一致。在js里修改了项目名称,在Android代码的MainActi...原创 2017-09-08 18:07:23 · 432 阅读 · 0 评论 -
【React Native入门系列文章 三】如何动手开始写一个组件?
学习React Native必须要经历的一步就是去写一个组件,因为React Native设计思想的精髓就是组件化思想。那么如何去开始写一个基本的组件呢?我们从组件的两大组成部分Props(属性)和State(状态)来讲起。一、Props(属性)和State(状态)1、Props(属性)大多数组件在创建时都可以使用各种参数来定制,用于定制的这些参数就被称为props(属性)。其实p...原创 2017-09-08 09:49:47 · 433 阅读 · 0 评论 -
【React Native入门系列文章 二】如何编写样式?
在React Native中,你并不需要学习什么特殊的语法来定义样式,还是使用类似CSS的语法来写样式。所有的组件都接受名为style的属性。 style属性的值基本都遵循了CSS的命名,只是按照JavaScript的语法要求使用了驼峰命名法,例如将background-color改为backgroundColor。 在React Native中,我们使用flex布局来指定某个...原创 2017-09-06 12:30:57 · 476 阅读 · 0 评论 -
【React Native】环境搭建的error calling AppRegistery.runApplication解决办法
折腾了几天,终于把开发环境搭建成功了。这中间遇到了太多坑:(1)公司台式机没有无线网卡,而手机和packager必须要连接同一网段。只能去淘宝买一个无线网卡装上。(2)init出工程后,一直报错error calling AppRegistery.runApplication。 这个bug网上的答案非常少,以至于我在想这肯定是携程的windows台式机做了什么配置,然后尝试去修改host文...原创 2017-05-10 15:48:48 · 6623 阅读 · 1 评论 -
【React Native入门系列文章 七】基础组件&网络通信&缓存处理
一、react native提供的组件:react native的基础通用组件包括:Text、Image、TextInput、ListView、View、WebView、Switch、Slider、ScrollView、MapView等。只适用于Android平台的组件包括:DrawerLayoutAndroid、ProgressBarAndroid、ToolBarAnd...原创 2018-04-23 13:49:52 · 600 阅读 · 0 评论 -
【React Native入门系列文章 一】小白扫盲篇
0、学完本篇blog,你将收获什么?作者写本篇blog的目的是让读者看完这篇blog就可以知道完全了解react native的由来、设计思想,并可以顺利过渡到学习react native语法的阶段。因为,作者在学习完react native的语法之后还是有以下几个疑问:1、ES6是什么?我之前学过JavaScript,它和JavaScript有什么关系?是不是学了JavaScript...原创 2017-09-11 14:26:47 · 441 阅读 · 0 评论 -
【React Native入门系列文章 九】如何从零开始学redux?(附demo)
一开始接触redux时对于它和react的关系理解很混乱:一会儿是state,一会儿又是store,这两者到底有什么关系?看代码时,dispatch、reducer、action这三者之间需要跳来跳去,它们到底是什么关系?为什么要这样设计结构?connect、mapStateToProps、mapDispatchToProps这三者有什么关系?或者说这三个是干什么的?跟redux有什么关...原创 2018-07-16 11:34:58 · 954 阅读 · 2 评论 -
三分钟带你理解JS原型
一. 理论基础1. 普通对象和函数对象JavaScript中,万物皆对象!但是对象也是有区别的,分为普通对象和函数对象。function F(){}; //F:函数对象var f = new F(); //f: 普通对象2. 构造函数与大部分面向对象的语言不同,JavaScript中并没有引入类(class)的概念,但JavaScript仍然大量使用了对象,为了保证对象之间的联系,J...原创 2019-02-21 14:16:22 · 262 阅读 · 0 评论 -
【JS基础】从零开始带你理解JavaScript闭包--我是如何彻底搞明白闭包的
一直有一些刚入门js的朋友问我“什么是闭包?”,这里我就专门总结一下,下次再有人问起来,就直接把这篇文章给他看好了。什么是闭包?其实很简单啊。闭包就是一个函数(外部函数)内部又定义了一个函数(内部函数),内部函数可以访问外部函数中声明的所有变量。其实就是这样简单,可是官方解释就比较晦涩了:闭包是一个拥有许多变量和绑定了这些变量环境的表达式。接下来,理解闭包还需要知道闭包的几种写法和用法。...原创 2018-10-09 19:35:14 · 464 阅读 · 0 评论 -
React Native展示富文本(HTML标签)最佳解决方案
需求背景我们最近要做一个React Native的产品详情页,里面有一部分内容展示的是服务端下发的html标签(运营人员编写的,内容不固定,且很随意)。需求点是:1、展示富文本,包括img、span、div等基本html标签;2、控制富文本的整体样式,比如业务配置的图片大小不一,我们要统一已屏幕宽度为基准,高度自适应。第三方组件react-native-htmlview要实现这个需求,我第一...原创 2019-06-06 18:34:38 · 20582 阅读 · 10 评论