web前端开发

Web前端框架与类库的思考

十年热恋 提交于 2020-01-04 00:36:59
说起前端框架,我也是醉了。现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利。 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉。网站技术是为业务而存在的,除此毫无意义,框架也是一样。在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道。就好像一个日均pv只有几百的小型电商网站,却要大喊“某宝就是这么搞的”,然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统…等巴拉巴拉的一堆用来处理高并发,海量数据访问的手段。我想说,有意义吗?   前端框架的理解误区 网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的。前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架。 当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要,值得学习借鉴,但我们不能因此变得盲从。只有深刻去理解前端框架,知道什么时候该用什么什么框架解决什么问题,才能有的放矢,直击要害。   前端框架与前端类库的区别 使用框架前

Web前端框架与类库的思考

走远了吗. 提交于 2020-01-04 00:36:49
前端框架的理解误区 网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的。前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架。 当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要,值得学习借鉴,但我们不能因此变得盲从。只有深刻去理解前端框架,知道什么时候该用什么什么框架解决什么问题,才能有的放矢,直击要害。 前端框架与前端类库的区别 使用框架前,我觉得很重要的一点是弄清类库(诸如JQuery)和框架(诸如angularJS)的区别在何处。 简单而言,类库,解决的是代码或者是模块级别的复用或者对复杂度的封装问题,例如将一个解决复杂问题的功能模块封装成一个函数,提供一个简单的接口。库它是一种工具,它提供了很多封装好的方法,用与不用取决于我们自身,即使用了也不会影响我们呢的代码结构。 而框架,更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC,为了实现M和V的解耦,把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化

前端框架:Angular React 和 Vue的比较

↘锁芯ラ 提交于 2020-01-04 00:36:32
前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等; 2.开发框架,如Angular,React,Vue.js,Angular2等; 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术; 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,ReactNative,Weex;计算机图形学和3维建模领域的WebGL(three.js等);可视化与数据分析领域的d3.js等;包括浏览器不断开放的更多新特性和接口比如svg,canvas,蓝牙,电池,本地存储,service worker,Houdini等新的API能力,以及像WASM这样的底层优化技术; 就开发框架这块,Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间,所以这里对比一下这三门技术,以便之后的技术选型。 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。 实现原理: $scope 变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,

2017前端框架何去何从

好久不见. 提交于 2020-01-04 00:34:42
>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手,分析前端框架在这几年发展中的关键技术点,作为2015前端技术选型的参考。摘要: - 初体验 - 技术特点 - 组件化 - 应用架构 ### 总结 **1. 初体验** 拿TODO来作为引子好了. ![](//upload-images.jianshu.io/upload_images/8373224-4e10488b2196f18d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Angular 的实现 ![](//upload-images.jianshu.io/upload_images/8373224-5966342b1a65597b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) React的实现(非flux架构) ![](//upload-images.jianshu.io/upload_images/8373224-fdd1c5436dfee33e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Polymer的实现 ![](//upload-images.jianshu.io/upload

前端工程化

余生颓废 提交于 2020-01-04 00:26:27
前段工程化可以分成四个块来说,分别为 模块化:将一个文件拆分成多个相互依赖的文件,最后进行统一的打包和加载,这样能够很好的保证高效的多人协作。其中包含 JS 模块化:CommonJS、AMD、CMD 以及 ES6 Module。 CSS 模块化:Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是样式覆盖。而 CSS Modules 则是通过 JS 来管理依赖,最大化的结合了 JS 模块化和 CSS 生态,比如 Vue 中的 style scoped。 资源模块化:任何资源都能以模块的形式进行加载,目前大部分项目中的文件、CSS、图片等都能直接通过 JS 做统一的依赖关系处理。 组件化:不同于模块化,模块化是对文件、对代码和资源拆分,而组件化则是对 UI 层面的拆分。 通常,我们会需要对页面进行拆分,将其拆分成一个一个的零件,然后分别去实现这一个个零件,最后再进行组装。 在我们的实际业务开发中,对于组件的拆分我们需要做不同程度的考量,其中主要包括细粒度和通用性这两块的考虑。 对于业务组件,你更多需要考量的是针对你负责业务线的一个适用度,即你设计的业务组件是否成为你当前业务的 “通用” 组件,比如我之前分析过的权限校验组件,它就是一个典型的业务组件。感兴趣的小伙伴可以点击 传送门 自行阅读。 规范化:正所谓无规矩不成方圆

