前端技术
JarunWang
欢迎来到我的博客,请有技术问题请联系我。我的qq:849642638. 加我备注csdn博客王老狗和问题,谢谢。
展开
-
XSS跨站脚本攻击
什么是XSS跨站脚本攻击?在网页中嵌入客户端脚本(例如JavaScript),当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的,比如获取用户的Cookie,导航到恶意网站,携带木马等。原创 2016-11-15 23:41:25 · 526 阅读 · 0 评论 -
ES6 字符串模版用法和例子
前言字符串模版为了优化以前那种双引号,单引号那种恶心的写法。优化语法增加代码的可读性且可写性。以前写法:var name = "Jane"var before = "<div><span class = 'class'"+ "style='color:red'>"+name+ "</span></div>"ES6写法:var name = "Ja原创 2017-07-14 23:18:50 · 329 阅读 · 0 评论 -
ES6转换成ES5/ES3
前言在ES6代码和语法糖满天飞的时候,却因为浏览器兼容问题而不敢使用。现在我介绍2种方法来转换ES6。babel脚本转换和在线转换。babel脚本转换1、项目路径配置 在项目里面创建一个src文件夹(用来保存原来JS文件),dist文件夹(输出转换成ES5/ES3的文件),node_modules(就是npm插件安装目录)。 2、配置文件package.json{ "name": "babel原创 2017-10-18 17:38:47 · 6442 阅读 · 1 评论 -
浏览器请求队列机制-请求为什么会阻塞
前言最近遇到一个问题,我1个站点链接2个后端服务,但1个后端服务有问题,导致访问超时,但请求接口都是分开的。自认为一个服务站点请求超时,不会影响到另外一个请求的,但不是。全部请求都发不出去。为什么呢?是不是浏览器有请求机制管理?正常情况前端站点都是对应一个服务的,如果前面一个请求有问题,那么后面一个请求访问不下去也正常。请求都是瀑布型一个请求接一个请求有关联的。所以不了解也没什么问题。但多个后端服务原创 2017-11-05 22:24:39 · 13025 阅读 · 0 评论 -
javascript 排序(Sorting)算法与说明
排序的介绍排序是算法最常用的一种运算之一,数据记录到数据库,都需要经过排序输出到客户端上。不然乱输出不规整的数据,是难以阅读的。本文章介绍几种最常用见的排序方法:冒泡排序,选择排序,插入排序,归并排序和快速排序。冒泡排序冒泡排序是从运行时间的角度上来看,最差的一个。因为冒泡排序回比较任何两周相邻的项,如果第一个比第二个大,则交换它们。选择排序选择排序的思路是找到数据结构中的最小值并将其放置在第一位,原创 2017-09-19 23:53:07 · 464 阅读 · 0 评论 -
JS生成二维码
最近需要实现二维码,考虑了各种方案。最后觉得直接前端生成最便捷。测试了jquery.qrcode.js 和 qrcode.js 二个js控件。总结了一些实用经验。来给大家分享。1.前端实现二维码主要有几种方式,table,canvas,img drawImageQRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获原创 2016-11-27 23:36:45 · 969 阅读 · 0 评论 -
JS使用getJSON获取站点配置文件
前言因为最近在实现前后端分离,前端需要独立起站点服务,因此需要写入一些站点服务配置参数。但服务有开发,测试,线上各个站点服务配置参数不一样,而站点代码又是相同的。所以想把配置参数和代码做一个分离。把服务器的环境配置做成一个json文件,在渲染页面的时候读取一个环境配置文件,再渲染页面。因此这里我使用了get请求,请求本地一个JSON文件,来写入服务环境配置。实现1.我在项目根目录下,放入一个conf原创 2017-12-16 12:51:47 · 5339 阅读 · 0 评论 -
H5 video 播放器demo
H5 video 播放器demo前言最近在做一个wap端的项目,需要视频播放功能。大家也知道wap对flash支持很差,优先考虑使用h5播放器video,之后在介绍几个插件和第三方视频实现方法。H5 video因为是原生的界面比较普通,但使用起来没什么问题,手机端兼容情况很不错。网上的教程也比较多。我这里提供了一个demo给大家学习。demo代码:<!DOCTYPE html><html>原创 2017-06-11 22:03:29 · 22558 阅读 · 0 评论 -
android软键盘@media 横竖屏兼容
前言通常我们在写wap的时候 横竖屏切换会使用到@media媒体查询来实现的。但我最近在一个android的项目,在webview使用媒体查询来做横竖屏区分。点击input输入框,会显示android的软键盘,而这会导致本来是竖屏的界面,变成横屏的。@media all and (orientation : landscape) { //横屏}@media all and (orientatio原创 2017-12-25 23:11:32 · 2011 阅读 · 1 评论 -
CORS跨域-Nginx使用方法(Access-Control-Allow-Origin错误提示)
问题说明 当出现上图这个的时候,求是访问请求其他域无法访问,浏览器访问其他域不安全,导致访问不了简称跨域问题。而这上面出现一句很重要的话“NO Access-Control-Allow-Origin”,是不是只要添加“Access-Control-Allow-Origin”头就能访问呢?如何添加,会不会有其他问题? Access-Control-Allow-Origin 表示允许访问的外域 U原创 2017-12-16 02:34:49 · 40039 阅读 · 0 评论 -
HTML5 Cross-Document Messaging 跨域(postMessage)
前言出于安全和隐私的原因,Web浏览器会阻止不同域中的文档互相影响; 也就是说,跨站点脚本是不允许的。但很多时候需要跨域操作,因此开发出允许跨域方法document.domain,JSONP,CORS等。这些跨域方式都有一定的局限性,比如我最近遇到一个跨域问题,我在www.A.com域打开一个www.B.com域的网页,需要B网址操作完成后,前端通知A网址。上面这些方法都不能有效地跨越通信。...原创 2018-03-02 01:08:48 · 838 阅读 · 0 评论 -
npm 错误收集
前言我们使用node,webpack,npm,gulp,各种插件等老是会遇到一堆问题。现在我收集一份我遇到过的错误,来分享给大家。环境 window 10 node 8.11.1稳定版 npm 5.6.0 python 2.7.141.code ELIFECYCLE 错误错误内容:npm ERR! code ELIFECYCLEnp...原创 2018-05-05 12:54:29 · 882 阅读 · 0 评论 -
eslint 忽略错误
前言eslint很好用,但有时候一些无法避免的错误。显示出来会影响心情,如何屏蔽这种无法解决的错误提示呢?如下:引用了一个fundebug,但项目里面没有fundebug这个对象,所以报错了。 在错误代码后面输入eslint-disable-line命令,屏蔽错误类型。就可以了 // eslint-disable-line [错误类型]...原创 2018-05-21 15:16:11 · 12067 阅读 · 0 评论 -
node+webpack构造打包 打测试/线上包
前言前端通过构造工具打包是日常的工作内容,但因为环境的不一样测试/线上。通常都需要修改配置的。我就想只通过命令来传入一个变量,这样来区别打包的环境。如何实现呢?1.配置package.json1.通过构造命令传入一个环境变量,如: node scrupts/build.js uat //uat就为测试环境的变量2.然后我把node命令,写到在package....原创 2018-05-26 22:14:52 · 3187 阅读 · 0 评论 -
ES6 Proxy 和 Reflect 用法
前言:ES6 Proxy和Reflect是一个蛮有用的组合,这两个属性相辅相成。这篇文章是通过用这两个属性来写一个 简单的常用实例。也通过这个实例来说明Proxy和Reflect几个常用的方法。Proxy是什么?Proxy用于修改某些操作的默认行为,等同于在语言层面作出修改,需要一种“元编程”,即对编程语言进行编程。可以理解为对目标对象设置“拦截”层,外界访问该对象必须先通过拦截层。因此提供了一种机原创 2017-07-02 00:16:23 · 733 阅读 · 0 评论 -
ES6 Class Module模块化 案例
前言这篇通过简单说明ES6 Class和Module这个两个成员。并且用这两个成员制造模块化。Class说明Class(类)作用对象模块,也就是一个方法集合,像以前的prototype父类一样,也一样可以通过new来实例,用法基本一样。所以只是换种方法写继承而已。我个人觉得Class加入使代码更加直观,更容易理解。案例Class简单一个new实例:ES5var name = "tom";var a原创 2017-08-14 00:42:18 · 3195 阅读 · 1 评论 -
Sass Scss Less快速开发工具之Compass和EST介绍
前言现在预处理器已经成为前端开发一种必要的工具,为我们编写传统样式提供了极大的便利。但我在使用中,还是需要先编写很多个基础代码比如(clearfix,-webkit,-mo)等。像是不是有工具像jquery那样的工具库。来帮助我们写样式呢?答案是有的Compass(http://compass-style.org/)和EST(http://ecomfe.github.io/est/)。这两个工具是在原创 2017-09-18 10:15:19 · 1172 阅读 · 0 评论 -
CSS3 REM单位简说
1.什么叫REM rem(font size of the root element)是指相对于根元素(html标签)的字体大小的单位。 2.REM有什么用? 现在我们在制作网页的时候,用PX单位+百分比。在到放大和缩放,会看到样式混乱,部分换行错误等问题。这样制作的网页只能在100%正常显示。但用户正常也不会手多去放大缩放去看。所以一直都是业界做法。没毛病! 但到了原创 2016-10-11 16:55:14 · 569 阅读 · 0 评论 -
网页跨域请求问题之jsonp原理分析
前言: 在做项目的时候,遇到考虑到外网使用的情况。因为地址域的不同,导致到请求不成功。因此需要考虑使用跨域技术来解决。在权衡各种跨域技术后优先选择JSONP。什么是JSONP: 为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个c原创 2016-08-11 11:55:58 · 354 阅读 · 0 评论 -
微信小程序开发
最后一步就是开发。如何写一个小程序呢?小程序开发其实和其他公众号开发差不多,只是小程序用的是微信自定义的一套框架,所以开发前建议读度微信小程序规范。原创 2017-01-10 14:33:19 · 419 阅读 · 0 评论 -
web安全策略之iframe-sandbox
前言sandbox是html5的新属性,主要是提高iframe安全系数。iFrames因安全问题而臭名昭著,这主要是因为iFrames常常被用于嵌入第三方内容,而后者则可能会执行某些恶意操作。这样可以有效防止iframe对父页面进行攻击(禁用插件,禁止其他浏览上下文的导航,禁止弹出窗口和模式对话框)。sandbox通过限制被嵌入内容所允许的操作而提升iFrames的安全性。这种方式将sandbox内原创 2017-02-18 19:13:19 · 11482 阅读 · 1 评论 -
webpack 多页面模版
前言webpack是一款模块加载器兼打包工具,能把js,css,页面,图片,视频等各种资源,进行模块化处理。而现在网上流传很多单页面的webpack模型,那多页面呢?比较少,现在我提供一个多页面的前端模型。希望大家适合使用。功能介绍这模型是多页面模块打包,模型是用html,你们可以换成自己的jsp,php按你自己的需要来。 通过运行服务,把文件直接打包到dist目录下,dist是编译后的文件,服务原创 2017-05-01 23:37:13 · 7222 阅读 · 0 评论 -
onerror远程移动调试 收集报错信息
前言我们在开发移动端的时候,需要远程调试。那时候我们可能选择fiddler4,Weinre,vorlon或者移动框架包含的调试工具等。但本来就调试一个很简答的问题,引用这些工具安装觉有点大材小用。我推荐一个小办法用 onerror。放在全局JS里面,只有那个地方有报错,直接把错误打出来,那行那页那个JS报错都一目了然。简单方便。~~错误信息模型/*收集报错信息*/ window.onerro原创 2017-05-02 16:59:39 · 266 阅读 · 0 评论 -
jQuery ajaxError参数 详细整理
前言ajax是现在和服务器主流交互,完全不能少的技术。但很多时候我们对这个错误的原因不太明白,比如初学者最容易犯的错就是,为什么参数传不到后端,一看错误信息,又不知道是什么意思。导致浪费大量时间。现在整理了一份详细的ajaxError参数说明文档。希望大家有用。ajax原理图 监听错误demo$(document).ajaxError( function (event, XMLHttpReques转载 2017-07-01 18:14:04 · 3253 阅读 · 0 评论 -
web/wap前端站点监控和工具
web/wap站点监控一.前言一个web/wap开发好发布到外网的时候,需要一些列的管理和监控,来持续优化站点。主要分为三类性能监控,访问量监控,报错监控。下面图总结为这三点主要内容。 二.工具分析。在这里我介绍一下我使用过的工具,来给大家分享一下经验。 工具 网站 作用 费用 听云 https://report.tingyun.com 访问量监控,报错监控,性能监控原创 2017-06-10 18:53:53 · 1752 阅读 · 0 评论 -
浅谈SEO优化(1)
浅谈SEO优化一.前言一个站点开发永远离不开seo优化,在大数据年代,如何在一个网海茫茫的网络世界中,找到你的站点呢?是一个极其复杂且有难度的工作。需要持续更新网站,不停的优化内容和网站架构,还有关键字等。这些都是我们平时常听到的SEO优化之一。我简单说下我最近看到的SEO优化工作。希望对看到这篇文章的人都有用,当然这只是我的片面之谈,文章中有些疏忽的,请大家联系。我补充完整。二.什么叫SEO优化全原创 2017-06-11 14:53:28 · 452 阅读 · 0 评论 -
浅谈SEO优化-页面优化(2)
浅谈SEO优化-页面优化(2)一.前言根据上一篇文章我继续写页面优化。制作一个站点的时候需要一开始就考虑到SEO优化,比如做一个站点是做一个单页面框架?还是多页面框架?如果考虑到页面搜索,多页面会比单页面爬虫更好。还有页面如何生成?是js动态生成,还是html里面写出来?html为优。iframe的使用,如果要考虑到搜索排名,iframe也会放弃使用。所以SEO是需要在需求阶段 就开始考虑的如何开发原创 2017-06-11 17:11:39 · 1258 阅读 · 0 评论 -
浅谈SEO优化-站点优化(3)
浅谈SEO优化-站点优化(3)一.前言我们新建一个站点,搜索引擎肯定不知道吧。那我们不可能等对方来抓取,那不知道何时何月才能抓取到你的站点,我们要主动出击,去找搜索引擎,那怎么办呢?如何添加我们的网站?而每个搜索引擎都有一个站长平台,那是让我们添加自己网站的。这篇文章是教大家如何主动出击,和搜索引擎大教导。二.搜索引擎我们要做哪几个平台呢?国内2017年1月数据。我们主要围绕这5个搜索引擎,百度、3原创 2017-06-11 20:38:30 · 701 阅读 · 0 评论 -
web系统国际化方案
web系统国际化方案前言很多时候一个系统发展到一定环境,就需要兼容到各种各样的国家。而这种兼容除了语言,还包含时区,数据,还有服务器速度等。 其实需要考虑的东西也蛮多的,我最近因为做外国服系统,所以有一套成熟的方案。整理出来,让大家借鉴。国际化目的让不同国家和时区都能正常使用该系统,且体验差别不大,都能正常服务。那具体要做什么我列了一个图。分为系统,服务器,地域文化(词不能直接翻译就行,有时候直译原创 2017-06-25 01:58:22 · 7842 阅读 · 0 评论 -
关闭浏览器弹出框onbeforeunload,onunload和onunloadcancel
前言最近需要做一个阻挡用户关闭页面的功能,大概流程是当用户关闭页面,弹出“确定关闭提示”,点击“离开此页“关闭页面,点击“留在此页”关闭提示框。而当用户下次再关闭的时候不在给予提示。减少用户厌恶感。为了实现功能需要用到了onbeforeunload,onunload和onunloadcancel。 简单说明图:var text = "真的离开?"window.onbeforeunload = fu原创 2017-09-04 11:29:41 · 8871 阅读 · 0 评论 -
react native 遇到的坑汇总篇
问题1iOS:编译错误Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/b解决方法如下:在Build Settings 中,将Apple LLVM compiler 4.1 - Language 中的c++Standard Library 修改为 ...原创 2018-06-19 10:24:53 · 1660 阅读 · 0 评论