2014年---移动端webapp个人年度总结

 

　　我今年是由零基础开始入门的，刚好我第一家公司入职后就马上让我接手做ipad版的专题app了。(一入门就是移动端开发，是幸运也是艰辛的开始)。

　　我是自学前端的，当然，对Bootstrap，JQuery mobile这2个UI框架肯定是熟悉他们是怎么使用，只是没必要再深入了。因为我当时应聘介绍自己懂这些框架都没有一家公司来招我，原因待会解释。

既然是零基础入门的话，那么我先分享下我该怎么学习？

我相信大部分人都了解一个房子的构造建成了吧，那么我用比如的方法来给自己去解释网站到底是个怎么回事？

后台其实就等于房子的地基；前端就是你看到的房子建成后的样子。

前端构成部分由html,css,js；HTML就是你想把自己的房子构造成什么样子，比如说哪个位置是主人房，哪个位置是客房等等布局；CSS就是你外观和里面的装修想什么样的风格呢？JS就是水泥和砖头，没了它们，你的房子很容易毁掉。

先说一个很重要的入门前提；开发工具的推荐：

1，HBuilder，这个是国外回来的中国团队，目前是免费使用，更新周期快，代码提示多；其他的自己百度；

2，Notepad++：你的电脑就算卡机也可以照样打开文件来进行编码，当然了，他只适合做小网站；剩下的就是自己百度。

注意：只要你使用的软件是DW，100%是处于新手阶段，不要跟我说高手大神会用txt来写代码，是可以，但是他们会更注重效率；所以想写出高效的代码和提升自己的能力，还是推荐你找找合适你的开发工具吧！

 

说回刚刚的话题，为什么只懂UI框架会找不到工作呢？

Bootstrap，JQuery mobile，2个框架的区别：

Bootstrap：响应式设计布局，PC端和移动端都OK；响应式就是你在不同的移动屏幕看到情况会是不一样；比如：在PC端你看到的导航栏是放到头部的，在pad，手机上你看到的导航栏是隐藏到右边或左边去了，只是用一个图标提示下给你看。(自适应布局是指你在所有的移动屏幕上看到的结果都一样，只是大小发生变化了)。

JQuery mobile：一般只是做移动端。

2个框架的缺点普遍存在的情况：

1，一般情况下企业是会有自己的设计师来做设计布局，假如要求用这些框架的话，设计师必须要了解这2个框架里面的组件和插件，再来进行整体布局(包括效果颜色)。

2，使用过渡状态转到下一页面会出现BUG，Bootstrap我测试过，当时JQuery mobile确实是存在的，而且网上你找到的解决方案一般情况下还是不能完全解决这个问题。产生这个问题的，我分析的有2种情况：1，就是移动设备兼容问题，他的系统版本低，根本不支持该属性；2，webapp的缺陷就在这。

3，2个UI框架就算是min版的文件大小也大于100KB，企业放弃使用的原因之一，因为文件太大会占用更多的资源。

4，icon字体图标，他们有好处也有坏处，比如说我现在的公司，2个设计师都不愿意使用，因为他们说不合适我们的页面美化方面的。我们做前端考虑到的是性能方面的，还有执行效率。

 

我所使用到的HTML页面标签：

Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ；详细说明我就不说了，只给新手说下，为什么W3C那么多标签，只使用16个就可以把整个项目解决了？

原因是不要以为标签多，我们就一定要使用到它的，我们要的是使用广泛的，易记的。

稍微解释下，块级元素和行内元素是什么意思？

块级元素就是他占满一行的；行内元素就是他的多个同类可以同时在同一行。

下面讲解下，head标签里面我们在移动端一般都放什么？

Title,meta,link,3个标签会比较多，解释请看：

Title:该网页的标题，这个标题一般会显示在浏览器打开该网页时，最地址栏上面可以简单文字段。

Meta:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>

<meta content="yes"name="apple-mobile-web-app-capable"/>

<meta content="black"name="apple-mobile-web-app-status-bar-style"/>

<meta content="telephone=no"name="format-detection"/>

<meta content="email=no"name="format-detection"/>

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport" />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；user-scalable: 用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

第五个meta标签:用于忽略将页面中邮件地址

第六个就是最大的高度限定在568Px以内，这个可以忽略，因为我们都会用滑动来代替；当然了，可以用在页面布局不多的地方！

 

Link:一般只是引入css文件用的，对于import大部分前辈都说不好，而且他一般也只写在css文件内。我们假如打开一个刚刚下载到本地的网页或框架，浏览页面时很慢，估计也就是在css里面引入了谷歌文件，因为我们国内，谷歌是被封杀的！

Javascript呢？(一般情况下，把引入文件放到</body>前面的)

下面解释放到head和</body>2个不同地方的区别：

放在head就是普遍需要用户进行点击或各种操作才触发的事件。

放在</body>里面就是用户来看之前就执行了。

 

现在我们来看看CSS的问题了：

1，我相信99%做过1个项目的人都会了解：reset.css(重置文件或common.css,base.css，名称不一样而已，用途都一样。)

