关闭

webpack(1):什么是webpack模块

模块(Modules)在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。Node.js 从最一开始就支持模块化编程。然而,在 web,模块化的支持正缓慢到来。...
阅读(60) 评论(0)

webpack(2):Loader

webpack 的目标是,让 webpack 聚焦于项目中的所有资源(asset),而浏览器不需要关注考虑这些(明确的说,这并不意味着所有资源(asset)都必须打包在一起)。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。然而 webpack 自身只理解 JavaScript。webpack loader 在文件被添加到依赖图中时,其转换...
阅读(60) 评论(0)

什么是异步

通常,代码是由上往下依次执行的。如果有多个任务,就必需排队,前一个任务完成,后一个任务才会执行。这种执行模式称之为: 同步(synchronous) 。新手容易把计算机用语中的同步,和日常用语中的同步弄混淆。如,“把文件同步到云端”中的同步,指的是“使…保持一致”。而在计算机中,同步指的是任务从上往下依次执行的模式。比如:例 1A(); B(); C();在上述代码中,A、B、C 是三个不同的函数,...
阅读(65) 评论(0)

函数式编程(3):函数式编程特性

诞生50多年之后,函数式编程(functional programming)开始获得越来越多的关注。 不仅最古老的函数式语言Lisp重获青春,而且新的函数式语言层出不穷,比如Erlang、clojure、Scala、F#等等。目前最当红的Python、Ruby、Javascript,对函数式编程的支持都很强,就连老牌的面向对象的Java、面向过程的PHP,都忙不迭地加入对匿名函数的支持。越来越多的...
阅读(61) 评论(0)

函数式编程(2):Applicative编程

Applocative编程定义: 函数A作为参数提供给函数B var nums = [1,2,3,4,5];function doubleAll(array){ return _.map(array,function(n){ return n*2; }) } doubleAll(nums) // [2,4,6,8,10]function average(array){ var...
阅读(48) 评论(0)

函数式编程(1):高阶函数

高阶函数的定义:一个高阶函数应该可以执行下列至少一项操作 1.以一个函数作为参数 2.返回一个函数作为结果 _.each(['whiskey','tango','foxtort'],function(word){ console.log(word.charAt(0).toUpperCase+word.substr(1)); }) // 'Whiskey' // 'Tango' // '...
阅读(29) 评论(0)

React总结12:context

先看个代码:class Button extends React.Component { render() { return ( {this.props.children} ); } }class Message exte...
阅读(41) 评论(0)

Redux总结4:bindactioncreators的用法

今天看官方redux中的todomvc这个实例,找不到在哪里调用store.dispatch这个方法,最后在containers中的App.js文件中的mapDispatchToProps中发现,我看看一下他如何调用: 有代码我们可以看到是调用了bindActionCreators方法把action绑定到了connect方法中,其中connect方法的作用是连接react组件和redux st...
阅读(56) 评论(0)

懂点网站交互(5):导航栏和面包屑

我们首先要明白的是:如果在网站上找不到方向,人们不会使用你的网站。从你作为web用户的体会就可以知道这一点,如果到了一个网站,却找不到你要的内容,或者不知道这个网站是怎么组织的,你不太可能在那里呆很长时间——或者还会回来。那么,怎么创建那种公认“明确”、“简单”、“一致”的导航呢?网络导航101法则 我们浏览网站,通常是遵循以下过程: 1.进入网站通常是为了寻找某个目标。 2.用户会决定是先浏...
阅读(67) 评论(0)

什么是单页面应用(SPA)

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现U...
阅读(84) 评论(0)

懂点网站交互(4):省略多余的文字

有力的文字都很简洁。句子里不应该有多余的文字,段落里不应该多余的句子。当我们浏览网页时,发现页面上的大部分文字都在占地方,因为没人去阅读他们。所有多余的文字都在暗示你可能真的需要阅读他们来理解到底是怎么回事,这是的页面的理解难度提高了。去掉多余的文字有以下几个好处: 1.降低页面噪声。 2.让有用的内容更加突出。 3.让页面更简短,让用户在每个页面上都能看见更多的内容,而不必滚屏。欢迎词必须消...
阅读(87) 评论(0)

