前端组件

前言 微信小程序自1月19号发布后,可谓是有人欢喜有人忧啊.曾经对它一度抱有各种期待的前端工作者们在张总的一句句:"不行","不能"中小失所望. 但它作为一种轻型应用工具,给我们开发者带来的便利也是无可厚非的. 而自定义组件这个大功能呢也是从小程序基础库版本 1.6.3 开始支持的，低版本需做兼容处理,在搜了网上一堆微信小程序自定义组件的说明后,我好像发现都没有太好的介绍到它,所以今天在这里博主也是想给大家仔细的介绍介绍微信小程序的这个自定义功能,有说的不好的地方望小伙们指正,谢谢!( ╹▽╹ ) 使用自定义组件 应用场景: 当我们在设计我们项目的时候会发现在不同的页面中,有时候会用到相同的功能模块,此时我们就可以将这些相同的部分提取出来并且单独设为一个"页面",然后在要应用到它的地方引用就可以了,以上就是我对自定义组件的个人理解,具体做法请阅读以下内容. 1.创建自定义组件 在上面我介绍了,自定义组件其实就像是一个页面,所以我们在编写它的时候也应该像设计页面一样,具备 json wxml wxss js 这四个文件. 在这里博主就以编写案例的形式向大家介绍自定义组件. 一. 前期准备 1.首先,新建一个名为 wxcomponent 的项目, 2.在pages文件夹下创建一个 components 文件夹用来盛放我们所有的自定义组件. 3.在components文件夹下创建一个

生命周期钩子函数：从组件创建，到组件挂在到页面中去，再到页面关闭写在组件，这三个阶段伴随着各种各样的事件，这些事件，统称为生命周期函数。 简单说就是，一个组件实例，从开始到消亡所经历的各种状态，称为组件的生命周期。 1、什么是编译compile？ 2、 来源： https://www.cnblogs.com/jianguo221/p/11795451.html

组件的本质 　　组件的本质就是一个可以交互的视图模板 controller去哪了 　　在react中存在展示组件与容器组件，其中展示组件展示单纯的展示，而容器组件里面则是react与redux沟通的桥梁，而redux是包含业务逻辑的地方，所以controller存在于react的容器组件中，但是在vue中没有容器组件的概念，然而我们可以编写出一个容器组件，用于存在其他展示组件，这通常是一个页面或者是页面里的某个模块 是否需要model层 　　对于中小型项目，大部分业务逻辑都已经被node中间层给处理了，前端只是单纯的拿到数据 展示数据，并不存在复杂的业务逻辑，但也不是完全没有业务逻辑，单纯开辟一个model层太过于浪费，是否可以将model层放于容器组件之中？ 真的需要vuex吗 　　vuex是为了解决组件间数据共享，组件数据深层传递问题，但是并不是只有vuex才可能解决这个问题，组件间数据共享可以用sessionStorage,深层传递可以用provide/inject mvc在前端 　　mvc的本质是大型项目的解耦，其解决办法是业务逻辑于视图的分离，然而什么是视图层，什么是业务逻辑层，并不是说 放在pages里面就是视图层，放在model里面就是数据层，本质在于你如何分离你的代码，在上面 我将业务逻辑放在容器层里面，而将视图层 分散在组件里面

