- 博客(97)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 javascript设计模式----命令模式
命令模式：将请求与实现解耦并封装成独立对象，从而使不同的请求对客户端的实现参数化。var viewCommand = (function(){ var tpl = { product : [ '<div>', '<img src="{#src#}" />', '<p>{#img#}</p>', '<div/&...
2024-04-16 18:32:44
1
原创 javascript设计模式----职责链模式
职责链模式：解决请求的发送者与请求的接受者之间的耦合，通过职责链的多个对象对分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。半成品需求场景：给表单输入框添加事件，做输入提示和输入验证处理，完成这类需求要想服务器端发送请求还要在原有页面中创建其他组件，但是具体输入框有哪些还不确定。做法：把事件源，异步请求，创建组件模块解耦。完成一个需求要做很多事情，那么把每件事情独...
2024-04-16 18:32:25
3
原创 javascript设计模式----观察者模式
观察者模式：又被称作发布-订阅者模式或消息几支，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。观察者模式有3个接口，注册信息接口，发布信息接口，移除信息接口注册信息接口：判断消息是否存在于消息容器_messages中，如果不存在，那么将该消息类型推入到消息容器_messages中，注意这里推入的是数组形式的消息，所以_massages[type]=[fn]。如果该消息已存在于消息容...
2024-04-16 18:32:07
2
原创 javascript设计模式----桥接模式
桥接模式：在系统沿着多个维度变化的同事，又不增加其复杂度并已达到解耦。有时页面中的一些小小细节改变常常因逻辑相似导致大片臃肿的代码，让页面苦涩不堪，...
2024-04-16 18:31:22
161
原创 javascript设计模式----装饰者模式
装饰者模式：在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户的更复杂需求。这样一个场景，用户信息表单需求变化，以前是当用户点击输入框时，如果输入框输入的内容有限制，那么气候变显示用户输入内容的限制格式的提示文案，现在需要加一条，默认输入框上边显示一行提示文案，当用户点击输入框时文案消失。//以前写的代码var telInput = document.ge...
2024-04-16 18:31:10
原创 javascript设计模式----适配器模式
适配器模式：将一个类（对象）的接口（方法或者属性）转化成另外一个接口，以满足用户需求，使类（对象）之间的接口不兼容问题通过适配器得以解决。更换框架当前页面所使用的框架(A)不能支持更多特效，需要换另一个框架Jquery，这样需要将所有页面重新用Jquery重写一次吗？使用适配器模式不需要重写了。两种情况。第一种，如果A框架与Jquery相似的话，那么所做的事情就简单多了。window.A...
2024-04-16 18:26:34
2
原创 javascript设计模式----外观模式
外观模式：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。一个简单的例子：封装document.getElementById()，这样每次获取元素时都不需要写那么多code了。function g(id){ return document.getElementById(id);}解决兼容性问题在Javascript中有时也用于对底层结构兼容性...
2024-04-16 18:26:18
原创 javascript设计模式----单例模式
单例模式，只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间，井井有条地管理对象上的属性与方法。创建一个小型代码库var A = { Util : { util1_method1:function(){}, util1_method2:function(){} }, Tool:{ tool_method1:function(){}, tool_method2...
2024-04-16 18:26:00
2
原创 javascript设计模式----原型模式
原型模式：用原型实例指向创建对象的类，使这些类共享原型对象的方法与属性，使用于创建新的对象的类共享原型对象的属性以及方法。焦点图为例：假设页面中有很多焦点图，那么我们要实现这些焦点图最好的方式就是通过创建对象来一一实现。并且，切换动画一般是多样化的，有可能上下切换，也有可能左右切换，或者渐隐切换，放缩切换等。因此我们应该抽象出一个基类，让不同特效类去继承这个基类，然后对于差异化的需求通过重写这些...
2024-04-16 18:25:46
2
原创 javascript设计模式----建造者模式
建造者模式：将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示创建应聘者实例为例，我们不仅仅要创建应聘者这个实例，我们还要在创建过程中注意这位应聘者都有哪些兴趣爱好，姓名等信息，所期望的职位等等。//创建一位人类var Human = function(param){ //技能 this.skill = param && param.skill ||...
2024-04-16 18:25:23
8
原创 javascript设计模式----抽象工厂模式
抽象工厂模式：通过对类的工厂抽象使其业务用于对产品类簇的创建，而不负责创建某一类产品的实例。抽象类是一种声明但不能使用的类。抽象工厂模式：定义了一种类，并定义了改类所必备的方法，如果在子类中没有重写这些方法，那么当调用时能招到这些方法变回报错。var Car = function(){}Car.prototype = { getPrice:function(){ return new...
2024-04-16 18:24:05
原创 javascript设计模式----工厂方法模式
工厂方法模式：通过对产品类的抽象使其创建业务主要负责用于创建多类产品。上回讲到的简单工厂模式的第一种方案有所缺陷，缺陷是：如果增加了新类型的产品，必须修改两处以上的地方，即添加新的类以及修改工厂方法里添加新的返回类型。//创建安全模式类，避免忘记使用newvar Factory = function(type,content){ if(this instanceof Factory){ ...
2024-04-16 16:52:04
3
原创 javascript设计模式-----简单工厂模式
简单工厂模式：又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。创建不同类型的对象比如每种体育用品都有相关的介绍。var Baskeball = function(){ this.intro = '篮球'}Basketball.prototype = { getMember : function(){ console.log('每个队伍需要5名球员') }}v...
2024-04-16 16:51:35
6
原创 javascript设计模式----对象
为什么要用到对象。对象可以收编变量，使得页面中的全局变量减少比如，以下代码在页面中创建了3个全局变量。var checkName = function(){};var checkEmail = function(){};var checkPassword = function(){};我们可以使用对象来收编这些变量从而达到减少全局变量的效果。var CheckObject = {...
2024-04-16 16:41:24
26
原创 vue批量导入模块
在基于vue-element-admin的开发时，每添加一个路由文件就要到另外一个文件里import相应的模块，这样开发起来不友好，如果有一种方法批量导入这些新增的文件，开发起来就方便多了。这时我们可以使用require-context()方法，详见。我们约定一个规则就是路由文件由export default抛出路由配置，代码也是判断是否是由export default来筛选导入的。src/u...
2020-02-23 14:16:30
2210
原创 解决bootstrap-table表头与数据不对齐的问题
使用bootstrap-table的时候，有时发现表头与数据不对齐的问题，特别是列很多或者浏览器有缩放时比较明显。查看源码bootstrap-table.js你会发现，表头是根据tbody的第一行的每一个元素的innerWidth()来定宽度的，然而检查元素发现，innerWidth()总取整数，而忽略的实际的小数点，导致列越多，表头偏移得越明显，修改源码（将innerWidth()用getBo...
2019-12-10 09:30:08
1313
1
原创 解决blur后不能立刻focus的问题
最近碰到一种情况就是在比较低版本的chrome，input框blur后不能立即focus到另一个input框的问题，找了很久，算是找到原因，就是我blur后需要重新绑定input的事件的时候绑定了eval(‘funName()’)或者window方法名这个方法，导致另一个blur框失焦（原理并不懂，反正注释掉之后就可以，希望路过的大佬可以解答一下）。解决方法1、使用setTimeout将绑定的...
2019-11-12 10:31:44
560
原创 小程序滚动切换页码组件
以下是基于小程序wux框架中refresh组件拓展的小程序滚动切换页码组件。用法<page-list id="wux-refresher" elid="biddingList" isShowPage="{{false}}" bind:scrollbot="scrollbot" bind:refresh="onRefresh"> <template is="b...
2019-11-09 14:31:50
639
原创 解决bootstrap-table固定列checkbox选中没效果问题
原理：click输入框之后，1、先blur失去焦点，2、然后设置input readonly属性3、然后focusfocus之后去掉readonly代码： var parentDiv = $("#parentDiv"); parentDiv.on("focus",".codeScan", function(e){ var that = $(th...
2019-11-09 14:29:14
4341
原创 处理移动端iframe中input框的一些总结
最近项目中的移动端使用iframe作为字容器，在处理input遇到一下一些问题。1、点击input时，input不会自动显示在键盘上方。解决方法：当focus将输入框呈现在可视位置。$("iframe").contents().on('focus',"input[type=\"text\"],textarea", function(){ var target = this; ...
2019-11-03 17:16:00
617
原创 vue-element-admin源码分析
这两天看花裤衩大大的手摸手系列，使用vue+element+vuex+axios实现了一个后台模板（项目地址），在阅读源码的过程中收益匪浅，以下做一些笔记。（由于是学习大大项目的思想，所以略去了很多大大的代码）。这里只是做一个登陆页面，然后能提交数据给后台并能接收数据，暂时没有做路由守卫同跳转。首先配置并安装好好所需要的main.jsimport Vue from 'vue'import ...
2019-11-01 11:12:19
12683
1
原创 使用hammer.js实现图片手势缩放及算法解释
关于图片缩放，这里先讲一下算法。transform的缩放是指长宽的缩放，不是面积的缩放。//transform-origin的初始位置是在元素的正中间，而缩放，平移，这个位置会跟着改变。transform的matrix值：matrix(a,b,c,d,e,f):其中a代表水平x的缩放，d代表垂直y的缩放，e代表水平偏移值，f代表垂直方向的偏移值。b，c这里没有用到，暂时不讲。双指缩放算法：...
2019-03-15 18:00:25
9929
12
原创 mysql在计算机管理的服务里启动不了
计算机管理不能启动mysqlERROR 2003 &amp;amp;amp;lt;HY000&amp;amp;amp;gt; Can't connect to MYSQL server on 'localhost'&amp;amp;amp;lt;10061&amp;amp;amp;gt;本地计算机上的MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止？
2019-03-13 21:26:18
14223
1
原创 微信分享带图片，描述（asp版）
最近为一个aspcms网站添加微信分享带图片，描述的功能。由于官方提供的代码里没有提供asp版本的源码，所以需要自己研究。根据官网提供的代码，参考php版本的源码风格，我的源码文件目录为：代码如下：我们先来看access_token.asp的文件&lt;%response.end%&gt;{"access_token":"your access_token","expire_
2018-12-26 12:49:33
2729
7
原创 微信分享带图片，描述（php版）
最近在为一个php网站添加微信分享带图片，描述的功能，这个功能之前了解过，但并没有彻底实现过，这个功能需要认证的公众号支持。第一步：在已经认证的公众号配置安全域名（网上很多教程）第二步：在微信公众平台文档获取示例源码，阅读文档，如果时间紧迫可直接阅读源码第三步：阅读源码并按需求修改源码
2018-12-26 11:43:37
3775
1
原创 Vuex基本使用
当页面有很多个组件之间需要进行复杂的数据传递时时，如果我们将公共数据放在一个公共地方统一管理，当一个组件改变了公共的数据时，其他组件页面就能感觉到（获取到改变后的数据），这是我们用到VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单可理解为一个集中管理数据的一个地方。官方图：...
2018-09-21 17:52:16
228
原创 Vue插槽
插槽插槽内可以包含任何模板代码，包括 HTML，其他组件。当一个父组件需要传dom元素给子组件可以使用插槽<template> <div> <v-home> <h1>父组件传的内容</h1> </v-home> </div></tem
2018-09-21 09:55:53
368
原创 Vue请求数据
使用vue-resource请求数据 1、安装vue-resource npm install –save vue-install2、在入口文件main.js引用并使用import Vue from 'vue'import App from './App.vue'import VueResource from 'vue-resource'//引入VueResource Vue.u...
2018-09-20 14:17:17
405
原创 vue实例生命周期
生命周期/生命周期钩子函数 组件挂载以及组件更新组件销毁时候出发的一些列方法，这些方法叫做生命周期函数&amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;div id=&amp;amp;quot;life&amp;amp;quot;&amp;amp;amp;gt; 生命周期函数的演示 ---{{msg}}
2018-09-20 11:00:59
259
原创 vue路由基础使用方法
vue路由配置 1、安装npm install --save-dev vue-router2、在main.js引入并使用（Vue.use(VueRouter）import VueRouter from 'vue-router' //引入VueRouter Vue.use(VueRouter) //使用VueRouter 3、...
2018-09-19 11:17:05
346
原创 vue组件
组件使用分3步引入组件 import Home from ‘./components/Home’挂载组件 components:{‘v-home’:Home’}在模板中使用:&amp;amp;amp;amp;lt;v-home&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/v-home&amp;amp;amp;amp;gt;新建一个components文件夹存放组件 src/
2018-09-18 22:37:52
745
2
原创 Vue数据双向绑定
数据双向绑（vmmv)model改变促使view改变，view改变促使model改变 用 v-model绑定数据，然后通过input改变该数据，model里的数据会被改变，通过methods改变model的数据，input里的数据会发生变化， 代码如下&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt;
2018-09-18 21:39:36
201
原创 Vue基础
安装Vue： 1、必须安装node.js，安装git（这个可以不用，不过习惯了） 2、安装webpack·npm install -g webpack 3、使用淘宝镜像（用cnpm命令代替npm，这个也可以不用安装，只是使用npm安装依赖包是会慢那么一点）：npm install -g cnpm --registry=https://registry.npm.taobao.org 4、安装...
2018-09-18 17:31:33
228
原创 Vue 安装与配置
安装Vue： 1、必须安装node.js，安装git（这个可以不用，不过习惯了） 2、安装webpack·npm install -g webpack 3、使用淘宝镜像（用cnpm命令代替npm，这个也可以不用安装，只是使用npm安装依赖包是会慢那么一点）：npm install -g cnpm --registry=https://registry.npm.taobao.org 4、安装...
2018-09-18 15:19:05
1505
原创 webpack4.x配置过程（二）
此文根据阮一峰大神的demo结合自己的配置项目改编而成：github 1、demo01，这个是一个非常简单的demo，请仔细实践上一篇。2、dem02，配置多入口文件： 2.1、新建src/search.js，输入document.write(‘i am search’); 2.2、dist/index.html 加上：&lt;script src="./bundle2.js"&gt...
2018-09-12 21:15:30
278
原创 webpack4.x配置过程（一）
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：入口(entry)，输出(output)，loader，插件(plugins)，其次还有就是mode(模式)。 以下是官方文档解析： entry point指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 output 属性告诉...
2018-09-12 21:11:52
584
原创 搭建一个es6开发环境
本文基于《ES6零基础教学 解析彩票项目》，视频地址：https://coding.imooc.com/class/evaluation/98.html#Anchor。 这里的编译环境是 gulp+webpack+node+express+express-generator。 准备：安装node.js，git此处略。 开始： 构建文件目录（此处用git bash）逐一输入命令：mkdi...
2018-09-12 09:27:29
761
原创 使用php发邮件三（邮件找回密码）
找回密码流程： 填写表单–&amp;amp;gt;提交表单–&amp;amp;gt;接收邮件–&amp;amp;gt;点击验证链接–&amp;amp;gt;完成修改密码提交表单后，后台过程： 1、检测是否开启邮件服务 2、检测验证码 3、判断邮箱格式 4、检测密码长度 5、检测两次输入密码是否相同 6、通过传过来的类型以及邮箱来查找用户 7、判断数据库是否有该用户，不存在则打印错误信息 8、若存在该用户，将传过来的密码加密
2018-07-06 22:24:16
2033
1
原创 使用php发邮件二（发邮件流程）
参考：https://www.jb51.net/article/112291.htm https://blog.csdn.net/zb3288/article/details/1929438 https://blog.csdn.net/wsxqaz/article/details/6307906 发送邮件过程： 1、配置好你的邮箱服务（qq邮箱为例） 2、使用socket连接，创建一个套...
2018-07-06 22:21:26
773
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人