随笔分类 - JavaScript
设计js的基本原理以及原生方法的解析运用等
摘要：1. 键盘弹出触发window.resize，对页面产生挤压，造成定位紊乱 在页面初始化完成的时候，固定外部容器的宽高，resize的时候也不影响内部dom的相对位置。例如，以body为容器： <style type="text/css"> html,body{ width: 100%; heigh
阅读全文
摘要：1. 在cordova项目的config.xml中指定StatusBarOverlaysWebView（需要cordova-plugin-statusbar插件支持），表示应用界面是否覆盖状态栏（系统最上方显示时间、信号、电量的地方）。Android设为false，iOS设为true。设为true可
阅读全文
摘要：日期格式化： Date.prototype.format = function(fmt) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes
阅读全文
摘要：按照大小压缩图片，或者按照特定分辨率裁切图片，转为blob数据。自动处理ios中可能存在的照片偏差90°问题。 例如，获取300*300大小的头像，实现以下效果： 使用方式： <!-- 引入js文件 --> <script type="text/javascript" src="./compress
阅读全文
摘要：/** * 表单校验规则 * 不符合规则时，返回错误文案 * 符合规则时，返回false */ var rules = {} // 是否必填 rules.required = function (value) { return (!!value || value 0) ? false : "请输入内
阅读全文
摘要：结论：需要根据state进行渲染时，使用React.Component；用不到state时，可以直接写函数组件。 Function 函数组件：可以接收入参（props），通过return返回dom结构。 function Hello(props) { return <h1>Hello, {props
阅读全文
摘要：在移动端页面上，一次点击行为，会触发touch、mouse、click事件，规则如下： Stage 1: 手指按在屏幕上，立即触发touchstart。 Stage 2: 手指离开屏幕，这里分2种情况： 如果手指在屏幕上的停留时间少于500ms，会依次触发 touchend->mousemove->
阅读全文
摘要：Android 端： 前端：
阅读全文
摘要：html DOM元素有很多on开头的监听事件，如onload、onclick等，见DOM事件列表。但是同一种事件，后面注册的会覆盖前面的： addEventListener监听 利用addEventListener添加监听事件，可以重复添加，并不会互相覆盖： 注意这里面的事件是不带"on"前缀的。
阅读全文
摘要：javascript是面向对象的语言，Function也是一种对象，有自己的属性和方法。call和apply就是js函数自带方法，挂在Fucntion.prototype上。 一般调用某函数时，直接“函数名（参数）”的写法即可，函数内部的this指向函数的调用者。 call和apply的作用是给函数
阅读全文
摘要：gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。 webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件： npm i -D
阅读全文
摘要：在前后端分离的项目中，通常需要启动一个后台服务器来配合前端项目的接口需求。Mockjs的作用是拦截ajax请求并模拟各种数据返回，让前端开发可以更加自由独立。 安装 使用 Mock.mock()第一个参数是需要拦截的接口，第二个参数表明ajax请求类型（get/post/put/delete等），第
阅读全文
摘要：在javscript中，this 是在函数运行时自动生成的一个内部指针，它指向函数的调用者。 箭头函数有些不同，它的this是继承而来， 默认指向在定义它时所处的对象(宿主对象)，而不是执行时的对象。 如上getName3()，将箭头函数作为直接执行的方法来写时要特别小心，它的this会直接指向wi
阅读全文
摘要：本地存储是HTML5中提出来的概念，分localStorage和sessionStorage。通过本地存储，web应用程序能够在用户浏览器中对数据进行本地的存储。与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。 什么时候用本地存储？ 跨期：不同时间打开页面，比如这
阅读全文
摘要：我们需要在特定的时候判断页面的显示状态，例如：当视频加载到可播放状态时，根据用户是否停留在当前页面来决定是否开始自动播放。页面的展示的状态的判断就需要用到html5新增的一个api：document.hidden。 document.hidden属性：bool型，表示页面是否处于隐藏状态。页面隐藏包
阅读全文
摘要：滑块拼图型的验证方式已经流行起来，多数的实现方式是直接加载两张分割好的图片。现在用canvas去自动修剪图片，节省修图工作量和http请求： 加载一张整图，用canvas切割缺口，缺口位置在固定范围内随机 点击刷新按钮重新加载和切割 滑块响应拖动，实时更新缺口位置 拖动结束时计算位置是否匹配，允许一
阅读全文
摘要：对象是一个属性集合，对象的基本特征是属性名（name）和属性值（value）。ES5 增加了属性描述符，包括数据属性描述符（configurable enumerable writable value）和存取描述符（configurable enumerable get set）。两类描述符中的co
阅读全文
摘要：基于canvas制作随机生成数字英文组合验证码效果，点击或刷新会自动重组。输入验证码提交验证效果代码。
阅读全文
摘要：模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。前端模块化的演进过程可以看看阮一峰老师的文章。本文主要介绍各规范下的模块化实现方式。 一、Co
阅读全文
摘要：JS在复制对象的时候，复制的是指针。有复制关系的两个对象，一个改变时另一个的值也跟着变了。数组也是对象，也存在这种现象。实现非指针复制，可以用JSON方法进行双重转换，也可以便利属性递归赋值。
阅读全文
浙公网安备 33010602011771号