目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩、图片转base64、css和js的压缩以及合并,文件的md5重命名 ……。本人之前也是在项目中没具体使用过,闲来无事,查查资料,自己写了一个用gulp工具的小demo,有很多不足之处,欢迎指点。 第一步:安装node和npm 不用说,要用gulp,得先安装node和npm(安装完node后,自带有npm) Node官网下载地址:https://nodejs.org/en/downl
小轻相信,许多人对网页是很感兴趣并且是很想学习的。当初创立小轻网及小轻论坛网页就是为了帮助大家学习一些技术经验,同时也学会如何去找资源。今天,我们给原有网页加一些部件,达到装饰和增加功能的作用。
之前移植emlog时就发现lightbox图片幻灯片浏览插件了,因为移植过程中出现了很大的困难,所以没有及时把教程写出来,今天抽空再研究了一下,才把这个lightbox图片幻灯片浏览插件教程写出来 如果你要使用这款插件,那么一定需要引用jquery插件库,但是jquery的版本不能太高,版本过高不能正常使用,推荐jquery.min.js-1.7.1的版本,附件中也是1.7.1的版本 其次你需要引用一个jquery.lightbox.css和一个jquery.lightbox.
selenium 是一个可以模拟浏览器操作的工具,据我所知,不仅仅是 Python,还有其他的编程语言也有支持的 selenium 库,可以作为爬虫或者自动化测试。当然,还有今天要说的,可以使用 selenium 来作为全网页截图工具。
JS是一门单线程语言,单线程就意味着,所有的任务需要排队,前一个任务结束,才会执行下一个任务。这样所导致的问题是:如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的觉。为了解决这个问题,JS中出现了同步和异步。他们的本质区别是:一条流水线上各个流程的执行顺序不同。在讲JS任务执行机制前,先要了解一下什么是同步任务与异步任务。
以前我时常觉得,自己写的ReadMe很单调乏味,但后来仔细研究一下后,发现有很多方式可以让ReadMe在简洁的基础上变得好看些,所以在这里和大家分享,如果大家有更好的想法,也非常欢迎在评论区留言哦
调试网站: aHR0cDovL3d3dy5mYW5nZGkuY29tLmNuL25ld19ob3VzZS9uZXdfaG91c2VfZGV0YWlsLmh0bWw/cHJvamVjdF9pZD1iODdjYjNkMDRmODc4Y2E2 瑞数的整体代码(4代为例) 1、直接请求得到的js 有index.html界面上的 script 2、meta content(计算eval的js) 3、scripts[0] 中的 **.dfe1675.js 是 iso-8859-1编码的 4、scripts[1] 是通过自执行得到js 字符串,通过eval进行执行得到cookie的过程 5.1 整体的代码结构是 初始的大数组 5.2 定义一些函数,这些函数将会被eval内部的js进行调用 5.3 控制流代码,进行判断环境检测,并得到eval的字符串 偷偷告诉eval js代码在 ret=**.call(**, **)得到 5、scripts[3] 在eval的js有调用
一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序都可 js里加入 调用插件的函数 $('这里写要放大的图片').zoomify(); 如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数。 二、zoomooz.js 推荐这里下载 使用说明: 这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站。这个图片方法不是 单独图片跳脱出来的
简单来说,file-loader 就是将文件(由于一般是图片文件为主,所以下面通常使用图片两字作为替代,方便理解。其他的包括字体文件等),在进行一些处理后(主要是处理文件名和路径),移动打包后的目录中。
前端性能优化,是每个前端必备的技能,优化自己的代码,使自己的网址可以更加快速的访问打开,减少用户等待,今天就会从几个方面说起前端性能优化的方案,
接下来我们需要移除无序列表中的行头前缀。 在src文件夹中创建css文件夹,再从css文件夹中创建index.css文件,并写好样式代码。
中秋节马上就要到来了,这是一个很有意义的节日,意味这团圆和美满。 为此,我也特别准备了一个案例 中秋主题的3D旋转相册 Paste_Image.png 如图,这是通过Javascript和css3
upload-labs靶场 是PHP环境运行的,所以我准备了一个PHP脚本和一张图片 图片好准备,PHP脚本如果不想写的话可以用我的这个获取当前时间的PHP脚本
assetsPublicPath:'/' 改为:assetsPublicPath:'./' (加一个点变为相对路径)
(2)为相框设置样式,用transform:rotateY(-10deg)为它设置旋转效果,用transform-style:preserve-3d来为图片设置3D效果。
之前就有想法给主题适配一个暗黑模式,但就于目前大家的暗黑模式体验都不是很好。就一直被搁浅了。今天给新站移植RIPRO的时候,发现暗黑主题还蛮好玩的,开搞!
webpack使用总结: 入门使用: 这个报错说明需要安装相应的Loader,并在引用时指定相应的loader 执行成功如图: chunk指相应的区块。 要是css引入正确:必须引入css-loade
Tree Shaking 值的就是当我引入一个模块的时候,我不引入这个模块的所有代码,我只引入我需要的代码,这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。
采用浮动,绿色块左浮,蓝色块右浮,利用浮动特性实现宽度超出另一行显示的效果,并是动态的。
昨天写了一篇游记,Karmdown 里面的图片不会自适应,导致有些图片大有些图片小,当然我才懒得给每个图片加 width 和 height!
js基础练习 目录 求3个数中的最大值和最小值 判断一个数是否是偶数 点击li元素时展示该元素内容 点击按钮实现在ul开头结尾添加li 鼠标放置li元素上, 显示对应图片 求3个数中的最大值和最小值 代码 function getMax(a, b, c) { var max = a if(b > max) max = b if(c > max) max = c return max } function getMin(a, b,
可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下。
摘要总结:本篇文章主要介绍了在Vue2+VueRouter2+Webpack+Axios项目中如何打包项目图片等资源的处理。首先介绍了如何在vue文件中使用图片,然后介绍了在css文件中引用图片的处理方式,最后还介绍了字体图标、js文件等资源的引用方式。在开发模式中,要注意路径的相对性,以避免路径错误。通过在根目录打包项目,可以方便地引用各种资源,从而提高项目的开发效率。
灯箱效果是我一直想加又没有加的功能,正好最近百度在推移动落地页检测,顺手做一下优化
工具类 方便操作对象,数组等的工具库 underscore.js lo-dash 与underscore.js的api基本一致。与underscore比其优势是,效率高;可自定义构建 Sugar 在原生对象上增加一些工具方法 functional.js 提够了一些Curry的支持 bacon.js 函数式编程,cool streamjs 用流的方式来对数组,对象进行系列操作 异步流程控制 发布订阅 eventproxy 朴灵出品 Arbiter.js q Promise风格的 Asyn
JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
一、初识FIS 在做项目中遇到了静态资源浏览器缓存更新的问题,于是在网络上寻找解决方案。之前虽然没有解决过这个问题,但方法无非就是为其设定新URI使得浏览器强制更新。这个过程听起来还是相当简单的。 也是无意中搜索到了知乎上的一个帖子大公司里怎样开发和部署前端代码? 看到这个文章中提到了FIS,跟随着文章开始学习走起,有点小兴奋,只不过很快便发现问题更多。 二、尝试 原本只是想着有个工具可以将前端资源打个标识,这样就可以轻松的解决浏览器静态缓存更新问题。FIS的描述也确实如此,那么就开始动手搞起吧。 安装 F
技术点:unity导出的目标工程Unity-iPhone.xcodeproj 与原生进行融合
今天照例进行日常总结,在查找资料进行ctrl+c加ctrl+v时,发现知乎的页面竟然禁止转载了,也就是对复制做了拦截
② 检查是否安装成功:cmd输入命令 node -v 或者 npm -v, 如果输出版本号,说明我们安装node环境成功。
《葫芦兄弟》(又名:葫芦娃),是上海美术电影制片厂于1985-1987年原创出品的13集系列剪纸动画片,是中国动画第二个繁荣时期的代表作品之一,至今已经成为中国动画经典。讲述7只神奇的葫芦,7个本领超群的兄弟,为救亲人前赴后继,展开了与妖精们的周旋。
我们在开发的时候会习惯缩进和写注释,方便我们在日常的维护,但将代码上传至服务端后,我们完全可以把那些空格、制表符、换行符进行压缩,以此减少请求资源的大小;同样的,我们在服务端所引用的第三方库进行合并,能减少 HTTP 的请求数量
作为前端开发,即使没用过Nginx,但一定听说过上面这句话。这句经典的话,基本构成了所有人对Nginx的第一印象。
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳,有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什么特殊语法。
接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一下,欢迎拍砖提意见,js弹窗广告代码如下: document.writeln("<img src='/templets/2014/images/zj_pf.jpg' bo08
做了一个简单的评论功能,暂时还没做回复功能,做回复的话得复杂一点,样式需要改变下,懒得搞,留着下次有时间再搞吧。
2017-05-16 by Liuqingwen | Tags: Hexo | Hits
docsify 终于算是弄完了,简单记录下。然后发现一个问题,相比 Hexo,Hugo 这些页面加载很慢,鱼与熊掌不可兼得,运行时生成只能这样了。
前端总结 html 字体图标的引用 添加到项目 项目下载到本地 加font文件夹,将字体文件放进去 将css文件加入到link中 雪碧图 先用一个 span 标签 将span标签display:inline-block 设置图标的background-position 外边距合并的问题 父元素没有边界线, 无法构成盒子模型 此时调子元素的margin值, 父子元素都会改变出错 解决方法: 给父元素加属性 overflow:hidden; 标签 for 属性应当与相关元素的 id 属性相
Markdown提供了一个特殊符号 > 用于段首进行强调,被强调的文字部分将会高亮显示
“ 转眼间已经参与过好几个小程序的开发了,下面我将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。 ” WXML 1 不要换行写 微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行。 2 wx:if vs hidden 一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。 3 图片处理 1.大图片也会造成页面切换的卡顿有一部分小程序会在页面中引用大
Webpack 是当下最热门前端资源模块化管理和打包工具。任何形式的资源都可以视作模块,通
CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到,则返回null。
可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试。
领取专属 10元无门槛券
手把手带您无忧上云