前端相关
文章平均质量分 60
大大大石頭
各种小白,记录点滴,慢慢学习
展开
-
Tree shaking学习
一、Tree shaking是什么Tree shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 行为的术语。它依赖于ES2015中的 import 和 export 语句,用来检测代码模块是否被导出、导入,且被 JavaScript 文件使用。二、Tree shaking的原理2.1 原理Tree shaking的本质是移除掉无用的js代码。无用代码移除存在于各种compiler中,compiler会根据代码的export和import的关原创 2020-09-02 10:59:53 · 194 阅读 · 0 评论 -
display的属性们
display: none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | t...原创 2018-06-13 11:18:57 · 162 阅读 · 0 评论 -
link和@import之争
看到知乎大神说,先问是不是,再问为什么我页不知道为什么要写这句话,反正就是很奇怪的想法,就先记下来。 今天研究的link和@import,是外部引入外部引入 CSS 的两种方式。 两者是有区别的(是不是)。 我们来研究一下有哪些区别(为什么)link是XHTML(HTML)标签,除了加载CSS外,还可以定义RSS,rel等其他事务; @import是 CSS 提供的语法规则, 只有...原创 2018-06-13 11:08:53 · 150 阅读 · 0 评论 -
PWA 之Q&A
——吉吉《PWA初窥》学习笔记Q1:什么是PWA? A1: PWA全称Progressive Web App,即渐进式WEB应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能Q2: PWA解决了什么问题? A2: 1) 可以添加至主屏幕,点击主屏...原创 2018-05-08 10:22:38 · 404 阅读 · 0 评论 -
immutable学习
JavaScript 中的对象一般是可变的,因为Javascript为了节省内存,都是使用引用赋值,生成一个新对象如果简单的引用了原始对象,那对新对象作出的改变,也将影响到原始对象。平时简单的应用还不会特别明显,但是如果在复杂的应用中,对象的改变就会引起比较复杂的问题。往往都会使用deepCopy来解决这个问题,但是deepCopy往往会对整个对象的树进行拷贝,也会造成 CPU 和内存的浪费。 ...原创 2018-05-10 14:32:02 · 1125 阅读 · 0 评论 -
跨域问题探究
Q1: 什么是跨域? A1: 一个域上加载的脚本获取或操作另一个域上的文档属性,是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的。而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。Q2: 怎么算跨域? A2: Uri 说明 是否跨域 http://w...原创 2018-06-11 13:50:13 · 144 阅读 · 0 评论 -
瀑布流布局
瀑布流布局在知乎看到大佬说,学习前端的第一阶段要会一些js基本的特效,学习一下,做几个Demo来看看好像有那么两种方法: 1、通过css来搞定瀑布流 2、通过js来控制CSS方法解决瀑布流因为css3有了一个新的属性:column 我们在图片或者需要瀑布流的模块的父元素设置column属性就可以达到这种瀑布流的效果。#main{ /*定位*/ /*...原创 2018-06-12 15:14:07 · 640 阅读 · 0 评论 -
CSS 实用片段
1、垂直对齐:垂直对齐容器中的元素.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}2、垂直居中: 不知道父元素高度的情况...原创 2018-07-03 13:53:25 · 203 阅读 · 0 评论 -
关于xss和csrf
XSSxss 是跨网站指令码,是代码注入的一种,它允许恶意使用者将程式码注入到网页上,其他使用者在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言。攻击方式: XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。比如通过 url 来在页面上添加 html 后者 js 文件。防止: 最普遍的方法,是将输出的内容进行转义,比如对于引号,尖括号,斜杠进行...原创 2018-09-14 11:28:42 · 257 阅读 · 0 评论 -
jquery对追加事件的绑定
写项目的时候又用到了jquery,突然发现,对于用jquery追加的元素,on方法绑定不能用。发现: on要原始存在才绑定上,否则要用delegate来动态绑定 $(document).delegate(‘selecter’,’click’, function () { alert(this.innerHTML) });...原创 2018-04-12 10:02:06 · 156 阅读 · 0 评论 -
真·图片轮播?
这次是真的图片轮播了么?我也不太知道这个东西到底是怎么才算图片轮播。。。汗。。好吧,在移动端遇到这种情况,啊就是可以来回滑动,就这几个点来回变颜色神马的。。//html<div class="nav-img"> <div class="am-slider am-slider-default" id="demo-slider-0"> <div clas...原创 2017-06-02 23:06:59 · 239 阅读 · 0 评论 -
HTTP填坑
1.http的基础知识: 2.http概念进阶: 1)什么是回调 2)什么是同步/异步 3)什么是I/O 4)什么是单线程/多线程 5)什么是阻塞/非阻塞 6)什么是事件 7)什么是事件驱动 8)什么是基于事件驱动的回调 9)什么是时间循环...原创 2017-08-24 15:58:24 · 199 阅读 · 0 评论 -
如何去掉两个span间的间距
<!-- html --><div> <span></span> <span><span></div>/* CSS */div{ font-size:10px;}span{ display:inline-block;}设置成块级元素的span,会因为父元素设置字体原创 2018-04-16 16:06:31 · 7940 阅读 · 1 评论 -
设置overflow:hidden导致相邻行内元素向下偏移的问题
<!-- html --><div> <span></span> <span></span> <span></span></div>/* CSS */div span{ display:inline-block;}原创 2018-04-16 16:11:37 · 3693 阅读 · 0 评论 -
a标签连接空标签的方法
在写页面时,想把a标签设置成空链接,方便后面数据的连接可以有几种方法。1、 <a herf=""></a>这种方法会默认打开本页面,重新刷新一次页面。2、<a herf="#"></a>这种方法会在地址栏的后面添加一个#号,然后回到页面顶部。3、<a herf="###"></a>这原创 2017-04-06 00:52:00 · 10255 阅读 · 0 评论 -
关于iphone上用input按钮的处理
iphone手机上的input按钮自带效果会有内阴影,外边框和自带的圆角样式,要在使用的时候,清除原有的样式。/*css代码*/input{outline:0px;-webkit-appearance:none;}在项目中如果不记得对input的样式进行修改,尽量不要选用input,可以使用button代替...原创 2017-04-06 00:55:57 · 2086 阅读 · 0 评论 -
给div添加蒙版(遮罩?)
<div><p>我是一个蒙版(遮罩?)</p><img src="/images/hellokitty.png"></div>/*css文件*/div{width: 80%;height: 100%;background: #efefef;-moz-opacity:0.8;opacity:0.8;-webkit-filter: blur(...原创 2017-04-07 10:54:22 · 9376 阅读 · 0 评论 -
关于文字单行或多行显示省略号。
在移动端写前端的时候,经常会遇到,需要将文字设置成一行或者多行显示,多余的字编程省略号的问题一行显示:p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}white-space: nowrap; 这个属性声明建立布局过程中如何处理元素中的空白符normal 默认。空白会被浏览器忽略。pre 空白会被浏览器...原创 2017-06-01 10:21:32 · 606 阅读 · 0 评论 -
移动端图片轮播?
移动端图片轮播?在移动端的时候,经常会遇到好多图片,可以用手滑动来实现轮播?好吧,我也不知道是不是应该叫轮播,但是类似的就是那种效果。把//html<div class="product-exihibate"> <ul> <li class="item" v-on:click="productDetail(desc.desc_id)"...原创 2017-06-01 10:34:48 · 316 阅读 · 0 评论 -
CSS中position属性总结笔记
写了好多的position,一直在用它们字面的意思,最近项目写到的position的问题,竟然又出问题了。。总结一下:1. positon:static; 静态定位(默认的 ) 这个是默认的,写不写都会是这个定位,所有的标准文档流里面的元素都是静态定位。2. positon:relative; 相对定位 相对定位不会使有该属性的元素脱离标准文档流 相对定位会在页面原始的...原创 2018-02-02 14:08:59 · 205 阅读 · 0 评论