不用看时间，你没有穿越，现在是 2020 年，不是 2000 年。这复古的字体设计和这带有年代感的落日背景，以及悠扬壮阔的背景音乐，甚至让我以为是在看二十年前新年晚会的演出视频。
△ 视频链接：https://v.youku.com/v_show/id_XNDYzNTE2MzgxNg==.html
不得了，不得了，恒大足球场的宣传视频甚至登上了央视的广告舞台，展示给了全国观众，壕气十足，花开富贵，这绚烂的烟花背景，让我瞬间梦回三十年前。
建筑不仅外表华丽，其实文化内涵还很深厚，与中老年表情包冥冥之中有了一个巧妙的对应，蕴含着给你带来好运，祝你平安健康。
据网友考据，设计理念可能来自于一盆多肉，为了更加贴近人民群众的生活，让人们时时感受到自然的美妙。
还有网友幻想出最终建设完成时的终极形态，积极对建筑进行了自己的解读和创作，看这广泛的联合角色设计，佛祖、红孩儿；这跨越多个时代的风格杂糅，上个世纪的吉祥如意、这个世纪的游戏建模；涵盖多个领域的莲花主题，植物、彩灯，应有尽有，真是妙啊！
什么？你觉得不好看吗？这可是恒大总裁许家印从 9 种莲花宝座设计方案中精挑细选出来的一个！九种不同的莲花设计方案，深浅不同的粉红色，看不出有多大不同的开合程度，微微不一样的花瓣设计，供你瞪大双眼选择。
你问：可以阻止这个色彩绚丽的建筑修建起来么？来晚了，莲花宝座已经于 4 月 16 日开始修建，届时会成为世界规模最大的顶尖专业足球场。开心一点，说不定以后能在中国看世界杯了呢。
既然是世界规模最大的顶尖足球场！为什么不修好看一点？这什么设计师，这种红配绿，亮瞎人眼的设计是哪个沙雕公司设计的？许老板这么有钱，怎么不请好一点的设计师呢。广州这么时尚的城市配上这样的土味建筑，真是令人头大。其实，你可能骂错人了。背后的设计公司可是 Gensler，现在世界上数一数二的的设计团队。这不是变魔术，设计出上面土味十足的建筑和下面高级感扑面而来的建筑的就是一个团队。
上海中心大厦（右一），凭借其独特的造型和楼高，荣获诸多大奖，成为上海地标性的建筑之一。
还有菲律宾金融中心大厦，与周围的建筑对比起来，科技感和现代感十足，在 CBD 群中独占鳌头。
又或者是在波士顿起到枢纽作用的综合体建筑设计，一眼望去称霸整个地区。
这怎么看，都不像是一个团队设计出来的作品。莲花球场和高级感相关在哪里？这不是随随便便一个设计师都可以设计出来的么？其实，这也不是许老板第一次这么偏爱莲花了，看看海花岛项目就知道了，网友调侃说到，果然设计师还是败给了金钱。
不过同样是以莲花为设计元素，印度的莲花寺怎么看起来就这么高端优雅呢？与莲花球场「土味建筑」不同的是，莲花寺广受好评，被称为新德里的「悉尼歌剧院」。
类似莲花球场这样的案例在中国还有很多。之前被评为 2017 年中国最丑陋的十大建筑之一的广州圆大厦，由意大利米兰设计师 Joseph di Pasquale 设计，他在采访中说到：「中国改变了他，让他知道了文化如何融于建筑，如何更好地满足客户的欲望。」其实建筑的寓意「双环玉璧」是很好的，但是最终的效果不尽人意，建筑类似于黄金的外表颜色，被网友们吐槽，称其为「土豪圆」。
不过设计这个事情，有时候也很难去用单纯的美丑判别。例如设计出台北 101 大厦的李祖原老师，在同年设计出的沈阳方圆大厦，是参考铜钱的形状设计而成。在 2000 年威尼斯世界建筑设计展览会上被称赞为是「世界上最具创意性和革命性的完美建筑」，但在 2012 年却被 CNN 旗下的生活旅游网评选为全球最丑的十大建筑之一。
你以为这就结束了吗？别走，奇葩建筑还有很多，中国各个省都互不相让。首先我们从南看起，海南三亚的「美丽之冠」，就是后面那些像树一样的建筑，一模一样的楼不知道为什么要修建九个。
往北走，我们来到了官方宣传视频里写到的「不来万家丽，枉来中国行」，之中的世界最大建筑「长沙万家丽」。这栋同样金碧辉煌、中西结合的建筑让你深刻体会到一句话「有钱就是可以为所欲为」。不论是美是丑是否合适，只要是自己喜欢的元素，通通都堆砌在一栋建筑里。
接着我们来到了山东的文成城堡，沈腾的《西虹市首富》取景地，看看这个豪华程度，一晃神还以为自己来到了欧洲。
最后我们来到河北，学习魔法不需要出国，直接来河北美术学院，一个被戏称为「霍格沃茨华北分校」的美术帝国，由于其仿照魔法学院进行的设计，在中国众多美院中独树一帜。
以上这些奇葩建筑的盘点，均来自于 B 站 up 主史里芬 Schlieffen，一个被长沙万家丽老板黄总盛情邀请再次体验万家丽的男人。盘点中国奇葩建筑，现代青年当仁不让。想要了解中国建筑底层设计的朋友，可以前去品鉴和观赏，不要怪我用丑陋和土味蒙蔽了你们的双眼。押韵的解说词，第一视角的全方位建筑讲解，你值得拥有。
主页链接：https://space.bilibili.com/323733137/
这样的建筑作品很新鲜但是确实不美观。且不说中国其实有很多好的设计师，为什么和国外知名设计团队合作，做出来的作品依旧差强人意呢？难不成是我们的审美水平真的已经沦落成这个地步了？如果哪天全民都觉得这样的建筑是美的，都欣赏这样的建筑，那我们整个社会才算是陷入了「恶趣味审美」之中，就真正完蛋了。标榜着以「莲花绽放」这一美好寓意为核心的莲花球场设计，何尝不是披着虚伪外衣的土味建筑设计呢？美能够让人感到幸福，反过来，丑则使人感到不适。
对于莲花宝座外形的足球场设计，我想开了，毕竟我不是亚洲第五富，众位设计师，你们是怎样看待的呢？
文章来源：优设
feed 单词释义：v. 喂养；进食；为……提供充足的食物；施肥；为（某人）提供（信息、主意等）；
n. 饲料；饲养；（尤指给动物或婴儿）喂食；进食；（计算机的）订阅源
形象来讲，如今新浪微博、微信朋友圈、抖音、今日头条、小红书、Facebook、QQ 空间等等内容平台每时每刻都在不断投喂给我们赖以维系健康生活（废柴生活）的精神食粮——信息内容。而这些信息组合起来的格式便是 feed。
1. Feed
feed 是一种信息格式，平台通过它将资讯传递给用户。feed 是信息聚合的最小单元，每一条状态或者消息都是 Feed，比如朋友圈中的一个动态就是一个Feed，微博中的一条微博就是一个 Feed。
2. Feed流
feed 流即持续更新并呈现给用户内容的信息流。每个人的朋友圈，微博关注页，头条新闻等等都是一个 Feed 流。
Feed 源于早期的 RSS（Really Simple Syndication ）
RSS（简易信息聚合）：将用户主动订阅的若干消息源组合在一起形成内容（aggregator），帮助用户持续地获取的订阅源内容。对用户而言，聚合器是专门用来订阅网站的软件，一般亦称为 RSS 阅读器、feed 阅读器、新闻阅读器等。用户选择订阅多个订阅源，网站提供 feed 网址 ，用户将 feed 网址登记到聚合器里，在聚合器里形成聚合页，用户便能持续地获取的订阅源内容。
在早期的 Web 时代，订阅源一般是新闻网站以及博客。用户主动订阅感兴趣的多个订阅源，订阅器帮用户及时更新订阅源信息，然后按照 timeline 时间顺序展示出来。这样，用户可以通过订阅器获取即时信息，而不用每天都检查各个订阅源是否有更新。
转折出现在 2006 年，Facebook 宣布了一项新的首页形式「News Feed」，这一形式打破了传统 RSS 的订阅方式。News Feed 可以看做一个新型聚合器，订阅源不仅仅是某个网址、某个新闻网站或者某个内容，而是生产内容的人或者团体，而内容即是好友或关注对象的动态（发布的内容以及其他的社交行为）。News Feed 的出现使得 RSS 被迫淡出历史舞台。News Feed 发展至今已经拓展出多种多样的模式和呈现方式。
推模式：每当用户发帖，对所有粉丝推送一条该用户的动态消息记录。需要考虑的是如果一个粉丝量级非常大的用户（大 V），发布一条动态那么需要在每个粉丝页推送一条动态，多个大 V 级别用户同时发帖对数据的存储负荷是非常大的。
拉模式：每当请求好友动态，拉取用户所有关注者的最近动态，然后汇总排序。如果用户同时关注非常多的用户，那么查询这类型的用户的关注列表也是很大的数据成本。
推拉模式：在线推，离线拉；定时推，离线拉。
除了关注 feed 流的主要模式之外，feed 流的排序方式也值得一提：
Timeline：按发布的时间顺序排序，先发布的先看到，后发布的排列在最顶端，类似于微信朋友圈等。这也是一种最常见的形式。产品如果选择 Timeline 类型，那么就是认为 feed 流中的 feed 不多，但是每个 feed 都很重要，都需要用户看到。
Rank：按某个非时间的因子排序，一般是按照用户的喜好度排序，用户最喜欢的排在最前面，次喜欢的排在后面。这种一般假定用户可能看到的 Feed 非常多，而用户花费在这里的时间有限，那么就为用户选择出用户最想看的 Top N 结果，场景的应用场景有微博、头条新闻推荐类、商品、视频推荐等。
目前 feed 流的主流排序方式不再严格按照 timeline，而是广泛使用智能 feed 排序。
智能排序基于趋势 trending、热门 hot、用户生产 UGC 、编辑推荐 PGC、相似 Similarity 等等因素综合考虑，随着技术的进步，智能算法将会更加懂得用户的喜好。新的 feed 流不再需要用户主动订阅或者搜索，只要监测我们的浏览时长、点赞分享等动作，或者建立用户画像类别，就可以主动推荐我们感兴趣的内容。它对我们了如指掌，给我们想了解的，让我们不停刷新沉溺于其中。就现在 feed 流中的广告，女性用户对化妆品的喜好，男性用户对车的偏爱，临时借钱的窘迫，这些暖广告已经不再像牛皮癣一样惹人讨厌，甚至变成了一颗我们愿意吃下的安利。
可以有以下大致分类：
feed 作为信息聚合的最小单元，每一个 feed 都会具备相应的内容。其中包括发布的时间、发布者、文字内容、图片内容，还包含点赞、转发、评论、关注等操作、根据应用场景、业务目标不同，其表现方式也大有不同，任何表现形式都应该是为了更好地呈现功能及内容。
新闻资讯类产品和社交互动类产品 feed 元素大体相同，区别在于新闻资讯类产品通常着重展现新闻内容，标题，简介，匹配的图片等，而发布时间和发布作者等会在单个 feed 的底部出现。在图文兼备的排版布局中，左文右图适合文字内容类比如文章或者知乎、豆瓣等长答案评论等，图片是辅助信息支撑文字内容。左图右文图片更加吸引人的注意通常出现在商品信息比如什么值得买。
社交互动类产品，其最终目的是发现和拓展社交关系，融入相应的社交圈。而这时候社交拓展的基本单位人或者团体发挥着至关重要的作用。所以我们可以发现，通常的社交互动软件都会将发布者头像放在上部展示的位置，也会在底部突出点赞，评论，分享等互动操作。
视频直播类产品与前两者相异，页面的大部分空间留给视频内容的展示，一般一屏只承载一个 feed 信息单元，内容等提示元素在左侧呈现，除回复评论等操作元素列在右侧。
feed 中各元素的位置关系、所占比例与产品自身定位密切相关。如微博作为泛社交应用产品，社交关系主要建立在内容上，社交关系质量较弱，多为单向传播，注重的是传播的速度和内容公开。所以其 feed 的呈现方式发布者与发布内容不做明显的设计排布区分。以卡片间隔的形式在 feed 与 feed 之间做区隔。评论页面在下一层级。
微信是作为一个社交工具，社交关系质量较强，多为双向关系，注重的是私人内容的交流和互动，信息的传播速度不快，但受众信息消化率很高。所以将发布者头像与发布内容做出较明显区分，feed 与 feed 之间因为已经有了头像元素这一明显区别要素，仅用分割线做区隔。且注重评论区域的互动与展示。
无论怎样的设计布局方式，遵循的核心思想始终是根据场景需求、业务目标去发展深化设计方案。每一个设计点都要有足够的支撑，多问问自己为什么这么设计，解决了用户什么样的问题？还有没有更好的替代方案？而不是这样设计是不是新颖，出奇制胜。
文章来源：优设 作者：Nicole
性能优化(网络方向)
web应用无非是两台主机之间互相传输数据包的一个过程; 如何减少传输过程的耗时就是网络方向优化的重点, 优化出发点从第一篇文章中说起
DNS解析过程的优化
当浏览器从第三方服务跨域请求资源的时候,在浏览器发起请求之前,这个第三方的跨域域名需要被解析为一个IP地址,这个过程就是DNS解析;
DNS缓存可以用来减少这个过程的耗时,DNS解析可能会增加请求的延迟,对于那些需要请求许多第三方的资源的网站而言,DNS解析的耗时延迟可能会大大降低网页加载性能。
dns-prefetch
当站点引用跨域域上的资源时,都应在<head>元素中放置dns-prefetch提示,但是要记住一些注意事项。首先,dns-prefetch仅对跨域域上的DNS查找有效,因此请避免将其用于您当前访问的站点
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
preconnect
由于dns-prefetch仅执行DNS查找,但preconnect会建立与服务器的连接。如果站点是通过HTTPS服务的,则此过程包括DNS解析,建立TCP连接以及执行TLS握手。将两者结合起来可提供机会,进一步减少跨源请求的感知延迟
<!-- 注意顺序, precontent和dns-prefetch的兼容性 -->
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
TCP传输阶段优化
这个前端方面好像能做的有限, 我们都知道 http协议 是基于 tcp的;
升级http协议版本可以考虑下, 比如把 http/1.0 -> http/1.1 -> http/2;
这个需要我们在应用服务器上配置(nginx, Apache等), 不做概述了, 另外还需要客户端和服务器都支持哦, 目前还没开发出稳定版本,好多只支持https,不过也不远了...
http2 的优势
# 1.多路复用: 同一个tcp连接传输多个资源
这样可以突破统一域名下只允许有限个tcp同时连接,
这样http1.1所做的减少请求数优化就没有太大必要了
如多张小图合成一张大图(雪碧图),合并js和css文件
# 2.报文头压缩和二进制编码: 减少传输体积
http1 中第一次请求有完整的http报文头部,第二次请求的也是;
http2 中第一次请求有完整的http报文头部,第二次请求只会携带 path 字段;
这样就大大减少了发送的量。这个的实现要求客户端和服务同时维护一个报文头表。
# 3.Server Push
http2可以让服务先把其它很可能客户端会请求的资源(比如图片)先push发给你,
不用等到请求的时候再发送,这样可以提高页面整体的加载速度
但目前支持性不太好...emm...
总的来说, 在 c 端业务下不会太普及, 毕竟需要软件支持才行...
http 请求响应阶段优化
为了让数据包传输的更快, 我们可以从两个方面入手: 请求的数据包大小(服务器), 请求数据包的频率(客户端)
减少请求文件的大小
请求文件对应的是我们项目完成后,打包所指的静态资源文件(会被部署到服务器), 文件越小, 传输的数据包也会相对较小, 讲道理也会更快到达客户端
how to reduce a package size?
目前我们都会使用打包工具了(比如webpack, rollup, glup 等), 如何使用工具来减小包的体积呢? 这边建议您去官网文档呢...当然这里列举一下常用的手段(webpack 的), 但是注意要插件版本更新哦
JS文件压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJsPlugin({
// 允许并发
parallel: true,
// 开启缓存
cache: true,
compress: {
// 删除所有的console语句
drop_console: true,
// 把使用多次的静态值自动定义为变量
reduce_vars: true,
},
output: {
// 不保留注释
comment: false,
// 使输出的代码尽可能紧凑
beautify: false
}
})
]
}
CSS 文件压缩
// optimize-css-assets-webpack-plugin
plugins: [
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
}),
];
html 文件压缩
// html-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: ['index'],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false,
},
}),
];
source map 文件关闭
tree shaking
1.代码不会被执行,不可到达,比如 if(false){// 这里边的代码}
2.代码执行的结果不会被用到
3.代码只会影响死变量（只写不读）
4.方法不能有副作用
// 原理相关: 以后在研究
利用 ES6 模块的特点:
只能作为模块顶层的语句出现
import 的模块名只能是字符串常量
import binding 是 immutable 的
代码擦除: uglify 阶段删除无用代码
scope hoisting(作用域提升)
分析出模块之间的依赖关系,尽可能的把打散的模块合并到一个函数中去,但前提是不能造成代码冗余
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
module.exports = {
resolve: {
// 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
mainFields: ['jsnext:main', 'browser', 'main']
},
plugins: [
// 开启 Scope Hoisting
new ModuleConcatenationPlugin(),
],
};
项目中使用按需加载,懒加载(路由,组件级)
const router = new VueRouter({
routes: [
{ path: '/foo', component: () => import(/* webpackChunkName: "foo" */ './Foo.vue') }
{ path: '/bar', component: () => import(/* webpackChunkName: "bar" */ './Bar.vue') }
]
})
开启 gizp 压缩
有时候启用也会消耗服务器性能, 看情况使用吧
暂时先提这么些吧...后续想到了再加
减少请求频率
因为同一域名下 tcp 连接数的限制导致过多的请求会排队阻塞, 所以我们需要尽量控制请求的数量和频率
常见措施
将静态资源的内联到HTML中
这样这些资源无需从服务器获取, 但可能影响到渲染进程...
<!-- 1.小图片内联 base64 (url-loader) -->
<!-- 2.css内联 -->
<!-- 3.js内联 -->
<script>
${require('raw-loader!babel-loader!./node_modules/lib-flexible/flexible.js')}
</script>
利用各级缓存(下一篇存储方面介绍)
通常都是在服务端做相关配置, 但你要知道
我们可以利用http缓存(浏览器端)来减少和拦截二次请求, 当然一般都是在服务端设置的;
服务器端也可以设置缓存(redis等), 减少数据查询的时间同样可以缩短整个请求时间
利用本地存储
我们可以将常用不变的信息存在本地(cookie,storage API 等);
判断存在就不去请求相关的接口, 或者定期去请求也是可以的
花钱买 CDN 加速
CDN 又叫内容分发网络，通过把资源部署到世界各地，用户在访问时按照就近原则从离用户最近的服务器获取资源，从而加速资源的获取速度。 CDN 其实是通过优化物理链路层传输过程中的网速有限、丢包等问题来提升网速的...
购买 cdn 服务器;
然后把网页的静态资源上传到 CDN 服务上去,
在请求这些静态资源的时候需要通过 CDN 服务提供的 URL 地址去访问;
# 注意, cdn 缓存导致的新版本发布后不生效的问题
所以打包的时候常在文件后面加上 hash 值
然后在 HTML 文件中的资源引入地址也需要换成 CDN 服务提供的地址
/alicdn/xx12dsa311.js
# 利用不同域名的 cdn 去存放资源, (tcp连接限制)
webpack 构建时添加 cdn
// 静态资源的导入 URL 需要变成指向 CDN 服务的绝对路径的 URL 而不是相对于 HTML 文件的 URL。
// 静态资源的文件名称需要带上有文件内容算出来的 Hash 值，以防止被缓存。
// 不同类型的资源放到不同域名的 CDN 服务上去，以防止资源的并行加载被阻塞。
module.exports = {
// 省略 entry 配置...
output: {
// 给输出的 JavaScript 文件名称加上 Hash 值
filename: '[name]_[chunkhash:8].js',
path: path.resolve(__dirname, './dist'),
// 指定存放 JavaScript 文件的 CDN 目录 URL
publicPath: '//js.cdn.com/id/',
},
module: {
rules: [
{
// 增加对 CSS 文件的支持
test: /\.css$/,
// 提取出 Chunk 中的 CSS 代码到单独的文件中
use: ExtractTextPlugin.extract({
// 压缩 CSS 代码
use: ['css-loader?minimize'],
// 指定存放 CSS 中导入的资源（例如图片）的 CDN 目录 URL
publicPath: '//img.cdn.com/id/'
}),
},
{
// 增加对 PNG 文件的支持
test: /\.png$/,
// 给输出的 PNG 文件名称加上 Hash 值
use: ['file-loader?name=[name]_[hash:8].[ext]'],
},
// 省略其它 Loader 配置...
]
},
plugins: [
// 使用 WebPlugin 自动生成 HTML
new WebPlugin({
// HTML 模版文件所在的文件路径
template: './template.html',
// 输出的 HTML 的文件名称
filename: 'index.html',
// 指定存放 CSS 文件的 CDN 目录 URL
stylePublicPath: '//css.cdn.com/id/',
}),
new ExtractTextPlugin({
// 给输出的 CSS 文件名称加上 Hash 值
filename: `[name]_[contenthash:8].css`,
}),
// 省略代码压缩插件配置...
],
};
/*
以上代码中最核心的部分是通过 publicPath 参数设置存放静态资源的 CDN 目录 URL,
为了让不同类型的资源输出到不同的 CDN，需要分别在:
output.publicPath 中设置 JavaScript 的地址。
css-loader.publicPath 中设置被 CSS 导入的资源的的地址。
WebPlugin.stylePublicPath 中设置 CSS 文件的地址。
设置好 publicPath 后，WebPlugin 在生成 HTML 文件和 css-loader 转换 CSS 代码时，会考虑到配置中的 publicPath，用对应的线上地址替换原来的相对地址。
*/
参考
DNS MDN]
webpack 文档
深入浅出 Webpack
Scope Hoisting
IOS下的webview页面，内嵌iframe元素，将其样式指定为宽高100%：
.iframe { width: 100%; height: 100%;
}在安卓下运行均无问题，但是在IOS下会出现异常。
具体表现为iframe页面内的子元素一旦超出原先的边界，只要能影响到html元素的宽高，就会自动撑开iframe，即使html元素设置了overflow:hidden也没用。
比如一个body元素下的弹层需要从下往上滑动进场，这个弹层的位置就会导致html高度的变化，因此页面底部的tabbar就会在弹层运动期间先消失再出现。
解决方法就是使用具体的宽高数值锁定iframe元素：
function onLoadIFrame (index) { // 修复IOS下轮播图初始化瞬间会让iframe宽度自行扩大问题 if (this.ENV.isIOS) { const iframe = this.$el.querySelector('#iframe' + index)
iframe.style.width = iframe.clientWidth + 'px' iframe.style.height = iframe.clientHeight + 'px' }
}在了解了javascript的语言基础和特性后
javascript真正大放光彩的地方来了——这就是javascript DOM
Javascript DOM
DOM(Document Object Model)，文档对象模型。
是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口；W3C已经定义了一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
简单的说就是一套操作文档内容的方法。
需要注意的是，我们需要把DOM当作一个整体，不能分割看待，即DOM（文档对象模型）是一套操作文档内容的方法。
DOM把以上内容看作都是对象
<!DOCTYPE html>
<html>
<head>
<title>Shopping list</title>
<meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin od beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
</body>
</html>
1、获取DOM四种基本方法
1、getElementById()
2、getElementsByTagname()
3、getAttribute()
4、setAttribute()
常用的两种解析：
1. getElementById()：
参数：元素的ID值。 （元素节点简称元素）
返回值：一个有指定ID的元素对象（元素是对象）
注：这个方法是与document对象相关联，只能由document对象调用。
用法：document.getElementById(Id)
例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="time">2020-04-16</div>
<script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
</html>
看一下控制台打印的是什么
可以看到 console.log(timer)打印出来的是整个div标签
timer类型是个对象
2. getElementsByTagName():
参数：元素名
返回值：一个对象数组。这个数组里每个元素都是对象，每个对象分别对应着文档里给定标签的一个元素。
注：这个方法可和一般元素关联。这个方法允许我们把通配符当作它的参数，返回在某份html文档里总共有多少个元素节点。
用法：element.getElementsByTagName(TagName)
例：
var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12
2、事件基础
3.1 事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解：触发——>响应机制
网页中每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮产生一个事件，然后去执行某些操作
3.2 事件三要素
事件源 、事件类型、事件处理程序，我们也称为事件三要素
(1) 事件源 事件被触发的对象 谁
(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3) 事件处理程序 通过一个函数赋值的方式 完成
代码实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
</html>
运行结果
1、获取事件源
2、注册事件（绑定事件）
3、添加事件处理程序（采取函数赋值形式）
代码实战
-
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
</html>
常用的DOM事件
onclick事件---当用户点击时执行
onload事件---当用户进入时执行
onunload事件---用用户离开时执行
onmouseover事件---当用户鼠标指针移入时执行
onmouseout事件---当用户鼠标指针移出时执行
onmousedown事件---当用户鼠标摁下时执行
onmouseup事件---当用户鼠标松开时执行
————————————————
版权声明：本文为CSDN博主「那是我呐」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42402867/article/details/105567787
文章目录
继承性的描述：
继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父类的属性。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依旧是子元素</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我这里体现了层叠性呀</p>
</body>
</html>
使用结论
由于内容有限，但是结论是一定的，所以我直接给出结论：
若多个选择器定义的样式不冲突，则元素应用所有选择器定义的样式。
若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按照选择器的优先级，让元素应用优先级搞得选择器样式。
CSS定义的选择器优先级从高到低为：行内样式–>ID样式–>类样式–>标记样式。
如若想直接定义使用哪个样式，不考虑优先级的话，则使用!important，把这个加在样式后面就行了。
优先级
定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级的问题。层叠性和选择器的圈中有很大的关系。
优先级的使用说明
权重分析：
内联样式：如：style=""，权重为1000。
ID选择器，如：#content，权重为100。
类，伪类和属性选择器，如.content，权重为10。
标签选择器和伪元素选择器，如div p，权重为1。
继承样式，权重为0。
将基本选择器的权重相加之和，就是权重大小，值越大，权重越高。
计算权重方法
数标签：先数权重最高的标签，然后数第二高权重的标签，以此类推，就会生成一个数组，里面包含四个数字。
比如（0，0，0，0）分别对应（行内式个数，id选择器个数，类选择器个数，标签选择器个数）
然后两个选择器通过对别四个数字的大小，确定权重关系。
例：
#box ul li a.cur有1个id标签，1个类，3个标签，那么4个0就是（0，1，1，3）
.nav ul .active .cur有0个id，3个类，1个标签，那么4个0就是（0，0，3，1）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我们来试一下优先级</p>
</body>
</html>
先推测一波，因为前面讲到了ID选择器的权重是大于类选择器的，所以这里颜色应该为red。
效果如下：
推测正确！优先级GET！
今天讲一下使用vant Swipe 轮播控件过程中遇到的问题
主要是使用swiper自定义的大小的时候，宽度适应不同分辨率的移动设备
适应宽度的同时还需控件的正常使用
先看一下需要实现的功能，
一个简单的轮播图，但是每个轮播的宽度需要低于100%，使第二个轮播的van-swipe-item可以展示到第一个位置一部分
这时我们再去vant的文档查看一下控件
刚好有一个自定义控件大小的可以使用，完美解决了我们的问题
当我们使用控件之后
<van-swipe :loop="false" @change="onChange" :width="350">
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申请请假一天</p>
<p class="title1"><span class="rice"></span>部门经理核审中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申请</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item ><div class="swipe1"></div></van-swipe-item>
<van-swipe-item ><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
发现功能可以使用，但是再 iPhone8/7 plus 以及iPhone5/se 等分辨率下出现了宽度固定而不适应的情况，
简单来说，我们把van-swipe-item宽度控制在了80% 第二个van-swipe-item自然可以展示出来一部分
但是当滑到第二页的时候 由于第一页的宽度还是80% 所以就出现了这样的情况，所以我打算采用
动态的改变 滑动到第几页的时候 把当页的宽度变为80% 其他页保持不变，
于是
<van-swipe :loop="false" @change="onChange" >
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申请请假一天</p>
<p class="title1"><span class="rice"></span>部门经理核审中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申请</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item v-bind:id="item1"><div class="swipe1"></div></van-swipe-item>
<van-swipe-item v-bind:id="item2"><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
首先 我们为每个swipe-item添加id
data(){
return {
android: true,
ios: true,
iphoneX: true,
current: 0,
item0:'item0',
item1:'item1',
item2:'item2',
}
},
mounted(){
},
methods: {
onChange(index){
console.log('当前 Swipe 索引：' + index);
if(index==1){
var div =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==2){
var div1 =document.getElementById("item1").style.setProperty('width', '10rem', 'important');
var div0 =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==0){
var div =document.getElementById("item2");
var div0 =document.getElementById("item0").style.setProperty('width', '9.3333333rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
}
},
此外，监听滑动事件，根据滑动到第几页 更改当前页面的宽度，
这样就解决了
兰兰设计：前端达人
用户体验是用户在使用产品或者服务中的所有的主观感受。因此我们设计的过程中要以用户为中心进行设计，不能单单为了设计一个产品而设计，只关注产品设计本身的功能性。
在生活中好的用户体验设计的产品让人使用舒适，而用户体验不好的设计往往让人很糟糕。
用户体验比较好的：比如我们坐地铁的过程中很准时，这就是好的用户体验；在吃海底捞时，看到好吃的西瓜，他们会给你打包，这就是好的用户体验。
用户体验比较不好的设计：比如在生活中有些插座设计，一个两孔一个三孔，只能一次插一个，很气人有没有，难道上下错位和间距拉大有这么难吗？再比如蚊香的设计，很容易断，每到夏天不断几个，都不好意思！
在产品设计中是否满足用户需求我们可以分为 3 个点来进行分析，主要是有用性；易用性；满意度。
有用性就是产品有用的设计功能，也是产品基础的设计原则。
对于有用性而言，我们在这个过程可以主要在三个方向进行把控，就是：基本需求；期望需求；兴奋需求。
基本型需求
基本型需求是用户必需需求，用户在产品中认为这是必需的功能，（这些基本需求是用户认为必备的，有了用户觉得是应该的，如果没有这些需求，那么用户在使用产品过程中间大部分会直接放弃，选择其他家产品）。
比如淘宝产品中的订单和商品功能就是基本型需求；微信中的聊天和通讯录就是基本型需求；QQ 音乐中的播放页、播放菜单就是基本需求。
期望型需求
基本型需求是用户意愿型需求，用户自己也不知道，但是期望获得的功能。（这类需求就没有基本需求那样必备，是产品中期望需求体验越多越好，用户越满意，反之用户满意度也会下降）。
这类需求是期望型需求，也是我们产品竞争力所在，因此往往人们在谈论哪个产品好不好，通常是期望需求和兴奋型需求。比如淘宝产品中能买到便宜产品，而且符合详情页中描述；比如微信产品中聊天语音/微信/视频，聊天更加方便；比如 qq 音乐中的曲目和歌单数量增加，用户就会很满意，这也是期望需求。
兴奋型需求
兴奋型需求是用户非常期望的需求。（这类需求满意度高，有这些兴奋型需求时即使不太完善，用户也会满意，做得非常好就会让用户兴奋；没有这些需求用户也不会表现得不满意）。
比如淘宝产品能够更多满足用户多样化的生活，各种生活服务提供给用户；商品评价页用户互动，方便用户可以熟悉产品好坏；比如微信产品中暗黑模式，满意希望黑暗模式体验的用户需求；比如 qq 音乐中单曲热评，让我们对歌曲背后的故事，歌友的心路有了了解互动。
此外兴奋性需求在产品中还有一些重要的点，比如微动效、情感化设计等等这些都可以让产品提升很大的用户体验，和宣传力度，因为用户在谈论产品好坏时候比较多的是说产品的兴奋型需求。
需求分析模型
需求分析工具 KANO 模型，主要是帮助我们直观的了解产品不用类型需求实现程度和用户满意度的对比，我们了解这些需求的时候，可以让我们更好的看到这些功能点有哪些影响力。
易用性就是产品好不好用，容易使用吗。同时我觉得在有用性上产品经理需要考虑得比较多一点，而易用性上就是我们 UI、UE 需要重点负责和掌握的东西。
对于易用性而言，我们可以主要在三个方向进行把控，就是：上手快 ；操作快；负担少。
上手快
上手快就是用户使用产品容易上手，没有啥学习成本。简单的意思就是让用户不怎么动脑去想就知道下一步我要做什么，用户操作满足自己的心智模型。
心智模式是指深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。简单理解就是在使用产品中满足我们对产品的认知思维。当然文中介绍的只是心智模型的很一小部分，主要是想让大家多去了解心智模型，更好地在以后的产品设计中运用它们。
比如淘宝的下单弹窗、微信的红包、QQ 音乐的音乐播放，都是用户容易上手，即使小白用户在使用时，根据它们简单的提示就可以操作，没有太多复杂选项，一目了然。
操作便捷
操作便捷就是用户在使用产品中操作效率高，没有太多干扰项目。（这类设计一般就是操作方便，尽可能地减少干扰项目，增加快捷入口等）。
比如淘宝产品中的物流信息，没有太多干扰直接出现在订单的头部位置，提高用户查看商品物流信息的操作效率，提升了用户体验。比如微信聊天中的发送图片功能，直接显示最近图片，快捷发送，提高用户发送图片的操作效率。比如 QQ 音乐的播放直接在首页出现，方便用户选歌切换，操作效率高。
负担少
负担少通常是减少记忆负担，不让用户累着，为用户分忧。
比如淘宝红包展示就是在我的页面里面直接显示；比如微信钱包余额直接在钱包按钮下方显示，不用进入三级页面；比如 qq 音乐自建歌单显示歌单数量，减少用户记忆负担。
满意度简单理解就是用户需求被满足后的愉悦感。它是相对的概念，就是用户需求和产品完成度之间的衡量。
对于满意度而言，在产品设计上有很多方面，今天我们简单讲一下两个方向的把控：视觉感官的刺激；奖励。
视觉感官刺激
视觉感官刺激主要是超乎用户想象的好看的视觉。而在 UI 设计中主要体现在动效设计、插画等等。
比如淘宝产品中的图标动效，趣味设计，提升用户对产品的情感交流。比如微信聊天中的表情包功能，简单的动作表达用户的心理，好看又好玩。比如 QQ 音乐的加载像音符一样有韵律地跳动着，给用户带来不一样的审美体验。
奖励
奖励是指用户在完成一些操作时给予奖励的设计。超出用户预期，带来愉悦。
比如淘宝用户每次下单/参加活动获得淘气值，满 1000 可以购买 88 会员，原件 888。比如 QQ 音乐的活动中心，用户每日签到累计可以获得会员体验奖励，更优质内容的声音享受激励。
用户体验设计最根本的就是以用户为中心进行设计，本文主要从有用性、易用性、满意度三个维度来把控用户体验设计，但是在日常工作中，因为产品业务的复杂程度，我们要因地制宜地进行设计，深入挖掘我们产品自己的体验设计特色，增加自己的设计市场竞争力。
文章来源：优设 作者：阿韩设计
在这篇文章中，我们将讨论原型以及如何在 JS 中使用它们进行继承。我们还将会看到原型方法与基于类的继承有何不同。
继承
继承是编程语言的一个显著特征，随着面向对象编程语言的引入而出现。这些语言大多是基于类的语言。在这里，类就像一个蓝图，对象是它的展现形式。就是说，要创建一个对象，首先我们必须创建一个类，然后我们可以从一个类创建任意数量的对象。
想象一下，我们有一个表示智能手机的类。这个类具有像其他智能手机一样的可以拍照、有GPS定位等功能。下面是使用 c++ 来描述这样的一个类：
class SmartPhone {
public:
void captureImages() {}
}
SmartPhone x;
x.captureImages()
我们创建了一个名为SmartPhone的类，它有一个名为capturePictures的方法用来拍照。
如果我们需要一个iPhone类，它可以捕捉图像和一些特殊的功能，比如面部ID扫描。下面是两种可能的解决方案：
1.将捕获图像功能与其他常见的智能手机功能，以及iPhone的特定功能一起重写到一个新类中。但是这种方法需要更多的时间和精力，并且会引入更多的bug。
重用SmartPhone类中的功能，这就是继承的作用，继承也是重用其他类/对象中功能的一种方式。
这里是我们如何从SmartPhone类中继承capturePictures方法，使用 c++ 实现如下：
class Iphone: public SmartPhone {
public:
void faceIDScan() {}
}
Iphone x
x.faceIDScan()
x.captureImages()
上面是一个简单的继承示例。 但是，它表明继承可以使我们以某种方式重用代码，从而使所生成的程序更不易出错，并且花费更少的时间进行开发。
以下是关于类的一些重要信息：
继承该功能的类称为子类
被继承的类称为父类
一个类可以同时从多个类中继承
我们可以具有多个继承级别。 例如，类C继承自类B，而类B继承自类A
值得注意的是，类本身并没有做任何事情。在从类创建对象之前，实际上没有完成任何工作。我们将看到它为什么不同于JavaScript。
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
原型是什么？
在 JS 中，所有对象都有一个特殊的内部属性，该属性基本上是对另一个对象的引用。 此引用取决于对象的创建方式。 在 ECMAScript/JavaScript规范中，它表示为[[Prototype]]。
由于[[Prototype]]链接到一个对象，所以该对象有自己的[[Prototype]]引用。这就是建立原型链的方式。
这个[[Prototype]]链是 JS 中继承的构建块。
__proto__ 对象
为了访问对象的[[Prototype]]，大多数浏览器都提供__proto__属性。访问方式如下：
obj.__proto__
需要注意的是，这个属性不是 ECMAScript 标准的一部分，它实际上是由浏览器实现的。
获取和设置原型方法
除了__proto__属性外，还有一种访问[[Prototype]]的标准方法：
Object.getPrototypeOf(obj);
对应的有个类似的方法来设置对象的[[Prototype]]：
Object.setPrototypeOf(obj, prototype);
[[Prototype]]和.prototype属性
[[Prototype]] 只不过是一种用来表示物体原型的标准符号。 许多开发人员将其与.prototype属性混淆，这是完全不同的事情，接着我们来研究一下.prototype属性。
在 JS 中，有许多创建对象的方法。一种方法是使用构造函数，像这样使用new关键字来调用它:
function SmartPhone(os) {
this.os = os
}
let phone = new SmartPhone('Android')
在控制台打印 phone 对象：
{
os: "IPhone"
__proto__{
constructor: ƒ SmartPhone(os)
__proto__: Object
}
}
现在，如果我们希望在phone对象上有一些方法，我们可以在函数上使用.prototype属性，如下所示:
SmartPhone.prototype.isAndroid = function () {
return this.os === 'Android' || 'android'
}
再次创建phone对象时，打印 phone 对象如下：
{
os: "Android"
__proto__{
isAndroid: ƒ()
constructor: ƒ SmartPhone(os)
__proto__: Object
}
}
我们可以在对象的[[Prototype]]中看到isAndroid()方法。
简而言之，.prototype属性基本上就像由给定的构造函数创建的[[Prototype]]对象的蓝图。 在.prototype属性/对象中声明的所有内容都会在对象的[[Prototype]]中弹出。
实上，如果将 SmartPhone.prototype 与phone 的[[Prototype]]进行比较，就会发现它们是相同的：
console.log(Object.getPrototypeOf(phone) === SmartPhone.prototype);
// true
值得注意的是，我们还可以在构造函数中创建方法：
function ObjectA() {
this.methodA = function () {}
}
let firstObj = new ObjectA()
console.log(firstObj)
这种方法的问题是当我们初始化一个新对象时。所有实例都有自己methodA的副本。相反，当我们在函数的原型上创建它时，对象的所有实例只共享方法的一个副本，显然使用原型的方式效率会过高。
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
当我们访问属性时这里发生了什么？
当我们访问一个属性以获取它时，会发生以下情况：
JS 引擎查找对象上的属性，如果找到了该属性，然后返回它。否则，JS 引擎将通过查看[[Prototype]]来检查对象的继承属性，如果找到该属性，则返回它，否则，它会查找 [[Prototype]]的[[Prototype]]。 找到属性或没有[[Prototype]]时，该链结束，这意味着我们已经到达原型链的末端。
当我们设置/创建属性时，JS 总是在对象本身上进行设置。 即使[[Prototype]]链上存在相同的属性，下面是一个例子：
function MyObject() {}
MyObject.prototype.propA = 10; // 在原型上创建属性
let myObject = new MyObject();
console.log(myObject.propA); // [[Prototype]]上的属性
// 10
myObject.propA = 20; // 对象的属性
console.log(myObject.propA);
// 20
在上面的示例中，我们创建了一个构造函数，该函数的[[Prototype]]上具有属性propA。 当我们尝试对其进行读取操作时，会在控制台中看到该值。 但是，当我们尝试在对象本身上设置相同的属性时；JS 使用给定值在对象上创建一个新属性。 现在，如果我们不能直接访问[[Prototype]]上的属性。
值得注意的是，普通对象的[[Prototype]]链的末尾是内置的Object.prototype。 这就是为什么大多数对象共享许多方法（例如toString()）的原因。 因为它们实际上是在Object.prototype上定义的。
使用原型继承的各种方法
在 JS 中，无论我们如何创建对象，只有原型继承，但这些方式还有一些区别，来看看：
对象字面量
在JavaScript中创建对象的最简单方法是使用对象字面量：
let obj = {}
如果在浏览器的控制台中打印obj，我们将看到以下内容:
clipboard.png
基本上，所有用文字面量创建的对象都继承了Object.prototype的属性。
需要注意的是__proto__对象引用了创建它的构造函数。 在这种情况下，constructor属性指向Object构造函数。
使用对象构造函数
另一种不太常见的创建对象的方法是使用对象构造函数。JS 提供了一个名为Object的内置构造函数方法来创建对象。
let obj = new Object();
这种方法的结果与对象字面量的方式相同。它从Object.prototype继承属性。因为我们使用Object作为构造函数。
Object.create 方法
使用此辅助方法，我们可以创建一个带有[[Prototype]]的对象，如下所示：
let SmartPhone = {
captureImages: function() {}
}
let Iphone = Object.create(SmartPhone)
Iphone.captureImages()
这是在 JS 中使用继承的最简单方法之一。猜猜我们如何在没有任何[[Prototype]]引用的情况下创建对象？
构造方法
与 JS 运行时提供的对象构造函数相似。 我们还可以创建自己的构造函数，以创建适合我们需求的对象，如下所示：
function SmartPhone(os) {
this.os = os;
}
SmartPhone.prototype.isAndroid = function() {
return this.os === 'Android';
};
SmartPhone.prototype.isIOS = function() {
return this.os === 'iOS';
};
现在，我们想创建一个iPhone类，它应该有'iOS'作为它 os 属性的值。它还应该有faceIDScan方法。
首先，我们必须创建一个Iphone构造函数，在其中，我们应该调用SmartPhone构造函数，如下所示：
function Iphone() {
SmartPhone.call(this, 'iOS');
}
这会将Iphone构造函数中的this.os属性设置为’iOS‘。
之所以调用SmartPhone.call方法，是因为我们需要更改 this 值以引用Iphone。 这类似于在面向对象的世界中调用父级的构造函数。
接下来的事情是，我们必须从SmartPhone构造函数继承方法。 我们可以在此处使用Object.create朋友，如下所示：
Iphone.prototype = Object.create(SmartPhone.prototype);
现在，我们可以使用.prototype为Iphone添加方法，如下所示：
Iphone.prototype.faceIDScan = function() {};
最后，我们可以使用Iphone创建一个对象，如下所示：
let x = new Iphone();
// calling inherited method
console.log(x.isIOS()):
// true
ES6 class
使用ES6，整个过程非常简单。 我们可以创建类（它们与C ++或其他任何基于类的语言中的类不同，只是在原型继承之上的语法糖），然后从其他类派生新的类。
下面是我们如何在ES6中创建类:
class SmartPhone {
constructor(os) {
this.os = os;
}
isAndroid() {
return this.os === 'Android';
}
isIos() {
return this.os === 'iOS';
}
};
现在，我们可以创建一个派生自SmartPhone的新类，如下所示：
class Iphone extends SmartPhone {
constructor() {
super.call('iOS');
}
faceIDScan() {}
}
我们不是调用SmartPhone.call，而是调用super.call。 在内部，JavaScript引擎会自动为我们执行此操作。
最后，我们可以使用Iphone创建一个对象，如下所示
let x = new Iphone();
x.faceIDScan();
// calling inherited method
console.log(x.isIos()):
// true
该ES6示例与先前的构造方法示例相同。 但是阅读和理解起来要干净得多。
原文：https://javascript.info/proto...
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
自己写了段jquery的ajax请求，并输出到页面的表格中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
<div id="container">
<!--每个条目-->
<div class="item">
<div class="item-title">作业名字</div>
<div>
<span class="item-content">创建时间</span>
<span class="item-content">发布老师</span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "xxxxxxxxxxx",
type : "GET",
dataType : "json", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1,
city:'北京'
},
success: function(response, status, xhr){
// console.log('状态为：' + status + ',状态是：' + xhr.statusText);
// console.log(response);
var group = response.hourly_forecast;
console.log(group,111111111)
console.log(group.length,222222222222)
//拼接字符串
var str = '';
//对数据做遍历，拼接到页面显示
for(var i=0;i<group.length;i++){
str += '<div class="item">'+
'<div class="item-title">'+ group[i].date +'</div>'+
'<div>'+
'<span class="item-content">'+ group[i].hum +'</span>'+
'<span class="item-content">'+ group[i].pop +'</span>'+
'</div>'+
'</div>';
}
//放入页面的容器显示
$('#container').html(str);
}
});
});
});
function handleResponse(response){
// 对response数据进行操作代码
alert("jsonp success!");
}
</script>
</html>
一、处理跨域的方式：
1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持
只需要在服务端填上响应头：
header("Access-Control-Allow-Origin:*");
/*星号表示所有的域都可以接受，*/
header("Access-Control-Allow-Methods:GET,POST");
3.jsonP
原理：
ajax本身是不可以跨域的，
通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。
其实设置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
ajax的跨域写法：
（其余写法和不跨域的一样）：
比如
蓝蓝设计的小编 http://www.lanlanwork.com