JavaScript
crli
crlin.com
展开
-
uniapp webview与uniapp相互传参
<web-view :src="webviewurl" class="webview" @message="getclose"></web-view>onLoad() { // #ifdef APP-PLUS let obj = xxxx() this.webviewurl = `/hybrid/html/${domain.baseUrl.indexOf('10.') === -1 ? 'shenyang': 'shenzhen'}/flightExecutionRateS原创 2021-06-18 10:45:00 · 1624 阅读 · 0 评论 -
uniapp开发app,A款app调起B款app并传递参数
uniapp开发app,A款app调起B款app并传递参数if (plus.os.name == "Android") { //安卓 if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app pname: 'xxxxxxx, //B款app云打包的包名 })) { //安装了app plus.runtime.launchApplication({ //打开app pname: "xxxxx", //B款app云原创 2021-06-18 10:17:30 · 580 阅读 · 0 评论 -
从url中获取参数名为name的参数值
下面代码时从url中获取参数名为name的参数值地址是https://editor.csdn.net/md?not_checkout=1&articleId=117411209var getQuery = function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg);原创 2021-06-18 10:00:30 · 713 阅读 · 0 评论 -
图片的懒加载的实现
第一种方法使用 getBoundingClientRect与视口关系,需要监听浏览器,使用防抖优化第二种方法使用 IntersectionObserver函数<!doctype html><html><head> <title>图片懒加载</title> <meta charset="utf-8" /></head><body> <div > <img dat原创 2020-08-25 16:20:38 · 250 阅读 · 0 评论 -
react-redux应用
reducers const reducer1 = (state = {"test":"nihao"}, action= {}) => { switch (action.type) { case 'xxx': default: return state; } }原创 2016-12-08 17:23:14 · 555 阅读 · 0 评论 -
ES6总结--数据类型的扩展
1原创 2017-05-23 15:05:01 · 639 阅读 · 0 评论 -
ES6总结--Symbol、Set 和 Map 、Iterator、Class
12原创 2017-05-23 21:29:50 · 650 阅读 · 0 评论 -
ES6总结--Proxy、Reflect
3原创 2017-05-24 15:20:48 · 831 阅读 · 0 评论 -
ES6总结--严格模式、let/const 、解构赋值
1、严格模式与 ECMAScript 6ECMAScript 5 引入严格模式来清理语言,在文件或者函数的第一行放入下面的内容就可以开启严格模式:'use strict';严格模式引入了三种破坏性的改变:语法改变:一些之前合法的语法在严格模式下面是不允许的。例如:禁止 with 语句。它允许使用者添加任何对象到变量作用域链,这会减缓程序的执行速度,并且很难指出某个变量指向哪里。 删除一个独立的标识原创 2017-05-22 14:18:43 · 1165 阅读 · 0 评论 -
js百度地图marker与swiper轮播图联动
项目需求,安卓、ios引入webview地图内容与轮播联动,效果与百度题图wabapp效果相同,调用自己数据,地图里面放坐标,地图下部放轮播,并且单击maker坐标时候轮播图滑到相应位置,滑动轮播图,相应坐标弹出信息 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewpor原创 2017-06-14 17:31:27 · 2321 阅读 · 3 评论 -
vue2.0 页面在华为自带浏览器里无法打开。
因为华为手机内置的浏览器内核版本太低!解决方案1:npm install --save -dev babel-polyfill在你的主入口文件app.js中import 'babel-polyfill'即可解决方案2: 也就是使用cdn的资源,以js的文件加入到html页面:加一个https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min原创 2017-06-19 11:22:01 · 2465 阅读 · 0 评论 -
ES6总结--Promise 、Generator 、Async/Await
1、Promise开篇首先设想一个日常开发常常会遇到的需求:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作。一般会这样去写:$.ajax({ url: '......', success: function (data) { $.ajax({ // 要在第一个请求成功后才可以执行下一步 url: '.....原创 2017-05-25 22:54:02 · 1173 阅读 · 0 评论 -
axios发送post请求,提交图片类型表单数据
DOME<input type="file" @change="upload" ref="upload">接口const userUploadAtt = (File,config) => axios.post("接口",File,config)处理数据let input = this.$refs.upload 创建一个空的FormData对象 let data = new FormData原创 2017-04-24 10:52:35 · 15817 阅读 · 1 评论 -
JS事件中防抖debounce和节流throttle以及requestAnimationFrame
浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。这样浏览器的目的是为了保证信息的一致性,而对于我们来说就是一种资源的浪费了。 debounce的作用是在让在用户动作停止后延迟x ms再执行回调。 throttle的作用是在用户动作时没隔一定时间(如200ms...原创 2018-04-01 10:21:12 · 1335 阅读 · 0 评论 -
react-redux的connect()方法
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])连接 React 组件与 Redux store。连接操作不会改变原来的组件类,反而返回一个新的已与 Redux store 连接的组件类。参数[mapStateToProps(state, [ownProps]): stateProps] (Funct原创 2016-11-25 20:42:12 · 1260 阅读 · 0 评论 -
react-router应用
react-routerimport {Link,Route , Router , IndexRoute , hashHistory, Redirect} from 'react-router';//Link可以理解为a标签//暂时未用到Redirect,onEnter 钩子 。Redirect 是一个重定向组件,有 from 和 to 两个属性;onEnter 钩子中用于判断某种情况是否成立,原创 2016-12-07 20:34:32 · 564 阅读 · 0 评论 -
闭包的理解(精简)
一:闭包的含义: 1)在一个对象(函数)中的函数,引用了这个对象中的变量,这就叫闭包; 2)在一个对象(函数)中的函数的子函数,引用了这个对象中的变量,这也叫闭包; 3)在一个对象(函数)外的函数,引用了这个对象(函数)内的变量,着还叫闭包二:闭包的好处 1:减少全局变量function add() { var a = 0; return function (){原创 2016-08-06 10:50:47 · 743 阅读 · 0 评论 -
jquery animate step 实现 transform css3方法
利用jquery animation step 实现 translate(), rotate(), scale(), skew(),等开发方法 jquery animation step 实现 transform css3方法 animate()方法有个step参数规定动画执行的每一步都要执行step这个回调函数。我们可以用使用一个不影响元素效果显著的css值来触发animate()开发方法原创 2016-08-07 11:03:39 · 11587 阅读 · 1 评论 -
原型链
思维导图原型链中最终的构造器函数是function Function(),原型链中最终的原型是Object prototypenew Foo()function Foo() {};var foo = new Foo();Foo.prototype.constructor === Foo//output:truefoo.constructor === Foo //output:truefo原创 2016-09-13 13:14:03 · 559 阅读 · 0 评论 -
js的解析与执行过程
1:预处理阶段当输入如下代码时候var a = 1;function crli(){ alert(a);}crli()//1结果为 1当改变下面代码时候var a = 1;function crli(){ alert(a); var a = 5;}crli()//undefined结果为 undefinde这是为什么呢?js解析与执行过程一共有2个阶段,一个预处理原创 2016-09-10 16:09:50 · 2494 阅读 · 0 评论 -
h5 history api实现无刷新前进后退
操纵浏览器的历史记录history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址。history.replaceState(data, title [, url]) :更改当前的历史记录,参数同原创 2016-09-18 18:09:56 · 6093 阅读 · 0 评论 -
react-router学习笔记
参考: React Router 中文文档 阮一峰 React Router 使用教程1.Router,hashHistory,Route首先下载react-router$ npm install react-router --save需要注意的是,react-router更新很快,API也在持续升级,也许你看到市面很多教程,但可能那还是1.x甚至是0.x版本的。我们首先在App.jsx写一个简原创 2016-10-11 19:22:35 · 3088 阅读 · 0 评论 -
Date(日期)对象(复习)
JavaScript Date(日期)对象 日期格式化,简单倒计时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><body><script type="text/javascript">const byTime = [12*30*2原创 2016-10-14 15:06:45 · 512 阅读 · 0 评论 -
js cookie 编码解码登录成功返回原页面
1.htmlhtml lang="en">head> meta charset="UTF-8" /> title>Documenttitle>head>body>form action="s.html"> input type="password" name="password" id="" /> input type="text" name="nam原创 2016-10-14 23:57:34 · 1508 阅读 · 0 评论 -
reactjs性能优化之shouldComponentUpdate
性能优化每当开发者选择将react用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的。避免直接作用于DOMreact实现了一层虚拟dom,它用来映射浏览器的原生dom树。通过这一层虚拟的转载 2016-10-17 10:58:32 · 1204 阅读 · 0 评论 -
ReactJS入门ES6写法
参考: React 官方网站 ECMAScript 6 入门 React 入门实例教程HTML 模板 使用 React 的网页源码,结构大致如下。<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></scr原创 2016-10-06 18:15:09 · 8643 阅读 · 0 评论 -
React Component Lifecycle(生命周期)
生命周期所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;第三阶段:是组件卸载消亡的阶段,如图转载 2016-10-26 16:36:59 · 793 阅读 · 0 评论 -
ajax 、jsonp 、Promise 封装
一、JS原生Ajaxajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址原创 2016-10-15 11:20:10 · 6298 阅读 · 0 评论 -
js数组应用
1.找出元素 item 在给定数组 arr 中的位置 解:function indexOf(arr, item) { if(Array.prototype.indexOf){ return arr.indexOf(item) }else{ for(var i = 0;i < arr.length;i++){ if(arr[i]原创 2016-12-11 11:33:31 · 1060 阅读 · 0 评论 -
IE9及以下 span元素无法触发鼠标事件解决办法
IE9及以下 span元素无法触发事件解决办法今天向往常一样练习原生JS,做了个放大镜效果的小Demo,但是发现如下bug,测试了半天终于解决了!部分代码如下:html lang="en">head> meta charset="UTF-8" /> title>Documenttitle>head>style type="text/css"> *{mar原创 2016-06-28 22:44:37 · 2670 阅读 · 0 评论