详细说明:
前端开发体系分享-搜狗杨光(于搜狗高校俱乐部分享),仅供学习,搜狗版权所有。(搜狗高校俱乐部)搜狗搜索
基础知识
HTM工
CSS
Javascript
HTTP基础知识
目前较为广泛应用的版本是理M5、CSS3、ES6以及HTP/1.1
搜狗搜索
规范
W3C
DOM APL
事件绑定AP工
history
浏览器存储, cookie/1oca1 Storage
ECMA
Js语法基础,比如现在广泛使用的ES6语法
搜狗搜索
CSS扩展
SASS/SS等扩展语法,从程序员的角度编写CS,同时提升代码复用,提高编写效率。
1// base scss
// base. less
3 import 'reset:
dwidth: 10px
5 Sfont-stack: Helvetica, sans-serif
12345
height: Width 10pxi
6 Sprimary-color: L#333
7
6=*header C
8
y
width: width
font: 100% Sfont-stack
10
coLor: Sprimary-co lor:
789
height: height i:
11}
搜狗搜索
库和框架
jQuery
1 $( function ()t
console. log('Hello from jQuery)
3})
5 const text =(#id ). text(
6
s. ajax(t
8
urL:/path/to/your/api
9
type: get
10
dataType: json
11
success: function () I
12
error: function ()iI
13
comp lete: function ()ty
14})
搜狗搜索
库和框架
MV框架-Vue.js和 React.js
1
1 cLass He LloMessage extends React Component
II message 11
render()t
return
3
Hello ithis. props. nameI
6
10})
document. getElementById(root
14
搜狗搜索
前端工程化
页面工程日益复杂化
如何进行高效的多人合作?
如何提高团队的开发效率?
如何进行快速迭代并且保证项目质量?
前端工程化应运而生
兼顾代码开发阶段、打包发布阶段
达到组件化开发,自动化工具以及规范化
使用Node,s进行开发,任务管理结合转义、打包工具等,例如使用qu1p+Babe1+ Webpack实现一套自
动打包使用 React.s开发的前端代码库
工程化的优势
统一技术架构,提升开发效率
自动化打包,提高上线效率,降低发布出错的概率
搜狗搜索
越来越多的运行环境
浏览器
原生应用中的 Webview
服务端的Node.js
桌面应用E1 ectron
搜狗搜索
新的平台
微信小程序
快应用
Native应用,如F1 utter/ React native等等