前端组件

ECS从本质上来说是一种设计模式.而不是某个语言的特性 .该系列文章主要是探索ECS在C#中实现时遇到的各种纠结的问题与方案.同时设计一个unity为前端 .net core做服务器的分布式开发框架.但是水平很菜,难免有错.望批评指正,与君共勉. ECS是什么 ECS是Entity Component System的缩写,实例由组件聚合而成.实例本身不包含任何数据,全部的数据都来自它所拥有的组件.也就是说实例有什么数据,取决它有什么组件.系统则是功能的实现.可以理解为系统关注某些组件,当组件存在时.系统将会进行某些操作. 上面的解读来自各种能百度到的文章上讲的.但是我想在这里用一个实际开发的角度去看待ECS. 先举个例子:有一件物品在地上,玩家A拾取这个物品. 按照ECS的做法会给物品挂上一个 "被拾取" 的组件.然后某个 系统 会处理这个组件.他会把所有带着这个组件的物品,根据组件上面描述的拾取者,将这个物品移动至该拾取者的背包中.这里 系统 关注的是 "被拾取"组 件,但是他同时会使用其他 组件 ,比如这里的背包 组件 .任何一个持有 "被拾取" 组件的实例,都会被那个 系统 给处理移动.如果不加控制,你甚至可以将一个NPC或者玩家挂上这个 组件 ,结果就是玩家变成了宠物小精灵. (这个功能可以有) 这显然是不合理.所以你可以将那个物品挂上一个 "可以被拾取" 的组件

Android UI界面设计——附参考文档 UI 界面设计 一、基本组件 1.文本类组件 1.1 TextView 参考文档docs 1.2 EditText（是textview组件的子类） 2.按钮类组件 2.1普通按钮组件Button（是textview组件的子类） 2.1.1按钮事件——常用监听器 2.2图片按钮ImageButton组件 2.3单选按钮RadioButton组件 2.3.1添加选择更改事件 2.4复选框CheckBox组件 3.日期时间类组件 二、高级组件 1.进度条类组件 1.1 ProgressBar 1.2 SeekBar拖动条 1.3RatingBar等级评论条 2.图像类组件 2.1 ImageView 2.2图像切换器ImageSwitcher 2.3网格视图GridView 3.列表类组件 3.1下拉列表Spinner 3.2列表视图ListView 3.3滚动视图ScrollView/HorizontalScrollView——非常常用 4.通用组件 4.1选项卡 UI 界面设计 一、基本组件 1.文本类组件 特点是在界面中显示文本信息 1.1 TextView 参考文档docs 属性 释义 说明 textSize 文字大小属性 单位：sp textColor 文字颜色 属性值：1.可在AS左侧预览显示2.点击预览图标，可以调整颜色显示

1，vue的生命周期 1, 创建期间的生命周期函数 beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板 beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 2, 运行期间的生命周期函数 beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ 3, 销毁期间的生命周期函数 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 1，MVC、MVP、MVVM模式的区别 MVC、MVP和MVVM这些开发模式为了分离视图（View）和模型（Model）而提出来的，直白说就是为了前后端分离 1，MVC（Model View

Github: https://github.com/nzbin/snack Docs: https://nzbin.github.io/snack 前言 这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。在之前的文章中，我提到了面向对象的 CSS（比如 BEM、OOCSS、SMACSS ，详见 http://vanseodesign.com/css/dry-principles/ ）。这是一种思想，并不涉及具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员专用，前端没必要等等。我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便。 为什么使用框架 为什么使用框架？答案显而易见，效率。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现。在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大多数人都是根据功能去命名

author: James Kyle + 荆雷 by James Kyle 翻译：荆雷 Install yarn add react - loadable Example import Loadable from 'react-loadable' ; import Loading from './my-loading-component' ; const LoadableComponent = Loadable ( { loader : ( ) => import ( './my-component' ) , loading : Loading , } ) ; export default class App extends React . Component { render ( ) { return < LoadableComponent / > ; } } （下文括号里是译者的注释） 原文地址 https://medium.com/@thejameskyle/react-loadable-2674c59de178 当你有一个很大的应用，把所有代码打成一个单一的包那么应用的启动时间会成问题（现在的前端打包工具在生产环境一般都是把所有 js 拼接压缩成一个长文件，css 拼接压缩成一个长文件，配合 source map 发到用户的浏览器。如果项目使用到的包很多，这个单一的 js

1. popover是什么以及难点在哪 点一下出现一个卡片,也叫气泡卡片 难点在于css的样式 2. 用户会怎么去用 // 第一种做法，用插槽做 <g-popover> <template slot="content"> <div></div> </template> <template slot="trigger"> <button>点我</button> </template> </g-popover> // 第二种做法，用指令做，这种方式不太用，指令大多数是造轮子用的所以就用第一种方法做 <div ref="xxx"></div> <button v-popover="$refs.xxx"></button> 3. 为什么要用用inline-block，因为这样多个popover组件才不会一行 // popover.vue <template> <div class="popover"> <slot name="content"></slot> <slot></slot> </div> </template> .popover{ display: inline-block; vertical-align: top; } // index.html <div id="app"> <g-popover> <template slot="content"> <div

