长春网站建设长春,太原做app网站建设,怀仁建设局网站,医疗教育的网站建设1:前端架构的基本知识
1: 前端工程师必须会的一些技能
前端工程师基本技能图.PNG
2: 前端架构基本知识
什么是前端架构? 每个人对每个架构有不同的认识和一些想法。没有一个架构是完美的#xff0c;只有一个架构是不是适合你的。哪个个架构符合你的需求的时候#xff0c…1:前端架构的基本知识
1: 前端工程师必须会的一些技能
前端工程师基本技能图.PNG
2: 前端架构基本知识
什么是前端架构? 每个人对每个架构有不同的认识和一些想法。没有一个架构是完美的只有一个架构是不是适合你的。哪个个架构符合你的需求的时候你使用它就是了啦。另外,要记住的是架构是为完成产品服务的.一个简单的网站也可能涉及到前端架构,比如代码的复用.做前端架构的目的? 做架构的目的并不是为了技术做架构而是因为产品才做架构的;single page application (SPA) 单页网站页面的应用,所有应用页面的切换通过页面的哈希完成,做这样的事需要一些比较复杂的框架,像backbone,anjular.js.单页面应用最近几年开始流行起来了,像qq邮箱,雅虎邮箱等都已经在应用了.2:前端建构技术基础介绍
技术基础的作用:做好技术基础的好处在于:后面做网站的整体规划和架构设计就会轻松非常多
语言基础
javascript,html css
基本框架和类库
jQuery (更方便做代码开发) require.js/ seajs(模块化框架),MVX farmwork帮助我们更高效的去开发代码
设计模式
继承,重用代码如何组织:比如我们在页面上有两个地方的代码有重复,我们把代码封装成一个函数,这是最基本的设计模式-代码重用
性能优化
http cache,local cache,compress(代码压缩),DOM render(DOM渲染)
如何解决性能瓶颈问题: 1: 最常见的就是找到缓存的点,可以从http协议层面可以做缓存,利用HTML5做本地缓存 2: 做代码压缩 3:更科学的做DOM树的渲染
其它
Resful API design(前后台数据联调),自动化(Group/node.js),跨终端适配,代码托管3:产品设计和发布
如果我们想让产品更加具有灵魂感,我们必须自己去思考产品应该被设计成什么样
交互设计图.PNG 4:数据分析和优化
数据分析和优化是做前端架构的必要前提,因为前端页面的数据对于我们前端工程师来说是非常重要的,比如可以根据数据波动去发现页面中的bug等等;最终的目的是提高产品的整体的体验和质量 大家以一个比较全局的观点去考虑这个问题的时候,不要以技术的观点去想,而要以产品的规划和产品怎么为用户服务的理念去想 5:前端架构组织方式和目录组织
架构组织的维度分以下几个方面 目录层面 利用操作系统与生俱来的目录结构,合理规划目录结构,是好的架构实现的基础页面层面 页面层面,通常用来组织视图( HTML )功能层面 最简单的网站,单个文件通常是一个或多个相关功能的聚合组件化和设计模式层面 当一个逻辑需要多次被使用时,我们就开始组件化和抽象 1 :目录层面的组织
目录系统在前端架构中所充当的作用:更高效的组织开发目录: 好的组织方式,甚至可以代替那些复杂的代码组织框架CSS,JS 和图片要分开存放:分开存放,往往不是出于技术的考量,而是从团队协作和迭代管理层面触发
举例: js目录结构,根据以下三层,分门别类的放置文件
1: Model: 数据层,存放与服务器打交道的代码
2: UI: 控制视图业务逻辑的代码
3: Controller: 控制层2: 页面层面的组织 由于页面中有不同的代码,所以不能用相同的方式进行组织架构的划分,在我们页面中有 js(逻辑性代码); html(结构性代码);css 描述性代码 重用:一般页面与页面之间经常会有公共的部分,我们把公共的部分抽象出来,存放到一个文件夹,然后将里面的文件作为公用部分. 同常来讲,页面与页面之间之间 不太存在逻辑之间的关系,而是包含与被包含的关系,比如一个页面包含某个子结构.
3: 功能层面
最简单的网站,单个文件通常是一个或多个相关功能的聚合
6: 组件化和设计模式层面(详细讲解,单独作为一节) JS中的继承和Extend 继承和拷贝是JS中抽象的基础,因为JS不像其它面对对象语言,与生俱来就有这些功能,所以呢,要自己写 浅拷贝简单例子
var a {};
var b {c:100, d:200};
//想让 a 具有 b 的属性,就用到浅拷贝; 其实用到的就是for in 方法
var i;
for (i in b){
a[i] b[i]
}
a; // {c: 100, d: 200}
//封装函数
function extend(sub,sup) {var i ;for (i in sub) {sub[i] sup[i]}
}JS继承继承方式:原型链 偷懒继承方式:
//people
var people function(){this.name jiangdeng
}
people.prototype.getName function() {return this.name
}
//man
var man function() {this.sex male;people.call(this); //将man函数的this指向 people对象
}
//继承
//想要man获取people对象上的属性
//最简单的方式,也是偷懒的方式
man.prototype people.prototype;
var Man new man();
Man.getName()偷懒方式的问题: man 的 prototype 中的 constructor 属性指向的是 people 的构造函数,当 people 的 getName 方法 被重写后,man再调用 getName 方法也会被重写
修改后的继承方式
//peopel
var people function() {this.name jiangdeng
}
people.prototype.getName function() {return this.name
}
//man
var man function() {this.sex male;people.call(this); //将man函数的this指向 people对象
}
//继承
//不让man的原型指向people的原型,而是指向people的实例
//指向people的实例后,man的constructor改变了,得把它设回它本身
man.prototype new peopl();
man.prototype.constructor man;
var Man new man();
Man.getName() //jiangdeng命名空间命名空间的基础:前端模块拆分的最基本形式可以认为是闭包的一种应用,但是这种方式对于命名空间的管理过于随意组件化 高级一点的组件化:可以使用开源框架完成最终的组件的组织和管理,例如requirejs/seajsrequire.js(国外人写的)sea.js(国人写的)
组件化中的AMD和CMD的区别CMD -- 依赖就近 (按需求再加载)AMD -- 依赖前置 (提前一锅端,都加载)7:前端架构实施
1:前端架构实施前的思考
更合理的技术选型 --例如团队成员都精通jQuery,就没必要选YUI作为类库;需求分解后,模块的边界划分;模块的边界划分不是一个人的事,每个代码的贡献者都有义务提出建议;如何设计借口更加友好自动化的发布和快速迭代如何降低维护成本,维护成本通常体现在架构的可扩展性和易用性,好的设计会一劳永逸;
2:优化和扩展 从哪些方面着手?
代码层面code review 代码规范架构层面可扩展性是否受约束协议层面通过 http(s) 协议优化综合优化往往是多种技术的综合使用
3: 前端自动化
前端自动化原因: 人会犯错 ;提高开发效率前端自动化基础: node.js /grunt自动化的方向: 发布 测试 开发课程地址: 电商网站前端架构 作者一杯浊酒 链接https://www.jianshu.com/p/9df989dedd08 来源简书 简书著作权归作者所有任何形式的转载都请联系作者获得授权并注明出处。
