这两种类型的变量有者不同的作用范围，全局变量的作用范围是面向整个文档的，可以称之为全局作用域，局部变量是在函数内部设置的，作用范围为当前的函数，外部不能直接引用，因此称为函数作用域。

首先确定蛇的移动区域，由一组'ul'标签构成，给予'ul'一个宽高，就组成了蛇的活动区域。'li'标签构成了蛇的身体和行进路线，以及蛇的食物，由不同的色块进行区分。'li'标签是在js文件里进行添加的，这个后面再提。

首先，我们先来分析一下整个页面的构成。一看可知，游戏框内是一个盒子里面有许多的小方块，我们可以利用 ul和li标签来制作蛇和食物。右侧就是简单的 2个p标签·一个select标签· 2个input标签而已。代码如下

贪吃蛇制作 （[链接]） HTML部分 首先我们需要一个HTML的页面制作 {代码...} css部分 紧接着我们需要一个css的页面我是用sass来做的 {代码...} 上面的css代码是ul大盒子 {代码...} 移动端的配置 {代码...} js部分 下面我们需要js页面来做效果 首先我们要获取我们需要的标签 {代码...} 我们需要初始化ul下面的每一个li {...

gulp的入门与使用 安装 使用 gulp的入门 安装 安装gulp需要使用到nodo.js,安装链接如下：[链接] 安装完成之后我们以全局安装gulp打开命令提示行，输入以下命令: {代码...} 然后我们建立自己的项目在自己的项目目录下，打开命令提示行，因为我们需要 " package.json "文件，所以我们需要输入以下命令： {代码...} 之后我...

gulp下如何搭建sass及使用 安装（[链接]） 第一步安装gulp脚本夹 npm install gulp-cli -gd 第二步初始化项目 npm init 初始化以后项目的目录中就会多一个package.json文件 第三步安装项目依赖文件包 npm install gulp -D 执行成功后文件夹中出现node_modules文件安装成功 第四步如果没有gulpfile.js文件自己手动在文件...

gulp的安装及使用 安装（[链接]） 第一步安装gulp脚本夹 npm install gulp-cli -gd 初始化项目 npm init 初始化以后项目的目录中就会多一个package.json文件 安装项目依赖文件包 npm install gulp -D 执行成功后文件夹中出现node_modules文件安装成功 下一步如果没有gulpfile.js文件自己手动在文件夹中创建一个 下一步将...

事件委托 事件委托利用冒泡原理，把事件加到父级元素上，触发事件的执行效果 优点： 节省内存开销 对于追加的节点同样有效 举了例子，创建一堆无序列表，我们希望当鼠标滑过的时，改变当前 <li> 的背景颜色 {代码...} {代码...} 这样，我们已经为每个 <li> 都添加了事件，但是，这个事件循环了 i 次，比较消...

事件代理（事件委托） 简述 事件代理就是在我们为一批元素添加事件的时候，可以将事件委托给父元素来触发事件。 优点 节省内存 可以对所有父元素下的子元素添加事件（包括原有的和后来添加的） 实例 {代码...} 当我们想为 li标签 添加一个鼠标划上某一个 li 时改变背景颜色这一事件的时候，我们有许多种方法，我们可以利...

事件委托（事件代理） 概述 事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类的事件 时间委托的好处 1、节省内存开销 2、追加节点同样有效 为什么要用事件委托 一般来说，dom需要事件处理，我们直接给他设事件处理就好了，但是如果多了dom的话，我们就需要设多个事件，这样大大的增加了内存的开销。比...

Angular基础认识 搭建环境 如果要是安装比较慢的话，那就用淘宝镜像，也就是cnpm； 全局安装Angular {代码...} 创建项目目录 {代码...} 进入项目目录 {代码...} 起服务 {代码...} 安装webpack {代码...} 运行程序 {代码...} 编写程序 在项目目录下新建一个名为app的文件夹，所有的程序都在这个文件里编写； 新建app.comp...

安装vue init webpack my-project的时候会出现几条命令，都选择no就可以了 译者注：对于大陆用户，建议将 npm 的注册表源设置为国内的镜像，可以大幅提升安装速度。可以用中国淘宝的镜像cnpm

Vue基础认识 搭建环境 全局安装 这里我推荐大家使用淘宝镜像装，也就是cnpm； {代码...} 使用“webpack”样板创建一个项目 {代码...} 进入项目目录 {代码...} 运行 {代码...} 编写程序 在src目录下创建components文件夹，然后在components里面创建componentA.vue componentA.vue {代码...} Hello.vue {代码...} 在src目录...

React结合Redux的使用 搭建环境 安装react 全局安装create-react-app {代码...} 创建目录 {代码...} 进入目录 {代码...} 运行 {代码...} 安装react-redux 装到配置文件里面 {代码...} 如果这条命令安装不上的话，可以使用cnpm安装； 编写代码 创建文件 component文件夹，创建Calc.js文件 {代码...} container文件夹，创...

React-native环境的搭建 安装依赖 在这里我把用的软件全部都传到了我的百度网盘上，可以直接去下载： license文件 链接：[链接] 密码：wyoq adt文件，包含eclipse和sdk文件 链接：[链接] 密码：atq8 jdk文件 链接：[链接] 密码：11qg pyhton文件 链接：[链接] 密码：ab3e gradle文件 链接：[链接] 密码：92tj 安装软件 ...

react-native的配置 首先要把安卓的环境搭上，才可以运行react-native，接下来我就把我的搭环境的步骤写在下面 这两个都可以安装，我的电脑是64位的，安装完之后就要配置环境变量了 java环境的搭建 JDK的安装，我把我网盘的链接给大家，直接去下载就可以[链接] 密码是n1x6， JAVA_HOME 环境变量的设，就是你jdk安装的位...

create-react-app学习之前可以从它的官网开始了解 推荐网址 安装 推荐网址 按这个步骤走下去： npm install -g create-react-app create-react-app my-app 使用命令创建应用，myapp为项目名称 cd my-app 进入目录，然后就启动 npm start 启动之后打开的页面： 这是我现在的项目目录： 下面代码： 如果觉得不舒服，可以自...

if语句 {代码...} switch语句 {代码...} {代码...}

最近两年，同学们出去讨论前端的框架，相信大家对vue也并不陌生，vue、angular、React并称前端三大框架！各有各的特色，在这里说一下，我们非常有必要学习这些东西，不管是求职面试，还是公司需要！

React有三种安装的方式，想了解的登录React官网查看，今天介绍的一个自动安装的不需要怎么配置环境，自动生成的方式，类似于vue-cli！并实现一个小案例，留言功能！

create-react-app留言板 搭建环境 创建package.json文件 {代码...} 安装create-react-app {代码...} 使用命令创建myapp目录 {代码...} 进入myapp目录 {代码...} 运行 {代码...} 它会自动跳转到页面： 安装loder {代码...} 修改项目 删除不需要的项目 修改完以后的项目目录 编写程序 因为我们这里会用到Bootstarp，所以我...

create-react-app做的留言板 先看一下我们的留言板，然后在去实现功能 做留言板首先要配置好我们的文件，然后才能接着做我们的留言板 快速开始： {代码...} 接下来看看我们的代码吧 index.html {代码...} index.js {代码...} LiuApp.js {代码...} LiuList.js {代码...} LiuForm.js {代码...} LiuItem.js {代码...} 以上...

webpack配置react做的小例子 根据昨天的配置我们继续往下做，我们在做一个小例子，首先还是要接着昨天的继续往下配置 {代码...} 安装完之后要下载bootstrap编译并压缩后的 CSS、JavaScript和字体文件。不包含文档和源码文件。然后配置在自己的app.js文件下 {代码...} 都配置完之后再接着在webpack.config.js里面添加语句...

React结合webpack实现表格记事 React官网有一个案例，实现表格的添加，我做一个比他复杂一点，结合bootstrap的案例。分享给大家！ 首先下载loader插件 {代码...} 配置webpack配置文件 {代码...} 引入bootstrap模块 测试通过npm包下载bootstrap文件有坑，我们手动下载，安装在css目录下，引用它！我们中引入了一些bootstr...

接React结合webpack配置! 制作一个简单的表格 TodoApp.js里的代码 {代码...} {代码...} {代码...} 下面的代码是表格最基本的排版内容： 可以参考网站：bootstrap {代码...} 使用bootstrap先配置文件 cnpm file-loader url url-loader --save-dev 再webpack.config.js文件里添加 {代码...} index.js {代码...} TodoForm.j...

前端技术更新太快，从几年前的jquery、djto、Prototype到react、vue、angular，自动化工具也是这样从之前的grunt、requireJs到现在的gulp、webpack、jspm、包管理工具也是从之前的bower、npm到现在的yern！技术更新换代特别快，所以我们开发人员每天应该有俩个小时以上来学习技术！

安装 node.js 安装 package.json文件 {代码...} 安装后的package.json {代码...} 安装webpack (模块打包机) {代码...} 安装babel {代码...} 安装转移的插件 {代码...} 进入webpack官网 {代码...} 安装 react相关库 {代码...} 运行webpack --watch {代码...} 运行 webpack-dev-server --content-base build/ 自动刷新(aut...

React结合webpack的具体使用 我们一般是使用npm进行安装的，这里我为大家推荐一款淘宝出的cnpm，这个和npm差不多，但是比npm安装的要快很多； 安装命令 {代码...} 搭建webpack环境 初始化一个package.json文件 {代码...} 安装webpack {代码...} 安装babel-loader来把jsx格式的代码编译成javascript {代码...} 安装babel-...

webpack的配置 最近一直在用react，接下来我们就用webpack启动一下react 首先我们要安装node.js，然后在使用接下来的配置 先在项目下生成一个package.json的文件 {代码...} 自动生成的package.json的文件 {代码...} 接下来在装webpack {代码...} 如果npm安装的慢可以用cnpm安装，前提是要先安装cnpm {代码...} 接下来我...

React、vue、Angular并称为前端3大框架，就目前来看，尽管Angular发布了4.x也在今年3月份发布了，vue、React更不在话下，大家要是想学习的话可以去官网学习。可以直接点击上方名字，进去学习！