Web前端
林涧
奋斗中的前端码农
展开
-
网页性能检测
如何检测网页性能以及其指标计算原创 2020-07-31 20:15:15 · 513 阅读 · 0 评论 -
如何在Weex中使用Vue.js
Weex中使用Vue.js原创 2020-06-28 23:20:38 · 927 阅读 · 0 评论 -
ES5中的几种继承方式
原生javascript中的继承,是考验对JS掌握程度一个重要反馈,现在来总结JavaScript中的几种继承方式,并分析其利弊。主要有三种方式:构造函数方式、原型链继承方式、组合继承以及寄生组合继承方式。一、借用构造函数 functionSuperType(name){ this.colors=['red','blue','green']; } ...原创 2018-03-07 23:40:51 · 661 阅读 · 0 评论 -
javascript中的事件Event(一)— 事件流
一、Event基本信息1、事件流:描述的是从页面中接受事件的顺序 IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流。2、事件冒泡 IE的事件流叫做事件冒泡(event bubbing),即事件开始时由具体的元素接受,然后逐级向上传播到较为不具体的节点。如果点击div。则事件流如下: div --> body --> html --...原创 2017-12-27 10:44:29 · 405 阅读 · 0 评论 -
Weex 开发注意事项
上一篇简绍了weex 的一些基础知识和开发规范,这篇讲些实战中会遇到的坑,和开发技巧相关东西。1、使用webpack 构建时的注意事项 项目中使用的是webpack 3.X 版本,webpack现在已发布4.X 版本,但4.X 会将js banner(注释)放到单独License文件,这和weex在使用前端框架时需要标记banner不符合,暂未找到解决方案。 // webp...原创 2019-11-29 19:55:33 · 590 阅读 · 0 评论 -
Vue组件间通信
今天总结下Vue组件建的通信,主要讲父子props、公共事件eventBus、vuex状态管理三种方式。1、父子组件通信父子组件通信一般通过props、emit方式即可实现。原创 2020-05-31 23:13:09 · 219 阅读 · 0 评论 -
React 组件概括
React开发中,组件是非常重要的一部分内容原创 2020-04-05 18:45:25 · 156 阅读 · 0 评论 -
React 中的key & 启发式算法
1、组件中的Key在开发React时,强烈官方强烈推荐定义Key属性,因为这会有效的提升运行效率。2、启发式算法为什么定义了Key属性可以提升效率?这和React提出的O(n) 的启发式算法有关。1、两个不同类型的元素会产生出不同的树;2、开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定;...原创 2020-03-25 22:06:55 · 221 阅读 · 0 评论 -
URLSearchParams 兼容性引发IOS 10 白屏问题
在使用公司平台提供的组件时,遇到在6s、7p时出现白屏情况,通过review代码发现平台的组件使用了URLSearchParams和es6 的includes。通过caniuse.com 或者MDN查看URLSearchParams兼容发现,对于低版本的IOS 10.3 (2017 年 3月发布)以下是不支持的。使用URLSearchParams 实现URL拼接源码:expo...原创 2020-01-17 10:51:21 · 2996 阅读 · 0 评论 -
weex scroller滚动列表实践
weex 提供了<scroller>滚动组件,可以容纳子组件进行横向或竖向滚动。如果组件需要进行滚动,可以将<scroller>当作根元素或者父元素使用,否则页面无法滚动(<list>组件除外,<list>默认可以滚动)。使用<scroller>滚动组件,需要注意点的:不允许相同方向的<list>或者&...原创 2019-12-26 16:21:09 · 2277 阅读 · 0 评论 -
Weex 样式开发规范总结
样式表和 CSS 规则是由 Weex js 框架和原生渲染引擎管理的。出现性能考虑,Weex 目前只支持单个类选择器,并且只支持 CSS 规则的子集。在Weex里,每一个Vue组件的样式都是scoped。一、盒模型Weex 盒模型基于CSS 盒模型,每个 Weex 元素都可视作一个盒子。盒模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界 margin edge, ...原创 2019-10-31 20:43:37 · 1809 阅读 · 0 评论 -
Weex 简介
最近项目在改造,尝试使用weex代替原有的H5 和原生页面,提高系统运行效率。期间遇到了很多坑,后面会仔细讲讲,先来看下weex的基本信息。一、什么是weex"weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架",这是weex官网对其的一句很简介明了的定义。weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架。二、技术特点1...原创 2019-09-30 20:12:15 · 18100 阅读 · 1 评论 -
微信小程序事件小结
最近在写微信小程序,分(总)享(结)一些小的开发技巧。1、事件绑定bindtap 微信小程序里面的事件绑定方法是bindtap,此方法只能指定方法名,不能传参数。 <image src="{{item.imgUrl}}" class="swiper-img" bindtap="golink" data-link-url="{{item.linkUrl}}"/&g...原创 2019-06-06 10:43:46 · 234 阅读 · 0 评论 -
Javascript 模块化规范
模块化的意思就是在解决某一问题时,采用分类的思想把问题进行系统性分解,从而解决问题的方式。目前JavaScript领域广泛使用的模块化规范包括,commonJs规范、AMD规范,CMD规范。今天简单介绍下这三种开发规范。一、commonjs规范 commonjs出现的背景和JavaScript的函数式编程有关,没有标准化模块化系统、标准库少等。所以commonjs就是为了解决...原创 2018-08-06 19:48:49 · 3212 阅读 · 0 评论 -
Webpack 常用插件总结
讲讲webpack常用的几个插件:1、uglifyjs-webpack-plugin作用:压缩混淆js文件用法配置:plugins: [ new UglifyJsPlugin({ uglifyOptions: { // 压缩配置 output: { // 输出 c...原创 2019-07-05 15:51:42 · 791 阅读 · 0 评论 -
Flux简介
什么是Flux Flux是Facebook用于构建客户端Web应用程序的一个系统架构。它通过利用单向数据流来补充React的可组合视图组件。它更像是一种模式,而不是一个正式的框架。Flux将一个应用分成四个部分。View: 视图层 Action(动作):视图层发出的消息(比如mouseClick) Dispatcher(派发器):用来接收Actions、执行回调函数Store(数据层):用来...原创 2018-03-05 11:23:41 · 16267 阅读 · 0 评论 -
React简单概览
学习React 一段时间了,现在总结下个人对React的认识。什么是React React是Facebook推出的一个高效的javascript库,用于构建“可预期的”和“声明式的”Web用户界面,可以用来构建因数据不断变化的大型项目,React 本身只涉及UI层。React的特点 个人认为React有以下几个特点: 组件化 React可构造多种类...原创 2018-03-04 12:12:07 · 360 阅读 · 0 评论 -
剖析 Promise
最终实现的Promise代码,详细过程情况文章最后的原文链接。// 例1function getUserId() { return new Promise(function (resolve) { // 异步请求 Y.io('/userid', { on: { success: function (i...转载 2018-02-24 14:16:47 · 140 阅读 · 0 评论 -
apply和call区别
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..主要我是要解决一下几个问题:1. apply和call的区别在哪里2. 什么情况下用a...转载 2013-12-20 11:01:20 · 493 阅读 · 0 评论 -
网页劫持
web前端安全除了平常的XSS、CSRF外还存在一种安全问题就是网页劫持。所谓的网页劫持就是非法的网页被修改拦截了。来看下面的具体解释。什么是网页劫持: 使用HTTP请求请求一个网站页面的时候,网络运营商会在正常的数据流中插入精心设计的网络数据报文,让客户端(通常是浏览器)展示“错误”的数据,通常是一些弹窗,宣传性广告或者直接显示某网站的内容。分类: I、跳转型劫持:用户...原创 2018-03-07 20:59:48 · 4289 阅读 · 0 评论 -
js Arguments对象
js的内置对象Arguments是函数的实际函数,他保存函数的所有参数。Arguments是一个对象,typeof Arguments得到的是Object,但有length,index的属性。强调的是Arguments不是数组Array。引用一个形式参数可以用参数名,也可以用arguments[]数组形式,其中arguments[0]表示第一个参数。Arguments和Array的区别:j转载 2015-04-18 22:29:54 · 345 阅读 · 0 评论 -
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
目录(?)[+]在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问,是什么有这么强大的功能呢?HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面转载 2014-03-06 15:26:16 · 744 阅读 · 0 评论 -
RequireJS 2.0 API之配置项
原文地址:http://blog.csdn.net/kevinwon1985/article/details/8155267RequireJS 把每一个依赖项当做一个script标签,使用 head.appendChild()来加载。RequireJS 会计算好依赖关系,按照正确的顺序依次加载所有依赖项。然后才调用模块的构造函数。 在能同步加载模块的服务端JS中使用 RequireJS转载 2014-03-04 20:03:37 · 784 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
看到这篇文章,不错转摘过来以备后面继续深入学习http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.htmlHTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主转载 2013-10-22 17:03:17 · 680 阅读 · 0 评论 -
HTML5 Local Storage( 本地存储) 的前世今生
原文连接:http://diveintohtml5.org/storage.html (深入HTML5)作者:Mark Pilgrim译者 : feijia (tiimfei@gmail.com)译者的话:上周读到这篇关于html5 local storage 的综述性文章觉得十分受益。这篇文章是作者的书HTML5 up & Running的的一个章节,转载 2013-10-22 16:31:35 · 795 阅读 · 0 评论 -
jquery插件验证表单
--> --> -->$().ready(function() {$("#signupForm").validate({rules : {pdId : {required : true,digits:true,maxlength:20},pdName:"required",pdPrice:{required : true,number原创 2013-05-15 16:30:27 · 508 阅读 · 0 评论 -
MongoDB简介
一、基本操作 查询所有数据库列表 : show dbs 切换到test数据库 : use test 创建数据库blogdb : use blogdb 创建一个集合 : db.createCollection(“users”) 添加一个文档 : db.users.insert({“name”:“admin”,“password”:“111”}) 查...原创 2017-10-09 13:46:15 · 336 阅读 · 0 评论 -
axios遇到的坑
axios 可以使用一个config.js 配置文件来管理它的请求信息。具体配置不细说,使用如下。一,使用配置方式GET方法: let promise = axios.get(url, config).then(...).catch((error) => {...}) ;POST方法: let promise = axios.post(url, data, co原创 2017-11-30 17:50:07 · 3222 阅读 · 0 评论 -
双向数据绑定
是什么: 基本含义就是数据的操作反映到数据,数据的改变实时展现到界面。原理:实现响应式或双向数据绑定分三个步骤: 1)View中UI元素和Model中的data中的数据绑定 2)当UI元素内容变化时,data中的数据同步变化。即View ==>Model 3)当Model中的data数据变化时,View中的UI元素同步变化原创 2017-11-30 18:03:46 · 353 阅读 · 0 评论 -
Array的基本操作
1 、合并操作 concat : var C = A.concat(B); 用A数组合并B数组,生成新的C数组。 循环插入 使用Array#push() 方法 // 将数组 `b` 插入 `q` for (var i=0; i q.push( b[i] ); }原创 2017-12-01 14:19:44 · 274 阅读 · 0 评论 -
vue项目中实现返回按钮时遇到的坑
公司开发一个音频项目用的是vue 2.0 ,vue-router 2.0 。在实现返回的时候遇到了一个坑,下面讲讲。一般的返回是直接使用this.$router.go(-1)或者使用window.history.back() 如果当前是第一页 往前已经没有历史记录,使用上面的方法就不能返回 或者 直接返回到了空白页,这时我们就需要进行判断当前页是不是第一页。//验证是否存在记录if (BHi...原创 2018-01-12 11:37:33 · 23442 阅读 · 1 评论 -
javascript 中的事件Event (二) — 事件类型
前面介绍了,javascript中的事件流,事件处理程序以及事件对象Event包含的属性和方法。这篇开始介绍Event的类型,包括常用的UI事件,焦点事件以及鼠标事件等。一、UI事件 UI事件是页面级事件,包括的基本的事件有如下: 1. load : 当页面完全加载完后(包括图片,js文件,css文件等外部资源)触发window上面的load事件。 ...原创 2018-01-03 09:59:36 · 742 阅读 · 0 评论 -
javascrit 中事件Event(三)— HTML5事件
这篇主要概述HTML5事件,在HTML5中的事件中对Event进行了扩展,新增了一些新的事件,如contextmenu,beforeunload,DOMContentLoaded,readystatechange事件等。下面讲解重点用的多的几个事件。1、beforeunload:在浏览器关闭(卸载)之前触发,可以通过它取消关闭(卸载)并继续使用原有页面。例:关闭页面前弹出提示框提示...原创 2018-01-09 15:08:00 · 1086 阅读 · 0 评论 -
ES6中的let和var的区别
ES6中新增了let命令用来声明变量,let和var 声明的变量有什么区别呢?现在来讲解总结下。1、基本用法:和var 命令类似,直接使用 let 变量 = 值。{ let a = '1'; var b = 'a';}a // error: a is not defined.b // 1 2、有效作用域:let声明的变量只在其命令所在的代码...原创 2018-01-19 17:03:26 · 1481 阅读 · 2 评论 -
HTML5中的canvas简介(一)
HTML5中新增了一个canvas元素,可以通过JavaScript动态的在这个元素上进行绘图。除了基本的绘制2D图形,canvas还提供了名为webGL的3D上下文。 一、基本用法: <canvas width="200" height="200" id="testcanvas"> </canvas> 1)使用canvas必须得设置...原创 2018-02-10 17:31:30 · 277 阅读 · 0 评论 -
cookie,sessionStorage,localStorage的区别
网上讲这方面的很多,自己总结了几点:1、相同点:数据都保存在浏览器,同源共享。即相同的域下可以修改读取。2、不同点: 大小数量: IE6或更低版本最多20个cookie,IE7+可以有50个。 cookie大小4KB左右,超过部分会被截掉。sessionStoage,localStoage大小可达5M。 传输:每次请求cookie都会发送到服务器,然后回传给浏览器,sessionS...原创 2018-01-19 17:32:50 · 1031 阅读 · 0 评论 -
XSS跨站脚步攻击及防范
XSS(Cross Site Script)跨站脚本攻击。它指的是恶意攻击者往Web 页面里插入恶 意html 代码,当用户浏览该页之时,嵌入其中Web 里面的html 代码会被执行,从而达到侵害用户信息目的。原理: 攻击者先构造一个跨站页面,利用script、<IMG>、<IFRAME>等各种方式使得用户浏览这个页面时,触发对被攻击站点的http 请求。如果被...原创 2017-09-04 17:35:40 · 515 阅读 · 0 评论