JavaScript前端有哪些轮⼦
前端有哪些轮⼦(不包括 Node 后端领域)//轮⼦的特点就是给别⼈⽤1. 标准库的扩充 //因为JavaScript系统提供的库,有些缺点
1. underscore.js 扩充了 Array 和 Object 相关 API
2. moment.js 扩充了 Date
3. bluebird.js / hax/my-promise 实现了 Promise
4. async.js 模拟了 async 操作符
5. es5shim ⽤ ES 3 语法部分实现了 ES 5 特性
6. handlebars.js 实现模板字符串功能
2. DOM 的扩充
1. jQuery.js 操作 DOM
2. video.js 操作 video
3. Fabric.js 操作 canvas
3. UI 组件 //⽤户界⾯
1. 纯 CSS 的 UI 组件库,如 Bulma
2. ⼤⽽全的 UI 框架(CSS + JS),如 Bootstrap、Element UI
3. 垂直领域的 UI 组件
1. 专门做轮播的 Swiper
2. 专门做输⼊提⽰的 typeahead.js
3. 专门做⽂件上传的 fine-uploader
4. 专门做 3D ⽡⽚效果的 vanilla-tilt.js
5. 专门做视差效果的 parallax.js
6. 专门做数据可视化的 D3.js
7. 专门做图表的 echarts.js
8. 专门做动画的 velocity.js
9. 专门做粒⼦效果的 particle.js
10. 专门做⼿势识别的 hammer.js
4. 编程思想类的轮⼦
1. 实现 MVC 思想的 backbone.js
2. 实现 MVVM 思想的 AngularJS 1 和 Vue 1
3. 实现 Virtual DOM 的 React 和 Preact
4. 实现单向数据流(FLUX)思想的 Redux
5. 实现 Reactive 思想的 Rx.js
6. 实现 Rails 思想的 Ember.js
7. 实现函数式思想的 Ramda
我们的重点
重点是 UI 组件,因为
1. 我们⽇常⼯作中经常⽤到的就是 UI 组件
2. UI 组件⼀般是由 HTML、CSS 和 JS 组成,把 UI 组件做好了,就能更好的做⽹页
3. UI 组件做起来更有趣,所有效果你都能⽤眼睛看到,⽽做编程思想类、DOM扩充类组件可能过于抽象
原则
(内部)分层原则:正交原则
(对外)封装原则:⾯向接⼝编程
例⼦1,⼀个 Tab 组件
新⼿思维:.show .hide
正交思维:JS 不要控制样式,只切换状态
例⼦2,⼀个 sticky 组件
新⼿思维:⽤ JS 控制定位
正交思维:JS 不要控制样式,只切换状态
例⼦3,⼀个 Dialog 组件
注意⾯向接⼝编程
例⼦4,⼀个 suggestion 组件
注意⾯向接⼝编程
例⼦5,⼀个轮播组件
注意正交原则和⾯向接⼝编程
<figure style="box-sizing: border-box; display: inline-block; margin: 0px; max-width: 100%; color: rgb(
36, 41, 46); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 253, 255);">[图⽚上传失败...(image-f53498-1516872389448)]
<figcaption >图⽚</figcaption>
</figure>
数据或状态存储在哪⾥
1. 可以存在 DOM 上⾯(如何 data-id、class),缺点:可能被同事覆盖或修改
2. 可以存在 JS 变量⾥
编程原则//即将贯穿你程序员的⽣涯
javascript属于前端吗1.正交原则//前端css/html/JavaScript样式,内容,⾏为三者分离原则
⽐如说jQuery提供了.show可以展⽰css,这明显是JavaScript操作了css,不要这样做,同⼀功能,我们可以2.⾯向接⼝编程
我们具体实现⼀个功能,⾸先想到的是,⽤户如何调⽤代码,⽽不是想着实现细节~~~