前端开发 订阅
前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。 [2]  移动互联网带来了大量高性能的移动终端设备以及快速的无线网络,HTML5,node.jS的广泛应用,各类框架类库层出不穷。 [1] 展开全文
前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。 [2]  移动互联网带来了大量高性能的移动终端设备以及快速的无线网络,HTML5,node.jS的广泛应用,各类框架类库层出不穷。 [1]
信息
应用领域
网站、小程序、Webapp开发等 [2]
外文名
Web front-end development
主流框架技术
Vue.js、AngularJS、React等 [2]
中文名
Web前端开发
主要技术
HTML、CSS、JS、jQuery等 [2]
前端开发发展历程
前端技术的发展是互联网自身发展变化的一个缩影。前端技术指通过浏览器到用户端计算机的统称,存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。以前会Photoshop和Dreamweaver就可以制作网页,随着网站开发难度加大、开发方式多样,网页制作更接近传统的网站后台开发,网页制作更多被称为Web前端开发。前端技术包括4个部分:前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等。在Web1.0时代,由于网速和终端能力的限制,大部分网站只能呈现简单的图文信息,并不能满足用户在界面上的需求,对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及,技术可以在用户体验方面实现更多种可能,前端技术领域迸发出旺盛的生命力。2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。随着手机成为人们生活中不可或缺的一部分,成为人们身体的延伸,人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外,前端技术还能应用于智能电视、智能手表甚至人工智能领域。 [1] 
收起全文
精华内容
下载资源
问答
  • 前端开发
    千次阅读
    2022-04-07 11:07:33

        距离开始实习到现在已经快两个月了,我是做前端开发的,目前已经接手了两个项目,同时进行但都没有完工,说说感受吧。我是本科读的信息管理与信息系统专业,因为专业被划分在了经管院,所以大方向是偏管理的,前端技术类的课程挺少的,大多也是讲讲理论知识。实际操作很少,我对前端开发比较感兴趣,觉得画页面很有意思,于是就在大四上学期开始自学前端技术,两三个月学完了HTML、CSS,Javascript,又继续学习了react,然后大四下开始找工作。找工作之后才发现原来现在大部分企业用的框架都是vue,没办法又得改学这个,但很多原理和方法什么的都差不多,学的也挺快的。入职第二天就开始跟进项目了。下面聊聊我工作过程中遇到的一些问题和感受吧。
        实际做了项目才知道,跟之前自己在往上找视频学习是真不一样,这东西还是得上手操作才能提升的很快,html和css是很基础的前端技术,但是实际做项目时候也会出现很多问题。
        1.在学习的时候我感觉定位挺好用的,每次用就是找准距左距上的距离,然后写上就行了。第一个项目是一个微信小程序,在画页面的时候就出现了问题,因为要适应各种不同型号的手机,它们的屏幕大小都不一样,用定位来布局就会导致页面只有在基准的那个型号的手机屏上是正常的,但凡换了一种大小的屏幕,布局就乱了,这就是由于定位只是根据左上的位置来的,没法适应整个画面。于是我改用margin属性进行布局,就很正常了。
        2.好多的效果都可以直接用现成的组件稍加修改来实现,我没用过也不知道这东西,还傻傻的自己写,然后写不出来去问前辈,前辈说,用组件库啊,你自己写多累挺。尬住了尬住了!比如那个轮播图,我记得之前跟着视频学习的时候讲过,用原生js写。我做这个时候还跑去翻视频,结果才知道有u-view这个东西,上面有封装好的组件,直接cv过来改改内容就完事了。有一说一,真好使。
        3.有一个页面是一个列表页,在前期展示静态页面的时候应该是这样在data里写一个列表,下面罗列所有的对象: 

     

     而我是在html部分把所有列表内容都写成了一个个的div,这样在展示静态页面的时候是没问题的,但是调接口时就不能这样写了。正确的应该是给html中的列表盒子加上v-for方法在该展示数据的位置用{{item}},item对应下方data中列表中各对象各字段的值。后期调接口直接把各字段的值替换为接口中调出来的各字段的值。这些都是vue的内容,我这相当于是边做项目边学vue了哈哈。

        4:有的接口要在header中加入token和请求头。我现在只知道token是用于校验用户身份的。具体什么情况要加什么情况不加还没有研究。后端同事传到api文档上都标上了,反正他们要,我就写上了,后续有时间还是得自己明白原理才行。

        5:这个项目进行的同时,又半截加入了一个响应式官网的项目,这也是我第一次接触响应式。作用就是写出来的页面可以同时适应PC端和web端,不需要各写一套。最开始进项目时候,一直报错,运行不了,后来明白了是没有下载依赖,拉代码的时候依赖是拉不下来的,需要现下载。用npm-i命令。这个项目给我的工作主要是修改布局,加一点动效什么的。有一个需求是主页原先是一张背景图,现在需要把它修改为轮播图,于是我从element UI上找到了轮播图的组件,一运行报错,屏幕上显示的是图片地址。然后我把data中的图片以import方式引入,然后在下方data中定义一个列表再将其引入就成功,但是只是显示出了图片,并没有轮播效果。原因是因为我没有下载element。之前做uniapp项目的时候如果用到组件就是直接把u-view组件库上的代码直接拿过来,也无需下载什么东西。所以就没往这方面想,还以为是逻辑写错了。然后把element下载到本地引入到项目中号,轮播图效果终于实现了。下面就是对轮播图进行修改,修改成客户想要的样子,组件库的轮播图高度比客户要求的小了一半,于是我把图片的高度修改成了两倍,但是两侧的切换图片按钮还是在原来的高度上,我从浏览器中打开控制台寻找定于这两个按钮的类,发现他是组件内部已经封装好的类。我感觉这就没法修改了,是人家都定义好的。然后我上网查了解决方法得知,可以用v-deep深度选择器去解决,它可以穿透盒子,去修改封装好的盒子的样式,代码写为::v-deep 类名{height:XXXpx;}这次终于修改完成了!

         今天就先写到这里啦,其实还有很多工作中遇到的问题,后续会一一记录!

         上面这些问题大多数都体现出来自己基础不牢固的短板了,后续还是要通过项目,来继续巩固基础,然后深入学习!总的来说,痛并快乐着,虽然好多不会的,但我依然对这个行业充满热情。键盘敲烂,月薪过万!未来可期了家人们!

    更多相关内容
  • 前端开发常用哪些工具软件?

    千次阅读 多人点赞 2022-05-17 17:00:40
    前端开发必备工具,一篇文章一网打尽 文章目录 一、前端提高“生产力”工具 1.WebStorm 2. 远程开发 - VSCode 3. 接口测试 - Postman 4.API在线文档生成和测试 - SwaggerUI 5.抓包工具 - Wireshark 6.通用...

    前端开发必备工具,一篇文章一网打尽

    文章目录

               一、前端提高“生产力”工具

    1.WebStorm

    2. 远程开发 - VSCode

    3. 接口测试 - Postman

    4.API在线文档生成和测试 - SwaggerUI

    5.抓包工具 - Wireshark

    6.通用数据库管理 - DBeaver

    7.MD编辑器 - Typora

    8.虚拟机 - VirtualBox

    9.Git存储库托管 - GitHub

    10.项目管理 - Trello

    二、提升前端技能的26个网站,走过路过不错过:

    三、前端真香教程


    一、前端提高“生产力”工具

    1.WebStorm

    下载地址:WebStorm: The Smartest JavaScript IDE, by JetBrains

    功能介绍:

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持,满足许多不会配置的同学,ESlint,词法高亮,emmet,CSS预处理器,新版本也添加了对ES6的支持,内建了服务器调试。

    目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

    2. 远程开发 - VSCode

    Visual Studio Code - Code Editing. Redefined

    VSCode 是目前最受开发人员欢迎的编码工具之一,具备强大便捷的远程开发能力。与其它远程开发工具不同的是,VScode 是通过 SSH(Secure Shell) 的方式连接到远程服务器。这种方式不仅省略了繁琐的上传和下载步骤,还可以实现实时同步,让远程开发过程更流畅高效。

    功能特色:

    • 开源工具,可免费使用

    • 支持自定义配置

    • 可集成Git

    • 支持各种文件格式(html/jade/css/less/sass/xml)

    • 调试功能强大

    • 插件生态机制强大

    3. 接口测试 - Postman

    https://www.getpostman.com

    Postman 提供功能强大的 Web API 和 HTTP 请求调试,提供有 Chrome 扩展插件版和独立的APP,对于检查后端端点非常有用。

    ​功能特色:

    • 支持多种请求类型(get、post、put、patch、delete 等)

    • 支持在线存储数据和迁移数据

    • 支持请求 header 和请求参数的设置

    • 支持不同的认证机制(Basic Auth,Digest Auth,OAuth 1.0,OAuth 2.0 等)

    • 响应数据自动按照语法格式高亮,包括 HTML,JSON 和 XML

    4.API在线文档生成和测试 - SwaggerUI

    http://swagger.io

    SwaggerUI 是一个 API 在线文档生成和测试的利器。有了这款工具,不需要频繁更新接口文档,就能保证接口文档与代码的一致。

    功能特色:

    • 支持在多种开发环境中使用

    • 操作便捷

    • 支持所有主流浏览器

    • 完整的OAS支持

    5.抓包工具 - Wireshark

    https://www.wireshark.org/download.html

    Wireshark 是一款小巧、开源且能在几乎所有流行操作系统下使用的抓包工具软件。使用Wireshark 可以截取各种网络封包,显示网络封包的详细信息。可以在Windows和Mac OS上运行。

    功能特色:

    • 快速检测网络问题

    • 快速检查信息安全相关问题

    • 新通信协议调试

    6.通用数据库管理 - DBeaver

    Download | DBeaver Community

    DBeaver 是一个 SQL 客户端和数据库管理工具。由于 DBeaver 基于 Java 开发,可以运行在各种操作系统上,比如Windows、Linux、macOS 等操作系统。同时,DBeaver 采用 Eclipse 框架开发,支持插件扩展,并且提供了许多数据库管理工具:ER 图、数据导入/导出、数据库比较、模拟数据生成等。

    功能特色:

    • 通过 JDBC 连接到数据库,支持几乎所有的数据库产品

    • 可以处理任何的外部数据源

    7.MD编辑器 - Typora

    https://typora.io/

    Typora 是一款免费的轻量级Markdown编辑器,虽然没有 Mou,Haroopad等Markdown编辑器那么大名鼎鼎,但其轻量、快速、易于上手的特点,绝对能给你带来舒适的用户体验。

    功能特色:

    • 启动速度快

    • 支持实时预览,所见即所得

    • 界面简洁易操作

    • 支持多拓展

    8.虚拟机 - VirtualBox

    Downloads – Oracle VM VirtualBox

    VirtualBox 是一款免费的开源虚拟机,可以在Windows、Linux和mac等不同操作系统中运行。

    功能特色:

    • 开源软件,免费

    • 中文界面

    • 体积小

    • 安装配置简单实用,社区活跃

    9.Git存储库托管 - GitHub

    jeresig (John Resig) · GitHub

    GitHub 是一个基于 Web 的 Git 存储库托管服务。无论你是软件开发的新手,还是已经具有丰富开发经验的老手,相信你在工作中都会需要这款工具。GitHub是目前世界上最大,最受欢迎的代码库,可以帮助开发人员审查代码,管理项目和软件构建。

    功能特色:

    • 极高的安全性

    • APP体积小

    • 数据同步流畅无冲突

    • 不限制私有仓库数量和流量

    10.项目管理 - Trello

    https://trello.com

    Trello 是一款灵活易用的项目管理工具,非常适合作为看板和 Scrum 开发,它易于管理,具有极高的可定制性。虽然不是专门为开发人员打造的工具,但Trello绝对可以帮助开发人员更好地完成工作。

    功能特色:

    • 更直观的资料与任务分类

    • 更清晰的便利贴式任务呈现

    • 操作便利,拖曳即可整理分类与管理进度

    • 可以新增丰富的卡片内容

    • 支持颜色标签、特殊印章

    • 简单易懂、即时同步、多人管理

    二、提升前端技能的26个网站,走过路过不错过:

    1. CSS battle【在线比拼 CSS】 : https://cssbattle.dev

    2. Learn CSS layout【学习 CSS 布局】:http://learnlayout.com

    3. Flexbox Froggy【学习 Flex 布局的小游戏】:http://flexboxfroggy.com

    4. EnjoyCSS【在线CSS代码可视化工具】:https://enjoycss.com

    5. CSS-Tricks 【CSS 技巧】:https://css-tricks.com

    6. Neumorphism【实现新拟态效果】:https://neumorphism.io

    7. uiGradients【分享渐变色】:https://uigradients.com

    8. JavaScript【一个一直更新的JavaScript 的语法文档,主要会写如何去避免一些常见的错误】:https://bonsaiden.github.io/JavaScript-Garden/zh/

    9. JS Tips【JS 技巧】:https://www.jstips.co

    10. JSweekly【技术周刊 】:https://javascriptweekly.com

    11. CDNJS【JavaScript 资料库】:https://cdnjs.com/libraries

    12. Beautiful Open 【开源 JS 库集合】:https://beautifulopen.com

    13. JavaScript Fun【代码库集合】:https://www.javascript.fun

    14. Stack Overflow【编程人员问答网】:https://stackoverflow.com

    15. 掘金【高质量技术社区】:https://juejin.im

    16. Codrops【网页设计开发博客】:https://tympanus.net

    17. CodePen【一个网站前端设计开发平台,针对网站前端代码的一个工具,上面有各种效果的案例特效(炫技),可以在他们的 demo 基础上开发自己的前端设计。】: https://codepen.io

    18. CodeSandBox【提供一个在线开发环境的“沙盒”,主流的框架如 React、Vue、Angular 等,都可即开即用、实时编译预览,非常方便。】: https://codesandbox.io

    19. JS Bin【轻量级在线编辑器网站】:https://jsbin.com

    20. ICONSVG【在线自定义设计SVG图标素材】:https://iconsvg.xyz

    21. OpenMoji【免费表情符号库】:https://www.openmoji.org

    22. Share Icon 【免费矢量素材图库】:https://www.shareicon.net

    23. tableconvert 【在线表格编辑器】:https://tableconvert.com

    24. Feathericons【极简 ICON 图标集】:https://feathericons.com

    25. HTML5UP 【提供大量的HTML5模版】:https://html5up.net/

    26. 趣IT【一个会更新面试题和练习题的宝藏王】https://www.funit.cn/

    三、前端真香教程

    web 入门 Html5+css:最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程 web 进阶:web前端进阶教程,前端html5+css3+移动端项目实战(含华为新闻,b站移动端等)

    技术进阶 JavaScript:JavaScript全套教程,Web前端必学的JS入门教程,零基础JavaScript入门 DOM BOM:JavaScript核心教程,前端基础教程,JS必会的DOM BOM操作 jQuery:前端基础必备教程|jQuery网页开发案例精讲 Ajax:AJAX零基础到精通_整合Git核心内容全套教程

    Vue 开发 Node.js: Node.js全套入门教程,nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解 Vue2+Vue3全套:Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程

    React &小程序开发

    React:前端React视频教程,react零基础入门原理详解到好客租房项目实战

    零基础玩转微信小程序:前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)

    别看了,收藏支持一下

    展开全文
  • Web前端开发工程师经典面试题(附参考答案)
  • 【1+X Web前端等级考证 】| 最新Web前端开发中级实操

    万次阅读 多人点赞 2020-11-23 13:20:37
    2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高? # ...

    由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git

    请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢~

    注意:转载请备注来源: https://blog.csdn.net/weixin_43853746/article/details/109992935

    # 官方信息网站
    👉 1+X Web考证信息成绩查询系统
    👉 工信部: 关于首批1+X证书制度试点院校名单的公告
    👉 1+X Web 前端开发职业技能等级标准.pdf
    # 前言
    2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高?
    # 关于考不考
    因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,知名度并不是很高,有没有用现在无法一锤定音,看它以后办的怎么样把,软考以前也是慢慢地才知名起来。能考就考吧,据所知,大部分学校报考,基本不用交什么报考费(小部分学校,个别除外,如果要缴费的看自己需要…) 反正不损失什么,就算以后没什么用就当给自己做的一次测试吧。
    # 关于理论题
    就这去年和今年考的那几批的试题来看,考得很基础,对于选择题基本上都是基础的知识点和概念之类的,记住多看看基础,在我发的这几套试题认真做,中级基础的知识点都在这里面了。
    # 关于实操题
    中级实操的考核是在初级的基础上,重点考察下面几个部分,所以下面五个知识点差不多一个知识点一道大题,一般实操有四道大题,打√的都是重点考的知识点(极少可能只有三道):

    • 前端静态搭建(html+css+js )
    • 深入浅出MySQL数据库(php与MySQL数据库操作)√
    • PHP 技术与应用 (PHP Laravel 框架应用) √
    • Web前后端交互技术(php)√
    • 响应式开发技术(bootstrap响应式题型)√

    # 关于答题技巧
    实操就是自己读懂程序代码,理清相关文件,进行填空,补齐代码,实现功能。技巧:整体看一下整体相关文件,有一个大概的了解,理清思路,程序代码“上下前后连接”,记不得样式单词找样式单词看一下前后代码,找变量尽量copy,防止自己稍不留神敲错

    了解 1+X Web前端开发等级考证的看这里戳这里👈

    2020年下半年 Web前端开发中级 实操考试

    考生姓名:——————————— 准考证号:——————————

    试题一(30分)

    阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(15)代码。
    【说明】
    这是一个响应式完成,用bootstrap4完成。
    项目名称为callio,采用Bootstrap框架,包含首页index.html、css文件夹、js文件夹、img文件夹,其中,css文件夹包含style.css文件和bootstrap.min.css文件;js文件夹包含jquery.min.js文件和bootstrap.min.js文件;img文件夹包含用到的图片。
    首页(index.html)使用Bootstrap响应式布局,PC端和移动端能够自适应显示,内容分为四部分:
    一是【页头】,包括网页标题和导航栏,导航栏使用了下拉插件,显示时为菜单,在移动端显示为折叠导航栏;
    二是【轮播图】,图片切换时呈现由大缩小的动画;
    三是【网站介绍】,主要是介绍分类,采用栅格系统布局,以图片和标题的形式展示,鼠标经过图片放大,且不能溢出;
    四是【表单提交】,利用弹性盒子实现表单左侧的介绍相对于表单的高度垂直对居
    【效果图】
    (1)index.html在PC端效果如图1-1所示。
    在这里插入图片描述
    图1-1
    (2)index.html在移动端效果如图1-2所示。
    在这里插入图片描述
    图1-2

    【代码:首页index.html】

    <!DOCTYPE html>
    <html>
    <head>
    	<title>callio</title>
    	<meta charset="utf-8">
    <meta name="viewport" content="width=__(1)__, initial-scale=1, shrink-to-fit=no">
    	<link rel="__(2)_____" type="text/css" href="css/bootstrap.min.css">
    	<link rel="__(2)_____" type="text/css" href="css/style.css">
    </head>
    <body>
    	<!-- 头部 -->
    <div class="__(3)______">
    	<div class="row ___(4)_ _ __">
    		<a class="navbar-brand">
    			<img src="img/logo.png">
    		</a>
    		<nav class="navbar navbar-expand-lg ___(5)____">
    			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#navToggler'>
    				<span class="navbar-toggler-icon"></span>
    			</button>
    			<div class="collapse navbar-collapse" id="navToggler">
    				<ul class="navbar-nav mr-auto">
    					<li class="nav-item">
    						<a class="nav-link active">首页</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">HTML/CSS</a>
    						<div class="dropdown-menu">
    					      <a class="dropdown-item" href="#">HTML</a>
    					      <a class="dropdown-item" href="#">CSS</a>
    					      <div class="dropdown-divider"></div>
    					      <a class="dropdown-item" href="#">HTML5</a>
    					      <a class="dropdown-item" href="#">CSS3</a>
    					    </div>
    
    					</li>
    					<li class="nav-item">
    						<a class="nav-link">JAVASCRIPT</a>
    					</li>
    					<li class="nav-item">
    						<a class="nav-link">JQUERY</a>
    					</li>
    				</ul>
    			</div>
    		</nav>
    	</div>
    </div>
    
    <!-- 轮播图 -->
    <div id="" class="__(6)____ slide carousel-scale" data-ride="carousel">
    	<div class="carousel-inner">
    		<div class="carousel-item active">
    		    <img src="img/banner1.jpg" class="d-block w-100" alt="...">
    		</div>
    		<div class="carousel-item">
    		  <img src="img/banner2.jpg" class="d-block w-100" alt="...">
    		</div>
    	</div>
    </div>
    
    <!-- 列表展示 -->
    
    <section class="list">
    	<div class="container">
    		<div class="row">
    			<div class="__(7)__"><!--中屏以上显示3列,小屏显示2列,最小屏显示1-->
    				<div class="item">
    					<div class="thumb">
    						<img src="img/service01.jpg">
    					</div>
    					<h2>HTML</h2>
    					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
    					<a href="">更多</a>
    				</div>
    			</div>
    			<div class="__(7)__">
    				<div class="item">
    					<div class="thumb">
    						<img src="img/service02.jpg">
    					</div>
    					<h2>JAVASCRIPT</h2>
    					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
    					<a href="">更多</a>
    				</div>
    			</div>
    			<div class="__(7)__">
    				<div class="item">
    					<div class="thumb">
    						<img src="img/service03.jpg">
    					</div>
    					<h2>MYSQL</h2>
    					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
    					<a href="">更多</a>
    				</div>
    			</div>
    			<div class="__(7)__">
    				<div class="item">
    					<div class="thumb">
    						<img src="img/service04.jpg">
    					</div>
    					<h2>ES6</h2>
    					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
    					<a href="">更多</a>
    				</div>
    			</div>
    			<div class="__(7)__">
    				<div class="item">
    					<div class="thumb">
    						<img src="img/service05.jpg">
    					</div>
    					<h2>PHP</h2>
    					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
    					<a href="">更多</a>
    				</div>
    			</div>
    			<div class="__(7)__">
    				<div class="item">
    					<div class="thumb">
    						<img src="img/service05.jpg">
    					</div>
    					<h2>VUE</h2>
    					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
    					<a href="">更多</a>
    				</div>
    			</div>
    		</div>
    	</div>
    </section>
    
    <section class="message">
    	<div class="container">
    		<div class="row">
    			<div class="col-12 col-md-6 d-flex __(8)_ ___ description"><!-- 以下内容要垂直对齐-->
    				<div class="row">
    					<h2 class="col-12">web前端</h2>
    					<p class="col-12">Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展,各种互联网项目也不断兴起,对用户体验提出了更高的要求,前端开发也由此逐渐成为了重要的研发角色。从2012年至今,“Web前端工程师”的需求持续走高,薪酬也是水涨船高,所以,有不少人立志要成为前端开发工程师,但同时又担心Web前端开发到底还能热多久。</p>
    				</div>
    			</div>
    			<div class="col-12 col-md-6 form">
    				<h2>
    					<span>Service Form</span>
    					Get Your Service
    				</h2>
    				<form>
    					<div class="form-group">
    						<input type="text" class="__(9)___" placeholder="输入用户名">
    					</div>
    					<div class="form-group">
    						<input type="text" class="__(9)___" placeholder="输入用户名">
    					</div>
    					<div class="form-group">
    						<input type="text" class="__(9)___" placeholder="输入用户名">
    					</div>
    					<div class="form-group">
    						 <select id="inputState" class="__(9)___">
    					        <option selected>html</option>
    					        <option>css</option>
    					      </select>
    					</div>
    					<div class="form-group">
    						 <button type="submit" class="__(9)___ btn btn-primary">Sign in</button>
    					</div>
    				</form>
    			</div>
    		</div>
    	</div>
    </section>
    
    <footer class="container-fruild bottom">
    	版权
    </footer>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </body>
    </html>
    

    【代码:CSS文件style.css】

    .carousel-scale .carousel-item img{
    	transform: ___(10)____;/*放大到1.12倍*/
    }
    .carousel-scale .carousel-item.active img {
    	animation: scaleUpDown 1s ___(11)_ __ cubic-bezier(0.250, 0.460, 0.450, 0.940);/*让动画保持最终状态*/
    }
    @keyframes scaleUpDown {
    	__(12)____ {
    		transform: scale(1.12);
    	}
    	__(13)____ {
    		-webkit-transform: scale(1);
    		transform: scale(1);
    	}
    }
    .list{
    	margin-top:2rem;
    }
    .list .item{
    	margin:20px 10px;
    	padding-bottom: 20px;
    	border:1px solid #ccc;
    	_____(14)____;/*设置边框圆角,四个角都是20px*/
    }
    .list .item .thumb{
    	overflow: hidden;
    	margin-bottom:1rem;
    }
    .list .item .thumb img{
    	width: 100%;
    	transition: all .8s;
    }
    .list .item:hover .thumb img{
    	transform: scale(1.2);
    }
    .list .item h2,.list .item p,.list .item a{
    	padding:0 2rem;
    }
    
    .message{
    	padding:3rem 0;
    	border-top:1px solid #ccc;
    }
    .message .form{
    	border:1px solid #ccc;
    	padding:20px 30px;
    	border-radius: 10px;
    	background-color: #eee;
    }
    .message .form h2{
    	padding:20px 0;
    	text-align: center;
    }
    .message .form h2 span{
    	display: block;
    	font-size: 18px;
    	font-weight: normal;
    }
    .description h2{
    	text-align: center;
    	line-height:70px;
    }
    .description p{
    	line-height: 28px;
    	____(15)__ ___;//文字首页缩进
    }
    
    .bottom{
    	height: 6rem;
    	line-height: 6rem;
    	text-align: center;
    	background-color: #333;
    	color:#fff;
    }
    

    【问题】(30分,每空2分)
    进行静态网页开发,补全代码,在(1)至(15)处填入正确的内容。

    试题二(30分)

    阅读下列说明、效果图和代码,进行动态网页开发,回答问题1至问题4。
    【说明】
    在我们的生活中,当加载的内容看完后,再次下拉,就会加载出更多的内容,本项目实现下拉加载功能,应用HTML、CSS、AJAX、JSON、PHP等技术。项目名称为news,包含主页index.html、style.css和adminList.php文件,其中,主页面index.html显示新闻内容;style.css为主页样式文件;adminList.php为主页提供数据,返回JSON格式数据。
    主页分为两个部分:焦点图和新闻列表,当滚动条触底,通过ajax发送请求到adminList.php,adminList.php返回JSON格式的数据。在主页上通过ajax拿到数据后,使用JQuery进行DOM操作,实现动态加载数据。如图3-1所示。
    【效果图】
    在这里插入图片描述
    图3-1

    【代码:主页index.html】

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>列表页</title>
    	<link rel="stylesheet" href="css/style.css">
    	<script src="js/jquery.min.js"></script>
    </head>
    <body>
    	<div class="box"></div>
    	<div class="list">
    		<div class="title">新闻列表</div>
    		<ul>
    			
    		</ul>
    	</div>
    	<script src="js/index.js"></script>
    </body>
    </html>
    

    【代码:style.css】

    body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{
    	margin: 0;
    	padding: 0;
    }
    ul,ol{
    	list-style: none;
    }
    a{
    	text-decoration: none;
    }
    .box{
    	width: 100%;
    	height: 300px;
    	background: url("../img/timg.jpg") center;
    }
    .list{
    	width: 700px;
    	margin:0 auto 50px;
    }
    .list .title{
    	font-size: 22px;
    	line-height: 60px;
    }
    .list ul{
    	____(1)____;/*设置盒子投影,颜色为#CCC,模糊度为15px*/
    }
    .list ul li{
    	position: relative;
    	padding:20px;
    	border-bottom:1px dashed #ccc;
    }
    .list ul li h2{
    	width: 500px;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	font-weight: normal;
    	font-size: 16px;
    }
    .list ul li h2 a{
    	color:#333;
    }
    .list ul li span{
    	position: absolute;
    	top:20px;
    	right:20px;
    }
    

    【代码:adminList.php】

    <?php
    // header ("Content-type: text/html; charset=utf-8")
    $servername = "localhost";
    $username = "root";
    $password = "123456";
    
    // 创建连接
    $conn = __(2)____($servername, $username, $password);
    // 检测连接
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }
    
    mysqli_query($conn,'set names utf8');
    
    // 查询数据库
    mysqli_select_db($conn,"list");
    // 求信息总数
    $sqlCount="____(3)____";# 查询所有数据的sql语句
    $resultC = ___(4)____(__(5)___, __(6)____);# 执行数据库
    $count=mysqli_num_rows($resultC);
    
    $num=$_GET["num"];
    $pageCount=$_GET["pageCount"];
    $start=_____(7)____;#求开始查询的索引值
    // 返回指定数据
    $sql = "___(8)______";#返回指定数据的sql语句
    $result = mysqli_query($conn, $sql);
    $res = array('count'=>$count);
    $jarr=array();
    // 遍历数据
    while($row = _____(9)_____($result))
      {
        array_push($jarr,$row);
      }
    $res = array(
        'count'=>$count,
        'list'=>$jarr
    );
    echo json_encode($res);
    mysqli_close($conn);
    ?>
    

    【代码:index.js】

    $(function(){
    	var num=1;//当前页数
    var pageCount=7;//每页显示的数量
    var pageNum=0;//总页数
    	function ajaxDate(num){
    		$.ajax({
    			url: 'http://localhost/second/adminList.php',
    			type: 'get',
    			dataType: 'json',
    			data: {
    				___(10)_____//传递的参数
    			},
    			success:function(res){
    				pageNum=___(11)_______;//请求的总页数
    				res.list.forEach(function(data){
    					var str="<li>"+
    							"<h2><a href=''>"+data.title+"</a></h2>"+
    							"<span>"+ data.time+"</span>"+
    							"</li>";
    					___(12)_______;//将字符串追加到指定的位置
    				})
    			}
    		})
    	}
    	ajaxDate(num);
    
    	$(window).scroll(function(){
    		var sTop=____(13)__;//获取滚动条卷进去的距离,用jquery
    		var sHeight=____(14)_____;//获取可视区域的高度,用jquery
    		var bodyH=______(15)________;//获取页面所有内容的高度,用jquery
    		if(___(16)_____){//请写出判断条件
    			num++;
    			if(____(17)____){//请写出判断条件
    				console.log(num);
    				___(18)______;//调用函数请求加载数据
    			}
    		}
    	})
    	
    })
    

    【问题】(27分,每空1.5分)
    进行动态网页开发,补全代码,在(1)至(18)处填入正确的内容。

    试题四(20分)

    阅读下列说明,用MySQL操作数据库。填写(1)至(10)代码。
    【说明】
    给项目“信息管理系统”设计一个数据库,采用MySQL数据库。主要创建产品信息管理模块,主要有新闻分类和新闻信息两个表。
    【MySQL数据库操作:创建数据库脚本db.sql】
    系统使用MySQL数据库,数据库名为info_manage,表名为newtype。newtype表包含序号、分类名称、时间,其中,序号为自增字段和主键。另一表明为news,news表包含序号、新闻标题、新闻内容、时间。补充下列(1)和(4),以下是对(1)-(4)的说明。
    (1) 删除已经存在的数据库
    (2) 创建数据库info_manage
    (3) id为自增字段
    (4) 默认是当前时间
    (5) 设置主键

    ____(1)____ DATABASE IF EXISTS user_center;
    ______(2)_________;
    USE info_manage;
    CREATE TABLE `newtype`
    (
       `id` int (4) NOT NULL3COMMENT '序号',
       `typename` varchar (16) NOT NULL COMMENT '分类名称',
       `time` datetime DEFAULT ___(4)____  COMMENT '创建时间',5(`id`)
    )ENGINE= InnoDB DEFAULT CHARSET= utf8;
    
    CREATE TABLE `news`
    (
       `id` int (4) NOT NULL3COMMENT '序号',
       `title` varchar (16) NOT NULL COMMENT '新闻标题',
    `body` text(20000)  COMMENT '新闻内容',
       `time` datetime DEFAULT ___(4)____ COMMENT '创建时间',5(`id`)
    )ENGINE= InnoDB DEFAULT CHARSET= utf8;
    
    

    【MySQL数据库操作:初始化数据脚本init.sql】
    在MySQL数据库中,向info_manage数据库中newtype表插入信息分类数据,插入数据脚本如下。

    USE info_manage;
    _____(6)______ newtype(typename) value('行业新闻');
    _____(6)______ newtype(typename) value('集团新闻');
    _____(6)______ newtype(typename) value('通知公告');
    

    【MySQL数据库操作:修改news表】
    在news表中,字段‘新闻分类’未创建,现需要修改news表,将‘新闻分类’字段插入到字段‘新闻标题’后,修改表脚本如下。

    USE info_manage;
    ___(7)____ table news __(8)___ newtype int(4) ___(9)___ title;
    

    【MySQL数据库操作:修改news表】
    由于newtype输入的是数字,为了提高用户体验,现在需要将所有信息的分类名显示,显示的字段有新闻序号,新闻标题,新闻分类名。执行脚本如下:

    USE info_manage;
    create view newsinfo as select n.id,n.title,t.typename from news as n,newtype as t where __(10)____;
    
    

    【问题】(30分,每空1.5分)
    进行动态网页开发,补全代码,在(1)至(10)处填入正确的内容。

    试题四(20分)

    阅读下列说明、效果图和代码,进行动态网页开发,回答问题1至问题4。
    【说明】
    该程序为一个问卷调查系统,使用PHP的Laravel框架编程,项目名称为XXX,核心文件包括路由文件web.php、模板文件(信息展示模板news.blade.php)、控制器文件newscontroller.php。实现批量删除功能。

    【效果图】
    (1)信息展示模板页面:对应模板文件news.blade.php
    先选中需要删除的数据,点击“批量删除”按钮,如图4-1所示。
    在这里插入图片描述
    图4-1

    【问题】基于Laravel框架,回答下列问题,填写(1)至(10)。
    【web.php】

    <?php
    Route::get('/', function () {
        return view('welcome');
    });
    
    // 后台首页
    Route::___(1)_ ___(['namespace'=>'Admin','prefix'=>'admin'],function(){
    	// 后台商品管理模块
    	Route::resource('goods','GoodsController');
    	Route::get('news_ajax',"Newscontroller@aajax");
    	
    });
    

    【GoodsController.php】
    将数据库中的数据展示到news.blade.php文件上,请根据页面目录结构并分析代码,填写(2)-(4)

    <?php
    namespace _____(2)__ ___;
    use App\Http\Controllers\Controller;
    use Illuminate\Http\Request;
    ___(3)_ __; //使用数据库
    class GoodsController extends Controller{
    	// 定义list方法
    	public function index(){
    		$data=DB::table('product')->get();
    		return view('admin.news')->___(4)_____("data",$data);//返回结果数据
    	}
    }
    

    【Newscontroller.php】
    当点击‘批量删除’时,需要请求一个地址从数据库中删除选中的数据。分析相关的控制器文件和模板文件,填写(5)-(7)

    <?php
    namespace App\Http\Controllers\admin;
    use App\Http\Controllers\Controller;
    use Illuminate\Http\Request;
    use DB;
    
    class Newscontroller extends Controller{
    	public function aajax(){
    	
    	    //获取到ajax传来的需要删除的id
    	    $id = $_GET['str'];
    	    //把传来的所有id改为数组形式  explode  字符串转数组
    	    $str = __(5)__ _(",",$id);
    	    //利用循环将需要删除的id 一个一个进行执行sql;
    	    foreach($str as $v){
    			DB::delete(“delete from product where id=?,[$v]);
    	        DB::table('product')->_ ___(6)______->delete();//删除数据的条件
    	    }
    	    ___(7)_____;//返回删除的数据id
    	}
    }
    
    

    2、信息展示模板news.blade.php
    在信息展示模板文件news.blade.php中,使用for循环显示信息,显示需要数据由GoodsController类中index()返回时传递,点击‘批量删除按钮’,批量删除选中的数据,分析index()方法和模板文件,填写(8)-(10)。

    _____(8)____('muban.admin')
    @section('content')
    <div class="content">
      <table>
      ____(9)_ __
        <tr>
            <td align="center">
              <input type="checkbox" name="box" value="{{$v->id}}" class="box"/>
            </td>
            <td>{{$v->id}}</td>
            <td>{{$v->title}}</td>
            <td>{{$v->pric}}</td>
            <td>删除</td>
        <tr>
                      
      @endforeach
    </table>
    <input type="button" value="批量删除" id="but">
    </div>
    <script>
    
     $("#but").click(function(){
         //获取到所有的input
         var  box = $("input[name='box']");
         //去所有的input长度
         length =box.length;
         // alert(length);
         var str ="";
         for(var i=0;i<length;i++){
             //如果数组中的checked 为true  就将他的id进行拼接
             if(box[i].checked==true){
                 str =str+","+box[i].value;
             }
         }
         //将拼接的字符串第一个,号删除
         str= str.substr(1);
    
         //ajax  将id传入后台
         $.ajax({
             url:"______(10)__{{url(“admin/ news_ajax”)}}___",
             type:"get",
             data:{str:str},
             success:function (a) {
                a.forEach(function(ele){
                    $("input").each(function(){
                      if($(this).val()==ele){
                        $(this).parents("tr").remove();
                      }
                    })
                })
             }
         })
     })
       
    </script>
    @endsection 
    

    实操考试评分细则:

    试题一(30分)(每空2分,共30分)

    【问题】(30分)
    (1)device-width
    (2)stylesheet
    (3)container
    (4)justify-content-between
    (5)navbar-light
    (6)carousel
    (7)col-md-4 col-sm-6 col-12
    (8)align-items-center
    (9)form-control
    (10)scale(1.12)
    (11)forwards
    (12)from或者0%
    (13)to或者100%
    (14)border-radius: 20px;
    (15)text-indent: 2em;

    试题二(30分)(1-12每空1.5分,13-18每空2分 共30分)
    【问题】(30分)
    (1)box-shadow: 0 0 15px #ccc
    (2)new mysqli
    (3)SELECT * from news (不区分大小写)
    (4)mysqli_query
    (5) c o n n ( 6 ) conn (6) conn6sqlCount
    (7)( n u m − 1 ) ∗ num-1)* num1)pageCount
    (8)SELECT * from news limit s t a r t , start, start,pageCount
    (9)mysqli_fetch_array
    (10)num: num,pageCount:pageCount
    (11)Math.ceil(res.count/pageCount)
    (12)$ (".list ul").append(str)
    (13)$ (this).scrollTop()
    (14)$ (this).height()
    (15)$(document).height()
    (16)sTop+sHeight>bodyH-1(这里的数值不是唯一的,可以是任意数字)
    (17)num<=pageNum或者pageNum>=num
    (18)ajaxDate(num)

    试题三(20分)(每空2分,共20分)
    【问题】(20分)
    (1)DROP(不区分大小写)
    (2)CREATE DATABASE info_manage
    (3)auto_increment
    (4)current_timestamp
    (5)primary key
    (6)insert into
    (7)alter
    (8)add
    (9)after
    (10)n.newtype=t.id

    试题四(20分)(每空2分,共20分)
    【问题】(20分)
    (1)group
    (2)App\Http\Controllers\Admin
    (3)use DB
    (4)with
    (5)explode
    (6)where(‘id’,"=","$v")
    (7)return $ str
    (8)@ extends
    (9)@foreach($ data as $v)
    (10){{url(‘admin/news_ajax’)}}

    1+X 系列导航

    考点知识回顾:

    一、 1+X Web前端中级必考 | PHP 技术与应用
    二、 1+X Web前端等级考证 | 详解jQuery基础
    三、 1+X Web前端等级考证 | 深入浅出MySQL数据库
    四、1+X Web前端等级考证 | Web中级12月最新模拟题
    五、 1+X Web前端等级考证 | 浅谈AJAX基础知识 (中级必考)

    模拟题


    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷1) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷1) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷2) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷2) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷3) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷4) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷4) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷5) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷5) 附答案

    有时间会持续更新关于1+X 方面的~~

    展开全文
  • 2021我的前端开发年度总结

    千次阅读 2022-01-28 13:59:11
    工资待遇上,因为笔者打听的是 web 前端开发相关的岗位,这里只说前端相关的待遇,平均工资待遇大概是二线城市平均水平的 60%。一线城市平均水平的 50% 的样子。个人还是可以接受的,并且最重要的是可以和心爱的人...

    入职离职,离职入职,循环往复,生生不息。天下无不散之筵席,我也到了要和当下公司说再见的时候了。

    其实有时候挺羡慕有些同事一毕业之后就一直在一家公司工作很久,首先说明这家公司的业务比较稳定,其次个人在这家公司能够得到较为长足的发展,最直接的是工资可以稳步提升,技能也会越来越扎实,这其实对我们程序员来说还是比较难得的,反正我个人从实习到现在工作近三年的时间,已经换了很多份工作了,其中有些是公司的原因,也有些是个人的原因,兜兜转转,走来走去其实现在想来不是很好,尤其是在工作前几年经验不是很丰富的情况下,频繁跳槽不会带来工资上的多少提升,唯一的好处可能是:如果你非常善于学习的话,可以有更丰富的项目经验,以及通过不同的同事来学习到每个人所特有的一些长处,或是为人处事方面的,或是专业技能方面的。

    自2020年10月份笔者入职现公司到今天离职,感觉时间还是过的很快的。对个人职业生涯发展和人际关系相处方面有了很多新的认识。这一次离职更多的是个人的原因——笔者打算回家发展,理由也很简单,家里工作可以和另一半长期相处,并且以后也有很大机会在老家买房,当然在外工作也可以攒钱老家买房,速度可能还会快些。只是笔者觉得老家买房老家住,而不是老家买房外面租房住,这样会好一些。并且早在2020年夏天的时候,笔者就已经打探了老家的相关工作岗位,作为一个三线城市来说,虽然不多,但却也足以容纳一个在外漂泊多年又想要返乡的的灵魂了。工资待遇上,因为笔者打听的是 web 前端开发相关的岗位,这里只说前端相关的待遇,平均工资待遇大概是二线城市平均水平的 60%。一线城市平均水平的 50% 的样子。个人还是可以接受的,并且最重要的是可以和心爱的人一起朝夕相处,工资相比之下只能算是一个小问题了。

    说会在公司工作的 2021 年度吧。如前所述,笔者主要学习到了工作技能和人际关系相处两个方面。

    工作技能方面,2021 年来说,web 前端最流行的开发技术还是 vue 和 react。国内的中小型公司 vue.js 的使用量更大,特别是 vue3 开始流行以来。目前来看 vue3 + TypeScript 的技术栈是未来2年国内前端发展的主要方向。react 相关则还是 react hooks 及相关生态系统。殊途同归,其实熟悉了 vue3 也就容易上手 react hooks ,就笔者个人来说,更偏爱 vue3 ,相比于 jsx 的 render 函数式语法,笔者更钟爱在业务需求中写模板语法,也许有先入为主的原因。在工作中笔者 vue 和 react 都写过,也都维护过相关的项目,总的来说还是觉得在业务尤其是网页中写模板语法比 jsx 会更直观一些。当然 jsx 更加灵活,并且相比于 vue 中还是不断新生的各类语法糖来说,react 和 jsx 的这套技术栈组合更加拥抱原生 JS 语法,几乎没有什么新增的语法糖,这其实是 react 系框架技术的优势所在。

     也因此,笔者在 21 年主要学习了 vue3 和 TypeScript 的相关知识,并且已经运用到了新的项目中,效果还是很不错的,特别是 vue3 解决了之前 vue2 的一些“顽疾”,比如说一直让人比较头疼的响应式对象检测问题了:

    这和 vue2 的响应式实现原理 Object.defineProperty 的局限性有关,彼时 ES6 的新特性 Proxy 还没有完全普及,特别是在 IE 浏览器下的支持度很不好。如今微软已经放弃了 IE 系浏览器转而全面拥抱基于 Chromium 的新 edge 浏览器,ES6 语法新特性已在主流浏览器中普及,而 vue3 的响应式原理基于 Proxy 正当时。那么现在就无需再当心响应式的 vue 对象/数组新增或删除属性不会被检测到的问题了。再比如 vue3 的合成型API(Composition API)代码风格,可以更加方便的写出 hooks 风格的代码,hooks 风格代码除了有更简洁、更低的代码耦合度的优点外,还可以更加方便的做代码功能复用和 Tree Shaking.在过去,vue2 及 react 老版本在做代码复用时常常利用混入(mixin),当然 react 还可以利用高阶组件来实现。但是这些实现都不是很优雅,特别是 混入 的做法,就笔者实际开发项目来说,如果大量使用混入会使项目代码逻辑结构更加不清晰,也会越来越不容易维护,而使用 hooks 风格的代码可以较好的解决此类问题(前提是需要扎实的 JS 基础和良好的 hooks 函数封装经验)。Mixins Considered Harmful – React Bloghttps://zh-hans.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html

    关于 mixins 做法的问题,这里有一篇文章做了详尽的解释。这也是现在 vue3/react hooks 大行其道的原因之一。 

    21年,笔者除了学习了 vue3 相关知识外,另一个比较重要的是学习了 uniApp 的相关开发。作为一个跨端开发框架来说,uniApp 实用吗?很实用!好用吗?个人觉得很一般,但确确实实是能够解决项目中的很多问题。首先 uniApp 的最大有点在于降低了开发成本。一套代码可以在经过相关配置之后运行在 web,小程序(各大平台),App(安卓和 iOS)上。现在国内很多面向广大用户的产品都要求自己的软件不仅要有网页版的,还要有小程序,甚至还要有 App,如果按照传统模式开发,至少需要 3 个团队,web 开发团队,App开发团队(还需细分成 安卓和 ios),小程序开发团队。当然,一般小程序开发可以被 web 开发团队兼任,但是 App 开发,即使不使用原生开发技术,利用 RN, flutter,weex 等跨端框架,同样需要另外招人。那么 uniApp 可以把这三拨人减为一拨人,确实有很大作用。但是事实远没有那么简单。首先是项目具体需求方面,如果是一个要求较为简单的产品,譬如一个小型的管理系统,一个小型的在线商店,那么使用 uniApp 开发问题不大。而如果是一个较大型的项目,使用 uniApp 开发需要解决的问题就很多:

    1. uniApp 和其他框架结合使用产生 bug 的问题:这里问题有很多不仅少见而且比较难排查解决,如这篇文章介绍的 在 uniApp 项目中使用 echarts tooltip 无法解析 html 标签的问题及解决_似水流年的博客-CSDN博客前言如题,最近笔者所在项目组正在开发一个需要有 web,h5及App版本的项目。那么在技术选型的时候我们自然是想到了目前国内比较火的 uniApp 了,根据其官网介绍是一次开发到处使用啊,而且uni本身也是基于 vue 生态开发的,对我们之前一直使用 vue 全家桶开发的前端人员来说也是比较容易过渡(仔细一想目前如果是要开发一个同时带有 web h5和 app 的项目,除了 uni 的话,可能就是React Native(主要是开发App), weex(类似RN但是用的更少),最有前景的 Flutterhttps://blog.csdn.net/a715167986/article/details/113559444

    2. 实际开发中各种小 bug 较多,有很多淤积问题一直没有得到有效解决。虽然 uniApp 在国内使用者较多,但是比之 RN flutter 等同类解决方案来说,uni 一方面没有英文文档(外国人几乎没法使用,中文文档水平也不很高),另一方面社区维护力量较弱,所以很多小问题一直存在却无人解决。

    3. App 开发相关体验较差。使用 uni 开发小程序体验尚可,但是开发相关 App 就不是那么容易的了。当然这里也不能全算 uniApp 的问题,毕竟本身 App 需要的相关经验就很多。比如说安卓App的离线通知功能在国内由于厂商自定义 ROM 五花八门需要各种适配,而开发 iOS App 需要 Xcode 工具,申请成为苹果开发者等等。而使用 uni 开发需要踩坑的地方就更多了,比如安装包的打包等。

    总的来说,uniApp 的出现很好的解决了一些问题,但是也引入了一些新的问题,就程序员的开发体验来说,是比较一般的。具体使用与否还是要取决于具体的业务场景。

    21 年,微前端概念的流行。应该说从 2020 年开始,微前端的概念便开始大行其道了。当然了,一般的项目其实是使用不到的。之所以笔者接触到是因为近期笔者参与的公司开发的项目使用到了一个有名的微前端框架 qiankun.js 。这是一个关于设备仪器的管理系统,业务较为庞大,但是私以为实际上也还没达到使用 qiankun 的程度,而之所以还是上了 qiankun 是因为项目开发的时间较长(一年半以上),最初开发是还是 vue2 版本,之后 vue3 开始越来越流行,考虑到新功能可以使用 vue3 写,但是原有业务是 vue2 实现的问题,再加上项目本身的体量于是使用 qiankun 改造。具体做法是将项目拆分成 8 个子应用,以具体模块功能来划分,原有功能使用 vue2 技术栈,新模块全部采用 vue3 技术栈,在这种情况下,新功能的开发技术栈不在受限于原有技术体系,即使是使用 react 开发也没有问题。当然,qiankun 框架的配置还是有很多坑需要踩的。应该说微前端适用于大项目大团队开发,比如 qiankun 的开发公司阿里这一类体量的公司业务,可以同时让多个团队并行开发多个子应用,各个小团队具体的模块实现方法不做限制,最终合并到一个大项目中运行。

    关于 21 年的总结内容很多,笔者暂时先更新这些,其他有时间再补。

    展开全文
  • 移动设备在全球范围内得到了空前的普及,在前端领域,Hybird Web、React Native、Weex、Flutter 等等一系列新的移动前端技术也如同雨后春笋般冒出来,今天来和大家分享一下我对「移动前端开发和 Web 前端开发」的...
  • 对于正在从事Web前端开工作的人来说,了解Web前端开发规范是很重要的.因为只有这样才能保证高效快速的完成工作,今天小千就来和大家分享一下新手初学Web前端需要注意的Web前端开发规范有哪些!希望对小伙伴们有所...
  • 前端开发与后端开发的区别是什么?在实际开发过程中,前端开发人员精通JS能熟练应用JQuery,懂CSS能熟练运用这些知识,进行交互效果的开发;后端开发人员会写Java代码SQL语句,能做简单的数据库设计会Spring和iBatis...
  • Day 23 - 前端开发工具 - HBuilder X

    千次阅读 2021-10-30 10:35:57
    Day 23 - 前端开发工具 - HBuilder X 完成了后端开发,接下来就要将透过前端跨平台开发框架来存取后端的资源,底下介绍几种常见的跨平台应用开发框架。 Flutter Ionic React native Apache Cordova Xamarin 所谓的...
  • 前端开发工作总结

    千次阅读 2021-12-18 23:30:48
    从我进入公司到现在已经有一段时间了,随着工作年限的增加,逐渐成长为一名独立的开发人员,角色改变了,职责也改变了。虽然已经预计了工作之中会有很多困难,可是在实际的项目开发中,自己所遇到远不是想象之中的...
  • 2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高? # ...
  • Web前端开发师必备的8个工具

    千次阅读 2021-08-26 17:26:36
    Web前端开发需要掌握的几个必备技术是: HTML +_CSS核心、JavaScript、VUE框架 前端的应用非常广泛,基本网站、APP、HTML5小程序等都需要前端开发,所以只要是互联网产品基本都需要前端。 前端程序猿切页面写页面,...
  • 前端开发:前端如何开发 APP

    万次阅读 多人点赞 2018-07-03 02:45:52
    做为一个前端开发人员,有时候除去传统的前端开发还需要进行其他开发,比如公众号开发,小程序开发,APP 开发。 本场 Chat 将带你从0开始,基于 APICloud 进行 APP 开发,你只需要会前端就可以。 本场 Chat 主要内容...
  • 前端开发环境配置

    千次阅读 2022-04-05 16:26:47
    首先需要安装VScode等编辑器,Vscode中需要安装技术栈需要用到的插件; 安装node.js来使用npm,还需要安装淘宝镜像方便快速使用npm导入插件; 需要安装git以便于下载代码到本地以及管理代码,企业管理代码时需要...
  • 前端开发人员必备的十项技能

    千次阅读 2021-08-31 18:11:03
    前端开发人员必备的十项技能什么是前端开发谁是前端开发人员工作和薪资趋势前端开发人员技能:技术前端开发人员技能:非技术大前端开发工程师直播班 Web 开发由两个重要部分组成,每个部分都需要不同的技能和技术...
  • 根据大数据直观显示,2022年,Web前端开发依然是值得大家选择的职业。目前各个企业对于这块的人才稀缺量比较大,可以说这块是有市场的,和其他的行业相比它还没有达到饱和状态,所以说这方面的岗位也是很好求职的。
  • (入门)前端开发的简单介绍

    千次阅读 2021-12-16 17:21:16
    前端开发首先离不开前端基础技术(html、css和js),其次想要有更好的发展应用就要用到前端框架。 那么有以下六个问题需要简答地了解一下。 一、前端、后端各自的工作是什么? 简地是说前端就是设计用户的界面,...
  • web前端开发工程师岗位的职责

    千次阅读 2021-07-29 06:05:55
    web前端开发工程师需要与后端开发团队紧密配合,确保代码有效对接,优化前端应用性能。以下是学习啦小编整理的web前端开发工程师岗位的职责。web前端开发工程师岗位的职责1职责:1、负责产品的前端代码开发、页面...
  • 前端开发试用期工作总结

    千次阅读 2022-01-09 23:32:15
    转眼我到 xxx 公司工作已经将近 xx 天了,之前对公司的认识是通过网络上的一些信息,到公司工作之后对公司的历史、组织架构,开发环境(流程)等方面都有了更加深刻地认识。进入公司以来,我一直以认真工作为己任,...
  • 浅谈对前端开发的简单认识

    千次阅读 2020-07-02 11:08:51
    1 我对前端开发的概念的理解 2 我对网页设计,ui ,前端开发的,理解 3 基本的技术知识 一、我对前端开发的概念的理解 1、前端: 在网络平台上,展示、传递信息给用户,或可以跟用户进行交流的界面。 百度百科是这样...
  • 前端开发工程师简历

    万次阅读 多人点赞 2022-04-16 16:27:11
    简历是什么 找工作之前投递的个人信息和工作能力----不全面 应该是:个人当前阶段的价值体现 前者:我能卖多少钱;后者:我现在值多少钱 建议:每隔半年/一年给自己做总结的时候写一份简历(相当于个人价值总结) ...
  • 前端开发_开发软件Hbuilder简介

    千次阅读 2021-12-11 23:08:29
    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写, 它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder...
  • 孔子说,“工欲善其事,必先利其器”,当前运用前端开发,也是很恰当的,那么,前端开发用什么软件?前端开发用什么工具?下面php中文网就为大家总结一下前端开发开发工具。 一:HBuilder HBuilder工具是数字天堂推出...
  • 推荐六本前端开发必看的书籍

    千次阅读 2022-03-10 09:47:36
    推荐六本前端开发必看的书籍
  • 随着不断变化的技术和框架,在前端开发领域开始变得非常困难,那想要成为一名前端开发工程师,前端开发需要学习什么呢? 在这篇文章中,为你总结了如何成为前端开发人员的10个技巧!以及前端学习路线,欢迎参考! ...
  • 在网上看到很多类似“前端现在是不是饱和了,是不是不好找工作了呀?”这类问题,就这类问题也和小伙伴进行了探讨,大家一致认为——不是前端饱和了,而是现在前端的工作在不断独立,门槛越来越高,再也不是只会三大...
  • 先说说前端开发的两种学习方式吧 1,自学 免费,在网上寻找资源进行学习,资源不连续,遇到问题无人解决,所需工具与网上不配套,导致操作不一致;边工作边学习,减少学习所用时间成本,但是这段时间的工作基本与想做的行业...
  • 作为前端开发,我为何疯狂推荐WebStorm?

    万次阅读 多人点赞 2020-08-09 12:04:02
    经常会有小伙伴过来私信我,让我给他们推荐一下前端开发工具,我几乎都是毫不犹豫地就说 " WebSotrm ",原因我当时也没给他们细讲,因为这款开发工具功能实在是太全了,一句两句说不清楚,所以我准备写一篇文章告诉...
  • web前端开发前景如何

    千次阅读 2021-07-04 11:35:57
    web前端开发前景如何?前端是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,...
  • vscode搭建前端开发环境

    千次阅读 2021-12-12 12:15:22
    1.微软官网下载vscode 2.点击小方框,搜索下载三个插件 3.点击左下角的齿轮,点击设置,配置自动保存 4在左侧导航栏新建一个项目,在新建一个.html结尾的文件就可以编写网页了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 963,135
精华内容 385,254
关键字:

前端开发

友情链接: 2048-react-master.zip