- 博客(53)
- 收藏
- 关注
转载 webpack详解
webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢?webpack的配置const path = require('path');module.exports = { entry: "./app/entry", // string | object | ar...
2018-03-12 08:33:00
184
转载 手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件
前言今天我们要讲解下如何编写一个图片压缩、方向纠正插件,附带着会讲解下如何上传和预览。为什么重点放在图片压缩和方向纠正?相信大家在做项目过程中,经常会遇到上传图片到后端,但是由于图片过大,需要对图片压缩处理。特别在移动端,手机拍的照片普遍过于大了,我们有时候只是需要上传一张头像,很小就够用了。还有在部分手机上(已知苹果手机)拍的照片存在方向角度问题,这时就需要我们来纠...
2018-03-05 08:59:00
279
转载 js工作常见问题收集
1、 viewport <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串‘devic...
2018-02-26 09:59:00
225
转载 JavaScript八张思维导图
不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vue,React等前端框架,甚至是nodejs等服务端的兴起,归根到底,我始终觉着一切的核心还是JavaScript。于是最近就有了一个想法,想要梳理一下这些年学习以及使用JS的心得。本系列文章主要是针对JS的相关知识点做一个类似提纲似的提炼,一来可以作为今后温故知新的参照;二来也是希望能够帮助大家...
2018-02-04 18:51:00
87
转载 React 基础实例教程
园子都荒废两个月了,实在是懒呀..近段时间用React开发了几个页面,在使用过程中着实碰到了一些问题,估计刚开始学习的伙伴们都会遇到各种各样的坑总结记录一下,只看文档是碰不上问题的,内容基础也不基础,高手还请绕道哈哈哈 文章略长,整个目录吧,想看哪儿看哪儿 基本使用同一页面中使用独立文件中使用 JSXreturn后面只能...
2018-01-28 23:52:00
114
转载 移动端高清、多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667)。对于reti...
2018-01-19 20:49:00
71
转载 Vue学习看这篇就够
Vue -渐进式JavaScript框架介绍vue 中文网vue githubVue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别?Library库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者代表:jQueryjQuery这个库的...
2018-01-15 08:26:00
134
转载 webpack构建react多页面应用
写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架。利用creat-react-app 新建一个react应用npm install -g create-react-app然后创建一个项目create-react-app democreate-react-app会自动...
2018-01-07 23:40:00
133
转载 JavaScript 优雅的实现方式包含你可能不知道的知识点
有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。实现一个目的有多种途径,俗话说,条条大路通罗马。很多内容来自平时的一些收集以及过往博客文章底下的精彩评论,收集整理拓展一波,发散一下大家的思维以及拓展一下知识面。茴字有四种写法,233333..., 文末有彩蛋有惊喜。1、简短优雅地实现 sleep 函数很多语言都有sleep函数,显然js没有...
2017-12-25 08:44:00
122
转载 JavaScript 实用技巧和写法建议
1.前言从大学到现在,接触前端已经有几年了,感想方面,就是对于程序员而言,想要提高自己的技术水平和编写易于阅读和维护的代码,我觉得不能每天都是平庸的写代码,更要去推敲,去摸索和优化代码,总结当中的技巧,积极听取别人的建议,这样自己的技术水平会提高的更快。那么今天,我在这里就分享一下关于javascript方面的写作的实用技巧和建议,这些技巧和建议是我平常在开发项目上会用到的,...
2017-12-18 08:41:00
81
转载 Vue SPA 首屏加载优化实践
写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案!我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务。构建项目...
2017-12-10 23:12:00
116
转载 带你优雅的使用 icon
前言本篇文章其实陆陆续续写了快半年,主体部分写好了很久了,但由于种种原因一直没有发布。首先来说说写这篇文章的主要初衷是:在做前端后台项目的时候经常会用到很多 icon 图标,刚开始还好,但随着项目的不断迭代,每次修改添加图标会变得很麻烦,而且总觉得不够优雅,就开始琢磨着有啥简单方便的工作流呢?演进史首先我们来说一下前端 icon 的发展史。远古时代在我刚开...
2017-12-04 00:05:00
156
转载 前端本地文件操作与上传
前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:通过input type="file" 选择本地文件通过拖拽的方式把文件拖过来在编辑框里面复制粘贴第一种是最常用的手段,通常还会自定义一个按钮,然后盖在它上面,因为type="file"的input不好改变样式。如...
2017-11-26 22:44:00
111
转载 学习webpack
前言webpack前端工程中扮演的角色越来越重要,它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack,妈妈再也不用担心我不会使用webpack,哪里不会看哪里。这是一个由浅入深的文章。工程化这里是一个项目工程化,规范化的设置,如果是初次使用webpack的同学还是最后在看这一块知识现在vue、react等脚手架都会自动将开发环...
2017-11-19 23:14:00
80
转载 Vue 脱坑记
问题汇总Q:安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大...
2017-11-13 08:46:00
186
转载 post和get区别
答案:GET在浏览器回退时是无害的,而POST会再次提交请求。 GET产生的URL地址可以被Bookmark,而POST不可以。 GET请求会被浏览器主动cache,而POST不会,除非手动设置。 GET请求只能进行url编码,而POST支持多种编码方式。 GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。 GET请求在URL中传送的参数是有长度限制的,而POS...
2017-11-05 23:04:00
74
转载 JavaScript深入之call和apply的模拟实现
call一句话介绍 call:call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。举个例子:var foo = { value: 1};function bar() { console.log(this.value);}bar.call(foo); // 1注意两点...
2017-10-30 08:28:00
64
转载 ES6函数的扩展
函数的扩展函数参数的默认值在 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalo...
2017-10-22 23:41:00
47
转载 JavaScript 核心
我们首先来看一下对象[Object]的概念,这也是 ECMASript 中最基本的概念。对象 ObjectECMAScript 是一门高度抽象的面向对象(object-oriented)语言,用以处理 Objects 对象。当然,也有基本类型,但是必要时,也需要转换成 object 对象来用。Object 是一个属性的集合,并且都拥有一个单独的原型对象[prototype...
2017-10-16 08:46:00
63
转载 cookie知识点概述
cookie是什么这个讲起来很简单,了解http的同学,肯定知道,http是一个不保存状态的协议,什么叫不保存状态,就是一个服务器是不清楚是不是同一个浏览器在访问他,在cookie之前,有另外的技术是可以解决,这里简单讲一下,就是在请求中插入一个token,然后在发送请求的时候,把这个东西带给服务器,这种方式是易出错,所以有了cookie的出现cookie是什么,cookie...
2017-10-08 19:17:00
83
转载 html tip实现
一、介绍before/afterCSS中的before和after伪类选择器早在CSS2时就被引入,改属性被所有主流浏览器所支持了。before和after顾名思义,分别指的是伪元素在元素前/后添加内容,默认他们是display是inline,但是可以使用CSS设置为block。应用before/和after也比较简单,举个例子:a:after { conten...
2017-09-24 22:34:00
822
转载 音乐播放器圆形进度条实现
效果图:代码:https://github.com/hwlv/vue-music/blob/master/dist/test.htmldemo:https://hwlv.github.io/vue-music/dist/test.html原理:svg的属性stroke-dashoffset和stroke-dasharray转载于:https://...
2017-09-18 09:19:00
386
转载 自己动手写fullPage插件
仿造fullPage.jshttps://alvarotrigo.com/fullPage/#firstPage自己参照网上教程写了一个,加了注释。主要是练习造轮子的能力,需求是不断变化的只拿来用的话谁都会,只有掌握了核心的技术,遇到复杂的需求才不会犯难。以后会按照官网逐渐完善其他功能。欢迎star。demo:https://hwlv.github.io/myplugin/...
2017-09-11 08:37:00
120
转载 HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考。目录:一、HTML编码规范二、CSS编码规范三、JS编码规范一、HTML编码规范1. img标签要写alt属性根据W3C标准,img标签要写alt属性,如果没有就写一个空的。但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字。如下不太好的写法:<img src="comp...
2017-08-30 08:35:00
237
转载 设计模式之迭代器模式
介绍迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。迭代器的几个特点是:访问一个聚合对象的内容而无需暴露它的内部表示。为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作。遍历的同时更改迭代器所在的集合结构可能会导致问题(比如 C# 的 foreach 里不允许修改 item)。...
2017-08-28 08:42:00
63
转载 设计模式之观察者模式
介绍观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。使用观察者模式的好处:支持简单的广播通信,自动通知所有已经订阅过的对象。页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。目标对象与观察...
2017-08-21 08:45:00
81
转载 深入理解 JavaScript(五)
根本没有“JSON 对象”这回事!前言写这篇文章的目的是经常看到开发人员说:把字符串转化为 JSON 对象,把 JSON 对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下,供大家讨论,如有错误,请大家指出,多谢。正文本文的主题是基于 ECMAScript262-3 来写的,2011 年的 262-5 新规范增加了 JSON 对象,和我们平时所说的...
2017-08-13 22:05:00
47
转载 深入理解 JavaScript(四)
前言Bob 大叔提出并发扬了 S.O.L.I.D 五大原则,用来更好地进行面向对象编程,五大原则分别是:The Single Responsibility Principle(单一职责 SRP)The Open/Closed Principle(开闭原则 OCP)The Liskov Substitution Principle(里氏替换原则 LSP)The In...
2017-08-07 08:49:00
74
转载 深入理解 JavaScript(三)
强大的原型和原型链前言JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型。虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多。由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以...
2017-07-31 09:02:00
45
转载 深入理解 JavaScript(二)
立即调用的函数表达式前言大家学 JavaScript 的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行。在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为“自执行”,但作者后面说了很多,...
2017-07-24 00:11:00
50
转载 深入理解 JavaScript(一)
编写高质量 JavaScript 代码的基本要点转载:http://wiki.jikexueyuan.com/project/javascript-depth-understanding/start-javascript.html才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书《JavaScript Patterns》(JavaScript 模...
2017-07-16 23:42:00
107
转载 布局解决方案
布局解决方案了解 CSS 中属性的值及其特性, 透彻分析问题和需求才可以选择和设计最适合的布局解决方案。居中布局水平居中子元素于父元素水平居中且其(子元素与父元素)宽度均可变。inline-block + text-align<div class="parent"> <div class="child">Demo<...
2017-07-09 22:37:00
70
转载 Web前端之iframe详解
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。<iframe src="demo_iframe_sandbox.htm"></iframe>但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性iframe常用属性:1.frameb...
2017-07-02 21:57:00
126
转载 es6异步操作
异步编程对 JavaScript 语言太重要。JavaScript 只有一根线程,如果没有异步编程,根本没法用,非卡死不可。ES6 诞生以前,异步编程的方法,大概有下面四种。回调函数事件监听发布/订阅Promise 对象ES6 将 JavaScript 异步编程带入了一个全新的阶段。基本概念异步所谓"异步",简单说就是一个任务分成两段,先执行第...
2017-06-26 00:00:00
112
转载 前端开发手册
做前端有一段时间了,但是总觉得前端就是写写界面就行了,其实不然。一个合格的前端责任是很重大的。本文介绍重点介绍了前端人员需要掌握的一些技能。供大家参考。如果有一些对前端开发还有疑惑的童鞋,可以来看看。本文来源:http://wiki.jikexueyuan.com/project/fedHandlebook/,建议阅读在线版本:https://dwqs.gitbooks.io/fro...
2017-06-18 23:44:00
289
转载 Promise,Async,await简介
Promise 对象转载:http://wiki.jikexueyuan.com/project/es6/promise.html基本用法ES6 原生提供了 Promise 对象。所谓 Promise 对象,就是代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。有了 Promise 对象,就可以将异步操作以同步操作的流...
2017-06-11 23:02:00
159
转载 react入门
react入门react入门前端用vue做了一些项目后,有一些疑惑的地方。学习下react对比一下,加深自己对前端框架的了解。学习的时候发现大多网上的教程都不是最新的,例如:react router v4的react-router-dom。所以最好还是到官网上面去看,英文虽然有的看不懂,但是看懂示例代码就行了。react作为目前端最火热的框架,理应学习...
2017-06-04 23:47:00
81
转载 vue装逼神器简述
主要是分享下用vuejs开发项目过程中遇到的问题,vuejs开发的优势和需要注意的地方。项目主要页面:主页,最新,分类,分类列表,详情页,结果页,斗图(列表,制作页)效果图:地址:https://zbimetest.iflyresearch.com/#/index?appid=tangdaoya工具:vue脚手架:vue-cli项目结构:知识点:vue...
2017-05-25 15:51:00
183
转载 总有你要的编程书单(GitHub )
目录IDEIntelliJ IDEA 简体中文专题教程MySQL21分钟MySQL入门教程MySQL索引背后的数据结构及算法原理NoSQLDisque 使用教程Neo4j .rb 中文資源Redis 命令参考Redis 设计与实现The Little MongoDB BookThe Little Redis Bo...
2017-05-22 00:28:00
302
转载 移动端图片压缩上传解决方案
最近做移动端图片上传,发现图片尤其是iPhone拍照的图片都有2M左右,但是实际上项目中用不到这么大,于是想到要用js在前台进行压缩。解决方案如下:网上搜了很多效果都不怎么好,这个还行:http://think2011.net/localResizeIMG/test/使用可以参考具体文档,我是在Vue环境下,不过不影响使用,直接贴代码了: import croppe...
2017-05-14 23:22:00
184
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人