这是一些设计组件关键东西

发布时间:2019-05-18 14:45 来源:互联网 当前栏目:网页设计教程

  说到前端,很多人的图像很容易上手。 HTML和CSS基本上可以在一周内开始。 JS很难,但也可以快速编写一些简单的小效果。在Internet上搜索各种特效代码。随意使用,新手前端也可以在短时间内写出酷炫的页面效果,但简单的入门并不意味着这碗米饭的前端非常好吃,用来剪切地图,布局,扣特别影响前端新的同学们在发展的道路上越来越挣扎,没有任何编程思想和软件开发基础。许多人都沉浸在前端工程,组件化,??榛蚆VC中。
  本文以最简单的语言介绍了我对工程,组件化和??榛睦斫?。对象是前端新手,所以我用最好的理解说不可避免地会有很多“天真”的表达,请大神轻轻地喷洒。
  本文侧重于这个想法不涉及太多直接技术的想法。如果新手学生了解这些想法,百度和谷歌可以学习更多具体技术。我还将在后续文章中介绍一些与大家一起学习的内容。
  前端工程
  我还记得当我早期编写前端代码时,通常页面是文件,HTML/CSS/JS都是一起编写的,后来我知道结构,样式和操作应该分开。我认为这是我接触过的最早的前端。工程的想法,我认为所谓的前端工程
  前端项目作为系统工程进行分析,组织和构建,以达到清晰的项目结构,明确的分工,团队默契和开发效率的目的。
  工程是一种想法而不是技术(当然我们会使用一些技术来实现工程),所以它不够具体,例如:
  要建造一座建筑物,如果我们不进行工程考虑,那就是拿起砖刀和砖块并打开它们直到建筑物建成。这通常意味着中间会出现错误,推回或者如果封面后结构有问题,但我不知道谁的责任甚至会在某一天崩溃,那么如果我们使用工程思路要做到这一点,我们将首先绘制图纸,确定结构,确定材料和预算。而在施工期间,除了需要工作的人数等外,我们将首先建造一楼,然后重建墙,然后填补墙。最后建造的高层建筑是稳定的合规性。如果出现问题,我们可以找到来源和原则。
  早些时候,我说过最早的工程思维是“结构,风格和行动的分离”。在只有几页的小项目中,我们只需要使用这些简单的方法来很好地组织项目,但需要在大型Web中。项目通常具有更复杂的结构和大量页面。许多人甚至多个团队需要共同完成项目。我们需要更严格和复杂的工程思维来组织结构。从更高层次的项目组织来看,我们需要做各种规范,技术选择,项目构建优化等。在代码层面,我们还需要使用JS/CSS??榛?,UI组件化等开发方法。然后用一个常用的词来概括前端工程:前端工程是使用工程思维来查看和开发自己的项目,而不是直接拿起袖子,一页,一页,
  前端??榛?/div>
  之前我们提到组织代码时应该使用??榛妥榧?。您应该了解前端工程是一个高层次的想法,??榛妥榧枪こ檀匆獾南喽跃咛宓姆⒄?。方式,所以你可以简单地认为??榛妥榧枪こ瘫硐中问?。
  具体来说,什么是??榛?,或简单的例子,我们必须编写实现A函数的JS代码。这个功能在项目的其他部分也是需要的,所以我们可以把这个功能视为一个具有一定??榈哪??,可以实现??榛?,可以实现重用,可以分割和统治。同样,在编写样式时,如果我们需要一些特殊的样式,它会在很多地方应用,那么我们也可以以某种方式使用CSS???。特别是,许多JS??榛饩龇桨赴ˋMD/CommonJS/UMD/ES6??榈?CSS??榛⒅饕窃趐re,sats,stylus和其他预处理器的import/mixin功能的支持下实现的。每个人都自学。
  一般而言,??榛⒉荒牙斫?,重点是学习相关技术并灵活使用它们。
  前端组件化
  正如我们前面提到的,组件化也是一种工程表现形式,那么前端组件化是什么?
  页面上每个可见/可互换的区域都被视为一个组件;
  每个组件对应一个项目目录,组件所需的各种资源都保存在该目录中;
  因为组件是独立的,所以组件和组件可以自由组合;
  页面只是一个组件容器,负责组合组件以形成一个功能齐全的接口;
  如果不需要组件,或者如果要替换组件,则可以删除/替换整个目录。
  组件化将页面视为容器。页面的各个部分(例如头部,导航,焦点图,侧边栏,底部等)被视为单独的组件??梢愿菽谌莸男枰胖貌煌囊趁?。形成一个完整的页面。泛站群
  PS:??榛妥榧钪苯拥暮么χ皇侵赜?。与此同时,我们也应该有一个概念。除了重用之外,还对??榛妥榧谢趾突?。我们可以不影响其他代码。根据需要修改单独的??榛蜃榧?,因此在许多地方我们不需要及时重复使用,或者我们可以根据划分和处理要求对开发进行??榛蜃榧?。
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、