前端杂七杂八的汇总(...)

限于喜欢 提交于 2020-01-04 00:17:59
重要的网址工具 1、 http://www.php100.com/manual/jquery/ (jQuery) 2、 http://keleyi.com/a/bjad/608jhyr6.htm (jQuery) 3、 http://www.w3cfuns.com/article-5598356-1-1.html 4、 http://dev.dcloud.net.cn/mui/javascript/#ajax (js,jquery) 5、 http://blog.csdn.net/adsdassadfasdfasdf/article/details/5603206 (jquery插件大全) 6、 http://www.swiper.com.cn/download/ (swiper下载) 7、 http://www.bootcss.com/p/unslider/ (滑动插件) 8、 http://blog.csdn.net/gzshun/article/details/8924195 (Linux系统ssh和scp) 9、 http://www.cnblogs.com/sysu-blackbear/p/3463475.html (git) 10、 http://www.yiibai.com/nodejs/nodejs-quick-start.html (nodejs) 11、

关于web前端的学习路线

元气小坏坏 提交于 2020-01-04 00:16:22
第一阶段: HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础: Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效: 常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征: 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery:基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。 第二阶段:HTML5和移动Web开发 HTML5: HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发: 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem

web前端

寵の児 提交于 2020-01-04 00:15:57
1, 蓝色理想 http://www.blueidea.com/ ; 诞生于1999年10月的蓝色理想,以建设网站设计与开发人员之家为宗旨,以介绍网络开发技术与网站创作设计交流为主要内容,是国内最大的设计类站点之一。 2, W3School http://www.w3school.com.cn/index.html ; W3School是最完善的在线教程站,包括 XHTML教程、XML教程JavaScript & AJAX、网站构建等前端开发人员必备的系统性学习教材。 3, 前端观察 http://www.qianduan.net/ ; 前端观察是一个纯粹的前端技术分享网站,本站的目的是为前端技术人员提供所需的资讯及资源,挖掘国内优秀的原创设计及内容,加以高度的整理。 4, CSS88 http://www.css88.com/ ; CSS88专注前端开发,关注用户体验,是一个资深的Web前端开发站,不仅传播前端技术,更重要的是关注前端设计从业者的生存状态,有多个开放的前端交流群。 5, CssRain http://www.cssrain.cn/ ; CssRain实用的前端技术信息,原创和搜集前端开发中细节的内容,一本jQuery新书推荐<<锋利的jQuery>>你值得拥有。 6, 我爱CSS http://www.52css.com/ ; 我爱CSS

博客初心源于前端攻城狮

十年热恋 提交于 2020-01-04 00:15:28
初始博客的初衷源于“前端攻城狮”,有人很疑惑为啥因为它呢?那就让我们一起来了解“前端攻城狮”吧! 首先,前端攻城狮是取得前端工程师的谐音!它是一个职位,对于这个职位有几个字可以概括:高薪,有前景,累,苦逼。 前景: 这个职位是近五年才兴起的一个职位,在之前是被鄙视的一个!有句话说得好风水轮流转,现在这个职位风生水起了,它的市场是可以说是供不应求! 如何了解前端?    前端是做什么的?   --- 产品经理(PM或者叫PD)根据可行性调研后提需求,然后和视觉(UE)确定交互视觉稿,由前端和后端进行开发。后端负责数据和接口设计,前端负责页面呈现和交互功能    前端工程师要会哪些东西?   ---前端不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等       以上只是初步的说下这个职位...... 来源: https://www.cnblogs.com/rainheader/p/4573690.html

Web前端知识体系精简

北战南征 提交于 2020-01-04 00:07:49
Web前端技术由 html、css和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍。目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括:变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中,变量声明有两种方式,分别是 var 和 function ,var 用于声明普通的变量,接收任意类型,function用于声明函数。另外,ES6 新增了 let、const、import 和 class 等四个命令,分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种,分别是 String、Number、Boolean、Null、Undefined 和 Object 等, 另外,ES6新增了 Symbol 类型。其中,Object 是引用类型,其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型,因为其占据空间固定,是简单的数据段,为了便于提升变量查询速度,将其存储在栈