js
文章平均质量分 76
良_123
这个作者很懒,什么都没留下…
展开
-
js 树结构数据的递归操作
一般用于因后端给的数据字段不够完善,类型不正确,需要前端进行处理树数据。一般用于手动设置vue/react的UI库中的树的展开节点。一般用于前端做树的查询功能。原创 2023-01-11 16:12:26 · 2076 阅读 · 0 评论 -
javascript对指定元素添加父元素
在处理自己的文章博客时,有一个需求:当富文本编辑器中插入的表格过长的话,就给它设置一个横向滚动条。本来是一个很简单的需求,也就是给指定的元素添加一个父div,让div拥有overflow: auto;属性就解决了。我当时的实现代码是这样的:addDiv () {// 获取所有的table表格 let tables = document.querySelectorAll('table'); // 如果table存在于当前界面就执行接下的操作 if (tables) {原创 2022-09-04 13:41:28 · 851 阅读 · 0 评论 -
强缓存与协商缓存
在工作中,前端代码打包之后的生成的静态资源就要发布到静态服务器上,这时候就要做对这些静态资源做一些运维配置,其中,gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。缓存的优点:减少了不必要的数据传输,节省带宽 减少服务器的负担,提升网站性能 加快了客户端加载网页的速度 用户体验友好缺点:资源如果有更改但是客户端不及时更新会造成用户获取信息滞后,如果老版本有bug的话,情况会更加糟糕。所以,为了避免设置缓存错误,掌握缓存的原理对于我们工作中去更加合理的配置缓存是非转载 2021-09-17 17:35:06 · 184 阅读 · 0 评论 -
Webpack优化篇
带你深度解锁Webpack系列(基础篇) 和 带你深度解锁Webpack系列(进阶篇),主要是讲解了 Webpack 的配置,但是随着项目越来越大,构建速度可能会越来越慢,构建出来的js的体积也越来越大,此时就需要对 Webpack 的配置进行优化。本文罗列出了十多种优化方式,大家可以结合自己的项目,选择适当的方式进行优化。这些 Webpack 插件的源码我大多也没有看过,主要是结合 Webpack 官方文档以及项目实践,并且花了大量的时间验证后输出了本文,如果文中有错误的地方,欢迎在评论区指正。鉴转载 2021-07-26 16:13:42 · 4345 阅读 · 0 评论 -
视频标签 video的一些特殊属性
HTML5标签video在PC上显示很简单,就一个标签加资源,很少需要关心其它属性。但放到移动设备上,video的标准,Android和iOS有很多区别,另外还有很多各家浏览器特定的属性,本文详细讲了video在移动端的实践。 原文:视频H5 video标签最佳实践随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。video的属性<video id="video".转载 2020-12-15 18:33:51 · 809 阅读 · 0 评论 -
如何唤醒APP?
移动互联网时代,“用户增长”成为每个公司关注的重点话题。为了将更多用户引导到客户端内,产品经理会习惯性地在网页的各个地方巧妙隐藏唤醒App的“机关”。常见的出现场景浏览器 —唤醒—> App 用户在浏览器中浏览网页时,当检测到该网页来自于某个App时,此时可以引导用户呼起或者下载App微信、QQ —唤醒—> App 用户将App中自己喜欢的内容分享到微信、QQ,在站外打开网页时,可以正常浏览,也可以引导用户呼起或者下载App接下来,让我们深入研究下唤醒App的几种解决方案.转载 2020-11-13 15:44:57 · 1759 阅读 · 2 评论 -
前端codeLint
导读Code Lint是前端工程化中的一个重要环节(what is code lint?),它可以帮助我们在部署代码到生产环境之前及时发现错误并纠正它们,也可以规范我们的编码习惯,让团队的代码风格保持统一。Code Lint的工作原理是借助一些lint工具对代码进行静态分析,并在合适的时机触发校验,提示错误。Note:本文可能无法覆盖所有知识点,若有知识盲区请主动查阅补齐,也可以在文章...转载 2020-04-09 10:57:18 · 1000 阅读 · 1 评论 -
前端代码异常日志收集与监控
在复杂的网络环境和浏览器环境下,自测、QA测试以及 Code Review 都是不够的,如果对页面稳定性和准确性要求较高,就必须有一套完善的代码异常监控体系,本文从前端代码异常监控的方法和问题着手,尽量全面地阐述错误日志收集各个阶段中可能遇到的阻碍和处理方案。☞ 收集日志的方法平时收集日志的手段,可以归类为两个方面,一个是逻辑中的错误判断,为主动判断;一个是利用语言给我们提供的捷径,暴力式...转载 2020-01-09 10:38:14 · 751 阅读 · 0 评论 -
js监听浏览器离开和关闭页面操作
大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?或者想执行些别的操作,想一些在线测试系统、信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失。这里面的实现过程很简单: mounted() { window.addEventListener('unload', function() { //窗口关闭后 ...原创 2019-10-30 13:17:02 · 7798 阅读 · 3 评论 -
点击获取邮箱验证码带时间(js)
//获取邮箱验证码var wait = 60;function time(o) {if (wait == 0) {o.removeAttribute("disabled");o.value = "获取验证码";wait = 60;} else {o.setAttribute("disabled", true);o.value = "还剩(" + wait + "原创 2015-08-05 17:09:40 · 1407 阅读 · 0 评论 -
ajax
function addcommodity(){ var name = $('#cname').val(), price = $('#cprice').val(); var data = { "name": name, price:price,"imgSrc": "xmsz-"+Math.floor(Math.random()*5原创 2015-08-05 17:10:43 · 349 阅读 · 0 评论 -
邮箱校验(js)
//邮箱校验var oTxt=document.getElementById('email');var email=oTxt.value.replace(/^\s+|\s+$/g,"").toLowerCase();//去除前后空格并转小写 var reg=/^[a-z0-9](\w|\.|-)*@([a-z0-9]+-?[a-z0-9]+\.){1,3}[a-z]{2,原创 2015-08-05 17:12:26 · 999 阅读 · 0 评论 -
$.ajax()方法详解
jquery中的ajax方法参数总是记不住,这里记录一下:1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。2.type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。3.timeout: 要求为Number类型的参数,设置转载 2015-10-23 10:05:50 · 284 阅读 · 0 评论 -
理解闭包
《高级程序设计》上,这样说:当在函数内部定义了其他函数时候,就创建了闭包。闭包有权访问包含函数内部的所有变量。(这句话怎么理解呢?照这句话理解的话,闭包就是一个嵌套函数嘛!嵌套函数对包含它的函数的变量当然可以访问,这是没有问题的。) 一般来说,内部函数是能够访问到上一级乃至全局的的变量的,那么就有人这样理解:通过闭包,可以实现外部访问函数局部内的变量。(如果我转载 2015-10-15 17:51:00 · 386 阅读 · 0 评论 -
十五个常用的jquery代码段
十五个常用的jquery代码段回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画:1 // Back to top2 $('a.top').click(function (e) {3 e.preventDefault();4 $(document.body).animate(转载 2015-11-20 12:08:28 · 343 阅读 · 0 评论 -
base64和图片的互转(HTML5的File实现)
base64和图片的互转(HTML5的File实现)2013-08-02 0 个评论 作者:qklin收藏 我要投稿刚接触到一个内联图片的概念,内联图片即使把图片文件编码成base64 看下面代码即是内联问题可以减少http的请求,缺点是不能跨域缓存! ?12转载 2015-11-19 16:06:42 · 1394 阅读 · 0 评论 -
jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Aja转载 2015-11-27 17:33:40 · 416 阅读 · 0 评论 -
js实现,同一页面多个倒计时
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> ..转载 2015-12-29 18:25:50 · 4957 阅读 · 0 评论 -
js刷新页面方法
本文介绍下,用js刷新当前页面的几种方法,包括reload方法、replace方法、自动刷新方法等。有需要的朋友参考下吧如何实现刷新当前页面呢?借助js你将无所不能。1,reload 方法,该方法强迫浏览器刷新当前页面。语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页转载 2015-11-27 17:24:30 · 464 阅读 · 0 评论 -
JS判断是否是微信页面,判断手机操作系统(ios或android)并跳转到不同下载页面
JS判断客户端是否是iOS或者Android参考:http://caibaojian.com/browser-ios-or-android.html1 function is_weixin() {2 var ua = window.navigator.userAgent.toLowerCase();3 if (ua.match(/MicroMes原创 2015-11-27 17:47:38 · 2060 阅读 · 0 评论 -
禁止复制网页内容
// 禁用右键菜单、复制、选择$(document).bind("contextmenu copy selectstart",function() { return false;});// 禁用Ctrl+C和Ctrl+V(所有浏览器均支持)$(document).keydown(function(e) { if(e转载 2015-12-30 18:37:21 · 426 阅读 · 0 评论 -
移动端web开发技巧
移动端web开发技巧META相关1. 添加到主屏后的标题(IOS) 2. 启用 WebApp 全屏模式(IOS) 3. 百度禁止转码通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:4. 设置状态栏的背景颜色(IOS)设置状态栏的背景颜色,只有在 "转载 2015-12-03 15:27:42 · 622 阅读 · 0 评论 -
js 多个倒计时,毫秒倒计时
DOCTYPE html>html> head> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> title>title>转载 2016-01-05 14:25:55 · 1041 阅读 · 0 评论 -
常用meta整理
元素概要标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School必要属性属性值描述contentsome text定义与http-equiv或name属性相转载 2015-12-09 14:47:56 · 406 阅读 · 0 评论 -
开发中 常用 js 记录
(1)获得URL参数function GetQueryString("url参数名") { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) ret原创 2016-04-13 16:22:13 · 383 阅读 · 0 评论 -
移动web页面前端开发总结
移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结。 1.四大浏览器内核1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug。2.Gecko:( FireF转载 2016-04-13 16:37:25 · 4536 阅读 · 1 评论 -
微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
之所以你可以触发这个回弹, 是因为这是系统的原生体验, 对于内容类页面都有类似这种.如果你想避免这个现象, 成熟的方案是重置掉原生的Touch事件, 这样做会使原生滑动不可用。你需要根据Touch事件返回的坐标对应的移动页面, 实现滑动。这样可以变相屏蔽掉这个回弹特性.举个例子:function preventTouch() { event.preventD原创 2016-05-16 16:38:37 · 6193 阅读 · 1 评论 -
ionic 中使用 slidebox 利用angular ng-repeat 渲染后不显示问题
在使用ionic slidebox指令做图片轮播显示的时候,发现一个问题,ng-repeat遍历生成一个个slide块的时候,执行完成页面是空白的。方法:1ng-repeat的数据是延迟加载过来的。当 img 没有渲染结束是不能工作的,你这样改一下:...在ion-slide-box 加上 ng-if = “repeat value”方原创 2016-05-18 14:27:46 · 3035 阅读 · 0 评论 -
Ionic 常见问题及解决方案
在Ionic开发过程中会遇到很多常见的开发问题,分享一下笔者在开发过程中总结到的对这些问题的解决方案。也是接触ionic没多久,大家一起努力,有问题欢迎评论指出 :)ps: 附上博客的原文地址一些常识与技巧list 有延迟,可以在ion-content处使用 overflow-scroll="true"尝试在上用ng-click上是没效果的标签内的事件会在整个label内被触发转载 2016-05-19 14:45:49 · 2592 阅读 · 0 评论 -
js读取本地图片进行预览,上传服务器
1.js进行图片预览 使用input标签来选择图片,使用FileReader读取图片并转成base64编码,然后发送给服务器。 var image = ''; function selectImage(file){ if(!file.files || !file.files[0]){return;} var reader = new FileReader();转载 2016-06-04 21:15:57 · 985 阅读 · 0 评论 -
Angular ngClick 阻止冒泡和默认行为
Angular ngClick 阻止冒泡和默认行为困扰了几天的麻烦,如果你认真查看过Angular官方的API文档,这其实是一个很简单的问题。在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick…中加入了一个变量叫做$event.如ngClick在官方文档是这么描述的:Expression to ev转载 2016-05-09 14:13:34 · 897 阅读 · 0 评论 -
js 实现无限加载分页(适合移动端)
js 实现无限加载分页(适合移动端)原理:当滚动条到达底部时,执行下一页内容。判断条件需要理解三个概念: 1.scrollHeight 真实内容的高度 2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的高度 3.scrollTop 视窗上面隐藏掉的部分,即滚动条滚动的距离思路: 1.使用fixed定位加载框原创 2016-05-24 17:50:28 · 31869 阅读 · 0 评论 -
前端跨域解决方法
最近面试老师问道跨域问题,今天就总结下跨域解决方法:1.同源策略如下:URL说明是否允许通信http://www.a.com/a.jshttp://www.a.com/b.js同一域名下允许http://www.a.com/lab/a.jshttp://www.a.com/script/原创 2016-08-03 16:58:57 · 1532 阅读 · 1 评论 -
使用ionic+angular+phonegap开发APP入门
有时候朋友问我是做什么的?我说以前是用PHP写后台,最近是用H5写前台APP(俗称的Hybrid App); 在公司做了几个H5的项目之后,有时候也想抽空研究下H5写一些APP;总觉得写APP的开发更加有底气。尽管我偶尔有空也会研究下android,swift(Objective-C实在是难懂,没兴趣深入研究),也希望H5能开发一些不错的APP; 国内有包括APPCan等公司慢慢在发力,是转载 2016-08-15 15:58:35 · 3357 阅读 · 0 评论 -
APP三种开发模式
1.1. APP三种开发模式智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝、京东等)、金融(各手机行业、P2P借贷等)、医疗(智慧医疗)、交通(滴滴、Uber等)、教育(慕课网等)、餐饮(饿了吗、美团等)……反正只要是个企业,无论规模大小,都已经订制或将要订制自己的APP。这么多APP无外乎就三种模式:Native App、Web App、Hybrid App。转载 2016-08-15 16:03:24 · 12582 阅读 · 0 评论 -
javascript 面向对象封装与继承
整理一下js面向对象中的封装和继承。1.封装 js中封装有很多种实现方式,这里列出常用的几种。1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回。 缺点:很难看出是一个模式出来的实例。代码:复制代码 代码如下:function Stu(name, score) {return {name: name,score: score}原创 2016-07-31 23:22:51 · 572 阅读 · 0 评论 -
jQuery插件开发模式
软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。根据《jQuery高级编程》的描述,jQuery插件开发方式主要有三种:通过$.extend()来扩展jQuery通过$.fn 向jQuery添加新的方法通过$.widget()应用jQuery UI的部件工厂方式创建通常我们使用第二种方法转载 2016-07-31 23:21:46 · 3117 阅读 · 0 评论 -
angularjs 依赖注入的写法问题
首先格式化一下你的代码:显示注入,代码过长,不容易阅读,代码压缩不出错app.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http){ //do something}]);隐示注入,书写简单,但是在js进行压缩时候会出错,因为变量名变短,而依赖注入是基于其服务的名称的app.原创 2016-09-09 10:51:53 · 858 阅读 · 0 评论 -
anjularjs弹出model(模态框)
$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options)如下:templateUrl:模态窗口的地址template:用于显示html标签scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScopecontroller:为$modal原创 2016-08-09 17:58:35 · 1321 阅读 · 0 评论 -
AngularJS 路由:ng-route 与 ui-router
AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化,并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 下面首先给出$route的使用示例,然后引入一个更加强大的客户端路由框架ui-router。Angular 路由原创 2016-08-09 18:11:43 · 436 阅读 · 0 评论