项目随笔
关注
分享
扫一扫
艾小莫的梦
这个作者很懒，什么都没留下…
展开
-
react内嵌div高度屏幕自适应
怎样让一个div高度自适应浏览器高度在应用中很常见，这是一个前端开发人员老生常谈的问题。在我们一般的开发中只要设置了下代码，就可以让div自动适应屏幕的高度。html,body,div{ height:100%}但是最近我在写一个项目的时候，用的是react库，这导致我用上面的方法的时候，其他页面也受影响了。于是用了绝对定位完美了解决了这个问题。代码如下：原创 2017-03-28 17:46:54 · 11065 阅读 · 4 评论 -
webpack-dev-server不能自动刷新问题
使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题；寻找多方答案后明白了一些；下面有一些需要注意的点：1.webpack-dev-server并不能读取你的webpack.config.js的配置output！！你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用2.webpa转载 2017-07-11 16:06:03 · 5610 阅读 · 2 评论 -
使用webpack合并js文件
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前，先说一写webpack的基础知识。1、为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法模块化，让我们可以把复杂的程序细化为小原创 2017-07-10 11:11:26 · 15428 阅读 · 0 评论 -
react环境配置
前言前几天学习react，看了阮一峰的react入门博客，参考链接： http://www.ruanyifeng.com/blog/2015/03/react。在这篇博客中，所有的例子都是通过引入三个相关的js文件来实现react。下面看下第一个demo代码：<!DOCTYPE html><html> <head> <script src="../build/react.js"></原创 2017-07-11 14:56:31 · 612 阅读 · 0 评论 -
nodeJS创建第一个应用
最近开始了解nodeJS。做了如下的一个功能： 使用nodeJS开启一个服务，然后调用XXX后台接口的数据，返回的数据格式如下，然后以表格的形式在页面中展示出来。 代码如下：var http = require('http');var request = require('request');function handleData(arr){ var content = '';原创 2017-07-05 09:55:45 · 527 阅读 · 0 评论 -
你应该知道的 setTimeout 秘密
计时器setTimeout是我们经常会用到的，它用于在指定的毫秒数后调用函数或计算表达式。语法：setTimeout(code, millisec, args);注意：如果code为字符串，相当于执行eval()方法来执行code。当然，这一篇文章并不仅仅告诉你怎么用setTimeout，而且理解其是如何执行的。1、setTimeout原理先来看一段代码：var start = new Date()转载 2017-06-22 11:54:44 · 1318 阅读 · 0 评论 -
react常见问题解析
1、React 中 Element 与 Component 的区别是？官网文档对于Element的解释是：Elements are the smallest building blocks of React apps.An element describes what you want to see on the screen:官网对于Compent的解释是：Components let you s原创 2017-05-24 11:25:38 · 1536 阅读 · 0 评论 -
雅虎军规——前端优化的35条建议
无论是在工作中，还是在面试中，web前端性能的优化都是很重要的，那么我们进行优化需要从哪些方面入手呢？yohoo关于性能优化的35条的军规，web2.0的设计与视觉，用户越来越注重用户体验，但用户体验的前提就是网站的访问速度，对于一个大型网站的yahoo来说，处理性能优化是不可缺少的，他是怎么制定性能优化呢，相比很多朋友都想了解下，YaHoo把性能优化作为他们不可触犯的军规，具体怎样优化呢，且看他们原创 2017-07-14 10:42:33 · 1175 阅读 · 0 评论 -
对react的理解
现在最热门的前端框架有AngularJS、React、Vue等。最近实验室项目采用了react框架。下面就简单的谈一下我对react的理解。一、虚拟DOM节点在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。1、首先说原创 2017-05-11 20:57:30 · 1117 阅读 · 0 评论 -
React中state与props比较
state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的转载 2017-07-24 18:41:40 · 518 阅读 · 0 评论 -
从一个demo引发的对import、require的思考
这两天在学react的时候，用自己搭建的react全家桶封装了一个echart图表组件，在引包的时候，写了这样的代码。。。。 但是只是参考网上各种材料，写出了这种包的引入。写完以后不禁心中生出了很多疑问，通过查阅资料现整理如下：一、import跟require这两种方式有什么区别？1、遵循的模块化规范不一样模块化规范：即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初原创 2017-07-27 14:28:41 · 1159 阅读 · 0 评论 -
理解http304响应
一、什么是304先看一下304解释：更详细一点，我们可以这么理解：1、如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定原创 2017-05-23 11:42:56 · 746 阅读 · 0 评论 -
三分天下如何选择vue,angular，react
随着近几年的发展，前端已经不单单是html+css编写样式静态页了，而是往着更深层次发展，越来越多的前端js框架：angular、vue、React纷纷研发出来了。而作为前端的你。该如何选择？Vue.js Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和转载 2017-05-20 12:01:06 · 1011 阅读 · 0 评论 -
如何让css背景图片占满全部背景，并且保持长宽比
在实际的开发中，我们经常使用的背景图片比屏幕要小一点，这时候我们希望这个背景图片自动的铺满而不repeat，并且为了美观，我们希望保持其图片原有的长宽比。这时候，我们使用以下方法就可以了.bk{ background-image: url(http://tupian.aladd.net/photo2/1611.jpg); background-repeat: no-repeat;原创 2017-03-28 18:08:36 · 78922 阅读 · 7 评论 -
前端学习路线
书籍方面： Javascript高级程序设计 或 Javascript权威指南 Javascript精粹 深入浅出nodejs，或 nodejs开发指南网站方面： github：编写自己的项目，学习别人的项目阮一峰：http://www.ruanyifeng.com/blog/张鑫旭：http://www.zhangxinxu.c原创 2017-05-11 21:10:33 · 493 阅读 · 0 评论 -
前端性能优化
前端性能优化是项目中经常遇到的问题，网上也是提供了很多可行的方法，现在根据自己的理解，总结一些前端性能优化的方法。首先说一下什么是前端性能优化：从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。那么我们为什么要进行前端性能优化呢：在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很原创 2017-05-23 14:42:48 · 653 阅读 · 0 评论 -
从一道面试题谈js函数声明
爱奇艺前端面试题有个题目如下：a();function a(){ console.log('a');}b();var b = function(){ console.log('b');}那么函数的执行结果是？熟悉函数变量提升的同学很容易就想到答案是：a undefined。不熟悉的童鞋们可以接着往下看～JS关于函数的声明，有一个很重要的特征就是函数的变量提升。意思是在执行代原创 2017-05-15 16:33:14 · 1773 阅读 · 1 评论 -
如何阻止iframe里引用的网页自动跳转
今天做了个网页，要在网页里设置一个iframe，然后套用其他的网站的时候，出现了莫名其妙的问题，我的网页居然会强制自动跳转到这个网页上。经过网上的资料搜索，发现问题的原因是由于嵌入的页面中有以下代码：if (top.location != self.location) {top.location=self.location;}使用里这段代码之后，会自动判断当前的locatio原创 2017-05-08 15:35:51 · 19140 阅读 · 2 评论 -
CSS常见布局：左侧固定，右侧自适应
这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局：<div id="outer"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</原创 2017-05-18 16:56:04 · 6130 阅读 · 0 评论 -
JS中类型的检测
在js开发中，经常需要检测一个变量的类型。现在就总结一下常见的检测变量类型的方法，以及它们的适用场景。一、typeof要检测一个变量是不是基本数据类型，typeof是最佳的工具。也就是说，typeof是确定一个变量是字符串、数值、布尔值还是undefined的最佳工具。但如果变量是一个对象或者null，则typeof操作符会都返回object：var num = 123;var str = 'ab原创 2017-05-19 10:55:50 · 712 阅读 · 0 评论 -
css清除浮动
为什么要清除浮动我们先来看一个现象： HTML代码结构<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div>CSS样式.outer{border: 1px solid #ccc;background: #fc9;color原创 2017-05-18 14:01:21 · 394 阅读 · 0 评论 -
跨域请求的几种实现方式
什么是跨域跨域是由于浏览器的同源策略导致的，所谓的同源就是指协议、域名、端口相同。当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。（也就是跨域发生在浏览器阶段，当请求一个跨域资源时，服务器会返回相应的脚本，但是浏览器并不会执行）实现跨域的几种方式1、JSONP最常见的一种跨域方式，其背后原理就是利用了script标签不受同源策略的限制，在页面中动态插入了script原创 2017-05-19 17:24:07 · 1049 阅读 · 0 评论 -
单页web应用是什么？它又会给传统网站带来哪些好处?
什么是单页应用？单页应用是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。 单页应用给传统网站带来的好处？相对于传统网站，我们认为单页应用的主要好处是：它提供了更加吸引人的用户体验。单页应用可以做到一举两得：桌面应用的即时性和网站的可移植性和可访问性。单页转载 2017-05-20 12:09:55 · 488 阅读 · 0 评论