前言 2019年6月中旬，实在厌倦了之前平平淡淡的工作和毫不起眼的薪资，不顾亲人的反对，毅然决然地决定只身前往沿海城市，想着找到一份更加具有挑战性的工作，来彻彻底底地重新打磨自己，同时去追求更好的薪资待遇。当然在此之前，自己每天下班后都会利用业余时间抓紧复习巩固刷题等等，大概从3月份开始的吧，持续了3个多月。而后从6月中旬面试一直到6月底，中间大概两个星期，其实我的学历和背景并不突出，但是我个人感觉可能是因为自己简历做的稍微还行(后面我可能会单独出一篇文章，来聊聊我做简历时的一点点心得)，让大厂的HR能够多看几眼，中间面过的公司包括喜马拉雅、携程、哔哩哔哩、流利说、蜻蜓FM、爱回收等，陆陆续续拿到4，5个Offer吧，如今已经转正，所以在这里记录下之前的部分 面试题 ，和大家一起分享交流。 正文 1. 烈熊网络 这家公司其实我也没有太了解过，是我前同事推荐的，说里面的薪资待遇不错，然后我当时也有空闲时间，所以就去试试了，虽然公司名气没有上面提到的公司大，但是他的面试题我觉得还是挺有分量的。 1.1 请说出下面代码的执行顺序 async function async1() { console.log(1); const result = await async2(); console.log(3); } async function async2() { console.log(2)

前言 2019年6月中旬，实在厌倦了之前平平淡淡的工作和毫不起眼的薪资，不顾亲人的反对，毅然决然地决定只身前往沿海城市，想着找到一份更加具有挑战性的工作，来彻彻底底地重新打磨自己，同时去追求更好的薪资待遇。当然在此之前，自己每天下班后都会利用业余时间抓紧复习巩固刷题等等，大概从3月份开始的吧，持续了3个多月。而后从6月中旬面试一直到6月底，中间大概两个星期，其实我的学历和背景并不突出，但是我个人感觉可能是因为自己简历做的稍微还行( 后面我可能会单独出一篇文章，来聊聊我做简历时的一点点心得 )，让大厂的HR能够多看几眼，中间面过的公司包括 喜马拉雅、携程、哔哩哔哩、流利说、蜻蜓FM、爱回收 等，陆陆续续拿到4，5个Offer吧，如今已经转正，所以在这里记录下之前的部分面试题，和大家一起分享交流。 正文 1. 烈熊网络 这家公司其实我也没有太了解过，是我前同事推荐的，说里面的薪资待遇不错，然后我当时也有空闲时间，所以就去试试了，虽然公司名气没有上面提到的公司大，但是他的面试题我觉得还是挺有分量的。 1.1 请说出下面代码的执行顺序 async function async1() { console.log(1); const result = await async2(); console.log(3); } async function async2() { console.log

项目地址 vue-cli3-project 欢迎 star 原文地址 https://www.ccode.live/lentoo/list/9?from=art 1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。 1.1 安装@vue/cli # 全局安装 vue-cli脚手架 npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project 选择一个预设 可以选择默认预设，默认预设包含了 babel , eslint 我们选择更多功能 Manually select features 回车后来到选择插件 插件选择 这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架） 路由模式选择 是否使用 history 模式的路由 （Yes） 选择一个css预处理器 (Sass/SCSS) 选择一个eslint配置 这边选择 ESLint + Standard config ，个人比较喜欢这个代码规范 选择什么时候进行 eslint 校验 选择（Lint on save）保存是检查 如果你正在使用的vscode编辑器的话，可以配置eslint插件进行代码自动格式化 选择测试框架 （Mocha +

本文转载于: 猿2048 网站➪ https://www.mk2048.com/blog/blog.php?id=iah0c1102j 前言 作为前端UI组件库，从样式角度去看，应当满足两方面要求： 一致性 和 可定制 [1] 。 其实这两点也非常好理解，一致性保证了组件库视觉上保持一致，而不是东拼西凑，而且说得高大上一点可能还有规范可循。而可定制就需要组件库暴露接口，供开发者配置形成自己风格的组件库。 一致性 但是具体一致表现在哪些方面呢？对于设计师而言，会很清楚，但是对于我们前端开发人员而言，具体指的是哪些东西呢？我们又如何把这些东西转化为代码呢？这部分具体见 设计规范 部分。 可定制 根据可定制的粒度大小，可以分为组件层面的可定制和整套组件库的主题定制。有组件使用经验的同学都知道，使用具体组件时我们可以传入某些参数或主题参数，组件就可以呈现不同的表现。另外，一些有名的组件库也都提供了 主题定制 的相关方法，如 antd-mobile 、Vant 和 Element ，尤其是 Element ，提供了多种主题定制的方法。 设计规范先行 前面提到的一致性是由“设计规范”来保证的，其实这一块涉及到的内容非常多。可能在我们眼里就是组件库里的那套看似 杂乱无序 的 通用变量 （设计规范 ≠ 通用变量），但是其实里面还是有一些套路的，也建议多多和设计师沟通，产生思维碰撞

本文转载于: 猿2048 网站➨ https://www.mk2048.com/blog/blog.php?id=h2k2achjjb 目前，市面上主流的Vue组件库大概就是iview, element。 当然，heyui不在范围内，38个star屈指可数，大部分还是认识的同事。 更可恶的还是骗不来后端同学的star，心塞。 求Star(小💕💕)： Github 官网： http://www.heyui.top 关于对比 对比呢，我总共出了几个纬度： 入门方式 功能 组件调用 项目大小与依赖 使用率 入门方式 按需加载 element，iview都支持按需加载。 heyui不支持。 关于支不支持按需加载，思考了很久。 也许element, iview还可以，但是如果heyui拆分组件使用，整体优势不大，后面我再介绍。 样式自定义 其实，这里三个组件都是差不多的。 element使用scss，iview和heyui使用less，使用变量覆盖的方式就可以了。 element提供了一个主题生成的工具，对应iview也有一个，但是这是一开始的方式了，现在大家都是推荐变量覆盖的方式。 这里，我就要推荐我们的脚手架 hey-cli ，我把这些变量不是采用覆盖的方式，而是使用全局化的方式。 这样，你的@primary-color一样可以在vue的 <style lang="less"/> 中使用

本文转载于: 猿2048 网站→ https://www.mk2048.com/blog/blog.php?id=h2abia01ib 一 设计理念 界面、编辑器、播放器 界面是一棵组件树。 界面编辑器就是对这棵组件树进行编辑和持久化的工具。 编辑器维护这颗树的数据，对外开放增删改查，撤销重做等接口。 界面播放器输入组件树，可以得到界面展示 未来甚至可以做到通过不同的播放器来适配不同的平台。 组件 树上的每一个组件通过输入 属性 决定自己的 展示 交互 组件可以通过组件编辑器的接口知晓是否处于编辑状态。 编辑状态下，组件可以提供交互编辑自己的输入属性。 这么做有两点好处 编辑器关注的始终只有组件树，组件的属性，无需关注如何编辑组件属性 组件可以为自己的业务需要，量身定做最适合的交互来编辑属性 例：设计一个 Text 组件逻辑 当处在编辑状态下，显示光标，文字为可编辑状态 不处于编辑状态，则显示文本内容 Strikingly 正是实践该理念的优秀产品[www.sxl.cn] 视图组件 进一步，我们可以利用组件可以在编辑状态下，提供自己的交互逻辑编辑自身属性这一特性，我们可以设计出一个特殊组件—视图组件。 视图组件 本质就是组件。只不过视图组件的属性是组件列表。 可以在视图组件中可视化增加、删除、调整组件的顺序，通过视图组件，我们获得了编排组件的能力。

本文转载于: 猿2048 网站➼ https://www.mk2048.com/blog/blog.php?id=hj111h00bb 　　借用了两个久经考验的轮子：fastClick和better-scroll，介意可以就此打住。本文绝对原创，手打，思路清晰，知识不难，不适合大佬观看，谢谢。 　　首先说一下，我不是阿里的人，也没去阿里面试过，这是某微信群里的一个小伙伴给的，我现在的能力达不到阿里的要求。不过人没梦想还不如咸鱼，有能力的话还是想去尝试一下。本文如有不足，请勿嘲讽，指出不足即可，谢谢。码字不易，且看且珍惜，转载请注明出处。原创博客，若侵犯贵司的利益，请私信我删除。若觉得不错，求个赞和github的star。 　　题目如下： 　　大概就是这样吧，分析一下就是做一个城市选择组件，实现的功能或者要求呢就是可以定位当前的城市、用localstorage存储上次定位的城市和最近选择过的城市、可以按照输入的字母或者文字筛选出想找的城市、将数据带到页面也就是一个父子传参的问题吧、页面使用flex布局。 　　我在下班闲暇时间简单的做了一下，成功如下： 　　 　　我仅仅做了这个组件，向页面传参的功能还没做，可以用父子组件传参完成。 知识点部分： 　　简单的说一下我这个城市选择组件和其中的一下知识点： 　　1.后台 　　　　我用node.js起了一个后台服务，使用的express框架