一点点开发经验(三)

1.使用AngularJS
◆引入脚本
◆指定ng-app
◆var Yike=angular.module('Yike',['ngRoute','Controllers']);
◆按模块的思想开发,将类似功能程序进行归类,例如将所有的控制器归类成一个独立模块,将所有的指令归类成一个独立模块var MyCtrl=angular.module('Controllers',[]);//以一个独立文件形式存在
MyCtrl.controller('TodayController',[]);
MyCtrl.controller('OlderController',[]);
◆Yike.config(['$routeProvider'],function('$routeProvider'){
$routeProvider.wher('/today',{
templateUrl:'./views/today.html',
controller:'TodayController'
})  
})




2.面试
◆要抱着一个很好的心态去
◆可能会面试十几二十次
◆会的,就痛痛快快的说
◆不会的,就委婉一点,说工作的时候可能没遇到,或者有点忘记了。
◆如果它对你提问题,对你有兴趣提问题,那么就说明你之前的回答他很满意,说明他对你感兴趣。
◆如果它对你提问题,提问的时候很没有兴趣,说明你之前的回答是错的,他不满意,然后就不会问了。
◆俗称的缺陷时,你当时学完之后感觉还好,一段时候后你就可能会记不住,不要慌,所以别人随机问你问题的时候,遇到不会的,并不是你真的不会,而是你有点淡忘了,冷静一点,不要沮丧,这次之后就回去查资料,为下一次做准备。
◆面试实际上是一个持久战,失败就不要沮丧,始终乐观,要抗住,不要烦躁,你前脚一走,别人就把你忘了,没人当你来过,所以没什么好忧虑担心的。
◆如果你觉得有点闷了,你遇到不会的,你可以很客气的反问过去,这个问题你怎么解决啊。



3.相对的长度单位
◆em:是一个相对长度,参照的是当前元素的字号的px长度,如果元素没有设置字号px长度,那么会继承浏览器默认设置的字体的px值【
◇浏览器默认的字号大小为16px
◇谷歌浏览器默认的中文字号大小不能小于12px


】。
◆xx%:也是一个相对长度,参照的是父容器的字号的px长,如父容器font-size:16px,当前元素设置font-size:62.5%,那么相当于当前元素设置font-size:10px(16*0.625=10)。
◆rem:也是一个相对的长度,参照的是html根元素的字号,不像em那样参照的是父容器,所以很灵活,一般用于各种手机适配时,但是rem是css3里的新属性,在一些老的浏览器上无效,所以在pc端上能不用就不用,在移动端上随便用。



4.媒体查询
◆设备终端的多样化,直接导致了网页的运行环境变的越来越复杂,为了能够保证我们的网页可以适应多个终端,不得不专门为某些特定的设备设计不同的展示风格,要实现这个目标的前提是必须有能力了解当前网页是运行什么终端设备,通过媒体查询可以做到这一点。
◆媒体查询类型:【
◇可以通过媒体类型对不同的设备指定不同的样式,一般我们使用screen。
◇all:用于所有设备
◇print:用于打印机和打印预览
◇screen:用于电脑屏幕,平板电脑,智能手机等。


◇媒体特性:【
◇也就是媒体查询的判断条件或查询依据
◇width:定义输出设备中的页面可见区域宽度
◇height:定义输出设备中的页面可见区域高度
◇min-width:定义输出设备中的页面最小可见区域宽度
◇min-height:定义输出设备中的页面最小可见区域高度
◇max-width:定义输出设备中的页面最大可见区域宽度
◇max-height:定义输出设备中的页面最大可见区域高度
◇device-width:定义输出设备的屏幕可见宽度
◇device-height:定义输出设备的屏幕可见高度
◇aspect-ratio:定义输出设备中的页面可见区域宽度与高度的比率
◇device-aspect-ratio:定义输出设备的屏幕可见区域宽度与高度的比率


◆关键字【
◇and:可以将多个媒体特性连接到一起,相当于 且 的意思
◇not:排除某个媒体类型,相当于 非 的意思,可以省略。
◇only:指定某个特定的媒体类型,可以省略。