我会共享我自己今年所总结积累好的文件写到common.css里面。

 

@charset "utf-8";html{font-size:62.5%;font-family:"微软雅黑"}
body{background:#eee;color:#f0f0f0;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-box-sizing:border-box}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
body,button,input,select,textarea{line-height:25px}
h1,h2,h3,h4,h5,h6{font-weight:normal}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none}
textarea{resize:none;-webkit-appearance:none;outline:0}
a,img{-webkit-touch-callout:none}
a:active,a:hover{outline:0;text-decoration:none}
strong{font-weight:normal}
em,i{font-style:normal}
a{background:transparent}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input[type=button]{outline:0;-webkit-appearance:none}
table{border-collapse:collapse;border-spacing:0}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
th{text-align:inherit}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
ol,ul{list-style:none}
caption,th{text-align:left}
sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}
sup{top:-0.5em}
sub{bottom:-0.25em}
ins,a,a:hover{text-decoration:none}
a:focus,*:focus{outline:0}
.clearfix:before,.clearfix:after{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden}
.clearfix{zoom:1}
.clear{clear:both;display:block;overflow:hidden;height:0;font-size:0;line-height:0}
.hide{display:none}
.block{display:block}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}
.dib{display:inline-block}
.vab{vertical-align:bottom}
.vam{vertical-align:middle}
.vat{vertical-align:top}
.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%}
.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.grid{*zoom:1}
.grid:before,.grid:after{display:table;content:"";line-height:0}
.grid:after{clear:both}
.grid{list-style-type:none;padding:0;margin:0}
.grid>.grid{clear:none;float:left;margin:0!important}
.col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column}
.row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto}
.flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2}
.flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3}
h1{font-size:2.4rem}
h2{font-size:2.2rem}
h3{font-size:1.8rem}
@media only screen and (min-width:360px){h1{font-size:2.8rem}
h2{font-size:2.6rem}
h3{font-size:2.2rem}
body,button,input,select,textarea{font-size:1.4rem;line-height:24px}
}
.outL{white-space:normal;word-break:break-all;width:100px}
.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100px}
.ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch}
header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#ccc}
header{top:0;height:44px}
footer{bottom:0}
input::-webkit-input-placeholder{color:#ffa500}
textarea::-webkit-input-placeholder{color:#ffa500}
input::-webkit-input-speech-button{display:none}
.wrap{float:left;width:100%}
.w100p{width:100%}
.w20p{width:20%}
.m5{margin:5px}
.p5{padding:5px}
.pt5{padding-top:5px}
.flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink}

 

 

注意事项：

1、你使用display:inline-block浏览器是会有默认边距产生的，所以假如想几个div变成行内的而且无边距，那么最好的方法是使用同一方向的浮动(float)，来解决无边距的一列。

2、引入我的css文件后，你会发现为什么我在字体上要进行个断点设置(@media)，我认真的分析过，webapp页面的由于在320px,360px,480px，3个不同viewport宽度大小的情况下制作，那么字体大小肯定要进行相应的设置，不然你在320px的情况下看到的效果跟在480px下看到的是一样。注意：字体是不会自适应的，只有自己进行设置才可以达到预期效果。

3、图标是同样不会自适应的，只有图片可以设置100%，所以图标假如设置100%就会影响整体布局，宽度可以在Img里面写width=”30”这样(30是图片的宽度30px)。

4、除了有时header，footer是要求固定fixed定位外，那么中间要做一个容器/外套给他，我们需要在header下面使用wrapper/container放内容。这个怎么设置，你可以看我的css文件已经做好设置而且包括了案例方便查看。并且可以进行内容过多可以滑动。(关于fixed定位的问题，我多次测试的结果发现，在2.3系统以下的低端手机是不支持fixed定位的，是会出现设备兼容问题:向下滑动时，固定后也会随着页面移动，4.0以上的系统是可以支持，相对较好的解决方法是：使用iscoll.js；会有卡顿，但是对于低端机来讲是不错的解决方案。)我个人是选择放弃2.3系统以下的用户群，因为现在的手机1000元左右就可以买到4.0系统以上的手机，所以，我有理由相信连手机都不愿意更换的普遍有2种情况：1，没钱，2，根本不可能成为你的用户；我不会像PC端那样来兼容IE6-8，我现在唯一兴幸的是公司现在没特定标准要求，所以我可以自由选择，我只需要知道这个解决方法就行；我既然放弃低端机市场，那么我就会以最新的技术来进行布局，所以我不使用iscoll.js，直接用我上面的那个wrapper来作为外套就行。

5、我们如果需要将内容实现2边留有边距，使用的是padding而不是margin。因为设置为margin的话，会出现左边有空白边距，右边反而是贴边的情况。

6、我们做前端写页面最烦的就是class命名，我不喜欢使用下划线，所以我们可以这样来定义class命名方式：asideContent等情况。还有一种叫意义命名；比如说颜色：红色，我们可以定义为：.red:color:red；模块呢？我们可以这样来做：比如我最近做的一个WP手机风格的webapp页面项目。大家都应该了解他是色块组成，颜色，大小等都不一样。

我的解决方案是：(在销售模块，定义为sell)

sellHead:内容的头部；sellFoot:内容的尾部；

如此类推就有：sellMain；sellContent；sellTitle；sellList；sellTab；sellMenu；sellBtn；sellMsg；sellBanner；sellCol； 

我相信你们看到英文都容易的理解这个是什么意思，位置对应情况。

7、从有了前端这个职称后，就逐渐开始流行：OOCSS的写法来布局CSS页面了。是什么意思？就是用面向对象编程的思想来写CSS，因为现在有了Less,Sass这些了，CSS都可以实现编程了，我们前端的压力就越来越大了。最主要的一点就是实行模块化，代码可以重复使用。对于没编程基础的童鞋来说，真心不懂这些专业的术语是个什么东东？大家可以看看下面我的解释：

(1)、.sellContent{width:200px;height:200px;margin:10px;padding:10px}

注意：背景颜色，边框，圆角这些就不要写在里面了

(2)、.bg{background:#00CC66}；在HTML页面的class=”sellContent bg”。

(一)、实现的是class组合，同时这2个class类是哪里需要往哪里放，需要什么呢？当然是他里面的属性，只要是他需要该属性的都可以放到一起组合。(组合一般情况下不要超过4个)

(二)、以前我们写css可能是遇到到哪个div需要就给他定义那些属性值，而且整个页面下来重复的特别多；现在我这样方式不需要了，我们可以用并列式选择器：.sellMain,.sellContent,.sellTitle{border:1px solid #cccccc}，减少代码重复的情况，同时继承选择器的作用我们就要注意了：一个项目下来，我们写的页面会达到100个以上，假如我写 ul li{display:inline-block}这样的话，那么你每个页面只要有li的，他都会是变成行内元素。

所以，我们写页面前必须要先把整个项目的所有页面看一次，脑袋进行一次布局，这样就不会出现这类的问题了。要全面的去理解这个OOCSS的写法，建议你去下载Bootstrap框架文件来看他的源码，和页面案例的布局。

8、区分min-width和max-width的区别，英文我们都看懂，但用的话就不一定了；min-width：最小的宽度为多少的时候开始执行下面的断点布局；max-width：最大的宽度为多少的时候停止执行下面的断点布局。

如：min-width:360px and max-width:480px,就是下面的类只在360px-480px之间执行。

注意：有时候我们在谷歌或火狐浏览器做测试的，然后放到真机测试时会发现，真机有时候会比浏览器显示的viewport宽度还要小3px—5px。

9、做头部的时候我往往最讨厌的就是图片和文字对齐；现在我找到新的解决放案了：

(1)、可以把这个img给他一个下边距:负值；

(2)、有3个属性值可以选择来用vertical-align:top/middle/bottom  。

10、我们做移动端的时候，凡是有a标签点击转链接的地方都会系统自带一个透明层的点击效果，取消点击高亮：-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;

11、响应式布局与自适应布局：(以下仅为个人理解)

(1)、响应式布局，我的理解是在电脑，平板，手机，分别有不同的页面布局。

(2)、自适应布局，我的理解是在电脑，平板，手机页面布局一样，只是文字大小，图片大小会发生变化而已。

在电脑上，使用flex-wrap:wrap（伸缩进行换行）这个来进行布局是可以达到响应的，但是在平板和手机就目前来说还不支持这个属性。

我推荐的最佳方案是使用flex布局。(只是不用伸缩换行属性)

下面是我做的一个简单案例：

注意：style.css引用的是上面提供的common.css文件：

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <!--开发后删除-->
    <meta http-equiv="Cache-Control" name="no-store" />
    <meta http-equiv="refresh" content="3" />
    <!--开发后删除-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="css/style.css" />
    <style>
        .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
    </style>
</head>

    <body>
        <header>
            <ol class="row">
                <li class="m5">
                    <img src="img/back.png" width="30" /> </li>
                <li class="flex3 m5">
                    <h1>header</h1>
                </li>
                <li class="m5">
                    <img src="img/down.png" width="30" />
                </li>
            </ol>
        </header>
        <section class="wrapper">
            <ul class="row">
                <li class="flexcontent p5">1</li>
                <li class="flexcontent p5">2</li>
                <li class="flexcontent p5">3</li>
                <li class="flexcontent p5">4</li>
                <li class="flexcontent p5">5</li>
            </ul>
            <ul class="row">
                <li class="flex1 flexcontent p5">1</li>
                <li class="flex3 flexcontent p5">2</li>
                <li class="flex2 flexcontent p5">3</li>
            </ul>
        </section>
        <footer class="row tac">
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
            <ul class="col w20p">
                <li class="flex1 pt5"><img src="img/back.png" width="20" /></li>
                <li class="flex1"><span>底部</span></li>
            </ul>
        </footer>
        
    </body>
</html>

 

12、CSS3的animate.css动态的使用介绍：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>animate.css 使用方法</title>
<link rel="stylesheet" type="text/css" href="css/animate.min.css" media="screen" />
<style>

#bridge{
    border-radius: 15px;
    background: url('images/bridge.png') no-repeat 50% 50%;
    margin: 0 auto;
    width: 400px;
    height: 250px;
    z-index: 20;
    position: static;
}

</style>

</head>

<body>

<div id="bridge" class="animated flash">
<!--只需要在相关的块级标签内添加class；
例如：
class="animated bounceOutLeft"
class="animated flash"

-->
</div>

</body>
</html>

详细可以参考以下网站来获取class名：
http://daneden.github.io/animate.css/

 

13、移动端开发测试工具：

我做测试一般会同时用2个工具来测试页面：

(1)、使用WAMP来建立内网：修改httpd.conf文件；下面是我共享的代码：

#
# This is the main Apache HTTP server configuration file.  It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs/2.4/> for detailed information.
# In particular, see 
# <URL:http://httpd.apache.org/docs/2.4/mod/directives.html>
# for a discussion of each configuration directive.
#
# Do NOT simply read the instructions in here without understanding
# what they do.  They're here only as hints or reminders.  If you are unsure
# consult the online docs. You have been warned.  
#
# Configuration and logfile names: If the filenames you specify for many
# of the server's control files begin with "/" (or "drive:/" for Win32), the
# server will use that explicit path.  If the filenames do *not* begin
# with "/", the value of ServerRoot is prepended -- so "logs/access_log"
# with ServerRoot set to "/usr/local/apache2" will be interpreted by the
# server as "/usr/local/apache2/logs/access_log", whereas "/logs/access_log" 
# will be interpreted as '/logs/access_log'.
#
# NOTE: Where filenames are specified, you must use forward slashes
# instead of backslashes (e.g., "c:/apache" instead of "c:\apache").
# If a drive letter is omitted, the drive on which httpd.exe is located
# will be used by default.  It is recommended that you always supply
# an explicit drive letter in absolute paths to avoid confusion.
ServerSignature On
ServerTokens Full

#
# ServerRoot: The top of the directory tree under which the server's
# configuration, error, and log files are kept.
#
# Do not add a slash at the end of the directory path.  If you point
# ServerRoot at a non-local disk, be sure to specify a local disk on the
# Mutex directive, if file-based mutexes are used.  If you wish to share the
# same ServerRoot for multiple httpd daemons, you will need to change at
# least PidFile.
#
ServerRoot "c:/wamp/bin/apache/apache2.4.9"

Define APACHE24 Apache2.4

#
# Mutex: Allows you to set the mutex mechanism and mutex file directory
# for individual mutexes, or change the global defaults
#
# Uncomment and change the directory if mutexes are file-based and the default
# mutex file directory is not on a local disk or is not appropriate for some
# other reason.
#
# Mutex default:logs

#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
Listen 0.0.0.0:80
Listen [::0]:80

#
# Dynamic Shared Object (DSO) Support
#
# To be able to use the functionality of a module which was built as a DSO you
# have to place corresponding `LoadModule' lines at this location so the
# directives contained in it are actually available _before_ they are used.
# Statically compiled modules (those listed by `httpd -l') do not need
# to be loaded here.
#
# Example:
# LoadModule foo_module modules/mod_foo.so
#
LoadModule access_compat_module modules/mod_access_compat.so
LoadModule actions_module modules/mod_actions.so
LoadModule alias_module modules/mod_alias.so
LoadModule allowmethods_module modules/mod_allowmethods.so
LoadModule asis_module modules/mod_asis.so
LoadModule auth_basic_module modules/mod_auth_basic.so
#LoadModule auth_digest_module modules/mod_auth_digest.so
#LoadModule authn_anon_module modules/mod_authn_anon.so
LoadModule authn_core_module modules/mod_authn_core.so
#LoadModule authn_dbd_module modules/mod_authn_dbd.so
#LoadModule authn_dbm_module modules/mod_authn_dbm.so
LoadModule authn_file_module modules/mod_authn_file.so
#LoadModule authn_socache_module modules/mod_authn_socache.so
#LoadModule authnz_ldap_module modules/mod_authnz_ldap.so
LoadModule authz_core_module modules/mod_authz_core.so
#LoadModule authz_dbd_module modules/mod_authz_dbd.so
#LoadModule authz_dbm_module modules/mod_authz_dbm.so
LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
LoadModule authz_host_module modules/mod_authz_host.so
#LoadModule authz_owner_module modules/mod_authz_owner.so
LoadModule authz_user_module modules/mod_authz_user.so
LoadModule autoindex_module modules/mod_autoindex.so
#LoadModule buffer_module modules/mod_buffer.so
LoadModule cache_module modules/mod_cache.so
LoadModule cache_disk_module modules/mod_cache_disk.so
#LoadModule cern_meta_module modules/mod_cern_meta.so
LoadModule cgi_module modules/mod_cgi.so
#LoadModule charset_lite_module modules/mod_charset_lite.so
#LoadModule data_module modules/mod_data.so
#LoadModule dav_module modules/mod_dav.so
#LoadModule dav_fs_module modules/mod_dav_fs.so
#LoadModule dav_lock_module modules/mod_dav_lock.so
#LoadModule dbd_module modules/mod_dbd.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule dir_module modules/mod_dir.so
#LoadModule dumpio_module modules/mod_dumpio.so
LoadModule env_module modules/mod_env.so
#LoadModule expires_module modules/mod_expires.so
#LoadModule ext_filter_module modules/mod_ext_filter.so
LoadModule file_cache_module modules/mod_file_cache.so
#LoadModule filter_module modules/mod_filter.so
#LoadModule headers_module modules/mod_headers.so
#LoadModule heartbeat_module modules/mod_heartbeat.so
#LoadModule heartmonitor_module modules/mod_heartmonitor.so
#LoadModule ident_module modules/mod_ident.so
#LoadModule imagemap_module modules/mod_imagemap.so
LoadModule include_module modules/mod_include.so
#LoadModule info_module modules/mod_info.so
LoadModule isapi_module modules/mod_isapi.so
#LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so
#LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so
#LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so
#LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so
#LoadModule ldap_module modules/mod_ldap.so
#LoadModule logio_module modules/mod_logio.so
LoadModule log_config_module modules/mod_log_config.so
#LoadModule log_debug_module modules/mod_log_debug.so
#LoadModule log_forensic_module modules/mod_log_forensic.so
#LoadModule lua_module modules/mod_lua.so
LoadModule mime_module modules/mod_mime.so
#LoadModule mime_magic_module modules/mod_mime_magic.so
LoadModule negotiation_module modules/mod_negotiation.so
#LoadModule proxy_module modules/mod_proxy.so
#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
#LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
#LoadModule proxy_connect_module modules/mod_proxy_connect.so
#LoadModule proxy_express_module modules/mod_proxy_express.so
#LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so
#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
#LoadModule proxy_html_module modules/mod_proxy_html.so
#LoadModule proxy_http_module modules/mod_proxy_http.so
#LoadModule proxy_scgi_module modules/mod_proxy_scgi.so
#LoadModule ratelimit_module modules/mod_ratelimit.so
#LoadModule reflector_module modules/mod_reflector.so
#LoadModule remoteip_module modules/mod_remoteip.so
#LoadModule request_module modules/mod_request.so
#LoadModule reqtimeout_module modules/mod_reqtimeout.so
#LoadModule rewrite_module modules/mod_rewrite.so
#LoadModule sed_module modules/mod_sed.so
#LoadModule session_module modules/mod_session.so
#LoadModule session_cookie_module modules/mod_session_cookie.so
#LoadModule session_crypto_module modules/mod_session_crypto.so
#LoadModule session_dbd_module modules/mod_session_dbd.so
LoadModule setenvif_module modules/mod_setenvif.so
#LoadModule slotmem_plain_module modules/mod_slotmem_plain.so
#LoadModule slotmem_shm_module modules/mod_slotmem_shm.so
#LoadModule socache_dbm_module modules/mod_socache_dbm.so
#LoadModule socache_memcache_module modules/mod_socache_memcache.so
#LoadModule socache_shmcb_module modules/mod_socache_shmcb.so
#LoadModule speling_module modules/mod_speling.so
#LoadModule ssl_module modules/mod_ssl.so
#LoadModule status_module modules/mod_status.so
#LoadModule substitute_module modules/mod_substitute.so
#LoadModule unique_id_module modules/mod_unique_id.so
#LoadModule userdir_module modules/mod_userdir.so
#LoadModule usertrack_module modules/mod_usertrack.so
#LoadModule version_module modules/mod_version.so
LoadModule vhost_alias_module modules/mod_vhost_alias.so
#LoadModule watchdog_module modules/mod_watchdog.so
#LoadModule xml2enc_module modules/mod_xml2enc.so

LoadModule php5_module "c:/wamp/bin/php/php5.5.12/php5apache2_4.dll"
#PHPIniDir c:/wamp/bin/php/php5.5.12

<IfModule unixd_module>
#
# If you wish httpd to run as a different user or group, you must run
# httpd as root initially and it will switch.  
#
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User daemon
Group daemon

</IfModule>

# 'Main' server configuration
#
# The directives in this section set up the values used by the 'main'
# server, which responds to any requests that aren't handled by a
# <VirtualHost> definition.  These values also provide defaults for
# any <VirtualHost> containers you may define later in the file.
#
# All of these directives may appear inside <VirtualHost> containers,
# in which case these default settings will be overridden for the
# virtual host being defined.
#

#
# ServerAdmin: Your address, where problems with the server should be
# e-mailed.  This address appears on some server-generated pages, such
# as error documents.  e.g. admin@your-domain.com
#
ServerAdmin admin@example.com

#
# ServerName gives the name and port that the server uses to identify itself.
# This can often be determined automatically, but we recommend you specify
# it explicitly to prevent problems during startup.
#
# If your host doesn't have a registered DNS name, enter its IP address here.
#
ServerName localhost:80

HostnameLookups Off

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "c:/wamp/www/"

#
# Each directory to which Apache has access can be configured with respect
# to which services and features are allowed and/or disabled in that
# directory (and its subdirectories). 
#
# First, we configure the "default" to be a very restrictive set of 
# features.  
#
<Directory />
    AllowOverride none
    Require all granted
</Directory>

#
# Note that from this point forward you must specifically allow
# particular features to be enabled - so if something's not working as
# you might expect, make sure that you have specifically enabled it
# below.
#

<Directory "c:/wamp/www/">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks Includes 

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride all

    #
    # Controls who can get stuff from this server.
    #

   # onlineoffline tag - don't remove
     #Require local
    Require all granted
</Directory>

#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
    DirectoryIndex index.php index.php3 index.html index.htm
</IfModule>

#
# The following lines prevent .htaccess and .htpasswd files from being 
# viewed by Web clients. 
#
<Files ".ht*">
    Require all denied
</Files>

#
# ErrorLog: The location of the error log file.
# If you do not specify an ErrorLog directive within a <VirtualHost>
# container, error messages relating to that virtual host will be
# logged here.  If you *do* define an error logfile for a <VirtualHost>
# container, that host's errors will be logged there and not here.
#
#ErrorLog "logs/error.log"
ErrorLog "c:/wamp/logs/apache_error.log"

#
# LogLevel: Control the number of messages logged to the error_log.
# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
#
LogLevel warn

<IfModule log_config_module>
    #
    # The following directives define some format nicknames for use with
    # a CustomLog directive (see below).
    #
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common

    <IfModule logio_module>
      # You need to enable mod_logio.c to use %I and %O
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>

    #
    # The location and format of the access logfile (Common Logfile Format).
    # If you do not define any access logfiles within a <VirtualHost>
    # container, they will be logged here.  Contrariwise, if you *do*
    # define per-<VirtualHost> access logfiles, transactions will be
    # logged therein and *not* in this file.
    #
    CustomLog "c:/wamp/logs/access.log" common

    #
    # If you prefer a logfile with access, agent, and referer information
    # (Combined Logfile Format) you can use the following directive.
    #
    #CustomLog "logs/access.log" combined
</IfModule>

<IfModule alias_module>
    #
    # Redirect: Allows you to tell clients about documents that used to 
    # exist in your server's namespace, but do not anymore. The client 
    # will make a new request for the document at its new location.
    # Example:
    # Redirect permanent /foo http://www.example.com/bar

    #
    # Alias: Maps web paths into filesystem paths and is used to
    # access content that does not live under the DocumentRoot.
    # Example:
    # Alias /webpath /full/filesystem/path
    #
    # If you include a trailing / on /webpath then the server will
    # require it to be present in the URL.  You will also likely
    # need to provide a <Directory> section to allow access to
    # the filesystem path.

    #
    # ScriptAlias: This controls which directories contain server scripts. 
    # ScriptAliases are essentially the same as Aliases, except that
    # documents in the target directory are treated as applications and
    # run by the server when requested rather than as documents sent to the
    # client.  The same rules about trailing "/" apply to ScriptAlias
    # directives as to Alias.
    #
    ScriptAlias /cgi-bin/ "c:/wamp/bin/apache/apache2.4.9/cgi-bin/"

</IfModule>

<IfModule cgid_module>
    #
    # ScriptSock: On threaded servers, designate the path to the UNIX
    # socket used to communicate with the CGI daemon of mod_cgid.
    #
    #Scriptsock cgisock
</IfModule>

#
# "c:/wamp/bin/apache/apache2.4.9/cgi-bin" should be changed to whatever your ScriptAliased
# CGI directory exists, if you have that configured.
#
<Directory "c:/wamp/bin/apache/apache2.4.9/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>

<IfModule mime_module>
    #
    # TypesConfig points to the file containing the list of mappings from
    # filename extension to MIME-type.
    #
    TypesConfig conf/mime.types

    #
    # AddType allows you to add to or override the MIME configuration
    # file specified in TypesConfig for specific file types.
    #
    #AddType application/x-gzip .tgz
    #
    # AddEncoding allows you to have certain browsers uncompress
    # information on the fly. Note: Not all browsers support this.
    #
    AddEncoding x-compress .Z
    AddEncoding x-gzip .gz .tgz
    #
    # If the AddEncoding directives above are commented-out, then you
    # probably should define those extensions to indicate media types:
    #
    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php .php3

    #
    # AddHandler allows you to map certain file extensions to "handlers":
    # actions unrelated to filetype. These can be either built into the server
    # or added with the Action directive (see below)
    #
    # To use CGI scripts outside of ScriptAliased directories:
    # (You will also need to add "ExecCGI" to the "Options" directive.)
    #
    #AddHandler cgi-script .cgi

    # For type maps (negotiated resources):
    #AddHandler type-map var

    #
    # Filters allow you to process content before it is sent to the client.
    #
    # To parse .shtml files for server-side includes (SSI):
    # (You will also need to add "Includes" to the "Options" directive.)
    #
    AddType text/html .html
    AddOutputFilter INCLUDES .html
</IfModule>

#
# The mod_mime_magic module allows the server to use various hints from the
# contents of the file itself to determine its type.  The MIMEMagicFile
# directive tells the module where the hint definitions are located.
#
#MIMEMagicFile conf/magic

#
# Customizable error responses come in three flavors:
# 1) plain text 2) local redirects 3) external redirects
#
# Some examples:
#ErrorDocument 500 "The server made a boo boo."
#ErrorDocument 404 /missing.html
#ErrorDocument 404 "/cgi-bin/missing_handler.pl"
#ErrorDocument 402 http://www.example.com/subscription_info.html
#

#
# MaxRanges: Maximum number of Ranges in a request before
# returning the entire resource, or one of the special
# values 'default', 'none' or 'unlimited'.
# Default setting is to accept 200 Ranges.
#MaxRanges unlimited

#
# EnableMMAP and EnableSendfile: On systems that support it, 
# memory-mapping or the sendfile syscall may be used to deliver
# files.  This usually improves server performance, but must
# be turned off when serving from networked-mounted 
# filesystems or if support for these functions is otherwise
# broken on your system.
# Defaults: EnableMMAP On, EnableSendfile Off
#
#EnableMMAP off
EnableSendfile off

# AcceptFilter: On Windows, none uses accept() rather than AcceptEx() and
# will not recycle sockets between connections. This is useful for network
# adapters with broken driver support, as well as some virtual network
# providers such as vpn drivers, or spam, virus or spyware filters.
AcceptFilter http none
AcceptFilter https none

# Supplemental configuration
#
# The configuration files in the conf/extra/ directory can be 
# included to add extra features or to modify the default configuration of 
# the server, or you may simply copy their contents here and change as 
# necessary.

# Server-pool management (MPM specific)
#Include conf/extra/httpd-mpm.conf

# Multi-language error messages
#Include conf/extra/httpd-multilang-errordoc.conf

# Fancy directory listings
Include conf/extra/httpd-autoindex.conf

# Language settings
#Include conf/extra/httpd-languages.conf

# User home directories
#Include conf/extra/httpd-userdir.conf

# Real-time info on requests and configuration
#Include conf/extra/httpd-info.conf

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

# Local access to the Apache HTTP Server Manual
#Include conf/extra/httpd-manual.conf

# Distributed authoring and versioning (WebDAV)
#Include conf/extra/httpd-dav.conf

# Various default settings
#Include conf/extra/httpd-default.conf

# Configure mod_proxy_html to understand HTML4/XHTML1
<IfModule proxy_html_module>
Include conf/extra/proxy-html.conf
</IfModule>

# Secure (SSL/TLS) connections
#Include conf/extra/httpd-ssl.conf
#
# Note: The following must must be present to support
#       starting without SSL on platforms with no /dev/random equivalent
#       but a statically compiled-in mod_ssl.
#
<IfModule ssl_module>
SSLRandomSeed startup builtin
SSLRandomSeed connect builtin
</IfModule>
#
# uncomment out the below to deal with user agents that deliberately
# violate open standards by misusing DNT (DNT *must* be a specific
# end-user choice)
#
#<IfModule setenvif_module>
#BrowserMatch "MSIE 10.0;" bad_DNT
#</IfModule>
#<IfModule headers_module>
#RequestHeader unset DNT env=bad_DNT
#</IfModule>


#IncludeOptional "c:/wamp/vhosts/*"
Include "c:/wamp/alias/*"

 

直接在C盘安装的话就直接复制就行。

(2)、国内虚拟机：靠谱助手完整版；下载后先安装引擎，然后在软件内下载UC浏览器就行。

(3)、可以尝试使用360手机助手这类软件来帮助你做真机测试，不过，要是你没其他作为测试机的话，你的手机应该很容易坏！

(4)、怎么混合使用呢？方法在这：

你的电脑先开个wifi出来，然后你的手机得连上这个wifi；这样就是内网；

只要你是有需要测试的时候，双击打开WAMP，加上按照我的配置文件就可以了，Windows用户直接在“开始栏——输入cmd——ipconfig”,然后往下看看，无线网络：192.168.xxx.x这样的你在手机浏览器地址栏输入就行。

上面的是手机，现在给你谈谈靠谱助手；它不需要人工连wifi，只要你打开了一般都可以直接上网了。然后你可以去查下怎么改配置把相关的分辨率大小给改下；同样的方法在靠谱助手的UC浏览器上输入IP地址就行。

 

14、分析开发的断点：

(1)、国内市场普遍的viewport宽度是320px和360px，像Note2才400px；分辨率，像素这些词语一般是告诉给设计师，我们前端要明白的是viewport；

(2)、字体大小：我相信有部分童鞋会认为浏览器会自适应让你页面的字体随着不同的屏幕大小而自动适应，我告诉你，你错了！

这些字体自适应都是人为设置出来的，我推荐的方案是：

body{font:14px line-height:20px}//网页整体字体以14px为主。

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}

h1{font-size:24px}

h2{font-size:22px}

h3{font-size:18px}

@media only screen and (min-width:360px) {

body,button,input,select,textarea {font-size:18px;line-height:26px;}

h1{font-size:28px}

h2{font-size:26px}

h3{font-size:22px}

}

 

(3)、class类控制分析：

看到上面大概也了解怎么使用@media了吧；

另外，定义类名的第一个重要性就在这里了：因为你要控制一个class类在320px或360px不同的屏幕上有适应屏幕大小的样式结构！

 

(4)、我们开发时，一般要做到兼容的浏览器普遍是国内的浏览器(苹果的浏览器都是webkit内核)：UC，QQ，360，百度，这些浏览器是国内使用用户量最大的浏览器厂商，虽然不是内核都一样，但是普遍的兼容问题还不是很多，所以我们优先选择兼容的是webkit内核的。

(5)、前端开发性能优化(个人总结建议)：

一、单个文件大小不要超过14KB；插件不要超过25KB。

二、优先选择使用字体图标，非要用上图片的话，就使用CSS Sprite方法。同时，将整合到一张图片的图标集合和在网站或webapp不常用的图片进行压缩。

三、seo优化问题：我们常写代码时会经常忽略这个标签会带上title,alt等这些可以填上关键词的地方，这个是必须要说明下，不过在手机端的话，这个好像还真用不上吧。

四、CSS，JS以模块化形式来做项目，CSS:我们可以用@import url('form.css')这样的形式来操作，把多个不同的css来分开写，然后逐个引入；问题是：@import是页面先加载完html再加载css，所以这个你得考量，这个文件是在什么情况下才使用好;JavaScript：我们可以使用sea.js或require.js来操作，网上有相关的指导教程，你可以百度或谷歌一下。

五、利用CDN技术，减轻空间资源；对企业来讲，这个风险有点大；因为手机用户的网络差时会出现文件不一定能及时加载等问题。

六、图片多使用PNG8来达到优化效果。

七、少对图片进行硬性设置宽高。

八、减少页面请求：CSS，JS，图片数量的多少会对请求有影响；同时要注意class类组合一般情况下不要超过4个，超过的尽量以取个新的class类名来定义会好点。

九、减少DOM访问次数，加载数量多了就影响访问速度。

十、不要出现404页面，避免重定向。

十一、减少cookies体积，设置合理的过期时间。

十二、缓存ajax，用get方式提交；form以post方式提交。

 ----------------------------------------------------------------------------

还有其他的，因为我还没用上，所以就不知道怎么解释了，先用着吧！

JavaScript方面的我还没熟悉就不做太多共享了，明年再分享吧

-----------------------------------------------------------------------------

 

现在我给大家来谈谈javascript的问题(包括JS框架)：

关于数据交互的框架:knockout js ：

这个框架学习起来不是特别难，不过要运用的话，还得花心思多练习和熟悉基本的JS语法。网上有他的chm文档，都是中文翻译，不过看完这个后，你还是得重新去看看官方的。

最近公司要求我们学习的框架是AngularJs:

他在国内专门的中文社区，现在我用的是1.3.9版本；这个框架有angular-ui有基于Bootstrap框架的(是自带ng指令的---开心吧)；

给你自己定好一个学习时间，定一个学习路线等等规划，对我来说，难点在于交互，我还没搞懂！

JS是所有前端人员的难点和重点，我之前之所以学不懂JS的主要原因是顾虑太多，CSS基础不稳定，自然要去补习，所以我这次是以稳定的CSS基础后再去学习JS的话，应该会轻松很多。同时给自己定的时间长点，学习技术不懂就不懂急不来的，不懂就上网查和问就是了。

JS的面向对象：面向对象是一个思想，他归根到底就是让你写函数封装起来。这个跟OOCSS是一个意思，目的为了让你以后轻松管理代码。(虽然描述得不清晰，我说这个主要是告诉新手，面向对象不难，难的是你练习了吗？学习的过程中不要心烦气躁，保持头脑清晰，冷静的面对逻辑问题；所有的技术由入门到精通都是熟能生巧。)

今年犯了2次错误：

1，入门我就知道有flexbox，但是我当时以为有网格已经很不错了，所以就拒绝学习了；

2，所以的javacript框架我都看不懂，所以也拒绝去学习js框架；现在公司压力来了，学起来没想象中那么困难。

 

在这里我要说的是 各位童鞋，千万不要去害怕学你现在以为很难的知识和新知识；否则，当你公司真正要用上的时候，你会很痛苦。

 --------------------------------------------------------------------

假如有童鞋看出我写的地方有问题可以提出来，觉得合适的我会改！

 --------------------------------------------------------