流行框架课程重难点总复习

tips

从现在开始，文件、文件夹名字一定不要是中文，不要起得很特殊(比如叫js,jquery,node之类的)
命令要写对，不要写一半就不写了，然后问为什么和视频里面不一样
这只是一份重难点的复习，如果要看详细版的笔记，建议看word笔记
angular相关的概念确实抽象的有点多，单词太多，记不住很正常，能掌握多少算多少，不要有心理上的阴影

git

为什么要学习git

对我们写的代码进行版本管理

概念

工作区:写代码的地方
暂存区:类似购物车
仓库:git备份代码的地方
版本:每一次commit，都会产生一个新的版本
冲突:两个版本合并的时候，同一个文件同一行代码不一样
分支:当公司需要做二个功能的时候，可以考虑一个功能创建一个分支，这样，切换分支写代码的时候，两个功能不会互相干扰
克隆:把代码从服务器下载下来
忽略文件.gitignore
ssh : 用公钥、私钥的方式提交代码(不需要输密码)

git操作流程

初始化仓库 git init
配置用户信息：
- 配置用户名:git config --global user.name "xxx"
- 配置邮箱: git config --global user.email "xm@sina.com"
把代码添加到暂存区
- git add 项目路径
将暂存区的代码提交到仓库
- git commit -m "这是对这次添加的东西的说明"
将代码提交到远程服务器
- git push [地址] master

常用命令

git init:初始化git仓库
git config --global user.name "zhengwei1949":配置用户名，每台电脑只需要配置一次，以后不用配置了
git config --global user.email "zhengwei1949@qq.com":配置用户名，每台电脑只需要配置一次，以后不用配置了
git add . : 把代码从工作区放到暂存区
git commit -m "注释说明" : 把代码从暂存区放到仓库
git status : 查看当前代码提交的进度状态
git log 或 git log --oneline 或 git reflog : 查看代码拥有的版本历史
git reset --hard Head~1
git reset --hard 分支名：版本回退
git branch : 查看当前git仓库拥有的分支
git branch 分支名 : 创建新的分支
git checkout 分支名：切换分支
git branch -d 分支名 : 删除分支
git push https://github.com/zhengwei1949/buju.git master : 把代码推送到服务器
git pull https://github.com/zhengwei1949/buju.git master : 把代码从服务器上拉取下来
git clone https://github.com/zhengwei1949/buju.git : 克隆代码
git remote add origin https://github.com/zhengwei1949/buju.git : 服务器地址太长了，不愿意写，可以给服务器设置一个变量，名字叫origin
git push -u origin master : 把代码推送到服务器上
git push
git pull

tips

如果记不住这么多命令怎么办
- 从现在开始使用webstorm(如果电脑用起来比较卡，还是用sublime,vsCode吧)
- 尽可能把webstorm的使用搞熟悉

npm

为什么要学习npm

方便下载各种前端的框架、库
用来安装各种前端的工具(比如less,gulp等)

概念

npm ：类似迅雷，下东西用的
node_modules ：我们下载的东西会放到哪里
require ：类似<script src="?">
https://www.npmjs.com/ ： npm下载的官网
http://npm.taobao.org/ ： npm官网的国内版本
cnpm : 取代npm的命令
package.json : 类似种子文件，记录了我们下载过了哪些文件，我们把代码发给别人的时候，可以把node_modules去掉，只发这个文件，别人可以通过cnpm install下载下来所有的node_modules里面的代码

常用命令

npm init -y : 初始化npm,会创建一个文件叫package.json
npm install --save jquery bootstrap zepto : 同时下载jquery,bootstrap,zepto库
npm install -g less : 全局安装less

gulp

为什么要学习gulp

我们在写代码的时候，需要把代码进行less->css,sass->css的转换
我们在代码要上线的时候，我们需要做的事情是对代码进行压缩合并以上，gulp都可以帮我们做到

常见api

gulp.task 创建任务。
gulp.src 要处理的文件
gulp.dest 把要处理的文件放到哪里
gulp.watch 监视文件的变化，一旦变化会执行我们指定的任务
gulp.run 执行任务

