- 博客(110)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 传统mvc项目，前后端不分离项目让静态资源走cdn
静态资源走cdn，能提升网站的响应速度，节约资源。在现在纯前端项目上，可以让整个项目静态资源走cdn，nginx代理跟后端交互，那前后端未分离的项目，怎么让静态资源走cdn呢？先说下springboot+thymeleaf的项目，springboot框架自带VersionResourceResolver类，该类是处理静态资源版本控制的一个类，主要用于实现资源缓存 busting。
2024-03-08 17:19:18
908
原创 js垃圾回收机制
js的垃圾收集JavaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。而在C和C++之类的语言中，开发人员的一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题的一个根源。在编写JavaScript程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。
2022-05-09 15:29:24
467
原创 js的事件循环（event loop ），宏任务和微任务
setTimeout(function() { // 异步宏任务 console.log('1');})new Promise(function(resolve) { // 同步 console.log('2');}).then(function() { // 微任务 console.log('3');})// 同步console.log('4');//打印顺序 2 4 3 1直接上代码。宏任务：script全部代码、setTim.
2021-11-23 22:50:11
426
原创 mockjs在vue项目中的使用，不影响测试环境和生产环境
mockjs在项目中的使用现状：后台管理系统中，前后端进度可能会出现不一致的情况，前端的许多开发需要依赖后端接口开发的完成，这样就会造成前端的被动状态，会造成迭代前期前端时间充裕，迭代后期前端时间比较紧张（联调时间基本都在前端）目的：让迭代更顺畅，解决前后端进度不一致的情况，解决前端必须依赖后台接口的完成才去开发的现状。不影响现有代码具体实现：为什么使用mockjs也许想通过json文件去模拟后台接口的数据，但是获取到的数据是固定的，而且很局限，增删改的接口怎么去实现？Mock
2020-07-01 20:56:18
3171
2
原创 浏览器缓存之http缓存和service worker
一、什么是浏览器缓存以往谈起性能优化，大部分时候都是从后端聊起，数据库的设计，缓存的使用等。其实前端在性能优化方面可做的也很多，如：减少http请求数、使用cdn、压缩合并css/js等，浏览器缓存就是把已经请求过的Web资源进行存储，当用户刷新页面或者下次访问时候，浏览器根据缓存机制决定是否需要向服务端发起请求。 所以缓存可以带来：减少网络带宽消耗、降低服务器压力、减少网络延迟，加快页面打开速度等优点二、浏览器缓存有哪些1、http缓存是基于HTTP协议的浏览器文件级缓存机制。2、w...
2020-06-27 14:10:43
2845
原创 long.js的使用
如果是node启动的项目 直接npm install long安装就可。若传统项目，则把webpack打包之后的long.js引入到页面直接使用。下面是对long的or运算和and运算又封装的方法//long类型或运算function longOr(arr) { var arrLen = arr.length; if (arrLen < 1) { ...
2018-12-29 16:19:20
4315
原创 webpack小记
1、webpack是什么？Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源webpack的安装2、首先要确保安装了node其次可以全局安装，可以项目中安装npm install webpack (--g)3、webpack使用（1）执行命令 webpack main.js bundle.js...
2018-12-16 17:30:31
171
转载 vue-cli解析
上次给大家分享的是用vue-cli快速搭建vue项目，虽然很省时间和精力，但想要真正搞明白，我们还需要对其原理一探究竟。大家拿到一个项目，要快速上手，正确的思路是这样的：首先，如果在项目有readme.md的情况下，大家要先读readme，项目的一些基本介绍，包括项目信息、运行的脚本、采用何种框架，以及项目维护者等信息通常都会有。一般在git上维护的项目都会有readme.md，不熟悉mark...
2018-12-08 23:00:24
262
1
原创 js桥接模式
桥接模式：在系统沿着多个维度变化的同时，又不增加复杂度并已达到解耦。比如：鼠标移上去事件，改变背景和颜色function g(tag){ return document.getElementByTagName(tag);}var spans=g('span');spans[0].onmouseover=function(){ this.style.color='re...
2018-12-02 15:17:47
268
原创 js装饰者模式
装饰者模式：在不改变原对象的基础上，通过对其进行包装扩展（添加属性或者方法）使原有对象可以满足用户的更复杂需求。var decorator = function(input,fn){ //获取事件源 var input = document.getElementById(input); //若事件源已经绑定事件 if(typeof input.onclick === 'functio...
2018-11-18 16:40:42
304
原创 js设计模式 套餐服务——外观模式
外观模式：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在js中有时也会用于对底层结构兼容性做统一封装来简化用户使用。兼容模式<a id="myinput">click</a><script>function addEvent(dom, type, fn) { // 对于支持DOM2级事件处理程序...
2018-11-18 15:12:19
208
原创 js设计模式单例模式
单例模式：又称单体模式，是只允许实例化一次的对象类。有时也用一个对象来规划一个命名空间，井井有条地管理对象上的属性和方法 。命名空间的管理员防止变量或方法重复var ming={ g:function(id){ return document.getElementById(id); }, css:function(id,key,value){...
2018-11-11 16:02:41
108
原创 js设计模式语言之魂——原型模式
原型模式：用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。基于原型链实现对象之间的继承，这种继承是基于一种对方法或属性的共享，而不是对方法和属性的复制。原型模式就是将可复用的、可共享的、耗时大的从基类中提出来然后放在其原型中，然后子类通过组合继承或者寄生组合式继承而将方法和属性继承下来，对于子类中那些需要重写的方法进行重写，这样子类创建的对象既具有子类的属性和...
2018-11-11 14:24:34
144
原创 js设计模式分既是合——建造者模式
建造者模式：将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示。工厂模式主要是为了创建对象实例或者类簇，关心的是最终产出的是什么。不关心你创建的整个过程，仅仅需要知道最终创建的结果。所以通过工厂模式我们得到的都是对象实例或者类簇。然而建造者模式在创建对象是更为复杂一些，虽然其目的也是为了创建对象，但他更多关心的是创建这个对象的整个过程，甚至于创建对象的每一个细节。比...
2018-11-10 09:46:09
133
原创 js设计模式抽象工厂模式
抽象工厂模式(Abstract Factory) 通过类的抽象使得业务适用于一个产品类簇的创建，而不负责创建某一类产品的实例。JS中是没有直接的抽象类的，因此我们需要在类的方法中抛出错误来模拟抽象类，如果继承的子类中没有覆写该方法而调用，就会抛出错误。//汽车抽象类var Car = function(){};Car.prototype = { getPrice: functi...
2018-11-06 22:43:51
186
原创 对引入的axios进行封装
直接上代码/** * 封装axios * author:taowj * 用法案例 * httpAxios.post(url, params, function (response) { * if (response.status >= 200 && response.status <= 300) { * //成功 * }e...
2018-10-31 19:39:22
225
原创 js设计模式之工厂方法模式
对于创建多类对象，简单工厂就不太实用了。通过工厂方法模式可以轻松的创建多个类的实例对象，而且创建对象的方式避免了使用者与对象类之间的耦合，用户不必关心创建该对象的具体类，只需调用工厂方法即可。安全的工厂方法模式var Factory=function(type,content){ if(this instanceof Factory){ var s = ne...
2018-10-28 22:49:02
996
原创 js设计模式简单工厂模式
简单工厂模式又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类的对象。比如提示弹窗类function createPop(type,text){ //创建一个对象，并对对象拓展属性和方法 var o = new Object(); o.content = text(); o.show = function(){ ...
2018-10-27 22:45:02
179
原创 js设计模式封装 继承 多态
创建一个类，可在类内部通过this增加属性和方法，也可通过原型增加，如下var Book = function(id, bookname, price) { this.id = id; this.bookname = bookname; this.price = price;}Book.prototype.display = function() { //...
2018-10-27 21:38:56
159
原创 js设计模式第一章 读书笔记
1、简单的验证jsfunction checkName(){ //验证姓名}function checkEmail(){ //验证邮箱}function checkPassword(){ //验证密码}上面的代码，创建了3个全局变量，有可能被别人覆盖，或者把别人的代码覆盖。怎么减少被覆盖的问题呢？如下：2、用对象收编变量var CheckObj...
2018-10-26 23:07:21
123
原创 js转义特殊字符
直接上代码function jsEncode(url) { if(url){ url = url.replace(/\%/g,"%25"); url = url.replace(/\s/g,"%20"); url = url.replace(/\+/g, "%2B"); url = url.replace(/\#/g,...
2018-08-01 16:20:34
3379
原创 springboot和mybatis整合(单多表)
1、MyBatis介绍MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code，并且改名为MyBatis，实质上Mybatis对ibatis进行一些改进。MyBatis是一个优秀的持久层框架，它对jdbc的操作数据库的过程进行封装，使开发者只需要关注 SQL 本身，而不需要花费精力去处理例...
2018-07-01 18:30:03
2406
原创 spring boot mvc初学 注册登录发表文章
1、springboot项目搭建File new project选择spring initializr,如下图 点击下一步，输入name,group,aftifact等选项，别的默认即可，点击下一步选择相应的web、jpa、等需要的东西。点击下一步，构建完成。会自动生成一些文件和文件夹。在java和resource两个文件夹下分别创建相应的文件夹，如图所示Model实体Dao操作数据库Servic...
2018-06-19 22:26:39
454
2
原创 vue+photoswipe
之前pc端时候，点击图片放大功能封装了一个插件。思路是这样的，点击图片时候，获取图片地址，然后获取真实图片的大小，判断下屏幕大小，如果图片大小大于屏幕大小，则图片宽度设为和屏幕宽度一样。如果小于屏幕宽度，则屏幕宽度减去弹出图片的宽度，再除以2居中对齐。高度也是类似。大致思想如此。到手机端时候，需求说每个组里的图片不但能放大，放大后还能左右翻转。好吧，找个插件吧，于是开始了vue+photoswip
2017-11-24 20:39:00
6787
2
原创 react native用Listview从列表页跳到详情页
只写了下功能，样式没有写，大神勿笑。一些需要改进 的地方请大神指点。qq:274501366话不多说直接上代码index.android.js'use strict';import React, {Component} from 'react';import { AppRegistry, Image, StyleSheet, Text, View, Tou
2017-09-16 11:38:14
3345
原创 react native Navigator
下面代码来自http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/
2017-09-13 15:24:13
625
原创 react native之listview加下拉刷新上拉分页
直接上代码var REQUEST_URL = 'xxxx&page=';import React, { Component } from 'react';import { AppRegistry, Image, StyleSheet, Text, View, ListView, RefreshControl,} from 'react-native';
2017-09-10 16:01:20
2136
转载 使用mysql的limit进行分页时出现重复问题
使用MySQL的limit进行分页时，例如 select * from table_1 where 1=1 limit m,n这样后面的页可能会出现重复数据，这时可以通过加入order by 子句来解决这种情况， select * from table_1 where 1=1 order by field_1 limit m,n但是这里需要特别注意，如果field_1字段有相同值的情况
2017-07-16 13:03:28
3404
原创 vue之form提交
helloform_Vue var vm = new Vue({ el: '.hello', data: { inputtext:{} }, methods: { submit: function() { co
2017-06-11 14:37:34
61889
2
原创 初识vuejs
一个不懂前端的php不是一个好民工。这几年一直以为在php程序猿中我js(jquery)是不错的。写交互、特效都可以搞定。这就面临一个问题，技术评级时候我该按前端去评还是后端去评。好啦。闲话不多说了。为什么要选择vue去学习，返回json数据然后去循环就可以了，不需要像jquery那样在js中去拼接html。当然如果你想兼容ie8以下的浏览器，jquery还是很好的选择。
2017-05-24 15:46:49
255
转载 初识swoole
<?phpclass Server{private $serv;public function __construct(){$this->serv = new swoole_server("0.0.0.0", 9501);$this->serv->set(array('worker_num' => 8,'daemonize' => false,'max_request' =>
2017-04-23 20:46:14
282
原创 ubuntu16.04安装lamp和swoole
安装Apache2sudo apt-get install apache2在/etc/apache2/sites-available目录下有000-default.conf文件将000-default.conf文件复制一份叫做demo.conf(sudo cp 000-default.conf demo,conf)并修改ServerName demo.hd创建一个软连接将dem
2017-04-22 22:07:04
1654
1
原创 自己制作页面编辑器（js+css）
编辑器都有什么功能。文字加粗，上传图片，改变大小等等。此例仅包含文字加粗和图片上传。首页你要知道html标签中的contenteditable="true"属性，不知道的自行去百度。（可让div可编辑）其次知道js的document.execCommand()，不知道的自行去百度(可以实现浏览器菜单的很多功能. 如保存文件,打开新文件,撤消、重做操作…等等. 有了这个方法,就可以很容易的实
2017-03-03 20:22:09
4729
原创 js删除特定节点
直接上代码function clear(){ var head = document.getElementsByTagName('head')[0].children; for(var i=0;i<head.length; i++){ if(head[i].innerHTML){ if(head[i].innerHTML.indexOf("NREUM") > 0){ do
2016-12-27 19:58:27
2547
原创 krpano个性化定制
krpano个性化定制皮肤定制，多变形热点，缩略图分组。重力感应等等。http://thehill.me/twj/1/http://thehill.me/twj/1/pano_new需要的联系：qq:274501366
2016-11-21 22:30:42
1356
1
原创 php分表mysql
直接上代码<?php ini_set('memory_limit', '-1'); $con=mysql_connect("127.0.0.1","root","root");mysql_query("set names 'utf8' ");mysql_query("set character_set_client=utf8");mysql_query("set characte
2016-11-15 12:46:26
650
原创 根据krpano切片还原成全景图
分享部分代码$id = '1.tiles';$f = array('b', 'd', 'f', 'l', 'r', 'u');$root = dirname(__file__) . '/' . $id;$max = 0;$lists = array();// 获得最大层数和最大层数内的图片集getDownloadImage($root, $arr);
2016-10-25 21:35:58
6331
原创 mongodb简单命令
启动mongodb是进入mongodb的bin目录，输入mongo新建数据库 use dbname; //选择数据库(dbname:对应的数据库名) db.createCollection("users");//创建一个集合db.users.insert({userid: "admin", password: "123456"});//插入数据nodejs和mongod
2016-10-16 22:34:45
199
原创 krpano1.196案例分享
知识点：1、krpano皮肤自定义2、krpano缩略图分组3、krpano菜单导航4、krpano分享到微博5、krpano声音控制6、krpano地图链接案例地址：http://thehill.me/twj/1/交流qq:274501366
2016-10-03 10:18:51
2958
1
service-worker-express.rar
2020-06-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人