黑面狐 sa~-CSDN博客

转载 jQuery源码逐行分析学习01(jQuery的框架结构简化)

最近在学习jQuery源码，在此，特别做一个分享，把所涉及的内容都记录下来，其中有不妥之处还望大家指出，我会及时改正。望各位大神不吝赐教！同时，这也是我的第一篇前端技术博客，对博客编写还不是很熟悉，美化工作可能不够到位，也希望大家多多见谅！首先这篇文章要给大家分享的是：jQuery的框架结构，把框架结构简单化处理此处我所学习使用的jQuery版本是2.0.3版本(文件已经上传到我的GitHub...

2019-07-29 20:02:31 100

转载 vue v-cloak 解决页面加载时闪烁出现vue标签或者指令的问题

前沿在项目在开发中，经常会遇到当数据加载时vue的一些标签就会闪现，然后等数据加载完后消失，这时候就需要用到官网中提到的v-cloak来解决。首先说一下经常遇到的情况。step1,加载时遇到{{value.name}}闪烁，是因为你在渲染时是这么写的{{value.name}}step2,加载时遇到一个空的盒子里边什么也没有，是因为你在渲染时是这么写的解决办法那么，v-cloak要放在...

2019-07-19 18:12:17 266

原创 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 1163

转载小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 281

转载利用GitLab的Webhooks功能，实现网站代码自动更新部署

根据业务需求，已部署GitLab-CE，网站代码上线流程如下图：开发者 push 推送代码之后，网站代码仍没更新，还需要操作多一步：登录前端web服务器，手动git pull 拉取更新的代码。这一步是运维的工作，很无趣又烦琐。幸亏，GitLab提供了Webhooks功能，可以轻松实现网站代码自动更新部署。一、webhooks原理Webhooks的原理Project webhooks ...

2019-05-17 17:01:03 1681

转载 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 1295

转载从零开始搭建自己的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 350

转载 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 114

转载一道被前端忽略的基础题，不信看你会几题

早上上班前，一如既往的翻看一下前端公众号，看下各位大佬的文章。翻了十来分钟，咦，，一个题目还是比较经典的，为啥之前没见过。一看是2016年的文章，那是我还没入门呢…认真看了起来，，嗯嗯，，，这题目可以，比较考察综合能力，记录一下。原文链接http://www.cnblogs.com/xxcanghai/p/5189353.html复制代码function Foo () { getNa...

2019-02-20 16:56:30 258

转载升级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 5143

转载前端性能优化之HTTP缓存策略

背景很多时候，当打开浏览器的开发者工具，查看网络请求，对于资源大小（Size）选项，除了有具体的数字大小，还有from memory cache、from disk cache字段之类出现。这里就有很多疑问，这些字段代表着什么意思？这些字段又是谁来决定的？缓存位置从字面意思理解，大概也能猜到，这些字段代表着缓存位置。按优先级，Size选项字段可分为：from Service Work...

2019-02-15 10:20:35 682

翻译前端人员必看周刊和公众号

前端技术每天都在发生翻天覆地变化，而且各种开源社区都会出现新的技术，而作为前端人员就需要不断的充实自己，这样才能避免在新潮流下落后，而本文将向大家介绍本人每周必看的一些周刊和公众号。周刊CSS Weekly专门讲解css相关知识，推送时间为周三，语言为英文。订购地址JSK Weekly这是一个专门讲解JavaScript技术的周刊，一般为周四凌晨推送，其主要语言为英文。一般分为Java...

2019-01-18 14:23:26 1038

转载 fastclick 解决移动端click事件300ms延迟

移动端click 事件延迟300ms一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。那么，...

2019-01-18 12:09:41 669

原创移动端滑动到页面80%的时候显示一个弹框

$(window).scroll(function(){ var _wrapperHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var _contentHei...

2019-01-14 18:53:58 301

转载 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 1016

原创移动端横向水平可滑动的nav导航条

2018-12-21 15:24:13 4051

转载 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 1370

转载 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 5146

转载 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 235

原创 jquery插件scrollfix，目标元素有padding，scroll的时候宽度变窄的问题

jquery插件scrollfix：滑动到某个位置浮动起来该jQuery插件主要解决滚动过程中固定某个元素，并支持到达某个位置后停止在那里随页面向上滚动，当滚回来时，重新固定起来。兼容IE6。我使用的是：$('#v3-banner-right').scrollFix({ distanceTop: $("#header").outerHeight() -200, ...

2018-11-14 18:05:50 364

原创去除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 950

原创 input type = file上传图片限制大小、类型判断、像素判断

在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。&lt;input type="file" name="files" id="file" o

2018-11-09 12:21:09 13203

转载 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 3866

转载 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 464

原创解决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 977

转载为 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 1174

转载 Vue.js开发常见问题

Vue.js由于其语法简单,文档友好,而且是一个渐进式框架,因而得到了许多前端开发者的青睐.尤其对初学者而言,入门Vue.js比目前前端三大框架中的另外两个都容易的多.但是同时,简单并不意味着低级,把Vue.js弄会还是需要掌握不少东西的,尤其对于没有接触过webpack构建工具的初学者.　　这里列举一些Vue.js常见的开发问题.1.Vue项目如何部署　　Vue.js 的脚手架已经为我们配...

2018-10-24 16:22:56 182

原创 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 2096

转载浅谈 Vue 中 computed 实现原理

虽然目前的技术栈已由 Vue 转到了 React，但从之前使用 Vue 开发的多个项目实际经历来看还是非常愉悦的，Vue 文档清晰规范，api 设计简洁高效，对前端开发人员友好，上手快，甚至个人认为在很多场景使用 Vue 比React 开发效率更高，之前也有断断续续研读过 Vue 的源码，但一直没有梳理总结，所以在此做一些技术归纳同时也加深自己对 Vue 的理解，那么今天要写的便是 Vue 中最常...

2018-10-10 19:05:26 11521 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 728

转载 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 106

转载 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 3249

转载 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 2903

转载 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 6530

原创 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 9178 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 264

原创 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 1080

原创 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 1571

原创使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ npm install -g cnpm --registry=h...

2018-09-11 17:26:02 128

转载 js模态框实现原理

<!DOCTYPE><html><head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visibility: hidden; position: absolute; /* 使用绝对定位或固定定位 */ ...

2018-09-04 19:02:53 4241 4

web安全之XSS攻击及防御pdf

wendu.ajaxhook.min

vueJS框架--

jquery-3.1.1.min

Backbone.js实战

空空如也