常见插件

gulp-uglify : 压缩js
gulp-concat : 合并js、css
gulp-cssnano : 压缩css
gulp-htmlmin : 压缩html

代码示例参考

var gulp = require('gulp');//引入gulp库
var uglify = require('gulp-uglify');//因为我们下面要压缩js，所以，这里面引入gulp-uglify插件
gulp.task('ceshi',function(){//创建一个任务，名字叫ceshi
    gulp.src('./a.js')//指定我们要处理什么文件
        .pipe(uglify())//使用uglify插件
        .pipe(gulp.dest('./dist'));//指定我们要处理的文件处理好之后放到哪里
})

angular

为什么要学习angular

用来做业务逻辑比较复杂的单页面应用
- 单页面应用怎么理解
  1. 从技术角度来理解：ajax + hashchange事件 + location.hash
  2. 从应用程序角度来理解：微信是用来聊天的，邮箱是用来收发邮件的，王者荣耀是用来玩的，都是有具体的功能和作用的，应用程序是用来做一个东西满足我们的需求的，而不是像以前一样的一个普通的网页，只是拿过来用来看的
- 为什么要用angular来做
  1. 因为如果业务比较复杂，用原生的或jquery来实现代码量太多，开发周期太长
  2. 看下面的这么多的功能需求，想一想，用jquery来慢慢写复杂不复杂?

angular理解

是框架
是用来做单页面应用的(spa)

书写angular.js代码的步骤

引入angular库
通过ng-app="myApp"指定angular管理的范围，并且通过angular.module('myApp',[])
通过ng-controller和myApp.controller指定控制器的管理范围
建模：根据页面结构，抽象出具体的数据模型
根据页面中的事件的触发形式和触发的时机，绑定对应的事件
在$scope上面写具体的事件触发后的逻辑

对mvc的理解

这块如果大家从说明性的文字开始学习，基本上是一脸蒙逼，建议大家直接开始看我写的代码
https://github.com/zhengwei1949/understand_mvc_mvvm
我们之前写代码是一坨，代码不利于维护，而mvc则是把我们写的代码按照职责划分成视图、数据模型和控制器三大部分
我们以存取钱来解释这一切
- 发工资了：你们会计把钱打到你的卡上(控制器做的事情) --> 你的银行的账号钱变多了(数据模型) --> 你用取款机一看，界面上的数据发生了变化（视图）
- 取钱：你通过取款机取了一部分钱（视图） --> 银行的计算器系统会去扣你的账号里面的钱(控制器) --> 你账号的钱变少了(数据模型)

对mvvm的理解

+ mvvm和mvc的区别
    1. mvc : 不管什么操作要通过控制器
    2. mvvm: 视图和$scope上的数据是双向数据绑定的，并不需要经过什么控制器

对模块化的理解

1. 参考https://github.com/zhengwei1949/module

常见内置指令

ng-app ：限定angular代码的范围
ng-controller：限定控制器的范围
ng-init：初始化数据模型，用得不多
ng-model：一般用于input,select,textarea标签上面，用来设置、获取value值，我们是通过这个来实现数据的双向数据绑定
ng-click：类似ng-click
ng-class:与样式相关的大家应该第一反应用这个
ng-cloak：防止闪烁用的
ng-bind：防止闪烁用的，作用和表达式类似
ng-show/ng-hide/ng-if：标签的显示隐藏与这个有关
ng-repeat：看到数组就要想到用这个
- $index
- $first
- $last
- $even
- $odd
ng-href
ng-src
ng-change:必须和ng-model配合来使用，否则会报错

创建控制器的四种方式

之前学过的方式

var myApp = angular.module('myApp',[]);
myApp.controller('myController',function($scope){

})

传统方式

function myController($scope){

}

面向对象的方式

var myApp = angular.module('myApp',[]);
myApp.controller('myController',function(){
    this.name = 'xiao ming';
})

安全的方式

