留言系统/学习笔记/简历

乌托

input的file兼容

2017-06-14 10:45:01

<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <style>
        .upload-box {
            position: relative;
        }

        form {
            height: 30px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        input[type="file"] {
            border: 1px solid red;
            width: 480px;
            opacity: 0;
        }

        input[type="submit"] {
            width: 100px;
            height: 30px;
            background: #ddd;
            border: none;
        }

        .upload-choose {
            width: 80px;
            height: 30px;
            background: #eee;
            float: left;
            text-align: center;
            line-height: 30px;
            font-family: "Microsoft YaHei";
            font-size: 14px;
            font-weight: bold;
        }

        .upload-info {
            width: 400px;
            border: 1px solid #eee;
            height: 28px;
            float: left;
        }
    </style>
</head>

<body>

<div class="upload-box">
    <form action="">
        <input type="file"/> 
        <input type="submit" value="上传"/> 
    </form>
    <div class="upload">
        <div class="upload-choose">选择文件</div>
        <div class="upload-info"></div>
    </div>
</div>
</body>
</html>

乌托

input的select兼容

2017-06-14 10:45:21

<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <style>
    .retrieve_password_border{width: 680px;margin:50px auto;background: #ffffff;padding-bottom: 20px;}
.layout_tab_item{display: inline-block;position: relative;width: 115px;border: 1px solid #00bd82;overflow: hidden;vertical-align: middle;height: 40px; }
.layout_tab_item i{position: absolute;right:0;bottom: 12px;}
.layout_tab_item select,select{width:100%;height: 100%;  padding: 9px 30px 9px 12px;font-size: 16px;width: 150%9;/* ie9 */ ;
    color: #333;
    position: relative;
    border: 0;
    box-sizing: border-box;
    background:none;
    outline:none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;}
select::-ms-expand { display: none; }
.layout_tab_item option{font-size: 16px;cursor: pointer;text-shadow: none; padding: 6px 8px; }
    </style>
</head>

<body>

   <div class="layout_input_border">
       <div class="layout_input">
                        <label><strong>*</strong>找回方式：</label>
                        <div class="layout_tab_item">
                            <select>
                                <option value="邮箱找回" selected="selected">邮箱找回</option>
                                <option value="手机找回" >手机找回</option>
                            </select>
                            <i class="icon_font"></i>
                        </div>
                    </div>
   </div>

</body>
</html>

乌托

css文字多出部分省略

2017-06-14 10:45:53

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

乌托

手机滑动js

2017-06-14 10:47:01

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <script src="js/jquery-1.11.3.min.js"></script>
    <SCRIPT>
        $(function(){
            $("body").on("touchstart",function(){
                movePage(event);
            });
            $("body").on("touchend",function(){
                movePage(event);
            });
        });
        var stX,stY,edX,edY =-1;
        var l;
        function movePage(event){
            if(event.touches.length<=1){
                switch (event.type){
                    case "touchstart":
                        $("#a").html("结果：开始x坐标"+event.touches[0].clientX);
                        stX=event.touches[0].clientX;
                        stY=event.touches[0].clientY;
                        break;
                    case "touchend":
                        $("#a").html($("#a").html()+",结束x坐标："+event.changedTouches[0].clientX);
                        edX=event.changedTouches[0].clientX;
                        edY=event.changedTouches[0].clientY;
                        if(-50>edY-stY||edY-stY>50){
                            alert("上下滚动不翻页！")
                        }
                        else{
                            if(stX!=-1&&edX!=-1){
                                l = edX - stX;
                                if(l<-100){
                                    stX,edX =-1
                                    alert("页面前进！")
                                }
                                else if(l>100){
                                    stX,edX =-1
                                    alert("页面后退！")
                                }
                                else{
                                    stX,edX =-1
                                    alert("滑动距离不够，什么也不做！")
                                }
                            }
                            else{
                                stX,edX =-1
                                alert("操作不对，什么也捕捉！")
                            }
                        }

                        break;
                }

            }
        }
    </SCRIPT>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        #a{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="a">结果：</div>
</body>
</html>

乌托

网页设计命名规范

2017-06-14 10:51:32

头：header
内容：content/container
页脚：footer
导航条：navbar
导航：nav
子导航：subnav
侧栏：sidebar
栏目：column
广告条：banner
主体：main
左/右/中：left /right /center
菜单：menu
子菜单：submenu
注册：regsiter
登录：login
标志：logo
按钮：btn
图标：icon
热点：hot
新闻：news
下载：download
搜索：search
滚动条：scroll
标签页：tab
文章列表：list
小技巧：tips
标题：title
加入：joinus
标签页：tab
文章列表：list
注释：note
友情链接：friendlink
服务：service
状态：status
合作伙伴：partner
摘要：summary
版权：copyright
指南：guild
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap

乌托

CSS样式命名

2017-06-14 10:52:34

外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部

CSS样式命名说明
网页公共命名
#wrapper 页面外围控制整体布局宽度
#container或#content 容器,用于最外层
#layout 布局
#head, #header 页头部分
#foot, #footer 页脚部分
#nav 主导航
#subnav 二级导航
#menu 菜单
#submenu 子菜单
#sideBar 侧栏
#sidebar_a, #sidebar_b 左边栏或右边栏
#main 页面主体
#tag 标签
#msg #message 提示信息
#tips 小技巧
#vote 投票
#friendlink 友情连接
#title 标题
#summary 摘要
#loginbar 登录条
#searchInput 搜索输入框
#hot 热门热点
#search 搜索
#search_output 搜索输出和搜索结果相似
#searchBar 搜索条
#search_results 搜索结果
#copyright 版权信息
#branding 商标
#logo 网站LOGO标志
#siteinfo 网站信息
#siteinfoLegal 法律声明
#siteinfoCredits 信誉
#joinus 加入我们
#partner 合作伙伴
#service 服务
#regsiter 注册
arr/arrow 箭头
#guild 指南
#sitemap 网站地图
#list 列表
#homepage 首页
#subpage 二级页面子页面
#tool, #toolbar 工具条
#drop 下拉
#dorpmenu 下拉菜单
#status 状态
#scroll 滚动
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)
电子贸易相关
.products 产品
.products_prices 产品价格
.products_description 产品描述
.products_review 产品评论
.editor_review 编辑评论
.news_release 最新产品
.publisher 生产商
.screenshot 缩略图
.faqs 常见问题
.keyword 关键词
.blog 博客
.forum 论坛
CSS文件命名说明
master.css,style.css 主要的
module.css 模块
base.css 基本共用
layout.css 布局，版面
themes.css 主题
columns.css 专栏
font.css 文字、字体
forms.css 表单
mend.css 补丁
print.css 打印

2.CSS样式文件命名如下

主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

乌托

简历

2017-06-14 15:35:42

诸培青
现居住上海-浦东新区 │ 5年工作经验 │ 男 │ 27 岁 (1990/05/11)
邮箱：cain580@163.com
电话：18021020386
户口/国籍：上海
个人主页：chinaboy.gq 、xzcain.com

职能：
Web前端开发网页设计/制作/美工平面设计师行业：
互联网/电子商务网络游戏影视/媒体/艺术/文化传播广告个人标签：
Web前端开发工程师网页设计师平面设计师自我评价：
本人严谨务实，以诚待人，团队协作能力强；
吃苦耐劳，工作上有较强的管理和动手能力且有较强学习能力；
毕业后从事平面设计，2013年兼职网页设计，2015年工作需要接触前端，2016年转职前端工程师，一直尝试从不同的技术层面试着提高自己，参与多个自适应网页项目与线下活动项目。

工作经验
2013/11-至今上海盎然信息技术有限公司Web前端开发/网页设计
网络游戏 | 150-500人 | 民营公司 | 网站数据库
工作描述：
2016年之前：网页设计，banner设计，线下活动物料设计，H5自适应页面设计构架。
2016年后：
1.前端自适应页面设计；
2.前端页面制作；
3. JS交互效果的实现；
4.前端代码优化；

2012/9-2013/10上海柯柯广告有限公司平面设计师
广告 | 少于50人 | 民营公司 | 设计部
工作描述：
1.负责所有活动及公司需要的平面效果设计
2.整理公司项目案例，设计案例的视频资料
3.根据策划的方案设计平面效果图，并根据实际情况及专业知识跟客户交流提出自己的意见
4.客户公司产品的设计和制作
5.设计VI系统
6.协助活动布场
平时负责与客户交流，设计的定型检查，发送印刷

2016/11-2017/1龙江自适应官网所属公司：
上海盎然信息技术有限公司
项目描述：
这是一个棋牌类游戏的官网，有手机版，ipad版，和pc版，现需要不同设备游戏的客户登录官网。官网需要3端显示，最终定为自适应网站。
责任描述：
我负责3端自适应网站结构构架，页面总体设计，主页及部分内页的前端开发，js交互效果。
2016/4-至今手游《玩掼蛋》项目描述：
《玩掼蛋》是由上海盎然信息技术有限公司开发的一款休闲类棋牌游戏。流行于江苏、安徽地区，由地方扑克牌局 “跑的快”和“八十分”演化发展而来。
责任描述：
自适应官网的设计，游戏登陆页自适应设计，线上推广(banner)，微信推广（banner），游戏logo设计，线下推广（X展架，新手卡，海报）
2015/9-2015/9围棋361官网所属公司：
上海盎然信息技术有限公司
项目描述：
《围棋361》是上海鼎足体育文化发展有限公司开发的一款围棋教育类移动端网络游戏。为《围棋361》制作一个自适应官网。
责任描述：
自适应网页设计，前端制作。
2015/8-至今手游《龙江扑克》项目描述：
与黑龙江电视台合作的一款手游项目，集《龙江三打一》、《三人斗地主》、《填大坑》、《二人麻将》、《德州扑克》、《哈尔滨麻将》多种游戏为一体，其中《龙江三打一》与黑龙江电视台合作一档电视栏目《金牌三打一》。
责任描述：
官网的设计，游戏登陆页自适应设计，线上推广(banner)，微信推广（banner），线下物料设计，线下推广（X展架，新手卡，海报）
2015/5-2015/102015上海市民体育大联赛三打一公开赛项目描述：
ps+ai(开发工具)与上海市体育局、上海市级机关工作党委、上海市农委、上海市总工会、团市委、上海市妇联
承办单位：上海市休闲棋牌协会、上海市长宁区体育局合作的市民体育大联赛
责任描述：
线下物料设计/网站设计
2015/1-2016/1手游《全民斗地主》项目项目描述：
ps+ai(开发工具)与辽宁电视台合作的一档电视栏目《全民斗地主》。
责任描述：
官网的设计，线上推广(banner)，微信推广（banner），线下物料设计，线下推广（X展架，新手卡，海报），电视宣传图
2014/9-2014/102014上海市民体育大联赛三打一公开赛项目描述：
ps+ai(开发工具)与上海市体育局、上海市级机关工作党委、上海市农委、上海市总工会、团市委、上海市妇联
承办单位：上海市休闲棋牌协会、上海市长宁区体育局合作的市民体育大联赛
责任描述：
线下物料设计（X展架、大背板、海报、新手卡）
2014/8-2014/9“城投公路杯”三打一斗地主比赛项目描述：
ps+ai(开发工具)公司与上海市城市建设投资开发总公司工会合作在城投公司内部的三打一比赛。
责任描述：
线下物料设计、banner
2014/3-2014/3“驴妈妈杯”晓游三打一公开赛banner项目描述：
ps+ai(开发工具)巴西世界杯期间，公司与驴妈妈合作举办的三打一公开赛
责任描述：
线下物料设计、banner

乌托

html5行内元素与块级元素

2017-06-14 16:21:46

行内元素列表

<a>标签可定义锚

<abbr>表示一个缩写形式

<acronym>定义只取首字母缩写

<b>字体加粗

<bdo>可覆盖默认的文本方向

<big>大号字体加粗

<br>换行

<cite>引用进行定义

<code>定义计算机代码文本

<dfn>定义一个定义项目

<em>定义为强调的内容

<i>斜体文本效果

<img>向网页中嵌入一幅图像

<input>输入框

<kbd>定义键盘文本

<label>标签为

<input> 元素定义标注（标记）

<q>定义短的引用

<samp>定义样本文本

<select>创建单选或多选菜单

<small>呈现小号字体效果

<span>组合文档中的行内元素

<strong>语气更强的强调的内容

<sub>定义下标文本

<sup>定义上标文本

<textarea>多行的文本输入控件

<tt>打字机或者等宽的文本效果

<var>定义变量

块级元素列表

<address>定义地址

<caption>定义表格标题

<dd>定义列表中定义条目

<div>定义文档中的分区或节

<dl>定义列表

<dt>定义列表中的项目

<fieldset>定义一个框架集

<form>创建 HTML 表单

<h1>定义最大的标题

<h2>定义副标题

<h3>定义标题

<h4>定义标题

<h5>定义标题

<h6>定义最小的标题

<hr>创建一条水平线

<legend>元素为

<fieldset>元素定义标题

<li>标签定义列表项目

<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部

<noscript>定义在脚本未被执行时的替代内容

<ol>定义有序列表

<ul>定义无序列表

<p>标签定义段落

<pre>定义预格式化的文本

<table>标签定义 HTML 表格

<tbody>标签表格主体（正文）

<td>表格中的标准单元格

<tfoot>定义表格的页脚（脚注或表注）

<th>定义表头单元格

<thead>标签定义表格的表头

<tr>定义表格中的行

乌托

Html5中的选择器（Selector）

2017-06-14 16:48:44

.class  表示所有 class="name"元素的JS对象（用jquery获取的不是JS对象，在此不多阐述），
#id      表示id="name"的元素的JS对象
Element  元素选择器

等这些常用的通过  document.getElementById(), document.getElementByName(), document.getElementByTagName  获取到JS对象。
再H5中，除了支持上面的，还扩展了2个常用的方法：
document.querySelector("");
document.querySelectorAll("");
----在这里面支持 .class、#id、Element  还有一些属性。如下：

.class  类
#id     id
*       所有
element 标签
div,p   2个标签
div p   div中的p
div>p   父元素是div的p标签
[type]  所有含有type属性的元素
[type="text"] type属性是text的元素
a[href^="index"] href属性是index开头的a元素
a[href$="index"] href属性是index结尾的a元素
a[href*="index"] href属性含有index的a元素
div:first-child  父元素是div的第一个元素
div:last-child  父元素是div的最后一个元素
:nth-child(n)
:first-of-type
:last-of-type
:nth-last-of-type(n)
:not(p)

document.querySelector(); 返回的是符合条件的一个JS对象，诺符合的又一个以上那对象是这些符合JS对象中的第一个JS对象。
document.querySelectorAll();返回的是符合条件的JS对象数组，诺只有一个那就是一个JS对象

乌托

HTML5 Shiv – 让该死的IE系列支持HTML5吧

2017-06-14 16:54:05

HTML5能为我们做的事儿很多，最为可口的就是语义化标签的应用，如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x，那这篇文章对你一定有用，因为现在你也可以在IE上用到HTML5。

好吧！大前端今天的主题是：HTML5 Shiv

下面是引用Google的html5.js文件，好处就不说了：


将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）

当然，你也可以把代码拿出来自己看着办：

(function(){if(!/*@cc_on!@*/0)return;var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(","),i=e.length;while(i--){document.createElement(e[i])}})()
最后在css里面加上这段：

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状，像div那样。

好了，简单吧，一句话概括就是：引用html5.js 使html5标签成块状
转载：http://www.daqianduan.com/2831.html

乌托

npm的一些指令

2017-06-19 17:55:48

clrt+c 退出
cd demo/demo 进入demo/demo
npm ls -g --depth=1 显示npm包，只往下1层展示

乌托

nodejs的CommonJS规范

2017-06-21 14:13:41

CommonJS模块的特点：
所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
模块加载的顺序，按照其在代码中出现的顺序。

Nodejs内部提供一个Module构建函数。所有模块都是Module的实例。

一、module对象
每个模块内部，都有一个module对象，代表当前模块。它有以下属性：
module.id 模块的识别符，通常是带有绝对路径的模块文件名。
module.filename 模块的文件名，带有绝对路径。
module.loaded 返回一个布尔值，表示模块是否已经完成加载。
module.parent 返回一个对象，表示调用该模块的模块。
module.children 返回一个数组，表示该模块要用到的其他模块。
module.exports 表示模块对外输出的值。

二、require命令
require命令用于加载文件，后缀名默认为.js。
根据参数的不同格式，require命令去不同路径寻找模块文件。
（1）如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require("/home/marco/foo.js")将加载/home/marco/foo.js。
（2）如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require("./circle")将加载当前脚本同一目录的circle.js。
（3）如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。
举例来说，脚本/home/user/projects/foo.js执行了require("bar.js")命令，Node会依次搜索以下文件：
/usr/local/lib/node/bar.js
/home/user/projects/node_modules/bar.js
/home/user/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js
这样设计的目的是，使得不同的模块可以将所依赖的模块本地化。
（4）如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require("example-module/path/to/file")，则将先找到example-module的位置，然后再以它为参数，找到后续路径。
（5）如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。
（6）如果想得到require命令加载的确切文件名，使用require.resolve()方法。

三、目录加载
通常，我们会把相关的文件会放在一个目录里面，便于组织。这时，最好为该目录设置一个入口文件，让require方法可以通过这个入口文件，加载整个目录。
在目录中放置一个package.json文件，并且将入口文件写入main字段。下面是一个例子。
// package.json
{ "name" : "some-library",
"main" : "./lib/some-library.js" }
require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件。

四、模块缓存
第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。
所有缓存的模块保存在require.cache之中，如果想删除模块的缓存，可以像下面这样写。

// 删除指定模块的缓存
delete require.cache[moduleName];

// 删除所有模块的缓存
Object.keys(require.cache).forEach(function(key) {
delete require.cache[key];
})
注意，缓存是根据绝对路径识别模块的，如果同样的模块名，但是保存在不同的路径，require命令还是会重新加载该模块。

乌托

Babel下的ES6兼容性与规范

2017-06-21 16:25:09

箭头函数                      支持
类的声明和继承                 部分支持，IE8不支持
增强的对象字面量              支持
字符串模板                    支持
解构                          支持，但注意使用方式
参数默认值，不定参数，拓展参数支持
let与const                      支持
for of                       IE不支持
iterator, generator               不支持
模块 module、Proxies、Symbol   不支持
Map，Set 和 WeakMap，WeakSet   不支持
Promises、Math，Number，String，Object 的新API 不支持
export & import                  支持
生成器函数                       不支持
数组拷贝                         支持

一、箭头操作符

箭头操作符可以简洁的描述一个函数
// ES6
var fn= (v=>console.log(v));

转换后
// ES6
"use strict";
var fn = function fn(v) {
  return console.log(v);
};
该用法可以放心使用。

二、 let与const

let和const完全支持，将都会被转为var，但是要理解let、var、const的区别。

乌托

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict"

2017-06-21 16:25:52

严格模式
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

严格模式主要有以下限制。

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）
上面这些限制，模块都必须遵守。由于严格模式是 ES5 引入的，不属于 ES6，所以请参阅相关 ES5 书籍，本书不再详细介绍了。

其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。

乌托

es6 中 export & import 学习

2017-06-21 16:54:29

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
//a.js
export var a="aa";//输出
//b.js
import {a} from "a"//输入

1、可以使用as关键字重命名
//a.js
var a="aa"
export {a as b};//a重命名为b输出
//b.js
import {b as c} from "a"//输入的b重命名为c

2、使用*模块的整体加载
//a.js
var a="aa";
var b="bb";
export {a,b};//输出a,b
//b.js
import * as c from "a"//输入模块整体
console.log(*.a) //aa
console.log(*.b) //bb

3、使用default指定模块默认输出
//a.js
export default function (){console.log("aa")};//输出
也可以
function a(){console.log("aa")};
export default a;
也可以
function a(){console.log("aa")};
export {a as default};
//b.js
import aaaa c from "a"//输入默认 aaaa名字自定

4、export 与 import 的复合写法
export { foo, bar } from "my_module";
// 等同于
import { foo, bar } from "my_module";
export { foo, bar };

// 整体输出
export * from "my_module";

乌托

webpack学习

2017-06-21 17:29:11

webpack入门教程：http://www.jianshu.com/p/b95bbcfc590d

乌托

react中文文档

2017-06-21 17:55:22

http://www.css88.com/react/docs/installation.html

乌托

闭包学习

2017-06-22 13:08:11

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。
下面就是我的学习笔记，对于Javascript初学者应该是很有用的。
一、变量的作用域
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
　　var n=999;
　　function f1(){
　　　　alert(n);
　　}
　　f1(); // 999
另一方面，在函数外部自然无法读取函数内的局部变量。
　　function f1(){
　　　　var n=999;
　　}
　　alert(n); // error
这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
　　function f1(){
　　　　n=999;
　　}
　　f1();
　　alert(n); // 999
二、如何从外部读取局部变量？
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
　　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}
　　}
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！
　　function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
三、闭包的概念
上一节代码中的f2函数，就是闭包。
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢？请看下面的代码。
　　function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
五、使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
六、思考题
如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。
代码片段一。
　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

代码片段二。
　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());
（完）

来自：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

乌托

box-sizing

2017-06-22 14:12:42

box-sizing: content-box|border-box|inherit;
值
描述
content-box
这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit
规定应从父元素继承 box-sizing 属性的值。

乌托

h5+二维码调用

2017-06-28 11:19:40

var bc = new plus.barcode.Barcode( "barcode" );barcode是id
scan.onmarked=function ( type, code, file ) {}; //成功后调用onmarked函数
bc.start( options );//开始调用系统摄像头获取图片数据进行扫描识别，当识别出条码数据时通过onmarked回调函数返回。
bc.cancel();//结束对摄像头获取图片数据进行条码识别操作，同时关闭摄像头的视频捕获。结束后可调用start方法重新开始识别。
bc.close();//释放控件占用系统资源，调用close方法后控件对象将不可使用。
obj.setFlash( open );设置条码扫描控件在扫描时是否开启摄像头的闪光灯，默认值为不开启闪光灯。
bc.onerror=function(error){};//描控件识别过程中发生错误时触发的失败事件，并返回错误信息。

消息提示