前言 RxJS是一个强大的Reactive编程库，提供了强大的数据流组合与控制能力，但是其学习门槛一直很高，本次分享期望从一些特别的角度解读它在业务中的使用，而不是从API角度去讲解。 RxJS简介通常，对RxJS的解释会是这么一些东西，我们来分别看看它们的含义是什么。 ReactiveLodash for eventsObservableStream-based什么是Reactive呢，一个比较直观的对比是这样的： 比如说，abc三个变量之间存在加法关系： a = b + c在传统方式下，...
详细信息查看：vue-weachat-title 解决问题： 1、Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓) 2、在vue单页面中，通过浏览器分享到QQ、微信等应用中的链接，只有一个首页标题和默认icon图片 已测试：APP 微信 QQ 支付宝 淘宝安装 npm install vue-wechat-title --save 用法 1、在main.js中引入 import VueWechatTitle from vue-wechat-title V...
本文实例为大家分享了Vue2.x通用条件搜索组件的封装及应用，供大家参考，具体内容如下 效果 组件源码 <template><div class="search"><el-select v-model="type" @change="changeType" class="select"><el-optionv-for="item in selectItems":key="item.value":lable="item.label":value="item.value"></el-option></el-select><div class=search-input><el-input :placeholder="placeholderDes" v-model="searchValue"></el-inp...
本文实例为大家分享了Vue2.x通用编辑组件的封装及应用，供大家参考，具体内容如下 效果 组件源码 <template><div class="edit-input"><div class="editBox"><div><span class="list">{{ name }}：</span><span class="listValue" v-if="!editStatus">{{value}}</span></div><span class="editLogo iconfont icon-Edit" @click="editStatus = !editStatus" v-if="!editStatus"></span><div class="edit" v-if="editStatus"><el-in...
定时刷新的不足与改进web开发中可能遇到这样的场景：网页里的某一块区域里写了一些内容，但这些内容不是固定的，即使看网页的人没有做任何操作，它们也会随时间不断变化。股票行情、活动或游戏的榜单都是比较常见的例子。 对此，一般的做法是用setTimeout()或setInverval()定时执行任务，任务内容是Ajax访问一次服务器，并在成功拿到返回数据后去更新页面。 这种定时刷新的做法会有这样一些感觉不足的地方： 频繁的定时网络请求对浏...
需求 一个平台P，包含产品a、b、c、d、e。各产品UI样式风格统一，且会用到公共配置（HOST、是否添加埋点js）、组件（头部导航、表格、搜索框）、方法（请求拦截、生成UUID）。 现状：由于历史遗留原因，各产品为独立SPA、各自维护，配置、组件也都自成一体，只是大概样式上保持了一致，但细节（比如同一面包屑样式，左边距5px、8px都有）都不一致。 这种情况下，改组件、改配置都得一改改多个地方，且有些项目是vue-cli2、有些是vu...
前言 首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个 html 文件，那么多个单页便是多个 html 文件，多页应用便是由多个 html 组成的应用，如下图所示既然多页应用拥有多个 html ，那么同样其应该拥有多个独立的入口文件、组件、路由、 vuex 等。没错，说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能，我们来看一下一个基础多页应用的目录结构...
Netlify 带有内置表单处理功能，可以用来存储表单数据，下载 csv 文件，同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求。 它是通过在部署应用时直接解析 HTML 文件，识别 html 中的 form 标签来实现的，本文记录如何在一个 Vue 应用中使用表单功能。 开发首先使用@vue/cli 新建一个 Vue 应用，完成一系列步骤后，运行应用 vue create my-awesome-app ... yarn serve创建一个 form 表单 <!--data-netlify="t...
之前开发项APP项目直接用APICloud+原生js的方式进行编写，整个项目下来发现开发慢，页面代码多且复杂，维护起来相对困难，而且文件大打包之后的APP会比较大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持写的太难受了) 采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，并且打包之后体积更小速度更快 环境依赖 vuewebpackvue-cli3nodeJS基本流程 项目开发最好准备两个项目，一个打包APP，一...
2015 是 Hybrid App 崛起之年 ，Web App 和 Native App 各有其强大之处，也有着致命的缺点，人们一边追求native流畅的用户体验，一边同时期望产品能够快速的迭代更新，Hybrid 成为必然的趋势。 鹅厂一马当先，发布了业内震惊一时的 JS-SDK ， 这对于基于微信的h5开发者来说简直是如降甘露，从此开发者们告别了用箭头来提示右上角可以分享，并且随时可以使用微信的原生能力，微信变成了一个超级浏览器。 一、准备工作 1.在微信公众平...
本文实例讲述了JQuery样式操作、click事件以及索引值-选项卡应用。分享给大家供大家参考，具体如下： JQuery的css函数既能读属性值，也能写属性值： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>样式操作</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(function () {var $div=$(#box);var sTr=$div.css(fontSize);//读alert(sTr);...
前言async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代码,从而影响执行效率。下面将简单地描述一下一些日常常用场景,加深对 async/await 认识 最普遍的异步操作就是请求,我们也可以用 setTimeOut 来简单模拟异步请求。 场景1. 一个请求接着一个请求相信这...
本文实例讲述了JQuery animate动画。分享给大家供大家参考，具体如下： 滑动选项卡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">.btns input{width: 100px;height: 40px;background-color: grey;border: 0;}.btns .current{background-color: gold;}.cons .slides div{width: 500px;height: 300px;background-color: gold;/*display: none;!*整体都不显示了*!*/tex...
本文实例讲述了JQuery获取元素尺寸、位置及页面滚动事件应用。分享给大家供大家参考，具体如下： 获取元素尺寸 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(function () {var $div=$(.box);//盒子内容的尺寸console.log($div.width());console.log($div.height());//盒子内容加...
本文实例讲述了js闭包的应用。分享给大家供大家参考，具体如下： 需求：有一个列表，当点击哪一行，则显示当前是第几行。 html代码： <p>第一行</p> <p>第二行</p> <p>第三行</p>错误js代码示范： function addHander(nodes){for ( var i=0;i<nodes.length;i++) {var node=nodes[i];node.onclick=function(){alert(当前是第+i+行);//3 3 3}} } var nodes=document.getElementsByTagName("p"); addHander( nodes);从逻辑上来看，毫无...