懂点网站交互(3):广告牌设计101法则

在上篇文章 懂点网站交互(2):我们实际上是如何使用web的 我们可以了解到实际上用户浏览网站时并不会按我们假定的方式,而是飞快的扫视而过,那么我们如何让用户了解我们的网站呢?1.尽量利用习惯用法 2.建立有效的视觉层次 3.把页面划分为明确定义的区域 4.明显标识可以点击的地方 5.最小化干扰 6.为内容创建清楚的格式,以便扫描习惯用法是你的帮手 我们要明确,任何东西,要让人能瞬间理解,一种最好...
阅读(41) 评论(0)

Web开发技术的演变

web发展了几十年,这期间,技术千变万化,很多技术都被淘汰了,我们并没有完整的经历过这个历史。下面介绍各项技术的革新。前后端不分 最初的web开发比较简单,开发者操控web服务器(经常还是他自己的服务器),有时候他还会写一些html代码放在指定的文件下。当发送html请求时,这些页面会出现。 以上返回的是静态内容,倘若查看网站的访问量或者放访问者填写包含姓名和邮箱的表单?可看到此模式的局限性。于...
阅读(141) 评论(0)

用position: sticky 实现粘性元素区域悬浮效果

在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。这个效果可以用position:sticky实现,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置...
阅读(77) 评论(0)

前端技术演进史

好久前写了篇前端演进史 ,然而我师傅并不满意,让我写个前端技术发展史,如是有了这篇文章。 - - 什么是前端前端:针对浏览器的开发,代码在浏览器运行后端:针对服务器的开发,代码在服务器运行 前后端不分的时代 互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。后端收到浏览器的请求生成静态页面发送到浏览器 后端 MVC 的开发模式那时的网站开发,采用的是后端 MVC 模式。 M...
阅读(145) 评论(0)

懂点网站交互(2):我们实际上是如何使用web的

我们设计网站的时候,假想过用户时如何使用网站的,并按照自己的假想设计网站使用流程,然而实际上用户使用网站的方式和我们假想的使用方式,差别很大。我们创建网站时,认为用户会盯着每个网页仔细阅读我们精心制作的文字,领会到我们页面组织方式,然后在确定点击哪个链接之前权衡他们的可选目标。而实际上,大部分时间里,他们只是在每个页面上瞥一眼,扫过一些文字,点击第一个令他们感兴趣或者大概他们寻找目标的链接。页面上的...
阅读(90) 评论(0)

懂点网站交互(1):网站设计准则

别忘我思考 这是网站交互设计中最最最重要的原则——它是设计中判别什么有用,什么没用的终极法则。 这意味着,当读者看到一个页面时,它应该是不言而喻、一目了然、自我解释的。 即读者能“明白它”——知道它是什么意思,怎样用它,并且不用额外的思考。 下图为读者阅读一个网站不需要思考时的心理活动: 下图为读者阅读一个网站需要思考时的心理活动: 设计网站最好的是,即使是对此网站不感兴趣的人,...
阅读(70) 评论(0)

Object.keys用法总结

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。也就是说我们可以用此方法罗列出对象的所有属性名传入对象,返回属性名var obj = {'a':'123','b':'345'}; console.log(Object....
阅读(73) 评论(0)

React总结11:ref的用法

之前对ref用法的了解一直仅限于如下:然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例,其实就是dom元素节点。let inputEl = this.refs.input; //然后通过inputEl来完成后续的逻辑,如focus、获取其值等等大多数教程上指明的用法都如上,其实这种方式基本不推荐使用,或者在未来的react版本...
阅读(36) 评论(0)

React总结10:当组件return boolean null undefined

在写组件的时候,如果return null或者undefined或者true的时候,会发生什么 看以下代码:{false}{null}{undefined}{true}视图中什么都没显示 false, null, undefined, 和 true虽然用大括号括起来是一个合...
阅读(57) 评论(0)
107条 共6页1 2 3 4 5 ... 下一页 尾页
    个人资料
    • 访问:18447次
    • 积分:1123
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:11篇
    • 译文:0篇
    • 评论:10条
    最新评论