- 博客(40)
- 收藏
- 关注
RSS订阅原创 h5利用缓存优化性能
一、浏览器缓存机制浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。这应该是 WEB 中最早的缓存机制了，是在 HTTP 协议中实现的Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600 表...
2018-04-16 23:12:50
876
原创 h5网页开发
一、数据绑定、过度：如果使用vue框架，不足：过渡不行，会出现{{}}，使用v-html或v-cloak解决，二、分页：注意：务忘记需要分页的页面三、懒加载：是否需要四、列表页：为空判断、删除操作需判断列表是否为空五、表单验证、重复提交实现六、返回操作处理、历史浏览记录：跳转前有数据更新需要先修改页面显示再跳转防止返回时的显示错误（如：未读列表进入详情...
2018-04-16 18:21:30
2290
原创 提高页面响应速度
网页加速一 、压缩、合并资源css合并、压缩js合并、压缩图片使用css-sprites雪碧图二、分页（瀑布流加载）按需加载三、懒加载（延迟加载）如商品详情页中的图文信息，此时用分页不合适，分页和懒加载没必要同时使用四、使用CDNCDN内容分发网络（Content Delivery Network）将源站内容发布到最接近用户的“边缘”节点，使...
2018-04-16 17:58:33
2116
1
原创 slideLoad
/** * @param targetElem 添加“所有优惠券已加载~~~.”的元素。 * @param opt 按页查询，要查询的页码，之后会自增 1。 */function slideLoad(targetElem,opt) { opt = opt || {}; this.pageNum = opt.pageNum || 1; this.touch = null
2017-10-24 11:04:14
343
原创 文章标题
function ($) { //使用es5严格模式 'use strict'; //}(window.jQuery);【2】初始设置var Tab = function (element) { //指定当前元素 this.element = $(element) } //版本号为3.3.7 Tab.VERSION = '3.3.7' //动
2017-08-16 09:17:43
210
原创 表单验证
/*手机验证*/ function checkMobile(elem){ if((/^1[3|4|5|8][0-9]\d{4,8}$/.test(elem.value))){ elem.style.border="1px solid green"; return true; } else{
2017-08-14 11:46:27
178
原创 登陆/绑定页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <title>绑定手机</title>
2017-08-14 10:01:56
535
原创 长按弹出菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <title>linhongyong</
2017-08-11 17:56:14
1655
原创 上拉加载，下拉刷新（未实现）
/** * @param targetElem 添加“所有优惠券已加载~~~.”的元素。 * @param opt 按页查询，要查询的页码，之后会自增 1。 */function slideLoad(targetElem,opt) { opt = opt || {}; this.pageNum = opt.pageNum || 1; this.touch = null
2017-08-10 16:44:04
259
转载 EventUtil原生事件工具
var EventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){//DOM2级 element.addEventListener(type,handler,false); }else if(element.att
2017-08-03 22:51:22
371
原创 事件
JavaScript与HTML之间的交互是通过事件实现的。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型。事件流事件流描述的是从页面中接收事件的顺序事件冒泡即事件开始时由最具体的节点接收，然后逐级向上传播到较为不具体的节点。时间捕获DOM事件流事件捕获阶段处于目标阶段事件冒泡阶段事件处理程序事件就是用户或浏览器自身执行的某种动作。诸如cli
2017-07-25 20:38:53
209
原创 DOM
DOM DOM(文档对象模型)是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面某的一部分。节点DOM可以将html和xml文档描绘成一个由多层节点构成的结构，节点有不同的类型，每种类型表示不同的信息，每种类型的节点有各自的特点、数据、方法，另外也与其他节点存在某种关系。<html>：文档元素Node类型DOM1级定
2017-07-22 18:21:21
314
1
原创 Javascript函数表达式
函数的定义方式：1.函数声明；2.函数表达式 两种 函数生命提升 function declaration hoisting (执行代码之前会先读取函数声明) 匿名函数 anonymous[əˈnɑ:nɪməs] function 1.arguments.callee是一个指向正在执行的函数的指针，可以用在递归函数中。命名函数表达式 var func=(functon f(num){…})2.闭
2017-07-13 23:48:05
357
原创 Javascript变量、作用域和内存问题
1. 基本类型和引用类型Undefined、Null、Boolean、Number、String 按值访问，因为可以操作保存在变量中的实际的值。1.1动态属性引用类型的值可以添加属性和方法，也可以改变和删除其属性和方法。1.2复制变量值从一个变量向另一个变量复制基本类型的值时，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上。 从一个变量向另一个变量复制引用类型的值时，同样会将存储
2017-07-13 23:41:49
252
原创 链表
js数据结构中的链表/** * Created by Administrator on 2016/12/9. */function Node(element) { this.element=element; this.next=null;}/*LList 类提供了对链表进行操作的方法。该类的功能包括插入删除节点、在列表中查找给定的值。该类也有一个构造函数，链表只有一个属性，
2016-12-09 20:42:06
362
原创 队列
js数据结构中的队列队列的两种主要操作是：向队列中插入新元素和删除队列中的元素。插入操作也叫做入队，删除操作也叫做出队。入队操作在队尾插入新元素，出队操作删除队头的元素。队列的另外一项重要操作是读取队头的元素。这个操作叫做 peek() 。该操作返回队头元素，但不把它从队列中删除。除了读取队头元素，我们还想知道队列中存储了多少元素，可以使用 length 属性满足该需求；要想清空队列中的所有元素，可
2016-12-09 15:53:47
300
原创 栈
js数据结构中的栈栈是一种特殊的列表，栈内的元素只能通过列表的一端访问，这一端称为栈顶。咖啡厅内的一摞盘子是现实世界中常见的栈的例子。只能从最上面取盘子，盘子洗净后，也只能摞在这一摞盘子的最上面。栈被称为一种后入先出（LIFO，last-in-first-out）的数据结构。由于栈具有后入先出的特点，所以任何不在栈顶的元素都无法访问。为了得到栈底的元素，必须先拿掉上面的元素。对栈的两种主要操作是将一
2016-12-09 11:50:36
287
原创 列表
js数据结构中的列表function List() { this.listSize = 0;//列表的元素个数 this.pos = 0;//列表的当前位置 this.dataStore = []; // 初始化一个空数组来保存列表元素 this.clear = clear; this.find = find; this.toString = toS
2016-12-09 10:53:24
309
原创 js之模板方法模式
模板方法模式的定义和组成：模板方法模式是一种只需使用继承就可以实现的非常简单的模式。 模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺 序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。假如我们有一些平行的子类，各个子类之间有一些相同的行为，也有一些不同
2016-12-03 21:37:27
607
原创 js之组合模式
在命令模式学习完的基础上：更强大的宏命令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <button id="button">按我</button> <script> var MacroCommand
2016-12-03 20:36:06
2584
1
原创 js之命令模式
假设有一个快餐店，而我是该餐厅的点餐服务员，那么我一天的工作应该是这样的：当某位客人点餐或者打来订餐电话后，我会把他的需求都写在清单上，然后交给厨房，客人不用关心是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务，比如客人可能当前正在回家的路上，要求 1个小时后才开始炒他的菜，只要订单还在，厨师就不会忘记。客人也可以很方便地打 电话来撤销订单。另外如果有太多的客人点餐，厨房可以按照订单的顺序
2016-12-03 13:34:35
1987
原创 js之职责链模式
职责链模式的定义是：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象能处理它为止。 职责链模式的名字非常形象，一系列可能会处理请求的对象被连接成一条链，请求在这些对象之间依次传递，直到遇到一个可以处理它的对象，我们把这些对象称为链中的节点。level01:假设我们负责一个售卖手机的电商网站，经过分别交纳 500元定
2016-12-03 11:20:09
863
原创 js之发布 — 订阅模式
有人发布信息有人“订阅”信息并进行处理。DOM事件document.body.addEventListener( 'click', function(){ alert(2);}, false );document.body.click(); // 模拟用户点击售楼处level01售楼处发布楼盘信息，订阅者订阅（即把你需要的行为存入售楼处）这些信息。<!DOCTYPE html><htm
2016-12-03 09:47:24
1794
原创 js之中介模式
购买商品假设我们正在编写一个手机购买的页面，在购买流程中，可以选择手机的颜色以及输入购买数量，同时页面中有两个展示区域，分别向用户展示刚刚选择好的颜色和数量。还有一个按钮动 态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次的购买数量，按钮将被禁用并且显示库存不足，反之按钮可以点击并且显示放入购物车。<!DOCTYPE html><html lang="en"><hea
2016-12-02 22:07:57
430
原创 OO创建对象
工厂模式<!DOCTYPE html><html><head> <title>Factory Pattern Example</title> <script type="text/javascript"> function createPerson(name, age, job){ var o = new Object();//创建
2016-12-02 20:50:33
363
原创 OO理解对象
JavaScript中的对象定义：无序属性的集合，其属性可以包含基本值、对象或者函数。严格的讲，这就相当于对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每一个名字都映射到一个值。正因为这样，我们可以把JavaScript的对象想象成散列表；无非就是一组名值对，其中值可以是数据或者函数。理解对象创建自定义对象的最简单方式：<!DOCTYPE html><html><head>
2016-12-02 19:40:57
394
原创 js之状态模式
状态模式level01:电灯程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var Light = function(){ this.state = 'off'; /
2016-12-02 15:21:53
1997
原创 js之装饰者模式
装饰者模式在程序开发中，许多时候都并不希望某个类天生就非常庞大，一次性包含许多职责。那么我们就可以使用装饰者模式。装饰者模式可以动态地给某个对象添加一些额外的职责，而不会影响从这个类中派生的其他对象。level01:模拟传统面向对象语言的装饰者模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title
2016-12-02 09:26:17
258
原创 js之适配器模式
适配器模式适配器模式的应用level01:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var googleMap = { show: function(){
2016-12-01 22:37:35
781
原创 js之迭代器模式
迭代器模式迭代器模式是指：提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。实现自己的迭代器现在我们来自己实现一个 each 函数， each 函数接受 2 个参数，第一个为被循环的数组，第二个为循环的每一步后将被触发的回调函数：<!DOCTYP
2016-12-01 22:28:50
1051
1
原创 js之代理模式
代理模式小明追 MM 的故事level01:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> var Flower = function(){}; var xiaoming = { sen
2016-12-01 22:06:34
2037
原创 js之策略模式
策略模式计算奖金level01:最初的代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> var calculateBonus = function (performanceLevel,sa
2016-12-01 21:05:23
429
1
原创 JavaScript之命名空间
JavaScript之命名空间使用过Java、C#的同学对命名空间非常的熟悉，在复杂的系统中会有N多的函数、对象，语言提供的、架构预定义的，这么多的函数和对象，由于编程规范要求起有实际意义的名字，难免会重名发生错误调用，而有了命名空间烦恼就没有了，不但可以分类组织函数与对象，还可以形成隔离，解决重名问题。使用JavaScript就没有这么舒服了，Javascript只有函数作用域，什么块儿啊、神马文
2016-11-09 09:49:17
255
原创 JavaScript之工厂模式
JavaScript之工厂模式/***************外js*********************///接口类，用来创建接口 var Interface = function (name) { if (arguments.length != 2) { throw new Error("创建的接口不符合标准，必须有两个参数，第二个参数是接
2016-11-06 22:00:49
472
原创 JavaScript之继承
JavaScript之继承js的继承_基于原型链方式的继承var Person = { name: "李华", say: function () { alert(this.name); }}function clone(obj) { var F = function () {}; F.prototype = obj; return n
2016-11-06 17:13:28
322
1
原创 JavaScript之闭包
引用块内容列表内容列表内容## 标题 ##JavaScript之闭包function cloSure(){ var num=10; var bar = function(){ num*=2; return num; }; return bar;};/*在C++或者java中，函数调用完成后需要进行内存的释放，此时对于C++或
2016-11-06 12:09:28
289
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人