◆引入方式【
◇link方式,<link rel="stylesheet"  href='./3-1-min.css' media="only screen and(max-width:320px)" />,表示指定屏幕(只有是屏幕)中页面的最大宽度为320px,超过了就不使用这个css文件。
◇@media方法(写在CSS里),
@media only screen and(max-width:320px) {
body {
background-color:pink;
}
},这是一种严格的写法,也可以去掉only screnn and,@media (max-width)也行,那样就比较宽松,相当于 all 了。
】 
◆要记住一些手机参数,如分辨率大小,像素比例,一般都是2倍,可以在网上查的,也可以在浏览器的手机视图中看到。



5.CSS预处理器
◆CSS 预处理器是一种语言,用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,并且你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更简洁,适应性更强,代码更直观等诸多好处。
◆常见的CSS预处理器有:LESS、SASS、Stylus等,他们使用方法大致相同。
◆Less安装【
◇安装Nodejs环境 Node Package Manager (验证 node -v  npm -v)
◇打开控制台(cmd/bash),执行npm install -g less (验证 lessc -v)
◇执行 npm install -g less-plugin-clean-css
◇命令行编译 lessc path/xxx.less path/xxx.css





◆文件的后缀其实只是告诉图形化界面的操作系统怎么打开而已。
◆使用工具来编译,如一般都会借助于编辑器插件来完成编译任务,以sublime_text为例【
◇ctrl+shit+p打开命令面板
◇输入install package然后回车
◇安装 LESS、lessc、Less2Css三个插件
◇alt+s快捷键即可实现编译


】,以webstorm为例【
◇新建一个less文件,这时候文件右上角就会有提示,点击wathcer,表示添加监视然后你就可以开始写less了,一保存就会生成css文件了。
◇如果你想看还监视了哪些,可以打开设置,选择工具选项,选择其中的File Watchers,就能够看到了。
◇即便是使用开发工具来编译,但是npm install -g  less 也是需要的,因为开发工具编译时就是调用的这个来编译的。

◆使用less.js来解决问题,只适用于开发阶段,很方便,上线后就不会这样去做,会延长网页加载时间。【
◇使用工具来编译很耗费电脑的性能,所以一般在开发的时候,是直接引用less文件,然后再引入less.js文件,一样可以使用css样式等到开发结束之后,一次性全部构建,例如使用gulp。
◇less.js文件你可以使用bower install less下载,也可以直接进入这个网址https://raw.github.com/less/less.js/v2.5.3/dist/less.min.js来下载。
◇引入这个js之后,要记住,必须以向服务器发送请求的方式来使用,并且要将<link rel="stylesheet" href='3-1.css' />里的rel属性改成stylesheet/less,不然无效。
◇使用less.js的原理实际上是,向服务器发送异步请求,读取当前页面的less文件内容,然后对less文件内容作处理,所以如果不是以向服务器发送请求的方式来使用,就没法发送异步请求了,因为js无法直接读取页面的less文件内容,js判断是否是less的条件是读取rel属性值,是否是stylesheet/less,所以这个属性不要忘记写了。
◇less.js内部可以发送ajax请求->获取到less文件内容之后通过一系列正则表达式进行替换操作->然后生成一个style标签,将替换的结果放入style标签中去->最后将这个style元素追加到页面指定引入的less文件后面->生效。






6.公司里面开发的时候,拿到UI的稿件之后如何自适配手机屏幕 
◆会给你一个UI稿件,参考尺寸是640或者750
◆屏幕适配要解决的就是UI元素在手机屏幕原始比例显示
◆例如一个UI元素的大小为160*160px,为了保证UI元素可以在手机屏幕上按原比例显示,将UI稿件宽度划分若干份(以20份为例),每份就是32px,160px的UI元素就是占5份,那么这个UI元素将来必定在手机屏幕上也要占5份。
◆iphone5s 宽度为320px,将屏幕尺寸也要划分成若干份(20份为例),每份为16px,那么UI元素也是占5份,实际大小为16*5=80px;
◆红米手机 宽度为360px,将屏幕尺寸分成若干份(以20份为例),每份就等于18px,UI元素占5份,那么实际大小为18*5=90px;
◆如果要同时适配iphone5s和红米手机,那么可以这样做【
//适配iphone5s
@media only screen and(width:320px){
html {
font-size:16px;
}
}
//适配红米手机
@media only screen and (width:360px){
html {
font-size:18px;
}
}
//UI元素,使用rem作为单位,那么就会自适应html根元素的字号了,然后通过媒体查询,就完成了真正的自适配手机了
.box {
width:5rem;
height:5rem;
}

