如何写好前端代码以及oop理解前端

如何写好前端:如果你是像我这种优先接触后端的phper肯定会苦恼的事 但是看了以下我的一些见解后 相信你会对前端的理解有一片质的飞跃: 闲言:首先编写前端必不可少三成员:html结构 css ui代码 js业务逻辑 简单的都会 但是遇到复杂的页面结构和css ui 以及繁多的js特效就会不知所措: 其实复杂的页面完全可以细细体会 慢慢简化 (前端写多了的人会有那种体会)

###进入正题:

编写流程推荐

复杂html页面结构的编写: 首先拿到设计师的图: 先写静态 再写动态 然后针对复杂的部分 细化出自己想要的布局 用一个个小容器标签覆盖好 然后在逐步细化标签

1.编写时注意点

(1) 首先编写时 要写html结构层次很重要(css也是 与html对应) 
(2) html数据不同 UI效果相同 而且多个页面都是这种样式(可以考虑模板的方式) 经典案例就是页脚 当然也可以是内容体 模板可以是单元化 也可以是整体的一块代码 也可以是一个整体框 + 单元的结合 
(3) 代码写完后 回头 再看前端代码 进行重构(看是不是有多余代码?要如何去优化 慢慢的逐渐积累感觉和经验 就会越写越好 越写越快)

###2.css js逻辑代码编写 html的见模板篇

OOP角度理解前端 

举个例子:
很多项目我们会看到不同页面都引入了bose.css 这就是一个oop的具体应用(复用 全局)

要知道的是不是一个页面比如index.html 就只用一个css文件去定义全部样式 css是可以分层的

比如:把base.css看做基类(父类)
子页面css文件 去@import "base.wxss" 就可以用到base.wxss的样式(注意不是html文件里面去引入base.css) 并且可以无限扩展(也就是所谓的重写) 比如css文件分不同的模块(index.base.css admin.base.css ucenter.base.css)

特别注意的一点是父类css书写全局样式时才有 .classname{font-famaily:xxx}的形式 而不是直接*{font-famaily:xxx} 子页面 放上class 或者重写这个class样式 更加符合oop

然后关于js: 
随着业务的复杂程度加大 也在往oop靠边 比如新特性ES6完全求es6前只能通过js的原型对象)

记录你我
请先登录后发表评论
  • latest comments
  • 总共0条评论