专栏首页web前端教室定位+思路+方法,三步教你快速敲定前端JS结构

定位+思路+方法,三步教你快速敲定前端JS结构

闲话少说,

--定位

就是说你现在要写的是什么东西?是一个页面?还是一个组件?还是一个function方法?不同的东西它的定位不同,结构就不同。

如果是页面,那么要从前端构建的角度来考虑;接下来,前端构建你要如何选择?是webpack、gulp还是browerify+npm?这些都是你要考虑的。

如果是组件,那你要考虑它在不同环境,不同页面上被加载的情况。你把它设计为一个通用各端的组件?还是一个PC组件?它可以全屏还是只能占用页面上的一小块空间?

如果是一个fn方法,那你要考虑它会如何被加载,以及加载的方式。它需要有哪些方法?哪些参数?哪些类型?有没有默认defaultConfig?如果传参错误你要如何报错?它如何返回数据?是在.js文件中一个方法?还是以一个.js文件的形式存在?

上面这几段话,说的就是定位。你把分配给你的任务定性为什么?就决定了你要如何着手去做。

--接下来是思路

定位有了,思路就好搞了,无非是分析、拆分需求罢了,然后根据不同的业务需求场景,设计不同的模块,说白了就是业务划分,哪几块算一堆。。。然后数据在这些模块之间穿梭。

要时刻把握一个念头,“我们操作的是数据,而不是DOM。数据一但改变,DOM就要跟着改变”。

--然后是方法

方法,就是定位 + 思路的具体化。定位是方向,思路是分哪几步走,方法就是每一步具体做什么。到这一步就基本上开始JS代码的具体实现了,给大家放上一段今晚先行者视频的片断,大家感受一下。

到最后,这三大块加在一起,基本上你的前端结构就出来了。

本文分享自微信公众号 - web前端教室(webfeel),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-10-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《JS回调是怎么回事》 | 7月28日微课 文字版

    image.png 大家好,今晚的微课主要讲一个JS的回调。 这段时间51题练习群里有同学问回调是怎么回事?这个问题我竟然一时无法回答,因为简单的说就一句话,当...

    web前端教室
  • 我在工作中的常用代码管理

    说是管理其实就是把常用的一些JS方法,自己保存下来,这样的以后的工作中可以比较方便的使用。 哪些方法可以、或是说值得保存呢?(偏见啊)我自己的主观看法就是一些功...

    web前端教室
  • 做页面就是“圈套圈”,不管你用什么&电商项目作业检查 -- 潘xx

    昨天晚上喝多了,醒酒时已经过12点,昨晚断更一次。 //////// 咱们的零基础课今天讲到了ReactJs,主要介绍它是什么,有什么优点,jsx是啥?怎么用?...

    web前端教室
  • 自动化 Web 性能优化分析方案

    在构建 Web 站点的过程中,任何一个细节都有可能影响网站的访问速度。如果开发人员不了解前端性能相关知识,很多不利网站访问速度的因素会在线上形成累加,从而严重影...

    政采云前端团队
  • 自动化 Web 性能优化分析方案

    在构建 Web 站点的过程中,任何一个细节都有可能影响网站的访问速度。如果开发人员不了解前端性能相关知识,很多不利网站访问速度的因素会在线上形成累加,从而严重影...

    前端迷
  • 数字广告基本术语

    Rich Media:(富媒体),这种应用采取了所有适合的最先进技术,以最好的传达广告主的信息,甚至与用户进行互动!如视频、flash广告等 植入式广告:在...

    城市中的游牧民族
  • 40、个人中心页面

    Ewall
  • 前端程序员必知:单页面应用的核心

    这几年里,单页面应用的框架令人应接不暇,各种新的概念也层出不穷。从过去的 jQuery Mobie、Backbone 到今天的 Angular 2、React、...

    Phodal
  • 如何学python-第三课 基础字符串操作

    在上一篇文章中,我们学习了有关变量和输出的一些基础知识。大家应该还记得在上一篇文章中出现的字符串类型(string)吧!说白了,string类型其实就是一堆单词...

    用户1631416
  • 最简单的方法实现返回按钮跳转到指定界面

    项目中遇到一问题,当A页面用wx.navigateTo的方法跳转到B页面时,然后用同样的办法从B到C页面,在C页面时遇到问题:1.点击C页面的某一按钮直接返回A...

    honey缘木鱼

扫码关注云+社区

领取腾讯云代金券