03 2017 档案
摘要:最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方式完成评分和展示分数的功能,没有js,也就意味着没判断逻辑,代码出错的几率更少,也更便于维护,在此,
阅读全文
摘要:今天看了前端网上关于JS的题目,其中有一道题目挺有意思的。如下 你们想到的结果是什么? 也许绝大多数人和我一样认为是20、20 。然而答案是10、20,别急我们先来慢慢分析(*^__^*) 嘻嘻……, 1.首先第一行的 var a = b = 10; 就是用了连等操作符,连等操作符是从右向左的 所以
阅读全文
摘要:前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识。我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊。 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边。说jQuery博大精深,还要我静下心来研究, 别净整些没用的。弄的我一脸懵逼,WTF?我从头到尾都
阅读全文
摘要:有一位同事跟大家说他在网上看到一道面试题:“如果后台传给前端几万条数据,前端怎么渲染到页面上?”,如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案。 有的说直接循环遍历生成html插到页面上;有的说应该用分页来处理;还有的说这个面试官是个白痴, 哪有后台传几万条数据给前端
阅读全文
摘要:Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候,一直苦于产品、客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对
阅读全文
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍
阅读全文
摘要:在移动端web页面开发中,为了使css中使用的尺寸与设计稿一致,通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配,在IOS设备上 flexible.js 会根据设备的分辨率动态的调整 viewport 的 width 和 scale 来达到目的。 但是,现在很多的安卓手机也
阅读全文
摘要:这是第一次写React和Node,选用的是前端Material-ui框架,后端使用的是Express框架,数据库采用的是Mongodb。 项目代码在:GitHub/lilu_movie , 欢迎大家关注或提问题。 这是一个通过从电影天堂抓取数据并显示的电影网站,demo部署在heroku上面。 安装
阅读全文
摘要:动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦。今天呢,我就在这里介绍一个试用react-addons-css-transition-group插件,在react中实现轮播图效果。 首先,大家需要了解的是,页面中的动画,可以分为两种
阅读全文
摘要:一直以来都奢想拥有一款全能好用的Markdown编辑器,直到遇到了Atom。废话不多说,直接开搞! 1. 安装Atom 下载安装Atom:https://atom.io/ 2. 增强预览(markdown-preview-plus) Atom自带的Markdown预览插件markdown-previ
阅读全文
摘要:前面的话 最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。本文将详细介
阅读全文
摘要:github 地址 vue-tree How to run demo npm install npm run dev 效果图 示例 <template> <div style="width:300px;"> <tree ref ='tree' :treeData="treeData" :option
阅读全文
摘要:如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现。不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单。这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么的简单。 先来分析下这个波浪效果的实现原理。 波浪效果主要是由两个动画构成,一个是波浪上下位置的变化
阅读全文
摘要:前言: 问题描述:在不使用循环的条件下,如何创建一个长度为100的数组,并且数组的每一个元素是该元素的下标? 这是一个比较经典的前端面试题,也可以当笔试题,咋一看,好像难度不大,实际上考察的知识点还不少,值得写篇文章来备忘!废话不多说,直接进入正文! 正文: 为了理解这道题的意思,我们先用传统的方法
阅读全文
摘要:前端技术众多,作为一名前端工程师,我们每接触新技术首先要懂得此技术的优势和劣势,这是最基本的。往深入了说还需要懂得技术的应用场景,与之配合的技术等,方便为以后架构做准备。而less作为一门CSS预处理语言,拥有函数式变成的特点,主要优点就是高效。主要适用于包含众多CSS的大型项目。主要体现在:项目公
阅读全文
摘要:在写javascript时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的、事件监听的方式,再后来出现了Promise、Generator、async/await等的异步解决方案。co模
阅读全文
摘要:不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解。本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就非常详细!!有这个还要什么自行车!!所以推荐大家学习这种库,最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档,相信大
阅读全文
摘要:又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果。 废话少说,先看效果。 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵树的主体。 我画树的使用的原理是,定义一个起始点,从这个点开始,向一个角度移动一段距离。得到另一个点
阅读全文
摘要:最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小)。这个功能的需求是:头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸,那么这整张图片都会作为头像。如果大于规定的尺寸,那么用户可以选择要裁剪的区域。用户点
阅读全文
摘要:本期节目将手把手教你去 NPM 市场买最新鲜的食材,只为搭配 小鲜肉 Vue 下厨。 既然它是当红小鲜肉,我想有必要写一篇文章来帮助大家配置好 Vue 的生产环境,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍 Vue.js,希望能够激发你对 Vue.js的兴趣。
阅读全文
摘要:阅读目录 React的组件生命周期 JSX 语法 父组件传向子组件 子组件传向父(爷)组件 getDefaultProps && getInitialState 获取真实的DOM节点 阅读目录 React的组件生命周期 JSX 语法 父组件传向子组件 子组件传向父(爷)组件 getDefaultPr
阅读全文
摘要:Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候,一直苦于产品、客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对
阅读全文
摘要:昨天在写2017年百度ife任务六的时候遇到了一个排版问题,需要首字母字体变大的同时,下划线对齐。 首先使用了 ::first-letter伪元素的选择器,将字体变大后,发现下划线没法对齐,代码如下: 后来改用 font-variant、text-transform 属性后解决了这个问题,代码如下;
阅读全文
摘要:开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍
阅读全文
摘要:本文为原创,转载请注明出处: cnzt 文章:cnzt-p 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来。 首先,我们下来了解一下perspective和transform都是做什么的。 transform -- css3属性,可以对元素进行变换(2d/3d),包括平移
阅读全文
摘要:编辑模式下显示正常,打开的时候不知道为啥排版有问题。segementfalut链接在这里 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │
阅读全文
摘要:对于程序员而言:驼峰和下划线之间是一场宗派战争;大括号是否换行会成为一种党派;逗号写在行尾还是行首的人来自不同星球…… 然而,无规矩不成方圆,任何一个团队,要想有高质量的产出,第一步必须要对一些基本的代码风格达成共识,否则用不了多长时间,你就会发现没人愿意维护某些代码了,因为那些代码散发出半年以上没
阅读全文
摘要:1.css垂直水平居中 效果: HTML代码: CSS实现: 都设置居中 div块的宽高和背景色。 a.用inline-block和vertical-align来实现居中: b.用相对绝对定位和负边距实现上下左右居中 c.利用绝对定位来实现居中 d.使用table-cell,inline-block
阅读全文
摘要:说明:截图中的Chrome版本为52,不同版本可能略有区别。 常用设置 开发时消除静态资源缓存不能立刻更新的困扰,勾选Disable cache即可 切换颜色显示格式 修改默认颜色显示格式,在Settings(控制台按F1)>Preferences>Elements>Color format 选择d
阅读全文
摘要:Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错。本文尽可能的汇集了 Webpack2 中设计路径的配置,力争深入浅出。 context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找。 若不配置,默认值为当前目录,webpa
阅读全文
摘要:背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class,作用域也只以函数作为区分。这与早期js的语言定位有关,作为一个只需要在网页中嵌入几十上百行代码来实现一些基本的交互效果的脚本语言,确实用不着严格的组织代码规范。但是随着时代的发展,js承担的任务越来越重,从原
阅读全文
摘要:RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<scri
阅读全文
摘要:最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答…… 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案……虽然
阅读全文
摘要:本教程用的是我自己的手机三星A9,其他安卓手机方法也相同。 第一步首先你得打开手机的开发者选项,确保USB调试和通过USB验证应用程序保持打开状态,如图所示 第二步,确保你的电脑和安卓手机都已经安装了谷歌浏览器 第三步,打开你电脑的上谷歌浏览器,调出控制台,,点击如图所示这个3旁边的3个点,这里面有
阅读全文
摘要:最近一两年在一些项目上,通过实际需求出发,编写了一些库在项目中使用,现在将这些项目都稍微整理了一下开源了出来,也许也有刚好能够你也用得上的,顺便也骗一下star。均在项目的README中加了相关的说明。 迷你全功能的模板引擎(压缩版代码不到2kb) 项目地址: https://github.com/
阅读全文
摘要:* { margin: 0; padding: 0; text-decoration: none; -webkit-overflow-scrolling: touch !important; /*iOS惯性滚动*/ outline: none; -webkit-font-smoothing: antialiased; /*字体细长*...
阅读全文
摘要:前面楼主简单介绍了JavaScript数据结构栈的实现,http://www.cnblogs.com/qq503665965/p/6537894.html,本次将介绍队列的实现。 队列是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,
阅读全文
摘要:前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String) 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array) 前端总结·基础篇·JS
阅读全文
摘要:前面的话 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。CORS(Cross-Origin Resource Shari
阅读全文
摘要:原文:执行 innerHTML 里的 <script> 背景 有时候我们会有把一整段 HTML 动态塞进页面的需求,例如渲染了一个模板,从服务器端获取了一段广告代码等。一般情况下我们使用 container.innerHTML 即可。但是当 HTML 中出现 script 标签时,直接使用 inne
阅读全文
摘要:作者 Yeaseon 已关注 2017.03.16 16:44* 字数 1245 阅读 243评论 2喜欢 4 作者 Yeaseon 已关注 2017.03.16 16:44* 字数 1245 阅读 243评论 2喜欢 4 2017.03.16 16:44* 字数 1245 阅读 243评论 2喜欢
阅读全文
摘要:目录 一、jQuery简介与第一个jQuery程序 1.1、jQuery简介 1.2、jQuery特点 1.3、jQuery版本 1.4、获得jQuery库 1.5、第一个jQuery程序 二、jQuery对象和DOM对象 2.1、DOM对象 2.2、jQuery对象 2.3、DOM转换成jQuer
阅读全文
摘要:喜欢的朋友start一下,长期更新文章 设置 安装git后我们需要配置一下,告诉git我们的基本信息等等..一般在用户范围内去配置 git ,也就是在 global 范围。 global 全局设置 $ git config --global user.name 'xxxx' $ git config
阅读全文
摘要:返回上一页并刷新 返回上一页,我们经常用 history.go(-1)//返回上一页(括号中写-2代表返回上两页) history.back()//返回上一页 这个我很久之前的一篇文章中也提及了!http://www.haorooms.com/post/js_refrash ,但是有时候有这样的需求
阅读全文
摘要:前面的话 一般地,使用readystatechange事件探测HTTP请求的完成。XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发不同类型的事件,所以它不再需要检査readyState属性。这个草案定义了与客户端服务器通信有关的事
阅读全文
摘要:跟上我的脚步,让我们来领略代码的世界! 使用jquery做一个日期时间选择器,最好使用bootstrap弹窗 实现: (1)点击文本框弹出窗口; (2)弹窗里面显示日期时间选择下拉 (3)年份取当前年份前后五年 (4)月份固定12个月 (5)天数根据年份与月份的变化而变化 (6)点击确定,关闭弹窗,
阅读全文
摘要:前面的话 不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍。2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而已。FileAPI(文件API)的宗旨是为Web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好地对
阅读全文
摘要:你是否有过下面的需求:需要给所有ajax请求添加统一签名、需要统计某个接口被请求的次数、需要限制http请求的方法必须为get或post、需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!😄,少年,想法有点大胆,不过,我欣赏!直接上轮子,Ajax-h
阅读全文
摘要:前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B。当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的。vuex正是为
阅读全文
摘要:首先根据《jQuery高级编程》的描述来看,jQuery插件开发方式主要有三种: 第一种比较常见,我的理解是$.extend()相当于一种静态方法 上述例子狠典型,而且也列举了带参和不带参的调用,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。这是最简单的调
阅读全文
摘要:git地址:https://github.com/asd0102433/blog/issues/3喜欢的朋友start一下,长期更新文章 设置 安装git后我们需要配置一下,告诉git我们的基本信息等等..一般在用户范围内去配置 git ,也就是在 global 范围。 global 全局设置 $
阅读全文
摘要:同样,首先我们还是回顾一下昨天讲到的东西: 1.常用的Vue修饰器 2.当利用js方法不修改数据,但也可以改变视图时,我们需要整体返回再整体接收 (如: items.example1 = items.example1.filter(function(){})) 3.当我们不能直接对数组进行修改的时候
阅读全文
摘要:前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String) 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array) 目录 这是《前端总结·
阅读全文
摘要:问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: 为什么log里打出来的data是[]呢? this.setState 是在 render 时, state 才会改变调用的, 也就是说, setState 是异步的. 组件在还
阅读全文
摘要:React React简介 是由Facebook公司推广的一套框架,已经应用instagram等产品 React就是为了提供应用程序性能而设计的一套框架 在angular中,对dom提供了一些指令,让dom具有一些功能,例如ng-repeat让dom具有动态循环渲染的功能,ng-show让dom元素
阅读全文
摘要:这些天自己在用vue-cli项目,在家里的电脑下下来后写了一些demo,拿到公司继续开发的时候发现删除node_modules文件,运行npm install和npm run 百度,搜狗了好久都没有找到相应的答案,后来还是google才找到一片相关的帖子的解释,很棒。因为在一台电脑上编译后npm会有
阅读全文
摘要:墨韵明空 做一个有上进心的攻城狮! 墨韵明空 做一个有上进心的攻城狮! 墨韵明空 做一个有上进心的攻城狮! vue关于class和样式的使用 这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 数据绑定一个常见需求是操作元素的 class
阅读全文
摘要:本文同步更新在: https://github.com/whxaxes/blog/issues/4 ,在 github 看文章显示效果会更好一些。 前言 不知不觉就很长时间没造过什么轮子了,以前一直想自己实现一个模板引擎,只是没付诸于行动,最近终于在业余时间里抽了点时间写了一下。因为我们的项目大部分
阅读全文
摘要:阅读目录 一、为什么组件很重要 二、Vue里面的组件基础知识 1、组件的概念 2、组件原理 3、组件使用 三、封装自己的Component 1、使用Component封装bootstrapTable 2、封装select 3、查看其他Vue框架源码 四、总结 阅读目录 一、为什么组件很重要 二、Vu
阅读全文
摘要:在react典型的数据流中,props传递是父子组件交互的唯一方式;通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然,就像react官网所描述的一样,在react典型的数据量之外,某些情况下(例如和第三方的dom库整合,或者某个dom元素focus等)为了修改
阅读全文
摘要:(注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/ 在这篇博客里,我将用redux-form实现一个同步验证的表单,它将满足以下条件: 1有三个输入框:用户名输入框(username),
阅读全文
摘要:最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结 为什么是webpack webpack实战 webpack.config.js 一般写法 开头声明对路径相关的变量,以及引入依赖,包括webpack(非必须),以及需要的插件然后,entry 声明入口相关的如文件
阅读全文
摘要:redux是一种常用的与react框架搭配的一种数据流架构,而伴随着redux的出现,也出现了许多基于redux开源的第三方库,而redux-form就是其中之一的开源组件库,到今天我写下这篇笔记为止,在github上获得了5580颗star和654颗的fork数,今天就写一下我的redux-for
阅读全文
摘要:前言 import router from './router'; import router from '../../router'; import router from './../../../router'; 如上,或许我们在项目中经常需要引入一些文件夹,入后在路径上就会出现好多的 ../.
阅读全文
摘要:每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档。 webpack是基于node的。先安装最新的node。 1.初始化 安装node后,新建一个目录,比如html5。cmd中切到当前文件夹。 npm init -y 这个命令会创建一个默认的package.j
阅读全文
摘要:转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点。最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头...。多行省略
阅读全文
摘要:一、DOM常用方法和属性复习 以下粗略的罗列一下DOM的常用方法和属性,由于不是介绍DOM的基础内容,所以就不一一详细说明各个方法和属性了(学习DOM的封装的,一般都对基础DOM比较熟悉了)。 1.1、获取页面中元素的方法 document.getElementById() context.getE
阅读全文
摘要:2017.2.27更新 选择“license server” 输入:http://idea.imsxm.com/ 2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框;选择“license server” 输入:http://114.215.133.70:41017 2016.2.
阅读全文
摘要:0.先给大家看看效果: 1.创建一个index.html文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html> <html lang="en"> <head
阅读全文
摘要:有如下代码: 1 2 3 div { width: 200px; } 1 2 3 div { width: 200px; } 1 2 3 div { width: 200px; } 1 2 3 div { width: 200px; } div { width: 200px; } 1 2 3 <di
阅读全文
摘要:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./upload
阅读全文
摘要:http://www.cnblogs.com/yc-755909659/p/6526896.html React 可以灵活的应用在各种各样的项目中。你可以用它来创建新的应用程序,你也可以逐步引用而不改变现有的代码库。 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 Java
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>componentKnowledge-同级组件通信</title> <script src="js/vue.js"></script> </head> <bod
阅读全文
摘要:这两天一直在看首屏优化的文章,所以将其总结归纳一下,方便以后使用。 相对于移动端的首屏优化,PC在有些方面要苛刻得多,主要是因为PC端有太多的东西想要让用户看到,这就难免PC端的页面大而“重”,与我们现在“富客户端”的概念想相呼应。 本文目录 1. 什么是首屏? 2. 为什么要做首屏优化? 3. 大
阅读全文
摘要:阅读目录 关于redux API 中间件与异步操作 异步操作的基本思路 React-Redux的用法 回到顶部 关于redux 之前写了一篇通过一个demo了解Redux,但对于redux的核心方法没有进行深入剖析,在此重新总结学习,完整的代码看这里。(参考了React 技术栈系列教程) 什么情况需
阅读全文
摘要:首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述. 在上一章说过babel是一个javascript编辑器,在react项目中使用babel有以下两个目的: 1:让代码支持ES6语法 2:支持react的一些特性(例如JSX语法) 针对
阅读全文
摘要:Animation Timing Window.requestAnimationFrame(callback): 告诉浏览器希望执行一个动画,让浏览器在下一个动画帧安排一次网页重绘(类似于 setTimeout,但是更精确) 该函数返回一个唯一标识符,在取消动画请求时使用 callback: 你希望
阅读全文
摘要:构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpack开始本篇从零开始,详细记录webpack的各个方面。文章中将会放入很多链接以便扩展,我也会归纳总结,不读扩展不会影响到对本文的理解,但是有时间还是看看吧。 声明: 在阅读本文列出的链接
阅读全文
摘要:最近开始了解微信小程序,虽然小程序已经出了很久了,刚出的那段时间很火,看到很多关于小程序的技术文章,不过现在似乎没那么火了,anyway,我们还是可以学习下的。 一、了解微信小程序 1.理念:小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。2.框
阅读全文
摘要:你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10。这是因为var声明的变量是函数作用域的,而不是块级作用域的。也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10。还有个问题是闭包导致的,闭包保存的是外部变量的引用,而不是值。也就是说,循环10次监听器创建了10
阅读全文
摘要:1、 请写出至少20个HTML5标签 <article><aside> <audio><video> <canvas><datalist><command> <details><embed> <figcaption><figure> <footer><header><nav><section> <h
阅读全文
摘要:全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新。这个功能主要是用于开发过程中,对生产环境没有任何帮助(这一点区别.net热插拔)。效果上就是界面的无刷新更新。 HMR基于WDS,st
阅读全文
摘要:JavaScript中通常分为两种类型转换,“隐式强制类型转换”(implicit coercion)和“显式强制类型转换”(explicit coercion)。 下面所有代码的源码可以在此处查看。 一、强制转换为字符串(ToString) 1)ToString 基本类型值的字符串化规则为:nul
阅读全文
摘要:一、值 1)数字 JavaScript只有一种数值类型:number(数字),包括“整数”和带小数的十进制数。 由于数字值可以使用Number对象进行封装,因此数字值可以调用Number.prototype中的方法。例如,tofixed(..)方法可指定小数部分的显示位数: 2)整数检测 3)nul
阅读全文
摘要:好在之前接触过 flux,对于理解 vuex 还是很有帮助的。react 学到一半,后来因为太忙,就放弃了,现在也差不多都忘记了。不过感觉 vuex 还是跟 flux 还是有点区别的。 对于很多新手来说,只是阅读文档是不好消化,我的建议是看看 vuex 的实例,通过研究实例来学习vuex。这样就会好
阅读全文
摘要:1、安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了48032
阅读全文
摘要:先来看下实现后的效果: DEMO DEMO 链接:在线DEMO,源代码 这个索引导航栏的效果在很多 APP 中都有应用,我也是参考了一些 APP 的效果进行实现。 不过之前接触移动端页面开发较少,所以是边学边做,也就把这个过程中的一些东西整理记录下来。 设计 这个功能的基本需求可以总结为一句话:手指
阅读全文
摘要:项目地址:ZengTianShengZ-github zBase-1.2.0 --v3 修复部分bug,添加AMD规范测试 zBase-1.1.0 --v2 对 v1 版本做了升级,优化DOM查找,简化API,提高代码可读性,支持模块化 支持 AMD & CommonJS zBase-1.0.0 -
阅读全文
摘要:Vue2 后台管理系统解决方案 linshuai 1 天前 Vue2 后台管理系统解决方案 linshuai 1 天前 1 天前 基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。 github地址:lin-xin/manage-system demo地址:manage
阅读全文
摘要:一、W3C 标准盒模型和 IE 盒模型区别: 1. W3C 标准盒模型: 盒子的高宽是由盒子的内容区仅由 width, height 决定的,不包含边框,内外边距。 2. IE 盒模型: 在 IE 盒模型中,盒子宽高不仅包含了元素的宽高,而且包含了元素的边框以及内边距。 所以在同样的设置下,IE 下
阅读全文
摘要:很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node没兴趣的可以只看这篇。 这里是下篇链接:手把手教你webpack、react和node.js环境配置
阅读全文
摘要:http://www.cnblogs.com/chenmeng0818/p/6508755.html 什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值、对象或者函数",对象是一组没有特定顺序的的值。对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值
阅读全文
摘要:最近很好奇前端的文件上传功能,因为公司要求做一个支持图片预览的图片上传插件,所以自己搜了很多相关的插件,虽然功能很多,但有些地方不能根据公司的想法去修改,而且需要依赖jQuery或Bootstrap库,所以我就想学下图片上传的原理,试着做一个原生无依赖,而且足够灵活的图片上传插件。话不多说,开整。
阅读全文
摘要:window.performance 是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持。一个performance对象的完整结构如下图所示: memory字段代表JavaScript对内存的占用。 navigation字段统计的是一些网页导航相关的数据: 0 : TYPE_NAVIGA
阅读全文
摘要:一、destructuring--解构赋值 1、数组解构赋值 (1)完全解构 let [a,b,c] = [1,2,3];//普通 console.log(a+":"+b+":"+c); let [a1, [[b1], c1]] = [1, [[2], 3]];//嵌套 console.log(a1
阅读全文
摘要:前言: 今天2月最后一天,写一篇jQuery的几个实例,算是之前前端知识的应用。写完这篇博客会做一个登陆界面+后台管理(i try...) 一、菜单实例 最开始的界面: 点击菜单三后的界面: 二、表单实例 效果图: 优化后: 实现功能: 功能1:点击菜单A, 则下面的内容为菜单A对应的内容。 功能2
阅读全文