前端
PrayerFaith-Depart
设计改变未来!
展开
-
gulp项目搭建流程
gulp项目搭建流程项目初始化npm install --global gulp 或 npm install -g gulpgulp -v //查看版本npm init //出现package.json文件npm install gulp --save-dev //本地创建创建gulpfile.js主文件常用 gulp 插件编译 less原创 2017-06-15 09:24:38 · 495 阅读 · 0 评论 -
better-scroll
模仿了一个饿了吗页面先上图,看一看better-scroll的效果如果用overflow:auto或scroll属性,这样的页面就会出现两个滚动条,用户体验会有折扣,所以给介绍一款插件better-scroll,附上github资源链接。这款插件是基于iscroll插件做的重新封装,改善了一些bug,增加了一些拓展功能(插件作者并不是本人,望周知),有兴趣的小伙伴们转载 2017-10-09 13:46:11 · 334 阅读 · 0 评论 -
flex布局
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这转载 2017-10-09 13:47:54 · 184 阅读 · 0 评论 -
webpack使用svg-sprite-loader详解
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2019-03-13 13:47:32 · 5827 阅读 · 1 评论 -
防抖函数、 节流函数
防抖函数定义: 多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行例:监听页面滚动, 滚动时不会触发事件处理函数, 而是在滚动完成后一段时间, 触发事件回调// 代码封装function debounce (callback, delay) { let timer return function () { let args = argum...原创 2019-04-11 14:04:09 · 161 阅读 · 0 评论 -
第一个webpack应用
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"></d...原创 2019-04-09 08:59:19 · 97 阅读 · 0 评论 -
浏览器缓存、 HTTP缓存(强制缓存、协商缓存),浏览器缓存和CDN的关系
CND的定义CDN:Content Delivery Network/Content Ddistribute Network内容分发网络客户端访问网站的过程:没有CDN:用户在浏览器访问栏中输入要访问的域名 浏览器想DNS服务器请求对该域名的解析 DNS服务器返回该域名的IP地址给浏览器 浏览器使用该IP地址向服务器请求内容 服务器将用户请求的内容返回给浏览器使用CND...转载 2019-04-16 09:18:54 · 1209 阅读 · 0 评论 -
ES6详解
let和constlet a=12;let a=5;alert(a); // Uncaught SyntaxError: Identifier 'a' has already been declaredconst a=12;a=5;alert(a);// Uncaught TypeError: Assignment to constant variable....原创 2019-05-24 16:40:35 · 184 阅读 · 0 评论 -
webpack是怎样运行的
同步加载新建src/index.jsconsole.log("hello world");新建webpack配置文件webpack.config.jsconst path = require('path');const MyPlugin = require('./src/MyPlugin.js')module.exports = { mode: 'developmen...转载 2019-05-22 09:00:56 · 351 阅读 · 0 评论 -
JavaScript的环境模型
环境模型这个概念它用于解释Scheme的函数计算规则环境是什么环境在计算过程中必不可少, 因为他决定了计算表达式的上下文。 可以这样认为, 表达式本省在语言里毫无意义, 表达式的意义取决于他计算时所在的环境。JavaScript的解释器就充当着环境的角色。 在该环境下, 表达式1+1 的计算结果为2, 表达式Date()调用一个函数并返回当前的时间, 表达式 () => 1 ...转载 2019-05-17 09:31:46 · 125 阅读 · 0 评论 -
前端技术选型及项目构建流程
前端框架React 与 Vue 比较选择Vue优势:1.模板和渲染函数的弹性选择2.简单的语法及项目创建3.更快的渲染速度和更小的体积1.Vue应用的默认选项是把markup放入HTML文件中。数据绑定表达式使用的是与Angular相似的双大括号(moustache)语法,而指令(特殊的HTML属性)则用于向模板中添加功能。React应用则与之相反,不使用模板,而是要求开发者借原创 2017-06-13 09:24:40 · 955 阅读 · 0 评论 -
javascript常用方法函数收集
字符串长度截取js 代码:function cutstr(str, len) { var temp, icount = 0, patrn = /[^\x00-\xff]/, strre = ""; for (var i = 0; i str.length; i++) { if (icount len - 1) {翻译 2017-06-12 11:42:12 · 179 阅读 · 0 评论 -
JavaScript中的this
1.函数调用时的this函数调用方法1:fn(p1,p2)函数调用方法2:obj.child.method(p1,p2)函数调用方法3:fn.call(undefined,p1,p2)this 指的就是函数调用的第三种方法call中第一个参数,当第一个参数为undefined时 this指向windowfn(p1,p2) => fn.call(undefined,p1,原创 2017-04-20 20:30:26 · 262 阅读 · 0 评论 -
前端框架ReactJs
一 ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将转载 2017-05-08 20:40:07 · 368 阅读 · 0 评论 -
理解JavaScript中的call、apply、bind
apply、call在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。先来一个栗子:function fruits(转载 2017-04-21 20:25:07 · 379 阅读 · 0 评论 -
前端框架VueJs
Vue概述实质:构建数据驱动的 web 界面的库目标:通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特点:只聚焦于视图层,简单易于学习,容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,能完美地驱动复杂的单页应用。Vue和其他技术的对比VS Angular:1.比 Angular 简单得多,可以快速掌握转载 2017-05-08 20:33:02 · 338 阅读 · 0 评论 -
阻止按空格键页面下拉
function cancelSpace(e){ var e = e|| window.event; var elm = e.srcElement || e.target; var key = e.keyCode || e.charCode; if(key == 32){ if(elm.tag原创 2017-05-15 10:17:06 · 6952 阅读 · 3 评论 -
React 还是 Vue:该如何选择
本文译自React or Vue: Which Java UI Library Should You Be Using?,原文需翻墙。 2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端和移动端的快速成长,同时稳稳领先于它的主要竞争对手Angular。 但是2016对Vue来说也是同样令人印象深刻的一年,它发布了Vue 2.0版本并且在转载 2017-05-26 13:41:31 · 284 阅读 · 0 评论 -
HTTP协议中的短轮询、长轮询、长连接和短连接
引言最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码。在研究一个项目的时候,源码里面用到了HTTP的长轮询。由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HTTP的长长短短。了解的方式主要都是LZ在网络上获取的,这里只是谈一下LZ对于这四种叫法最直观的理解。如果你之前不懂的话,可以帮你普及一下,如果你之前就懂得话,可以转载 2017-04-25 17:27:57 · 281 阅读 · 0 评论 -
nodeJs
一 NodeJS简介NodeJS优缺点总结:优点: 1.以事件和异步为特点最成功的服务器解决方案2.部署简单方便;命名注重约定(统一标准);项目所需的扩展,插件资源相对独立,不易冲突3.事件驱动(根据系统当前出现的事件来调度资源)4.异步编程(大部分语言都是同步执行,一个操作出问题会影响整个操作,有IO时必须等待其完成才能执行后面的操作,而js作为异步执原创 2017-05-16 20:51:11 · 388 阅读 · 0 评论 -
前端框架AngularJS
Angular核心概念(1)本质:设计动态web应用的结构框架。web应用与传统web系统相区别,web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转。Angular官方也声明它更适用于开发CRUD应用,即数据操作比较多的应用(2)核心:对HTML标签的增强就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义原创 2017-05-08 19:56:38 · 402 阅读 · 0 评论 -
前端规范
一、文件规范1.1 HTML部分 1.1.1 建包问题 文件均归档至约定的目录中,建包格式如下: 注意:所有的css文件放在css文件夹中,image放在images文件夹中,js放在js文件夹中 1.1.2 HTML头部编写 (1) 编码:所有编码均采用xhtml/html,标签必须闭合,编码统一为UTF-8,转载 2017-06-01 13:45:45 · 435 阅读 · 0 评论 -
前端构建工具gulp
前端构建工具gulpjs的使用介绍及技巧gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。本文导航:gulp的安装开始使用gulpg转载 2017-06-02 15:44:48 · 499 阅读 · 0 评论 -
HTML5本地储存localStorage/sessionStorage
设置值sessionStorage/localStorage.setItem(key,value);取值var v=sessionStorage/localStorage.getItem(key);删除sessionStorage/localStorage.removeItem(key);清除所有sessionStorage/localStora原创 2017-04-17 20:22:29 · 274 阅读 · 0 评论