var myApp = angular.module('myApp',[]);
myApp.controller('myController',['$scope',function($scope){

}])

自定义指令常见属性

相关代码：https://github.com/zhengwei1949/angular_custom_directive
template
templateUrl
restrict: 也是需要提供一个字符串，限制自定义指令的使用形式
- A : Attribute 表示只能以属性的形式使用
- C : Class 表示只能以类样式名的形式使用
- E : Element 表示只能以自定义标签的形式使用
replace：需要提供一个布尔值，为true时，模板会被用来替换自定义指令所在标签
transclude: 需要一个布尔值, 为true时会将自定义标签中的内容插入到模板中
scope：需要一个对象: 可以用来获取自定义指令的属性值
link: 需要一个function且里面有三个参数
- scope ：类似于$scope,只不过scope的属性只能在模板中使用
- element : 自定义指令所在标签对应的对象(jqLite)
- attributes : 包含了自定义指令所在标签的必有属性

过滤器

数组数据过滤器
- 模糊匹配

<li ng-repeat="item in data | filter : true">
{{item.name}}
</li>

+ 精确匹配

<li ng-repeat="item in data | filter : {completed:true}">
{{item.name}}
</li>

内置数据格式过滤器
- currency 货币格式转换
- date 日期格式转换
- json 让json数据好看一些
- lowerCase 大写转小写
- upperCase 小写转大写

实现计算器的N种思路

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="A">+
    <input type="text" ng-model="B">
    <input type="button" value="=" ng-click="add()">
    <input type="text" ng-model="result">
    <script src="./angular.js"></script>
    <script>
    var myApp = angular.module('myApp',[])
    myApp.controller('myController',function($scope){
        $scope.A = 0;
        $scope.B = 0;
        $scope.add = function(){
            $scope.result = ($scope.A - 0) + ($scope.B - 0);
        }
    })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="A">+
    <input type="text" ng-model="B">
    <p>{{(A-0) + (B-0)}}</p>
    <script src="./angular.js"></script>
    <script>
    var myApp = angular.module('myApp',[])
    myApp.controller('myController',function($scope){
        $scope.A = 0;
        $scope.B = 0;
    })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="A">+
    <input type="text" ng-model="B">
    <p ng-bind="(A-0) + (B-0)"></p>
    <script src="./angular.js"></script>
    <script>
    var myApp = angular.module('myApp',[])
    myApp.controller('myController',function($scope){
        $scope.A = 0;
        $scope.B = 0;
    })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="A">+
    <input type="text" ng-model="B">
    <p ng-bind="getResult()"></p>
    <script src="./angular.js"></script>
    <script>
    var myApp = angular.module('myApp',[])
    myApp.controller('myController',function($scope){
        $scope.A = 0;
        $scope.B = 0;
        $scope.getResult = function(){
            return ($scope.A - 0) + ($scope.B - 0);
        }
    })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="A">+
    <input type="text" ng-model="B">
    <p>{{getResult()}}</p>
    <script src="./angular.js"></script>
    <script>
    var myApp = angular.module('myApp',[])
    myApp.controller('myController',function($scope){
        $scope.A = 0;
        $scope.B = 0;
        $scope.getResult = function(){
            return ($scope.A - 0) + ($scope.B - 0);
        }
    })
    </script>
</body>
</html>

监视$watch

用来监视数据模型
用来监视数据模型的对应的函数的返回值

服务(service)

我们会把公共的代码提取到common.js当中 --> 我们在angular.js当中，会提取到一个叫服务的地方去

myApp.server('myService',[function(){
    this.name = 'itcast';
}]);

myApp.controller('myController',['$scope','myService',function($scope,myService){
    console.log(myService.name);
}])

todoMVC思路

相关代码：https://github.com/zhengwei1949/step_to_step_todoMVC

前期训练

一定要学会数据建模
- 练习：打开淘宝或京东的商品详情页，试试看要怎么建立数据模型
- 练习：找到淘宝或京东的商品列表页，试试看要怎么建立数据模型
把简版todoMVC会写出来
- 数据展示功能
  1. 为什么要有id