1.MVVM的理解 MVVM：Model-View-ViewModel，模型-视图-视图模型。Model指后端传递的数据，View指所看到的页面，ViewModel是连接view和model的桥梁。ViewModel功能： 1.将模型转换为视图，即将后端传递的数据转化为所看到的页面。实现的方式是数据绑定。 2.将视图转换为模型，实现的方式是dom事件监听。 两个方向都实现我们称之为数据的双向绑定。 在MVVM的框架下视图和模型不直接通信，通过ViewModel来通信。ViewModel通常实现一个observer观察者，当数据变化后，其能监听到数据的变化并且通知对应的视图进行自动更新，而当用户操作视图时，ViewModel也能监听到这种变化并且通知数据做改动。 前端并没有传统意义上的MVC模式，过去为了解决浏览器兼容问题出现的类库如jQuery并没有实现对业务逻辑的分层，所以维护性和扩张性较差，而以前的文件缺乏正规的组织形式，因此出现MVVM。在vue中model指的是js数据，view指的是页面视图，viewmodel指vue实例化对象。 2.vue优点 轻量级框架，国人开发简单易学，双向数据绑定，组件化，虚拟dom操作 3.父子组件传参 父向子props，子向父$emit，vuex，ref 4.v-show和v-if 都控制元素的显示和隐藏 v

1:vue的安装 使用一个框架，我们第一步要做什么呢？安装下载它 安装Vue的方式有很多： 方式一：直接CDN引入 你可以选择引入开发环境版本还是生产环境版本 < ! -- 开发环境版本，包含了有帮助的命令行警告 -- > < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < ! -- 生产环境版本，优化了尺寸和速度 -- > < script src = "https://cdn.jsdelivr.net/npm/vue" > < / script > 方式二：下载和引入 开发环境 https://vuejs.org/js/vue.js 生产环境 https://vuejs.org/js/vue.min.js 方式三：NPM安装 通过webpack和CLI的安装使用 我的公司开发时使用webpack安装了vue即方式三 注：本文是本人vue学习笔记,本文多数内容属于Vue2.6之前的内容，只有较为重要的地方才会补充2.6版本之后的内容，望周知。 2:Vue中的MVVM 个人理解: v-view就是页面 m-model就是数据 vm-viewModel是Vue DOM Listeners就像计数那个例子一样,事件发生了他会监听到反应到页面上 Data Bindings 数据绑定

1. 什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生态并没有同步跟进。目前绝大多数的前端团队仍然使用非常原始的 “切图（FE）->套模板（RD）” 的开发模式，这种模式下的前端开发虽说不是刀耕火种的原始状态，但是效率非常低下。 前端的工程化问题与传统的软件工程虽然有所不同，但是面临的问题是一样的。我们首先回顾一下传统的软件开发流程模型： 上图中的运行和维护并不是串行关系，也并非绝对的并行关系。维护贯穿从编码到运行的整个流程。 如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是 面向编码 的，那么工程化要解决的是如何提高整个系统生产效率。所以，与其说软件工程是一门科学，不如说它更偏向于管理学和方法论。 软件工程是个很宽泛的话题，每个人都有自己的理解。以上是笔者个人的理解，仅供参考。 具体到前端工程化，面临的问题是如何提高 编码->测试->维护 阶段的生产效率。 可能会有人认为应该包括需求分析和设计阶段，上图展示的软件开发模型中，这两个阶段具体到前端开发领域，更恰当的称谓应该是 功能需求分析 和 UI设计 ，分别由产品经理和UI工程师完成。至于API需求分析和API设计，应该包括在编码阶段。 2. 前端工程化面临的问题

Vue-Router 1. 认识路由 路由中有一个非常重要的概念叫路由表，路由表本质上就是一个映射表, 决定了数据包的指向。 1.1后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。这种情况就是 后端渲染 ，也叫做服务端渲染。 但是, 一个网站服务器如何处理呢? 一个页面有自己对应的, 这么多页面网址, 也就是URL。 URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理。 Controller进行各种处理, ，终生成HTML或者数据, 返回给前端。 上面这种操作，就是 后端路由 ，也就是后端处理URL和页面之间的映射关系。 浏览器 服务器 http://www.taobao.com 1. 解析url 2. 将url对应的网页内容传给浏览器 http://www.taobao.com/nanzhaung 1. 解析url 2. 将url对应的网页内容传给浏览器 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端。 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化。 但后端路由也有很大的缺点：