前端组件

谈谈前端面试中遇到的问题(一)

我是研究僧i 提交于 2019-12-01 18:41:10
前言 歇了一个多月,终于是拿了驾照,也算是完成了人生计划中的其中一个,没有过去2019年。 2019年的全部计划估计是完不成了,想要完成多少,还是要看接下来的努力。 歇息了一个月,最近刚刚开始面试,前两个面试是一点准备都没有,去面试也仅仅是考虑一下自己现在的情况,有目的的去准备面试。 一个多月,感觉忘记了很多,在此记下面试中遇到的问题,以来自勉。 题目 1、React context是如何工作的? 更多的时候,我们在组件层级间进行数据传递,都会用到props,但是如果需要传递的子属性太多,我的组件属性就有可能会写得很长。而这时候,context或许是个解决方案。 context作用是为了避免在组件间层层传递变量。我们可以通过createContext(null)来创建一个新的context,新创建的context包含一个Provider以及一个Consumer。 如果我们想要在组件间层层传递变量,则需要用Provider来包裹父组件,在Provider包裹下的层层组件,都可以通过Consumer包裹子组件来读取传递的变量。 2、react兄弟组件间通信方式 第一种笨方法,子组件1传递给父组件,接着传递给子组件2. 第二种利用事件的发布订阅。 第三种大家都知道,用redux管理数据。原理和第一种+第二种差不多,不过是更规范的数据管理和数据流传递和事件发布订阅方式。 3

react 常用技术

泄露秘密 提交于 2019-12-01 18:34:15
转载自 https://www.sohu.com/a/285175900_132276 开源展示了人类共同协作,成果分享的魅力,每一次技术发展都是站在巨人的肩膀上,技术诸多创新和发展往往就是基于开源发展起来的,没有任何一家网络公司可以不使用开源技术,仅靠自身技术而发展起来。阿里巴巴各个团队都是发自内心地将踩过的坑和总结的经验融入到开源项目中,供业界所有人使用,希望帮助他人解决问题。 云栖社区特在2018年年末,将阿里巴巴的一些重要的开源项目进行整理,希望对大家有所帮助。(以下项目排名不分先后) 这些优质的开源项目即将成立便于开发者交流的讨论钉钉群。社区将不断更新,欢迎大家加入讨论。 前端 1.数据驱动的高交互可视化图形语法 AntV - G2 G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。 同时,G2 也是 AntV 最重要的组成,始于《The Grammar of Graphics》一书描述的视觉编码语法系统(这也是 G2 项目命名的由来)。 项目地址:https://github.com/antvis/g2 2.企业级中后台 UI 解决方案 Fusion Design Fusion Design 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。通过建设基于 DPL

开始写游戏的趣事 --- 第二篇

坚强是说给别人听的谎言 提交于 2019-12-01 18:15:32
开始写游戏的趣事 --- 第二篇   现在时间:        我实在是睡不着,2点钟的时候其实就醒了,一直醒着躺倒现在。   脑子里一直在想,别人都好厉害,真的好厉害。   我以前做web开发工作的时候,写的前端组件都是这样的:          这是运行效果:          可见我们当时是通过 options 的方式来让外界配置组件的属性、事件。   但是,当我进入了Egret的世界后,虽然花了两个月看完了书,但是还是感觉像小白一样。   明明自己知道类、知道继承。但是就是不怎么用。   在Egret的世界里,我当时写组件。。。就是用了以前web开发组件的套路。。。          我想通过这种方式向外抛出事件。。            然后外部是这么用的:          现在想想真的挺蠢的。   不是有继承么?不是有事件基类么?为什么不用?   现在再用这个想法弄一个组件:        然后这是使用方式:        查看运行效果:        这样不就利用了 eui.Componet 类的 addEventListener 了么?   类的继承使用,要好好利用啊!   哎,现在才有这个意识,真的有点晚了。   没办法,以前web开发,都是用的jq,关于ES6的使用也很少。   所以对于类、接口、继承这种用到还是比较少的。   这次就当做是一个记录,提醒自己。

Vue项目环境搭建

