web前端，需要做什么

[LingYanSi]

1.一个前端项目由哪些内容构成

2.前端的工作有哪些

欢迎补充

[LingYanSi]

1.电脑

mac

2.版本控制

git / 可用tower

3.前端脚手架

node
nginx // 请求转发
gulp // 打包
webpack // 打包
postcss // css处理
eslint // 语法检测
mocha/karma // 单元测试

4.前端项目需要哪些内容，如果不考虑seo可全站单html文件

css : 使用less/sass
reset.css // 格式化
base.css // 基础样式
业务.css

html

js es6搞起
jquery/zepto/angular/react/vue 基础框架库
proxy.js // 本地请求代理，用来获取mock数据
underscore/lodash.js // 一些常用的对object/array/string 的操作
pubsub.js // 事件订阅/广播，逻辑复杂时可用
轮播.js
日期.js
基础业务.js // 基础业务的抽象
业务.js
数据打点.js // 百度统计、谷歌分析，或者自己写，用于统计【UA,UV等数据，页面按钮点击等信息】

fastclick.js // 移动端用
fetch.js // http请求

富文本.js // 富文本编辑，当然有可能还需要一个代码编辑器
highlight.js // 代码高亮
echarts.js // 图表
video.js // html5 视频播放
audo.js // 音频播放

图片上传.js // 异步上传，不支持formdata的使用iframe，反则使用formdata

flux/redux
immutable.js // 不可变

5.chrome插件

FE助手
自动化测试.js // 对于比较关键复杂需要长期维护的业务，最好写一个自动化测试的插件

6.编辑器

Sublime/Atom/Webstorm 等

[LingYanSi]

1. pc/h5/app

pc 看项目支持ie8+ 可使用react
h5 可用vue
app 可用react-native 

2. 活动页面

活动页面可使用【模块化打包方式】来解决大量重复劳作的问题

3. 后台

可使用 angular/react/vue

4. 运营管理

可使用 angular/react/vue

5. 数据mock

其实也是后台
通过本体的http proxy来请求本地moack的数据

其中3、4、5可以用自己的一套ui/bootstrap来ui层面的问题
关键点在于功能的正常使用

6. 测试环境/线上发布 【错误日志处理】

我的意思是这里用node做 打包、压缩、版本号的处理
上线这个动作，其实只是代码的copy，从125复制到周瑜，从周瑜复制到测试机，再从测试机复制到线上
代码的版本控制实在svn/git
假如从svn切换到git需要在服务器上跑一个 webpack/grunt
如果新文件上线，就重新打包，然后文件名加一个md5戳

7. 前后端分离 【可加node层/也可用php/javascript实现】

node层 主要做页面渲染的事情

8. 统一的内网账号管理系统

本地环境搭建

使用node来做 php/java的事情，本地打包上线
使用<script>来获取首页数据</script>避免第一次加载
全站只是用一个 html文件，其他数据通过js来加载
之所以要服务器端来渲染是为了seo

但是另一个问题，seo友好与否和自己的业务有关系，比如淘宝，就完全不用考虑这个问题
也就是说电商网站的seo是不用考虑的，只需要首页seo友好即可

移动版呢？

[LingYanSi]

// 基础类型
Object
array
string
function
boolean
number
null
undefined
NaN
isNaN

// 转码解码
escape
unescape
decodeURI
encodeURI
decodeURIComponent
encodeURIComponent

xmlHTTPRequest/fetch 
JSON
location
history
localStorage
Url
FormaData
generator // 可用async替代
async/await // generator的语法糖
Promise
navigator

class // 类
()=>{} // 箭头函数
;(()=>{})() // 立即执行函数

void
with 

浏览器支持的html对象？
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()

getAttribute()
setAttribute()

document.querySelector()
document.querySelectorAll()

classList
clientX,clientY,clientHeight,clientWidth
getBoundingClientRect()

dataSet()

contentText

node 
element
node.children
node.parentElement
node.nextElementSibling
node.previousElementSibling
node.className
node.id
node.innerHTML

$('a')[0].addEventListener('click',function(){console.log(111,this)}) // 注册事件
var event = document.createEvent('Event'); // 创建事件
event.initEvent('click',true,true,null,null); // 初始化事件
$('a')[0].dispatchEvent(event) ; // 派发事件，事件立即执行

element.scrollHeight
element.scrollTop

[LingYanSi]

数据打点

这边的数据大点是通过请求一个图片来做的，这是因为图片请求不受跨域限制，并且会把打点服务器的cookie带上。👍

window.Logger = (arg={})=>{
    var URL = 'https://tj.xxx.com/1.gif?' 
    var img = new Image()

    // object -> string
    var search = Object.keys(arg).map(item=>{
        return item+'='+arg[item]
    }).join('=')

    img.src = URL + search
}

不受跨域影响的还有

<link href="url?type=xx" rel="stylessheet">
<script src="url?type=xxx" type="text/template">
// 指定type，文件不会被浏览器执行
</script>