http://javascript.ruanyifeng.com/introduction/intro.html…

看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我在这里主要分了上下两部分,上部分是列表展示,下部分是添加待办,先在src目录下创建一个component文件夹用来存放组件,文件夹中可以先创建两个组件文件list.js和addItem.js. 二.初始数据 先假设目前已经添加了部分了部分待办事项,所以我在根组件的state中模拟了一些数据: lis…

一.为什么Javascript有设计缺陷?这里有三个客观原因,导致Javascript的设计不够完善.1. 设计阶段过于仓促Javascript的设计,其实只用了十天.而且,设计师是为了向公司交差,本人其实不愿意这样设计(参见<Javascript诞生记>).另一方面,这种语言的设计初衷,是为了解决一些简单的网页互动(比如,检查"用户名"是否填写),并没有考虑复杂应用的需要.设计者做梦也想不到,Javascript将来可以写出像Gmail这种极其庞大复杂的网页.2. 没有先…

continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环. break语句用于跳出代码块或循环. 标签(label) JavaScript 语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下. label: 语句 标签可以是任意的标识符,但不能是保留字,语句部分可以是任意语句. 标签通常与break语句和continue语句配合使用,跳出特定的循环. top: for (var i = 0; i < 3; i++){ for (v…

-  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月…

测试框架 Mocha 实例教程   作者: 阮一峰 日期: 2015年12月 3日 Mocha(发音"摩卡")诞生于2011年,是现在最流行的JavaScript测试框架之一,在浏览器和Node环境都可以使用. 所谓"测试框架",就是运行测试的工具.通过它,可以为JavaScript应用添加测试,从而保证代码的质量. 本文全面介绍如何使用Mocha,让你轻松上手.如果你以前对测试一无所知,本文也可以当作JavaScript单元测试入门.值得说明的是,除了Mocha以…

摘自http://www.ruanyifeng.com/blog/2015/02/make.html Make 命令教程 作者: 阮一峰 日期: 2015年2月20日 代码变成可执行文件,叫做编译(compile):先编译这个,还是先编译那个(即编译的安排),叫做构建(build). Make是最常用的构建工具,诞生于1977年,主要用于C语言的项目.但是实际上 ,任何只要某个文件有变化,就要重新构建的项目,都可以用Make构建. 本文介绍Make命令的用法,从简单的讲起,不需要任何基础,只要会…

声明:转载自阮一峰的网络日志 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script>…

  鉴于最近用 vuejs 框架开发项目,其中有很多涉及到 es6 语法不太理解所以便认真地读了一下这本书. 地址:http://es6.ruanyifeng.com/#README 第一章:let ,const 命令以及块级作用域 es6 新增了 let 和 const 这两个变量的声明关键字,这样大大的强化了 js 变量的合理程度以及修补了很多es6 版本前出现的bug.他们有着以下的特性:   一:let 的声明  1.1 用let 声明的变量会将变量绑定到声明时所属的语句块中,并且语句块…

jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来说,学会jQuery是必要的.因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果. 虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多.初学者常常感到,入门很方便…

阮一峰老师的github地址:React Demos React 入门实例教程 2.ReactDOM.render() // ReactDOM.render() 将模板转化为 HTML 语言 // 参数一:被渲染的标签 // 参数二:被插入的父元素 ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); 3.JSX 语法 import React, { Component } fr…

SSH 教程 --阮一峰 文章出处 SSH 基本知识 SSH(Secure Shell 的缩写)是一种网络协议,用于加密两台计算机之间的通信,并且支持各种身份验证机制.实务中,它主要用于保证远程登录和远程通信的安全,任何网络服务都可以用这个协议来加密. SSH 是什么 历史上,网络主机之间的通信是不加密的,属于明文通信.这使得通信很不安全,一个典型的例子就是服务器登录.登录远程服务器的时候,需要将用户输入的密码传给服务器,如果这个过程是明文通信,就意味着传递过程中,线路经过的中间计算机都能看到密…

作者: 阮一峰 https://github.com/ruanyf/react-demos 转自:http://www.ruanyifeng.com/blog/2015/03/react.html 对着文章的说明,看明白了,再跑下demo ....…

Javascript继承机制的设计思想   作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨…

作者:阮一峰(转自阮一峰的网络日志,如有侵权,立即删除) 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex 布局将成为未来布局的首选方案…

前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js应用程序的基本组成部分,文件和模块是一一对应的. 换言之,一个Node.js文件就是一个模块,这个文件可能是Javascript代码.JSON或者编译过的C/C++扩展. 实例一: 这个实例演示的是,在hello.js中创建一个方法,然后在主程序main.js中调…

❲阮一峰❳Linux 守护进程的启动方法 "守护进程"(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 Web应用写好后,下一件事就是启动,让它一直在后台运行. 这并不容易.举例来说,下面是一个最简单的Node应用server.js,只有6行. var http = require('http');    http.createServer(function(req, res) {      res.writ…

声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!考虑到Javascript模块现在还没有官方规范,这一点就更重要了. 目前,通行的Javascript模块规范共有两种:CommonJS…

声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,它不支持"类"(class…

Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便开发的附属工具,按道理说是不值得单独为之写一篇文章的.不过Knot.js的Debugger绝对值得一篇文章. 有过框架开发体验的朋友一定多少都有过和框架搏斗的经验.一个小小的设置错误,由于你对框架的不够熟悉,导致出错后完全摸不到头脑.或者被迫在一堆陌生的代码中跟踪尝试找出问题,或者只有上网到处拉人提…

我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资源很多,要慢慢找.赖世雄老师的站点 ,赖老师讲解的语法 . (2)好好学习下Bootstrap吧 ,什么东西都是浅尝辄止的过去该告别了. (3)再也不在百度上写博文了,坑爹.昨天是看了大漠的AngualarJS,认识了一些不错的工具软件.忘记了就再去看看视频吧,真是不想再写一遍了. 开发.调试.测试工具,po…

转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事. 很多网站的解决方法,是为不同的设备提供不同的网页,比…

鉴于最近用 vuejs 框架开发项目,其中有很多涉及到 es6 语法不太理解所以便认真地读了一下这本书. 地址:http://es6.ruanyifeng.com/#README 第一章:let ,const 命令以及块级作用域 es6 新增了 let 和 const 这两个变量的声明关键字,这样大大的强化了 js 变量的合理程度以及修补了很多es6 版本前出现的bug.他们有着以下的特性:  一:let 的声明 1.1 用let 声明的变量会将变量绑定到声明时所属的语句块中,并且语句块外部不可…

首先上交阮一峰老师的github地址,一共有15个demo,我们一个一个的进行分析,结合上文所学的知识! 其中有一些内容,我做了修改,我是先看一遍然后从新敲了一遍. https://github.com/ruanyf/webpack-demos 准备工作 首先还是安装,不过这一次,我们进行全局安装. $ npm i -g webpack webpack-dev-server webpack-cli 克隆仓库地址 git clone https://github.com/ruanyf/webpac…

-------------------------下面是阮一峰博士的git branch 逻辑结构图示---------------------------------------------- 如果你严肃对待编程,就必定会使用”版本管理系统”(Version Control System). 眼下最流行的”版本管理系统”,非Git莫属. 相比同类软件,git有很多优点.其中很显著的一点,就是版本的分支(branch)和合并(merge)十分方便.有些传统的版本管理软件,分支操作实际上会生成一份…

MVC,MVP 和 MVVM 的图示   作者: 阮一峰 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身很容易理解,但是要讲清楚,它与衍生的 MVP 和 MVVM 架构的区别就不容易了. 昨天晚上,我读了<Scaling Isomorphic Javascript Code>,突然意识到,它们的区别非常简单.我用几段话,就可以说清. (题图:摄于瓦伦西亚,西班牙,2014年8月) 一.M…

Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solved by Flexbox. 一.骰子的布局 骰子的一面,最多可以放置9个点. 下面,就来看看Flex如何实现,从1个点到9个点的布局.你可以到codepen查看D…

Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的…

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html Redux 入门教程(二):中间件与异步操作   作者: 阮一峰 日期: 2016年9月20日 上一篇文章,我介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染. 但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后,Reducer 立即算出 Sta…

ES6(阮一峰)学习总结   1.块级作用域的引入 在ES6之前,js只有全局作用域和函数作用域,ES6中let关键字为其引入了块级作用域. { var a = 5; let b = 6; } console.log(a); //5 console.log(b); //b is undefined let声明的变量只能在其所在的代码块内才能访问,var声明的变量由于是全局变量,因此可以在代码块外访问 2.暂时性死区 var声明的变量可以在声明之前使用,相当于默认为其声明其值为undefined了…