- 添加功能
- 删除功能
把编辑的功能搞明白如何实现的

思维模式

看到列表 --> 想到用ng-repeat
看到样式 --> 想到用ng-class
看到input --> 想到用ng-model
如果没有思路的情况下，就点几下，按几下，试试这个东西啥时候会触发，怎么触发的
如果一个数据模型的值依赖于另一个数据模型，那么可以考虑让这个数据模型的值来自另一个数据模块对应的函数的返回值

书写代码步骤及思路

项目初始化
- 下载项目
``git clone https://github.com/tastejs/todomvc-app-template.git
- 安装依赖的js,css
```
    cnpm install
```
- 去掉用不上的代码：把base.css,base.js去掉
展示任务
添加任务
删除任务
修改任务内容
- 前期我们不用想太多，自然会想到和删除类似，要传一个id进去
- 接着我们结合之前做过的简版todoMVC思考，如何实现编辑效果
- 其实是通过ng-class来实现的，要传入一个布尔值
- 这个布尔值如果写死成true或false,则达不到我们的目的，我们每一次只能同时有一个是在编辑状态
- 这时候思考：我们每一列的id其实是不一样的，我们可以考虑搞一个变量，让这个变量的值等于这个id，这样做判断表达式的时候，就能出来一个true和一堆的false
- 效果实现之后，最后再想，一开始的情况下所有的处于未编辑状态，所以我们初始的时候就把这个变量设置成-1
切换任务状态
批量切换任务状态
显示未完成的任务数
清除所有已完成任务

为什么要从后往前删的理解

//思考：为什么不能把6删除掉？？？？？？
var arr = [1,4,6,9];
for(var i=0;i<arr.length;i++){
    if(arr[i]%2 === 0){
        arr.splice(i,1);
    }
}
console.log(arr);

filter过滤器实现切换不同状态任务的显示
切换不同状态焦点状态样式的操作
使用$watch重构all,active,completed这块的代码
使用service进行重构代码(这块了解即可)

路由

通俗的理解
- 你去一个大楼的时候，保安问你：你是谁，你要去哪里，你要做什么
- 相关代码：https://github.com/zhengwei1949/angular_route_demo

豆瓣项目思路

代码参考：https://github.com/zhengwei1949/step_to_step_douban/
对jsonp的理解和认识
- 如何手写一个jsonp的代码(这块确实有难度，如果不行，可以自己百度这块的代码有一堆的)
为什么很多人觉得难
- 视频里面有点绕，把文件分得太细了，建议大家按我的思路来做，全部写在当前文件当中

项目模板划分方式
首页模块功能
正在热映、即将上映、top250模块结构搭建
假数据绑定
正在热映(通过ajax请求得到数据)
angular使用jsonp请求豆瓣数据(封装jsonp方法的service)
通过点击事件来获取分页数据
分页完善
即将上映
top250功能
合并重复的功能
设置loading动画
切换导航栏焦点状态
详情页
搜索功能

考试注意事项

把考试当成是一次整个7天知识点的复习
最后一道代码题，之前的情况是很多同学根本不愿意思考，没有理解题的意思就开始做，结果做出来的东西和别人要求的根本不是一回事情
注意时间，时间快到了，尽快把自己写的代码上传上去

zhengwei1949 / myblog

流行框架课程重难点复习 #92

流行框架课程重难点总复习

tips

git

为什么要学习git

概念

git操作流程

常用命令

tips

npm

为什么要学习npm

概念

常用命令

gulp

为什么要学习gulp

常见api

常见插件

代码示例参考

angular

为什么要学习angular

angular理解

书写angular.js代码的步骤

对mvc的理解

对mvvm的理解

对模块化的理解

常见内置指令

创建控制器的四种方式

自定义指令常见属性

过滤器

实现计算器的N种思路

监视$watch

服务(service)

todoMVC思路

前期训练

思维模式

书写代码步骤及思路

路由

豆瓣项目思路

考试注意事项