- 博客(36)
- 收藏
- 关注
RSS订阅原创 angular ionic 实现elm
https://github.com/nuonuoge/ionic3_angular5_elm 欢迎star 效果如图：
2018-06-04 22:17:56
344
原创 angular jit and aot
为什么需要编译Angular应用中包含的组件、HTML模板（比如：@Directive、@Component、@NgModule、@Pipe）很多都是JS VM无法解析的，所以在浏览器渲染应用之前，组件和模板必须要被Angular编译器转换为可以执行的JavaScript。angular2编译模式在 Angular 2 中有两种编译模式： - JIT - Just-In-Time - AOT
2017-07-04 21:58:57
884
原创 angular2 路由策略 LocationStrategy
随着前端技术的发展和迭代，前端MVC框架应运而生。利用目前主流的前端框架，如angular react vue等等，我们可以轻松的构建起一个无需服务器端渲染就可以展示的网站，同时这类框架都提供了前端路由功能，后台可以不再控制路由的跳转，将原本属于前端的业务逻辑全部丢给前端。什么是路由简单举例说明，假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个
2017-05-29 12:44:21
12092
原创 css input[type=file] 样式美化 (radio checkbox类似)
在做input文本上传时，由于html原生的上传按钮比较丑，需要对其进行美化主要想到以下几种方法，欢迎大家补充1. 通过position和opacity实现input的透明度设置为0，设置为绝对定位，size足够大input外面套一层a或者div（此处以a举例），a设置为相对定位，为了避免在非a区域点击打开选择文件,a需要设置overflow: hidden<html><head> <st
2017-05-24 21:05:00
1095
原创 slider 滑动条 mouseup有时失效的原因
一些滚动条是通过mousemove和mouseup实现的鼠标按下时通过mousemove事件控制滑动鼠标弹起时通过mouseup事件取消滑动但是发现有时鼠标弹起时并没有出发mouseup事件，这是因为此时drag事件屏蔽了mouseup事件，可以通过 ondragstart="return false"屏蔽掉drag事件
2017-05-16 21:43:16
1593
原创 flex 最后一行左对齐
最近项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐，使用flex的justify-content: space-between;实现时发现最后一行不能左对齐，而是两端对齐方式，下图不是项目上想要的效果（不使用flex也可以实现，本文仅讨论使用flex实现）在网上查了很多资料， 1.添加几个空item（对我来说最有效的，适用于大多数场景） 根据布局列数添加，比如每行最大三列
2017-05-12 21:18:51
24349
6
原创 css表格中设置两行中间的空白间距
css设置两行中间的空白间距： border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。border-collapse: separate; border-spacing: 0px 10px;
2017-05-10 21:23:15
11880
原创 vscode安装教程（windows）
进入vscode官网（https://code.visualstudio.com/Download），点击zip下载 2.下载后解压zip包，打开code.exe即可3.vscode相关插件可以从 https://marketplace.visualstudio.com/VSCode下载
2017-05-03 21:15:32
48951
原创 图片转web字体库，如何制作web字体库
最近项目上用到了很多svg图，设计师经常频繁改版，苦不堪言，于是就想到了把图片转成字体库来使用。使用图片的缺点： 1. 图片加载速度慢 2. 图片大小固定，无法调节 3. 当代码重构或者图片目录位置改变时，需要一个个修改，繁琐而且容易出错 字体库优点 1. 字体不会因缩放而失真（这根制作字体的图片有很大关系） 2. 使用方便，灵活，不受代码重构或者文件位置移动影响 3. 文字效果可以很
2017-03-26 20:35:23
6174
原创 angular2 HostListener
interface HostListener { eventName : string // html dom 事件 args : string[] // 传入参数，可以是event对象等 } api介绍： https://angular.cn/docs/ts/latest/api/core/index/HostListener-interface.html适用于属性型指令，将dom事
2017-03-15 21:49:13
6042
1
原创 angular2 标签中attribute和property
property：dom元素作为对象附加的内容，例如childNodes、firstChild等 attribute：HTML标签特性是dom节点自带的属性异同： 1 . 部分属性既属于property，又属于attribute，比如id 2 . attribute初始化后不会再改变；property默认值为初始值，会随着dom更新所以在angular2中双向绑定实现是由dom的propert
2017-03-09 21:41:48
3528
原创 Angular2 router.navigate刷新页面问题
造成这个问题一般是因为我们在<form>表单中使用<button>时忘记添加type属性，在表单中，如果忘记给按钮添加属性，会默认为submit<button (click)="toDetail()">detail</button>toDetail() { this._router.navigate(['/detail']);}解决方法： 1.添加type<button type="bu
2017-02-15 22:06:29
10176
1
原创 html base
base是html5的标签，它的href 属性规定页面中所有相对链接的基准 URL,target属性定义整个文件中的所有跳转的属性，包括<a> <img> <link> <form>等等href设置，此处拿标签a举例，<a>中href设置高于base的设置，如果<a>中有设置就用<a>的，如果没设置，就去base里寻找，所以点击test会跳转到https://www.test.com/123，点击t
2017-02-08 20:20:01
494
原创 angular2 router中的路由跳转navigate
navigate是Router类的一个方法，主要用来跳转路由。 函数定义：navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>`interface **NavigationExtras** { relativeTo : ActivatedRoute queryParams : Params fr
2017-01-18 20:20:01
32732
5
原创 HTTP中的GET和POST何时使用
GET:获取资源 GET方法用来请求访问已被URI识别的资源，指定的资源经服务器端解析后返回响应内容。POST:传输实体主体 POST方法用来传输实体的主体。虽然用GET方法也可以传输实体的主体，但一般不用GET方法传输，而是用POST方法。POST和GET很相似，但是POST的主要目的并不是获取响应的主体内容。摘自知乎： GET 相对 POST 的优势是什么最大的优势是， GET 的
2017-01-09 21:46:34
1619
原创 querySelectorAll 和 getElementByTagName()等方法的区别
二者详细的使用方法不再做介绍，可以在w3c查阅二者返回的都是NodeList对象，querySelectorAll不是实时的，而getElementByTagName是实时的。实时： 假设在一个没有<div>的文档中调用getElementByTagName('div'),此时返回的是一个长度为0的NodeList对象，如果在文档中插入一个<div>元素，此元素将自动成为NodeList的一个成员
2017-01-03 22:02:39
2100
原创 js中的caller和callee
caller返回一个对函数的引用，该函数调用了当前函数。 functionName.caller functionName 对象是所执行函数的名称。 注意：甚用caller，这个属性是非标准的，支不支持全看各大浏览器的心情callee1.在严格模式下无法使用callee 2.返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文 3.length属性，可以用来
2017-01-02 10:43:27
343
原创 js判断对象属性是否存在的三种方法
1.in 可以检测自有属性和继承属性var o={x:1}'x' in o //返回true'y'in o //返回false'toString' in o //返回true，因为对象o继承了原型的toString属性2.hasownproperty() 只能检测自有属性var o={x:1};o.hasownproperty('x') //返回trueo.hasownproperty
2016-12-29 21:52:51
13270
2
转载 MVC 和MVVM
1.MVC:M:model 模型数据 V:view 用户界面 C:controller 业务逻辑，控制器他们之间的关系如下： view -> controller view传递消息到controller controller -> model model根据controller作出相应改变 model -> view v
2016-12-28 20:56:17
344
原创 css元素隐藏display:none和visibility:hidden
display: none DOM中存在display: none的元素，但是浏览器不显示不占据空间，无法点击，动态改变此属性会引起回流与重绘不会被子类继承，但是所有的子类都不会显示的，子类的任何手段都无效visibility: hidden占据空间，无法点击只引起重绘子类可以通过visibility: visible显示
2016-12-25 21:16:33
644
原创 css 水平居中 margin:0 auto
在css中有很多种水平居中方法:position 定位 text-align:center margin：0 auto使用margin:0 auto 必须设置宽度，如果不设置则默认和父元素宽度一致，不会有居中效果
2016-12-21 21:34:46
665
原创 angular2：Expression has changed after it was checked
在angular2中，这个错误只会在dev开发模式下出现，在pro发布版本中不会出现，通过enableProdMode()可以控制 在组件中增加这段代码可以去掉这个检查，但是不建议这么做。import {enableProdMode} from '@angular/core';enableProdMode();在dev模式下，额外增加了一次变化检测，在第一轮变化检测周期结束后，会立即进行第二轮变
2016-12-19 22:18:23
8726
2
原创 CSS选择器 first-child 、first-of-type 和 nth-of-type()
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。first-child:选择器用于选取属于其父元素的首个子元素的指定选择器first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素nth-of-type(x):选择器匹配属于其父
2016-12-11 21:43:26
3127
原创 HTML 文本超出宽度后实现自动截取
截断方式可以通过js逻辑实现，也可以通过CSS样式实现，使用js逻辑实现难免会使代码变的复杂，而且不容易复用，推荐使用CSS实现文本截断，而且可以在不同的HTML片段中使用。 CSS截断显示内容主要通过white-space，overflow，text-overflow三个属性实现。HTML:<div class="hello substr"> hello world!<div>CSS:
2016-12-09 20:56:53
9459
1
原创 HTML5 实现angular2可编辑的下拉框
HTML5中新增了<datalist>标签，它可以为 <input> 指定预定义选项列表，在使用时<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性才能生效。<datalist>是HTML5的属性，所以只能在支持H5的浏览器中使用。用户在他们输入数据时会看到预定义选项的下拉列表，由于<datalist>自带搜索功能，所以使用时想看到所有下拉选项必须清空<inpu
2016-12-07 22:23:26
1555
原创 HTML 锚点
英文定义为：“anchor”，所以翻译为“锚点”，“锚”可以理解成船上的锚，船把锚沉在水底泥土里， 船在水上漂移后，一拉锚的锁链就会回到抛锚的位置。（借用知乎网友描述）锚点的标记可以通过id和name来创建，并未仅限于标签a 链接到锚点标记位置有两种方法：一种是利用超链接标签<a></a>制作锚点链接，主要用于页面内访问 <a href="#test1">测试锚点一</a> <a href=
2016-12-07 22:02:17
1047
原创 HTML中的空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的，<br> <hr>都是没有关闭标签的空元素。目前HTML支持不带关闭的空元素，但在 XHTML、XML 以及未来版本的 HTML中，所有元素都必须被关闭。 在开始标签中添加斜杠，比如 “<br />”，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。 即使它们在所有浏览器中都是有效的，但使用 <br /
2016-12-04 20:47:48
1018
原创 Angular2 表单form
angular2的表单主要用到了ngForm，ngModel，ngSubmitngSubmit对应的函数是我们提交表单调用的函数angular2通过ngForm将按钮的禁用/启用状态和表单的有效性关联起来#loginForm、#username和#userpwd都是angular2中的模板引用变量；#username和#userpwd可以监控input输入框的状态，#loginForm可以用来监控表
2016-11-29 22:43:53
6118
2
原创 Angular2 可编辑的(editable)select
最近项目非常急，需要用到可编辑的select，jquery应该有很多插件，但是boss要求尽量不要在ng2中直接使用jquery，不要直接使用jquery操作dom。其实github上已经有ng2可用的库primeng对于一个初入前端的我来说短时间内研究明白primeng有点困难，于是我就取巧用了个交互不是很好的方法实现了这个功能，使用ngModel对input和select绑定同一个变量，就实现了
2016-11-25 19:32:07
2166
原创 Angular2 管道pipe，如何自定义管道
作为一名前端er，我们的数据要推入到视图中，但是HTML视图中显示的格式和数据未必完成相同，比如我们的数据都是小写，但是视图中需要显示大写，如果我们在代码中另存一组转换为大写的数据，不但会使代码变得复杂难以维护，而且可阅读性差，ng2中的管道完美的解决了这个问题。ng2内置了很多管道，比如DatePipe 、 UpperCasePipe 、 LowerCasePipe 、 CurrencyPipe
2016-11-20 15:18:44
7589
3
原创 Angular2 单选框用法
html中单选框用法如下，checked用来选中默认的单选项：<input type="radio" name="sex" value="male" checked>Male<input type="radio" name="sex" value="female">Female如果使用[(ngModel)]绑定后，checked就不再生效，此时默认选中项与绑定的sex值相关,设置ngmodel绑
2016-11-13 15:07:47
7119
原创 Angular2 select用法-设置默认值和事件
angular2支持双向绑定，在使用select下拉框主要通过ngModel和ngModelChange实现选择事件比如现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的select值就可以在下拉框默认选中let students:string[]=['xiaoming','xiaohong','xiaohei'];let student:string='';let info
2016-11-09 22:06:55
28094
8
原创 Angular2 小白笔记
Angular2 小白笔记首先介绍下本人背景，一个刚毕业没多久的前端小白，入职后一直负责C项目的维护，没有写过JS代码，也不懂DOM层那些深奥的内容，读研期间曾经搞过一段时间C#，今年开始接触前端，看到TYPESCRIPT的时候感觉特别亲切，没有对TS和C#进行过详细的比较，感觉两门语言很像（据说都是大神ANDERS HEJLSBERG开发的），所以觉得C#和JAVA的程序员上手TS应该不难。目前学
2016-10-29 19:21:10
626
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人