- 博客(58)
- 收藏
- 关注
RSS订阅转载 Vue2技术栈归纳与精粹
https://uinika.github.io/2017/12/03/web/vue/Vue是一款高度封装的、开箱即用的、一栈式的前端框架，既可以结合webpack进行编译式前端开发，也适用基于gulp、grunt等自动化工具直接挂载至全局window使用。本文成文于Vue2.4.x版本发布之初，笔者生产环境当前使用的最新版本为2.5.2。在经历多个前端重度交互项目的开发实践之后，笔者结合官
2017-12-27 16:47:09
10118
3
转载 React中的Context
简介：在React中，数据可以以流的形式自上而下的传递，每当你使用一个组件的时候，你可以看到组件的props属性会自上而下的传递。但是，在某些情况下，我们不想通过父组件的props属性一级一级的往下传递，我们希望在某一级子组件中，直接得到上N级父组件中props中的值。1.一般情况下通过props传值的情况class Button extends React.Component {
2017-12-27 16:40:40
463
转载 React学习之进阶上下文
http://blog.csdn.net/qq_18661257/article/details/64152416在React中很容易根据组件从而跟踪数据流，当你使用一个组件时，可以通过看props来判断用了哪一些东西。有时候你想直接通过组件树来讲数据传递子元素，而不是通过props一层一层的传递下去，可以使用React提供的contextAPI来处理。1.为什么一般都不使
2017-12-26 16:05:41
410
转载 用React-Native+Mobx做一个迷你水果商城APP
前言最近一直在学习微信小程序，在学习过程中，看到了wxapp-mall这个微信小程序的项目，觉得很不错，UI挺小清新的，便clone下来研究研究，在看源码过程中，发现并不复杂，用不多的代码来实现丰富的功能确实令我十分惊喜，于是，我就想，如果用react-native来做一个类似这种小项目难不难呢，何况，写一套代码还能同时跑android和ios（小程序也是。。。），要不写一个来玩玩？有了这个想
2017-12-26 09:21:58
3924
2
转载 用React-Native+Mobx做一个迷你水果商城APP
前言最近一直在学习微信小程序，在学习过程中，看到了wxapp-mall这个微信小程序的项目，觉得很不错，UI挺小清新的，便clone下来研究研究，在看源码过程中，发现并不复杂，用不多的代码来实现丰富的功能确实令我十分惊喜，于是，我就想，如果用react-native来做一个类似这种小项目难不难呢，何况，写一套代码还能同时跑android和ios（小程序也是。。。），要不写一个来玩玩？有了这个想
2017-12-26 09:05:15
698
2
转载 webpack从零开始第6课:在Vue开发中使用webpack
webpack目录第1课: 安装webpack和webpack-dev-server第2课: 配置文件第3课: 做为node的一个模块来使用第4课: 插件篇第5课: 模块篇第6课: 在Vue开发中使用webpack本文参考文档vue vuex vue-router vue-loader awesome-vue精彩的vue vue-cli写
2017-12-24 22:31:25
3496
1
转载 前端开发规范之React应用使用ESLint
现代前端技术飞速发展，最终形成了以效率和质量为核心的两大趋势。就效率而言，在大型前端项目的开发中，规范的制定、框架的出现与升级、构建的使用更新、组件化的设计实现等都在于前端能更快、更高效地完成更多的事情。质量方面，前端优的提出、前端用户数据的收集、错误日志的收集上报等，都是为了帮助开发者来提高前端性能，提升用户体验。目前，前端已进入了以效率和质量为核心的工业化时代，各类辅助工具的使用和技术的使
2017-12-23 09:34:55
3645
转载 react navigation返回到任意页面(不集成redux)
react navigation默认是使用key作为goback的参数进行返回的，这个key是一个动态生成的，而不是我们定义的routeName。 网上也有很多方法有的说更改源码，有的说是集成redux。更改源码的方式我也尝试过但是如果开启滑动返回属性，很容易就卡死。集成redux是一个不错的方式，但对于新手来说redux的模式还是太过于复杂，况且redux的强大在于数据流的控制，仅仅一个因为
2017-12-22 11:20:27
589
转载 React全家桶构建一款Web音乐App实战3
接着上一节内容，这一节抓取QQ音乐移动Web端推荐页面接口和PC端最新专辑接口数据。通过这些接口数据开发推荐页面。首先看一下效果图页面结构推荐页面主要分轮播和最新专辑两块，其中轮播图片来自QQ音乐移动Web端推荐页面的接口，最新专辑则从PC端抓取的，整个推荐页面超出屏幕是可以滚动的轮播图和最新专辑数据抓取用chrome浏览器打开手机调试模式，输入QQ音乐移动端地址：m.
2017-12-22 09:49:09
1831
原创 React Native防止快速重复点击
建立CallOnceInInterval.jslet isCalled = false, timer;/** * @param functionTobeCalled 被包装的方法 * @param interval 时间间隔，可省略，默认600毫秒 */export default callOnceInInterval = (functionTobeCalled, interval
2017-12-20 15:37:46
6402
转载 React全家桶构建一款Web音乐App实战
上一节使用create-react-app脚手架搭建了基本项目骨架，这一节继续制作项目需要的字体图标和页面主路由的搭建字体图标制作为什么要使用字体图标？图标放大或缩小不会被拉伸，会保持足够的清晰度颜色可以随意设置。如果使用普通图片，图片颜色已经是设计好的，如果要换颜色需要借助工具来对图片进行修改制作字体图片首先我们需要svg图片。svg图片可以从iconfont阿里矢量图标库自
2017-12-20 15:16:56
851
转载 基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式
这两天看了下react的文档，准备搭建一套适用的基本react开发架子。由于我一直使用的是vue，很少使用过react进行项目的开发，因此此构建主要参考的是vue的项目经验。项目主要会涉及到的知识点 webpack 配置及其优化react-router 升级为4.0之后的使用 react-router-dom react-router-configrea
2017-12-20 15:05:55
731
转载 canvas入门实战--邀请卡生成与下载
1.前言写了很多的javascript和css3的文章，是时候写一篇canvas的了。canvas是html5提供的一个新的功能！至于作用，就是一个画布。然后画笔就是javascript。canvas的用途非常的广，特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感觉就和css3一样，可以不用太厉害，但是必须要会基础的用法。但是以后对canvas的需求，肯定会越来越大。所以
2017-12-20 14:42:48
564
转载 Node.js 核心模块 Timers 详解
Timers 模块应该是 Node.js 最重要的模块之一了。为什么这么说呢？在 Node.js 基础库中，任何一个 TCP I/O 都会产生一个 timer（计时器）对象，以便记录请求/响应是否超时。例如，HTTP请求经常会附带 Connection:keep-alive 这个请求头，以让服务器维持 TCP 连接，但这个连接显然不可能一直保持着，所以会为它设置一个超时时间，这在内部库里正
2017-12-20 13:36:49
1577
转载 vue mixins和extends的妙用
写在前面vue提供了mixins、extends配置项，最近使用中发现很好用。如有不对请指正，感谢尤大提供搞笑生产工具。混合mixins和继承extends看看官方文档怎么写的，其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。继承钩子函数const extend = { c
2017-12-20 10:07:43
12455
转载 48 个 JavaScript 代码片段
该项目来自于 Github 用户 Chalarangelo，目前已在 Github 上获得了 5000 多Star，精心收集了多达 48 个有用的 JavaScript 代码片段，该用户的代码可以让程序员在 30 秒甚至更少的时间内理解这些经常用到的基础算法，来看看这些 JavaScript 代码都传达出了什么吧！http://mp.weixin.qq.com/s/42pKdpd2VO
2017-12-20 08:22:16
514
转载 Vue 组件间的样式污染
一、污染是如何产生的？得益于 Vue-loader，在 Vue 中可以使用类似于 Web Component 的组件化写法,，在大多数情况下，我们希望组件间定义的样式是相互隔离的，在 Weex 当中的确如此，组件天生隔离，可是在 Vue 当中，运行的载体还是浏览器，所有的样式类还是会通过 style 标签插入头部，影响全局，交叉污染二、增加 Scoped 标识依然是 Vue-loade
2017-12-18 09:02:30
1915
2
转载 前端开发面试题总结
前端开发面试题总结之——HTML前端开发面试题总结之——JAVASCRIPT（一）前端开发面试题总结之——JAVASCRIPT（二）前端开发面试题总结之——JAVASCRIPT（三）
2017-12-17 10:04:41
1155
转载 25 个最基本的 JavaScript 面试问题及答案
1.使用 typeof bar === "object" 来确定 bar 是否是对象的潜在陷阱是什么？如何避免这个陷阱？尽管 typeof bar === "object" 是检查 bar 是否对象的可靠方法，令人惊讶的是在JavaScript中 null 也被认为是对象！因此，令大多数开发人员惊讶的是，下面的代码将输出 true (而不是false) 到控制台：var b
2017-12-17 09:58:54
12929
转载 es6 新特性整理
本文没有详细描述这些新特性，因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码，他可以让你快速了解这个新的javascript规范。箭头函数function() 函数的简写表示法，但它不绑定 this。ES6 代码:var odds = evens.map(v => v + 1); // no parentes and no bracketsva
2017-12-17 09:55:49
623
转载 ES7与ES8特性
我曾写过一篇关于ES6博客《10个最佳ES6特性》，这次我打算聊聊ES7和ES8特性。ES7只有2个特性:includes()指数操作符ES8尚未发布(2017年1月)，下面是它已经完成起草的一些特性：Object.values()Object.entries()padStart()padEnd()Object.getOwnPropertyDescriptors()函数参数
2017-12-17 09:49:06
17545
1
转载 react-native 集成微信支付
上篇文章已经介绍过 react-native 集成支付宝，本篇文章将基于微信支付官方提供的集成文档，介绍如何将微信支付集成到 react-native 应用中。场景介绍适用于商户在移动端APP中集成微信支付功能。商户APP调用微信提供的SDK调用微信支付模块，商户APP会跳转到微信中完成支付。支付完后跳回到商户APP内，最后展示支付结果。目前微信支付支持手机系统
2017-12-17 01:50:42
5375
转载 react-native 集成支付宝
现在很多 APP 都有集成第三方支付平台的需求，用来支付自己的产品，但是官方一般都没有介绍如何集成到 react-native 的应用中，本篇文章将基于官方提供的集成文档，介绍如何将支付宝集成到 react-native 应用中。场景介绍适用于商家在App应用中集成支付宝支付功能。商家APP调用支付宝提供的SDK，SDK再调用支付宝APP内的支付模块。如果用户已安装支付宝A
2017-12-17 01:49:38
5294
转载 js数组操作--使用迭代方法替代for循环
前言数组的迭代方法，这个想必大家都不陌生了，可能刚入门的人暂时还没接触到这个。但是以后的开发中，肯定会用得上的。我自身的一个使用经历就是，如果迭代方法用的适当，不但可以减少代码量，也能使代码可读性更强，性能上的优化也是肯定的了。还有一个就是，我本身在数组的遍历上，基本都是用for循环进行操作，在开始使用了迭代方法之后，我for循环用的很少。如果以后我更加熟练迭代方法的话，for使用会更少，也希
2017-12-15 17:35:19
803
转载 vue快速入门的三个小实例
1.前言用vue做项目也有一段时间了。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！1.本篇文章使用的vue版本是2.4.2，可能会和新
2017-12-15 17:31:36
3868
1
转载 vue组件开发练习--焦点图切换
1.前言vue用了有一段时间了，开发的后台管理系统也趋于完善，现在时间比较算是有点空闲吧！这个空闲时间我在研究vue的另外的一些玩法，比如组件，插件等。今天，我就分享一个组件的练手项目--焦点图切换组件。这个项目是我用于vue组件练习的一个项目，当然了，代码也会提交到github（ec-slider），也会维护。我也想我开发的东西好用一点！现在，就是建议有需要的伙伴，可以来玩下这个项目，当练习
2017-12-15 17:25:40
1175
1
转载 vue插件开发
1.前言上回说了组件（vue组件开发练习--焦点图切换）的一个练习项目，这次换下口味，说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件，这个可能就更简单了，基本就是熟悉下插件开发的步骤就可以了！这个项目，我更建议大家动手练习了，这个弹窗比之前的焦点图更加的实用性，也更常用。同时也能让大家熟悉下vue的插件开发的流程。代码同样，我会上传到github（ec-dialog），需要的可以
2017-12-15 17:24:48
543
转载 (css3常用动画的实现
1.前言在月初的时候，发了CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）。js的代码库也发过两次，两篇文章。之前也写了css3的热身实战，既然热身完了，是时候开始封装css3的代码库了，相比起js的代码库，css3的代码库的逻辑性就更加简单了！可以说只要打上注释和一张效果图就可以让大家明白了其中的原理了！我写代码库的时候，动画效果主要是参考了三个开源项目，nec，hove
2017-12-15 17:22:53
393
转载 javascript常用实例的实现与封装
1.前言大家在开发的时候应该知道，有很多常见的实例操作。比如数组去重，关键词高亮，打乱数组等。这些操作，代码一般不会很多，实现的逻辑也不会很难，下面的代码，我解释就不解释太多了，打上注释，相信大家就会懂了。但是，用的地方会比较，如果项目有哪个地方需要用，如果重复写的话，就是代码沉余，开发效率也不用，复用基本就是复制粘贴！这样是一个很不好的习惯，大家可以考虑一下把一些常见的操作封装成函数，调用的
2017-12-15 17:21:33
496
转载 Vue写一个验证码输入组件
效果先来看波完成效果图需求输入4位或6位短信验证码，输入完成后收起键盘实现步骤第一步布局排版"security-code-wrap"> for="code"> "security-code-container"> "field-wrap" v-for="(item, index) in number" :key="index"
2017-12-14 16:48:46
4636
4
转载 Vue 子组件的异步加载及其生命周期控制
前端开发社区的繁荣，造就了很多优秀的基于 MVVM 设计模式的框架，而组件化开发思想也越来越深入人心。这其中不得不提到 Vue.js 这个专注于 VM 层的框架。本文主要对 Vue 组件化开发中子组件的异步加载和其生命周期进行一些探讨。阅读本文需要对 Vue 有一定的了解。注意：本文中的例子代码，都是以 vue-cli 采用 webpack 模板初始化的项目为基础。
2017-12-14 16:46:22
3338
1
转载 在 vue-cli 里基于 axios 封装复用请求
写在前面：自从Vue2.0推荐大家使用 axios 开始，axios 被越来越多的人所了解。使用axios发起一个请求对大家来说是比较简单的事情，但是axios没有进行封装复用，项目越来越大，引起的代码冗余。就会非常麻烦的一件事。所以本文会详细的跟大家介绍，如何封装请求，并且在项目组件中复用请求。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。本文首发于我
2017-12-14 13:50:57
1015
转载 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
写在前面：本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细一点。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。引入bootstrap1. 下载所需要的bootstrap文件
2017-12-14 10:03:26
816
转载 在vue项目中 如何定义全局变量 全局函数
写在前面：如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数，这两个设置不太难，而且有一些共通之处，可能有一些朋友对此不太了解，所以随便写出来分享一波。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。本文首发于我的个人blog：obkoro1.co
2017-12-14 09:34:32
2025
1
转载 vue router 如何使用params query传参，以及有什么区别
写在前面：传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。本文首发于我的个人blog：obkoro1.comVue router如何传参params、query是什么？params：/router1
2017-12-14 09:17:50
3170
转载 如何高效管理 React Native 项目中的图片资源
前言刚开始写 React Native 项目的时候，并没有刻意的去管理图片资源，用到了哪张图就直接写一个相对引用地址。但是当项目中的图片资源逐渐多起来以后，我发现麻烦来了。无论是修改图片名称，还是替换图片都比较麻烦。那么在 React Native 项目中如何管理图片才显得比较有效率呢？结合网上一些博主们写的文章，以及自己开发项目的经验，大概总结成了一下几点。工具首先是开发工具
2017-12-14 09:12:10
1405
原创 react-native base64的解析（crypto-js）
在做react-native的时候，做了一个前端加密的功能，使用了crypto-js插件1.安装插件，然后调用（import C from 'crypto-js'）2.使用：var base64 = C.enc.Base64.stringify(words);3.添加汉语加密：var words = C.enc.Utf8.parse(su);4.解密：var base64 = C.enc.Base
2017-12-14 09:05:04
6811
1
转载 javascript中基础但是很容易忽略的点
引言: 本篇文章主要总结了一些javascript中特别基础的内容,主要涉及到DOM0级和DOM2级事件,事件流, 事件委托, 判断变量的类型每次被问到,总是能想起一点,但是也总记不全,所以遇到这种情况的时候,就简单的记录一下.DOM0级事件和DOM2级事件的区别DOM0事件在标签内写onclick事件在js中写onclick=function(){}函数
2017-12-13 10:48:45
308
转载 vue,keep-alive的作用
项目中写vue也没注意到这个组件,最近在深入的研究vue组件的生命周期函数,每一个函数都是干嘛的,然后其中有activated和deactivated这两个函数与这个组件有关activated: keep-alive组件激活时调用deactivated: keep-alive组件停用时调用keep-alive用法包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们是一个抽象组
2017-12-13 10:43:36
8716
转载 Vue需要注意的地方
使用vue过程中,遇到了一些问题,这里先总结以下两个:问题一:vue组件之间传递数据,在子组件中我想改变一个从父组件中传过来的值这是父组件1234567891011121314151617181920 "message">Child> /div>template>import Child from './child.v
2017-12-13 10:32:32
412
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人