- 博客(203)
- 资源 (7)
- 收藏
- 关注
转载 jQuery源码逐行分析学习01(jQuery的框架结构简化)
最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正。望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美化工作可能不够到位,也希望大家多多见谅!首先这篇文章要给大家分享的是:jQuery的框架结构,把框架结构简单化处理此处我所学习使用的jQuery版本是2.0.3版本(文件已经上传到我的GitHub...
2019-07-29 20:02:31 111
转载 vue v-cloak 解决页面加载时闪烁出现vue标签或者指令的问题
前沿在项目在开发中,经常会遇到当数据加载时vue的一些标签就会闪现,然后等数据加载完后消失,这时候就需要用到官网中提到的v-cloak来解决。首先说一下经常遇到的情况。step1,加载时遇到{{value.name}}闪烁,是因为你在渲染时是这么写的{{value.name}}step2,加载时遇到一个空的盒子里边什么也没有,是因为你在渲染时是这么写的解决办法那么,v-cloak要放在...
2019-07-19 18:12:17 306
原创 a标签限制宽度,超出的文本用...代替
<a href="">这是一个aaaaaaaaaaaaaaaaaaa</a>下面是css实现: .goods-name-limit{ width: 360px; display: block; overflow: hidden; word-break: keep-all; white...
2019-07-18 11:50:10 1200
转载 小tips: zoom和transform:scale的区别
一、IE和Chrome等浏览器与zoom还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:https://image.zhangxinxu.com/image/blog/201801/2018-01-09_002325.pngzoom的字面意思是“变焦”,摄影的时候常用到的一个概念。对于w...
2019-07-17 16:38:02 308
转载 利用GitLab的Webhooks功能,实现网站代码自动更新部署
根据业务需求,已部署GitLab-CE,网站代码上线流程如下图:开发者 push 推送代码之后,网站代码仍没更新,还需要操作多一步:登录前端web服务器,手动git pull 拉取更新的代码。这一步是运维的工作,很无趣又烦琐。幸亏,GitLab提供了Webhooks功能,可以轻松实现网站代码自动更新部署。一、webhooks原理Webhooks的原理Project webhooks ...
2019-05-17 17:01:03 1845
转载 Unexpected token: name (Dom7) [./node_modules/dom7/dist/dom7.modular.js:16,0][static/js/2.262bbb49a2
vue打包时报错报错解决是引入swiper4的原因,解决方式一:降低swiper的版本,可以用3.4.2但是swiper和swiper4之间的区别挺大,这样子改又要去看swiper3的api,重新调整代码,诸多不便。解决方式二:在webpack.base.conf.js中,resolve: {extensions: [’.js’, ‘.vue’, ‘.json’],alias: {...
2019-03-19 01:25:00 1348
转载 从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)
vue打包时报错报错解决是引入swiper4的原因,解决方式一:降低swiper的版本,可以用3.4.2但是swiper和swiper4之间的区别挺大,这样子改又要去看swiper3的api,重新调整代码,诸多不便。解决方式二:在webpack.base.conf.js中,resolve: { extensions: ['.js', '.vue', '.json'], ...
2019-03-19 01:20:35 375
转载 es6 javascript对象方法Object.assign()
1 基本用法Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。var target = { a: 1 };var source1 = { b: 2 };var source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1,...
2019-02-27 14:37:05 175
转载 一道被前端忽略的基础题,不信看你会几题
早上上班前,一如既往的翻看一下前端公众号,看下各位大佬的文章。翻 了十来分钟,咦,,一个题目还是比较经典的,为啥之前没见过。一看是2016年的文章,那是我还没入门呢…认真看了起来,,嗯嗯,,,这题目可以,比较考察综合能力,记录一下。原文链接http://www.cnblogs.com/xxcanghai/p/5189353.html复制代码function Foo () { getNa...
2019-02-20 16:56:30 288
转载 升级node版本后VUE项目启动报错
查看node版本:node -v原来的node版本是8.11.3升级后的node版本是10.13.0启动VUE项目 npm run dev报错:fs.js:129throw new ERR_INVALID_CALLBACK();^TypeError [ERR_INVALID_CALLBACK]: Callback must be a functionat maybeCal...
2019-02-15 15:17:20 5335
转载 前端性能优化之HTTP缓存策略
背景很多时候,当打开浏览器的开发者工具,查看网络请求,对于资源大小(Size)选项,除了有具体的数字大小,还有from memory cache、from disk cache字段之类出现。这里就有很多疑问,这些字段代表着什么意思?这些字段又是谁来决定的?缓存位置从字面意思理解,大概也能猜到,这些字段代表着缓存位置。 按优先级,Size选项字段可分为:from Service Work...
2019-02-15 10:20:35 723
翻译 前端人员必看周刊和公众号
前端技术每天都在发生翻天覆地变化,而且各种开源社区都会出现新的技术,而作为前端人员就需要不断的充实自己,这样才能避免在新潮流下落后,而本文将向大家介绍本人每周必看的一些周刊和公众号。周刊CSS Weekly专门讲解css相关知识,推送时间为周三,语言为英文。订购地址JSK Weekly这是一个专门讲解JavaScript技术的周刊,一般为周四凌晨推送,其主要语言为英文。一般分为Java...
2019-01-18 14:23:26 1053
转载 fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期,用户对300ms的延迟感觉不明显。但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受。那么,...
2019-01-18 12:09:41 683
原创 移动端滑动到页面80%的时候显示一个弹框
$(window).scroll(function(){ var _wrapperHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var _contentHei...
2019-01-14 18:53:58 317
转载 JavaScript new Date()在Safari上的坑
问题描述我们经常用yyyy-MM-dd HH:mm:ss格式表示日期,如2018-11-11 00:00:00,在js开发中也经常会把此格式字符串格式化为javascript Date类型,如new Date(‘2018-11-11 00:00:00’),不幸的是此操作在Safari浏览器(不论是Mac还是iPhone)上会报错,返回Invalid Date。如下图所示解决问题所以在new...
2019-01-08 15:37:20 1061
原创 移动端横向水平可滑动的nav导航条
<style> .mydeal-nav-brand::-webkit-scrollbar { display: none; } .mydeal-nav-brand { overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}</style><nav clas...
2018-12-21 15:24:13 4085
转载 jquery-animateNumber数字动画插件
jquery-animateNumber数字动画插件实例一、基础动画//html代码,下面例子相同。<p>This plugin only <span id="lines">0</span> lines of code.</p>//JS 代码,请把代码放入script标签内,下面例子相同$('#lines').animateNumber({...
2018-12-11 14:51:05 1416
转载 css 实现div内显示两行或三行,超出部分用省略号显示
一、div内显示一行,超出部分用省略号显示white-space: nowrap;overflow: hidden;text-overflow: ellipsis;二、div内显示两行或三行,超出部分用省略号显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;(...
2018-11-23 10:27:48 5181
转载 web app变革之rem
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font s...
2018-11-14 18:43:11 252
原创 jquery插件scrollfix,目标元素有padding,scroll的时候宽度变窄的问题
jquery插件scrollfix:滑动到某个位置浮动起来该jQuery插件主要解决滚动过程中固定某个元素,并支持到达某个位置后停止在那里随页面向上滚动,当滚回来时,重新固定起来。兼容IE6。我使用的是:$('#v3-banner-right').scrollFix({ distanceTop: $("#header").outerHeight() -200, ...
2018-11-14 18:05:50 380
原创 去除chrome自带的input的黄色底色
chrome在填入的时候是白底,但选取记录之后就变成了黄底。以下方法能去除黄底:方法:input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus {box-shadow:0 0 0 60px #ffffff inset; //设置底色-webkit-text-fill-color: ...
2018-11-13 10:39:34 1043
原创 input type = file上传图片限制大小、类型判断、像素判断
在项目中经常用到input标签来上传文件,而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。&lt;input type="file" name="files" id="file" o
2018-11-09 12:21:09 13329
转载 input搜索框获取焦点时,placeholder消失
/* 点击搜索框获取焦点 placeholder消失-开始 *//* WebKit browsers */input:focus::-webkit-input-placeholder {color: transparent;/* transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值 */}/* Mozilla Firefox 4 ...
2018-11-09 12:19:09 3936
转载 jquery中使用 delegate 代理 hover 失效
如下:$('.js-left-nav').delegate('li.menu-list', 'hover', function(){ console.log('s');});当我鼠标滑过元素的时候,触发不了回调函数。我将 hover 改为 click ,然后点击,可以触发回调函数。原来:因为 hover 不是标准的事件,因此无法直接使用 live 和 delegate 进行处理。...
2018-11-09 12:18:17 484
原创 解决Mac OSX下的chrome的option元素的padding、background-color不起用问题
&lt;select&gt; &lt;option&gt;Sushi&lt;/option&gt; &lt;option&gt;Blue cheese with crackers&lt;/option&gt; &lt;option&gt;Steak&lt;/option&a
2018-11-07 11:15:45 1013
转载 为 Laravel Mix 编译的 JavaScript 和 CSS 文件加版本号
加版本号,什么意思?我们来看 Github 网页源码中是怎样引入 JavaScript 和 CSS 文件的。<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-e04a23d39bf81b7db3c635177756ef51bc171feb440be9e174933c6eb5...
2018-10-24 18:52:17 1212
转载 Vue.js开发常见问题
Vue.js由于其语法简单,文档友好,而且是一个渐进式框架,因而得到了许多前端开发者的青睐.尤其对初学者而言,入门Vue.js比目前前端三大框架中的另外两个都容易的多.但是同时,简单并不意味着低级,把Vue.js弄会还是需要掌握不少东西的,尤其对于没有接触过webpack构建工具的初学者. 这里列举一些Vue.js常见的开发问题.1.Vue项目如何部署 Vue.js 的脚手架已经为我们配...
2018-10-24 16:22:56 200
原创 jquery-validate.js验证selcet、checkbox、radio
<form class="public-profile" action="/account/profile" method="post" id='public-profile-form'> <select name="like_product" class="form-control"> <option value=&q
2018-10-15 18:33:09 2211
转载 浅谈 Vue 中 computed 实现原理
虽然目前的技术栈已由 Vue 转到了 React,但从之前使用 Vue 开发的多个项目实际经历来看还是非常愉悦的,Vue 文档清晰规范,api 设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用 Vue 比React 开发效率更高,之前也有断断续续研读过 Vue 的源码,但一直没有梳理总结,所以在此做一些技术归纳同时也加深自己对 Vue 的理解,那么今天要写的便是 Vue 中最常...
2018-10-10 19:05:26 11630 2
转载 wordpress更改“固定链接”模式后,页面出现404原因及解决方法
Nginx 解决方案:在 /etc/nginx/config.d/mysit.conf文件的 loction \ {} 中添加if (-f $request_filename/index.html){ rewrite (.*) $1/index.html break;}if (-f $request_filename/index.php){ rewrite (.*) $1...
2018-10-09 18:32:28 760
转载 PHP数据库连接mysql与mysqli的区别与用法
一、mysql与mysqli的概念相关:1、mysql与mysqli都是php方面的函数集,与mysql数据库关联不大。2、在php5版本之前,一般是用php的mysql函数去驱动mysql数据库的,比如mysql_query()的函数,属于面向过程3、在php5版本以后,增加了mysqli的函数功能,某种意义上讲,它是mysql系统函数的增强版,更稳定更高效更安全,与mysql_query(...
2018-09-30 11:10:33 116
转载 PHP7 + MySQL: undefined function mysql_connect()
今天用了PHP7,发现和PHP5变化还挺大的,最大的就是MySQL的连接库变了。PHP5中使用mysql_connect()函数进行连接,但实际上,PHP5.5开始,MySQL就不推荐使用了,属于废弃函数PHP7中貌似已经彻底不支持了,根据官网说明,取而代之的是如下两个:本扩展自 PHP 5.5.0 起已废弃,并在将来会被移除。应使用 MySQLi 或 PDO_...
2018-09-30 11:03:45 3287
转载 Express中 res.json 和res.end 及res.send()
今天对某个restful API 进行测试过程发现并发性能很差,吞吐率差了非常多。结果发现是res.end 误用的情况。参考:express 官方文档 http://www.expressjs.com.cn/4x/api.html#res现在总结下 express响应中用到常用三种API:res.send()res.json()res.end()环境测试环境:express 4.14...
2018-09-28 16:45:07 2925
转载 Vue学习笔记进阶篇——vue-resource安装及使用
简介vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。本文是基于之前的文章(Vue学习笔记进阶篇——vue-cli安装及介绍)vue-cli脚手架工具的。基本语法引入vue-resource后,可以基...
2018-09-26 11:39:40 6554
原创 Node+Express+Vue+Element+MySQL简易实现前后端分离
源码1、安装node环境具体安装教程请参考http://nodejs.cn/2、塔建Vue前端项目使用Vue官网提供的vue-cli脚手架vue-cli命令行工具# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack nevem# 安装依赖,走你$ cd neve...
2018-09-25 19:26:42 9254 6
转载 MySQL下载安装详情教程
原文:https://blog.csdn.net/qq_41307443/article/details/798395581.下载MySQL数据库可以访问官方网站:https://www.mysql.com/2.点击DOWNLOADS模块下的Community模块下的MySQL Community Server进行下载。由于目前最新版本是:MySQL Community Server 5.7...
2018-09-25 16:03:01 298
原创 vue-cli webpack打包发布到nginx服务器,nginx.conf配置
server { listen 80; root /var/www/web/; index index.php index.html index.htm; server_name www.web.com; location / { try_files $uri $uri/ /index.ph...
2018-09-20 14:46:24 1113
原创 vue-cli中使用uiv
为了避开即使用vue,又使用jquery的尴尬,找了uiv这个基于vue和bootstrap写的组件UI。 https://uiv.wxsm.space/getting-started/首先把遇到的坑说下: uiv用的是bootstrap3,然而使用cnpm install bootstrap –save下载下来的是bootstrap4版本,所以显示出来的ui是乱的。 如果已经安装了bo...
2018-09-17 17:13:44 1608
原创 使用淘宝 NPM 镜像
大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ npm install -g cnpm --registry=h...
2018-09-11 17:26:02 138
转载 js模态框实现原理
<!DOCTYPE><html><head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visibility: hidden; position: absolute; /* 使用绝对定位或固定定位 */ ...
2018-09-04 19:02:53 4272 4
wendu.ajaxhook.min
2017-12-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人