◆通过媒体查询加rem相对长度单位来进行全局的手机屏幕适配,但是常见的手机屏幕宽度有320、360等等,这些需要记一下,很常用。
◆不同手机屏幕有很多,无论怎么做都无法保证百分之百适配,但是可以保证大部分手机都能适配,保证主流用户可以适配就可以了【
//如果你向适配所有的屏幕那么就使用js
var viewport=document.documnetElement;
//获取html元素的宽度
var width=viewport.clientWidth;
//划分为20份
var fontSise=width/20;
//这样就给html元素设置了字体大小了
viewport.style.fontSize=fontSize;
//可能需要用一个类似定时器的方法不断的去获取去设置,最好用浏览器页面绘制动画的那个方法window.requestAnimationFrame()

//UI元素,使用rem作为单位,那么就会自适应html根元素的字号了,然后通过媒体查询,就完成了真正的自适配手机了
.box {
width:5rem;
height:5rem;
}
】,使用js性能不太好,最好使用媒体查询,虽然使用js会更加的精准,原理是一样的,都是灵活运用相对长度单位rem。


7.如果有人问,项目开发的时间需要多久,这个不一定,有的长有的短,做的细一点就长些,做的不细就短。


8.外包的含义,就是一些传统的互联网公司需要一些网站,但是没有程序员,所以就会委托一些其它的互联网公司设计然后去做这些网站。


9.如果你简历上写了四五个网站,然后你的工作年限是一年,那么你就把你那个公司定位成是一个外包公司,如果你的工作年限是两年,然后简历上写了两三个网站,但是这些网站的功能都要综合一点,那么你就把你那个公司定位成那样的一个大公司,这两年都在维护那几个网站,增加功能和减少功能都属于项目的迭代,一年两年来做这个项目的迭代都是很正常的,但是那个项目一定要够综合,不然迭代没有任何意义。


10.你的简历写出花儿来,去面试答不上来那么一点用都没有用。


11.真正体现你人格和人品的地方不是面试的时候真不真实,而是在你做项目的时候,突然需求很急,你会不会说让公司加钱,公司得罪你了你会不会删代码删公司数据库,这个地方才是真正体现你人格人品好不好。


12.手机页面文件夹划分
◆project【
◇css
◇images
◇js
◇psd
◇uploads
◇index.html




13.使用百分比作相对长度单位局限性特别大,因为都是以父容器的宽度的值作为参照的,还需要解决padding让宽度变大的问题、父容器是被子容器撑开而导致父容器没有具体的宽高的问题,所以很麻烦。


14.字体图标生成网站:https://icomoon.io


15.自己制作个性字体图标(使用svg文件生成字体图标)
◆让UI协助导出svg图片
◆ 然后到一些第三方的字体图标生成网站,然后导入svg文件,最后生成自己需要的字体图标
◆使用方式:【
◇例如使用https://icomoon.io来生成字体图标
◇首先进入https://icomoon.io
◇之后点主页的大条幅广告IcoMoon
◇进入到了https://icomoon.io/app/#/select
◇之后点击Import Icons
◇然后选中需要生成字体图标的svg文件,这时候就会导入这些svg文件了
◇这时候下边的Untitiled Set就会显示你自己的字体图标
◇你选中你导入的那些图标,其实下方还有一些免费的
◇选中之后点击浏览器最下方的三个选中中最右边的那个 Generate Font
◇这时候会进入自己的字体图标详细页面,其实这时候字体图标就已经生成完成了,但是你还可以调节一下,点击左上角的小齿轮Preferences,就可以对字体图标进行一些调节,如设置类前缀、是否支持低版本的浏览器、以及图标和字体的对齐方式等等
◇最后点击浏览器最下方的三个选中最右边的那个Download,然后就下载完毕。
◇压缩包里面会有相应的文件及说明的demo
◇其实真正需要的文件是style.css和字体文件,你用的使用其实引入css,然后以添加类名的方式使用即可。

猜你喜欢

转载自blog.csdn.net/jwllwj_2018/article/details/80621423