半世苍凉 提交于 2019-12-01 15:44:14
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm vue ~~ django:vue是用来搭建vue前端项目的 ​ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ ​ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org ​ 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli ​ 注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --force """ Vue项目创建 1) 进入存放项目的目录 >: cd *** ​ 2) 创建项目 >: vue create 项目名 ​ 3) 项目初始化 pycharm配置并启动vue项目 1) 用pycharm打开vue项目 2) 添加配置npm启动 vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └──

测试效果博客

无人久伴 提交于 2019-12-01 15:07:20
目录 本博客环境 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方式) 配置 pycharm 启动 Vue 项目目录结构分析 pycharm 支持 vue 语法 安装 vue 插件 部分 vue 文件剖析 自定义组件并渲染到页面上 组件的导入与导出 全局脚本文件 main.js 解析(项目入口) vue 项目启动生命周期 加载 mian.js 启动项目 加载 router.js 文件 监测路由变化来做处理 参与文件 main.js 入口文件 App.vue 项目根组件 views/RedPage.vue 自定义页面组件 router.js 路由文件 全局样式文件配置与应用 小案例 - 封装 Nav 导航栏组件 components/Nav.vue 新建子组件 views/HomePage.vue 新建视图页面 新增页面三步骤 案例 组件生命周期(钩子函数剖析) ***** 基本概念 生命周期钩子函数 vue 官方提供的生命周期钩子函数 根据请求路径高亮路由标签案例 vue 官方提供的组件生命周期图 本博客环境 如果这些环境过时了,那就不用浪费时间看这博客了 Vue-Cli 项目环境搭建 npm (就类似于手机的应用商城,python 中的

深入解析Vue开发动态刷新Echarts组件的教程

蹲街弑〆低调 提交于 2019-12-01 11:47:32
需求背景:dashboard作为目前企业中后台产品的“门面”,如何更加实时、高效、炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件。 准备工作 项目结构搭建 因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建。 npm install -g vue-cli vue init webpack vue-charts cd vue-charts npm run dev 安装Echarts 直接使用npm进行安装。 npm install Echarts --save 引入Echarts //在main.js加入下面两行代码 import echarts from 'echarts' Vue.prototype.$echarts = echarts //将echarts注册成Vue的全局属性 前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。 到此,准备工作已经完成了。 静态组件开发 因为被《React编程思想》这篇文章毒害太深,所以笔者开发组件也习惯从基础到高级逐步迭代。 静态组件要实现的目的很简单

【转】优秀的Vue UI组件库

一世执手 提交于 2019-12-01 10:47:16
原文来源: https://www.leixuesong.com/3342 Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中,通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库。下面雷雪松详细的给大家介绍一下强烈推荐优秀的Vue UI组件库。 1、 iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的,更新也很快,文档写得很详细。有公司团队维护,比较可靠的Vue UI组件框架。iView生态也做得很好,还有开源了一个iView Admin,做后台非常方便。官网上介绍,iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。 iView官网: https://www.iviewui.com/ 2、Vux UI组件库 Vux是基于WeUI和Vue2

React入门学习

﹥>﹥吖頭↗ 提交于 2019-12-01 10:33:21
为了获得更好的阅读体验,请访问原地址: 传送门 一、React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaScript MVC 框架都不太满意,所以索性就自己写了一套,用来架设 Instagram。做出来之后,发现这套东西还蛮好用的,于是就在 2013 年 5 月开源了 。 在这里我们需要稍微注意一下 库(Library) 和 框架(Framework) 的区别, React 本身是一个用于构建用户界面的 JavaScript 库 ,而我们平时所说的 React 框架其实是指的是 React/ React-router 和 React-redux 的结合体,库和框架的本质区别体现在于控制权: 「库」是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权完全在于使用者本身; 「框架」顾名思义是一套架构,会基于自身的特点向用户提供一套比较完整的解决方案,如果使用者选定了一套框架,那么就需要根据框架本身做出一定的适应。 为什么使用 React? 这是一个非常有趣的问题,也让我困惑和苦恼。在笔者还在学校的时候尝试用 Vue 搭建了一套简单的博客系统,学习曲线平滑,让只会一些基础 HTML/ CSS 代码的我通过一段时间学习就能够上手了,但是学习

vue框架:

℡╲_俬逩灬. 提交于 2019-12-01 10:23:45
路飞项目 1.vue框架: 前台html+css+js框架,是不同于js与jq的数据框架 指令| 实例成员| vue项目 2.drf框架: django的插件,完成前后台分离项目后台接口编写的框架 序列化组件| 三大认证组件| 分页,筛选,过滤,排序|请求,解析,响应 3.路飞项目: 前台vue完成,后台由drf框架完成前后台分离项目 git| 短信认证| celery异步任务| 项目上线 ----------------------------------------------------------------------------------- js对象(字典)补充: let b = 20; let dic = { a:10, //字典本身就是对象,key都是字符串形式可以省略引号 b(b:b) // 值为变量时,且与key同名,可以简写 }; console.log(dic) vue: 1.what是:用于构建用户界面的渐进式JavaScript框架(选择性控制) 2.why.学: 1.是三大主流框架之一: Angular React Vue 2.有先进的前端设计模式: MVVM 3.可以完全脱离服务器端,以前端代码复用的方式渲染整个页面,组件化开发 4.结合了其他框架的优点,轻量级,中文API,数据驱动,双向绑定,单页面应用 5.虚拟DOM *** 缺点