![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端小白之路
sunOpar
编程对于我来说,那是一辈子的事情
展开
-
双飞翼布局
双飞翼布局的意义第一可以实现三列布局左右固定宽度,中间宽度自适应,第二个,通常三列布局都是按照左(sub)中(main)右(extra)顺序来写的,这样页面也会根据这个DOM结构来顺序加载,而如果用双飞翼布局,可以使三列布局中mian先加载,sub和extra后加载。双飞翼布局的实现双翼html:<body> <div class="main"></div> <div class="原创 2016-02-08 18:50:15 · 533 阅读 · 0 评论 -
Object.prototype.toString跨框架判断类型
为什么要用Object.prototype.toString而不是Function.prototype.toString或者其它?这是和他们的toString解释方式有关系的。下面是ECMA中对Object.prototype.toString的解释: Object.prototype.toString( ) When the toString method is called, the转载 2016-03-01 10:15:38 · 444 阅读 · 0 评论 -
overflow:hidden清除浮动原理
overflow:hidden清除浮动原理BFC (Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了原创 2016-06-15 13:48:38 · 4940 阅读 · 0 评论 -
解决for循环闭包取值问题
解决for循环闭包取值问题代码fuction doanimate(){ for(var i = 0;i < 5;i++){ elment[i].animate({ top:'50px' },500,'linear',function(){ element[i].css('top','0px');原创 2016-07-03 15:30:43 · 2364 阅读 · 0 评论 -
函数柯里化
什么是柯里化在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。 在直觉上,柯里化声称“如果你固定某些参数,你将得到接受余下参数的一个函数”。 柯里化实现的原理在函数式编程语言中,将函数可以当做对象传递调用,利用闭包实现。柯里化的适用场景当你要经常执行一个函数,但是这个函数有一些东西永原创 2016-07-28 18:59:06 · 587 阅读 · 0 评论 -
扒一扒vue的数据追踪原理
大家都知道在angular或vue中,数据的更新会实时的反应到dom上,那么到底是什么原理呢,下面就vue探讨一下。打开vue的官网,可以看到它关于vue如何追踪变化的原理。 把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。这是 ES5 特性,不能打补丁实现,这便是为什原创 2016-07-19 20:12:31 · 6117 阅读 · 0 评论 -
yeoman-bower-grunt之间的关系
前置技能Node and NPMnodeJs就是基于谷歌v8引擎的一个javascript环境,使js不仅可以运行在浏览器端,也能在服务器端运行。NPM(Node Package Manager),是nodeJs的包管理工具,其主要作用就是可以利用npm下载和管理库框架之类的开发工具。NPM使用NPM主要用的命令就是npm install,例如:npm install -g yo其中可以通过加入-g原创 2016-07-19 20:17:47 · 2078 阅读 · 0 评论 -
怎么让route拥有redux的方法
需求如何利用route的onEnter钩子来出发redux的dispatch方法 I just wrapped my routes in a function that returns them. This allows you to pass the redux store as an argument Any onEnter/onExit functions are also d原创 2016-09-17 15:26:15 · 1189 阅读 · 0 评论 -
Vue2-Cannot read property 'component' of undefined
问题Cannot read property ‘component’ of undefined原因版本问题,由于vue2删除了vue1的内部指令,而vue-router1.x依赖vue的一个内部指令。这上面如果是1.x版本,会读取Vue.internalDirectives.component这个属性,而实际上vue2根本没有Vue.internalDirectives,所以导致undefined。原创 2016-09-08 14:56:56 · 19431 阅读 · 7 评论 -
React.createElement: type should not be null, undefined, boolean, or number
原因是你通过import {xxx} from 'xxx'这个方法引入了一个export default的对象。 对于export default的对象,你应该直接引入,通过以下方法。import xxx from 'xxx'参考: https://codereviewvideos.com/blog/warning-react-createelement/原创 2016-09-27 20:13:44 · 3323 阅读 · 1 评论 -
对Object.assign的拷贝分析
简介Objct.assign是用来做什么的?如果给你一个这样的三个对象var a = {a:'a',b:'ab'}var b = {b:'b',c:'bc'}var c = {c:'c',ab:'ab'}让你把b和c合并到a,你会怎么写? 这时候就可以使用Object.assign,他的作用是将第一个参数作为目标,然后将其他参数合并到目标参数中。Object.assign(a,b,c)//a原创 2016-09-29 22:59:14 · 2877 阅读 · 0 评论 -
react更改原数据再触发action,不会触发重新渲染
问题描述react更改原数据再触发action,不会触发重新渲染原因原因是当你更改原数据时,this.props.data已经更改,这时再触发action,当进行shouldComponentUpdate时,nextProps.data和this.props.data实际上是一样的。解决方法对数组进行简单深拷贝,使用slice 对象对话使用object.assign// actionexport原创 2016-09-26 18:16:40 · 5174 阅读 · 0 评论 -
设置多个模块(div)高度一致
实现目的假设你的页面中有几列高度非固定的模块,他们的顶部是对齐的,而他们的高度会随着其内容的增删而变化,你又希望让他们无论如何都能保持高度一致,也就是说高度自适应且保持一致,这时就可以使用以下方法。具体方法1.首先给他们设置一个外包裹层。效果如图: 具体如下 html:<div class="content-wrap">------------外包裹层 <div class="subco原创 2016-02-27 11:49:53 · 7167 阅读 · 2 评论 -
浅谈外边距的叠加
简单来说,当两个或更多垂直外边距相遇时,他们会合并成一个外边距。这个合并外边距的大小为相遇两垂直外边距中较大的那个。外边距叠加的条件只有普通文档流中块级元素的垂直外边距才会发生外边距叠加。行内框,浮动框与绝对定位框之间的外边距不会叠加。两元素必须相毗邻(没有被内边距、边框以及任何东西隔开),这也就意味着在普通流中,父元素与其第一个子元素只会margin-top相邻,而其margin-bottom原创 2016-02-26 16:29:06 · 666 阅读 · 0 评论 -
常用meta整理
在segmentfault看到这篇文章,觉得整理的很详细,所以转载过来和大家分享一下。 原文地址:http://segmentfault.com/blog/ciaocc/1190000002407912 作者:ciaocc 版权归ciaocc所有,转载请注明版权。< meta >元素概要 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显转载 2016-02-09 13:21:49 · 293 阅读 · 0 评论 -
用css+js制作可自动伸缩导航栏
作者的话偶然一个机会,在网上看到一篇ted公开课【让我们教孩子编程吧】 里面有一个实例,说是一个小男孩制作了一个大鱼吃小鱼的游戏,他想为这个游戏做一个计分板(吃一条鱼加一分),便他在网上求教,后来被网站创作者发现后,告诉了他答案:变量。通过这个学到的知识点【变量】也许小男孩永远不会忘记。从中可以看出,通过需求学习编程往往比为了学编程而学习编程要记得更劳并且更有价值。这也对我之后的学习以及写作产生的原创 2016-02-02 10:47:24 · 2834 阅读 · 0 评论 -
html基础书写布局介绍
如果文章对你有帮助,请点赞并关注,这将是我最大的动力。通过百度的源代码为例,来介绍html的基础布局1.百度首页源代码2.依次介绍html的基础布局从头开始依次介绍2.1.<!DOCTYPE html>2.1.1.用处html的头文件,因为html有很多版本,浏览器只有知道html的确切版本,才能正确的显示出html页面信息。因此这就是头文件的作用,用来声音html的版本2.1.2.用法规范它必须原创 2016-02-02 11:00:18 · 905 阅读 · 0 评论 -
JavaScript基础笔记集合
js简介js是脚本语言。浏览器是逐行的读取代码,而传统编程会在执行前进行编译js存放的位置html脚本必须放在<script>、</script>之内。<script>可放置在<head>、<body>里和css一样,JS可以存放在外面,通过<script src="">来链接现代浏览器不需要声明type="text/javascript"通常的做法是把函数放入<head>或页面的底部,这原创 2016-02-02 20:08:51 · 603 阅读 · 0 评论 -
为非列表元素设置列表样式
任务概述最终效果以段落例,实现自定义列表,并且自动排序所涉及知识点html:class的使用css :计数器(counter),列表样式(list-style),:before任务为元素设置计数器效果图: 思路: 1. 首先随便写几个<p>,<hn>元素(废话) 2. 通过给父元素设置counter-reset初始化计数器 3. 通过:before给所要设置计数器的元素设置coun原创 2016-02-04 14:53:05 · 495 阅读 · 0 评论 -
请先点我!
我想说的话偶然一个机会,在网上看到一篇ted公开课【让我们教孩子编程吧】 里面有一个实例,说是一个小男孩制作了一个大鱼吃小鱼的游戏,他想为这个游戏做一个计分板(吃一条鱼加一分),便他在网上求教,后来被网站创作者发现后,告诉了他答案:变量。通过这个学到的知识点【变量】也许小男孩永远不会忘记。启发从中可以看出,通过需求学习编程往往比为了学编程而学习编程要记得更劳并且更有价值。这也对我之后的学习以及写作原创 2016-02-04 14:54:35 · 683 阅读 · 0 评论 -
纯css实现下拉列表
作者的话偶然一个机会,在网上看到一篇ted公开课【让我们教孩子编程吧】 里面有一个实例,说是一个小男孩制作了一个大鱼吃小鱼的游戏,他想为这个游戏做一个计分板(吃一条鱼加一分),便他在网上求教,后来被网站创作者发现后,告诉了他答案:变量。通过这个学到的知识点【变量】也许小男孩永远不会忘记。从中可以看出,通过需求学习编程往往比为了学编程而学习编程要记得更劳并且更有价值。这也对我之后的学习以及写作产生的原创 2016-02-04 14:55:26 · 1433 阅读 · 0 评论 -
for循环效率对比
三种for循环1.【普通】for循环for(var i = 0;i < arr.length;i++){ console.log(arr[i]);}2.【加强版】for循环for(var i = 0,len = arr.length;i < len;i++){ console.log(arr[i]);}3.【for-in循环】fir(var i in arr){ cons原创 2016-03-05 08:22:48 · 6717 阅读 · 0 评论 -
线性理解原型对象
简介本文试图通过对对象的需求来线性地理解原型对象。 首先来看一下创建对象的方法有哪些。创建对象的方法1.定义并创建对象的实例var dog=new Object();-------创建dog对象//也可以写成 dog = Object();var dog.name="diudiu"---------dog对象属性2.通过对象字面量方法创建对象 var dog={ name:"diud原创 2016-03-05 09:49:06 · 996 阅读 · 0 评论 -
react+redux+webpack移动端项目总结
前言距离我进新公司也有一个多月,这一个月的事件使用react写了一个项目,期间断断续续重构了两三次,目前已经完成第一阶段测试,也总结分享一些使用react的一些坑。react先啰嗦几句讲一下react原理,新人可以认真看下,老鸟可跳过。react并没有像其他如vue,ng一样采用MVVM模式,所谓MVVM模式,狭义来说就是将模板与数据绑定在一起,当数据发生改变时,模板自动更新,这是中间的VM,最左边原创 2016-10-28 00:12:35 · 4724 阅读 · 0 评论