前端开发的基础知识

前端的开发规范

本文主要从以下几个方面来概述前端的开发规范

1. 目录构建规范
2. 前端命名规范
3. 前端工作规范
4. 开发文档的书写规范

1. 前端目录构建规范

我们从命名原则、根目录、业务逻辑等方面进行目录构建

- 简洁明了（如下：）
  * src 源代码   
  * img  图片资源    image images
  * js  JavaScript脚本  
  * dep 第三方依赖包     development package
- 不使用复数（如下：）
  * 不使用 imgs   docs  

1.2 根目录（root）结构按职能划分（如下：）

     src 源代码（逻辑）

     doc  文档 

     dep  第三方依赖包

     test 测试

1.3 根据业务逻辑进行文件夹的划分（如下：）

  \- src目录名词解释：

​      \-common 公共资源

​      \- public/static 静态资源

​      \- component 组件

​      \- view/tpl 模板文件

​      \```     

​        src

​          common  公共资源 

​            img

​              logo.png

​              sprites.png

​            css

​              reset.css

​            js

​              conf.js  项目的配置文件

​          public/static 静态资源

​            js

​            css

​            tpl

​              index.html

​              shopcar.html

​            img

​          component   组件 

​            home 

​            shopcar

​            login

​            register

​            user

​            list

​            detail

​          view/tpl   项目模板           tpl  是  template 的缩写

​      

1.4 总结：

​ 以上目录开发规范有两种使用途径

​ \1. 使用前端工程化工具如webpack、gulp等进行手动打造

​ \2. 利用框架提供的脚手架工具进行修改

2前端命名规范

>这部分内容我从以下两个方面来进行讲解

- CSS命名规范

​ - BEM规范

​ - OOCSS规范

- javaScript编写规范

​ - jslint

​ - eslint

前端发展历史

html
html [1990]----> html5 [2008.1.12]

css
css 1.0 1996
css 2.0 1998
css 3.0 2001

EcmaScript
1997年诞生
2015 EcmaScript 2015
2016 EcmaScript 2016 dart语言 vs javascript

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

M Model 数据层
V View 视图层
VM ViewModel 视图模型（ 业务逻辑 VM 是 由 P 改名得来的）
P Presenter 提出者（ Controller 改名得来的 ）
C Controller 控制器 ( 业务逻辑 )

Backbone.js MVP 2010.10

Angular.js( 1.0 ) MVC 2010.10

Angular.ts ( 2.0 ) MVC -> MVVM 2016 目前已经更新到了 Angular7 ( 也属于angular2.0 版本 )

Vue 1.0 MVVVM 2014/07

Vue 2.0 MVVM 2016/09

React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V

github统计量 （ 国际使用量 ）不代表大陆地区 单位是： K

angular.js angular.ts vue React

59.6 49.1 142 131

学习难度： Vue < React < Angular( 2.0 )

前端流行

移动 web && hybird app( 混合app )

app
1. native app ( 安卓 ios java ME)
2. webapp ( 应用在浏览器中的app )
3. Hybird app ( 混合app )
1. webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）

MV*的图示

MVC
| C改名为P
MVP
| P更像是媒人了（ 连接 M V 的桥梁）
MVVM
| VM 是 由 p改名得来的 VM 和 V 的关系更加的亲密
| “MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样

注意：
以上的这几个框架都是： 单向数据流（ 数据由 父级 流向 子级 ）

1. Vue.js是尤雨溪的个人项目
2. Vue.js是一个MVVM框架
3. Vue.js也是一个javascript的渐进式框架（ 越学越难 ）
4. 前端还有一个比较知名的MVVM的个人项目： 司徒正美 avonlon.js

vue.js安装

1. script标签引入（ cdn| 下载 ）
2. 模块化安装 npm/cnpm/yarn