这24条职场弯路,page应用实战总结和踩坑
分类:技术

三.有个别瑕玷

 1.脑子抽风啊,分为多个SPA, 整套项目下来,认为照旧应当做一个SPA。毕竟SPA之间切换,三个SPA切换来另二个SPA 照旧加载东西太多,非常不够流畅。即使微信浏览器缓存“严重”

2.类别结构划分依然非常不足合理,但认为也还是能够应付用。

3.组件化未有公布到极致,自个儿vue组件间通讯没搞好,md找子组件,笔者乃至还恐怕有通过遍历的议程。

4.有些组件用的jquery的,搭配的不是很流畅,导致个别操作强行使用dom操作。

5.自个儿有五个条件,开拓,测量试验,demo, 线上。 每回发布到三个条件  都亟需改了配置后,重新包装,非常的惨恻啊,关于那一点有哪些好的不二诀窍吗? 

新生拖了非常久才买上票,回家已是清晨,那晚大概没怎么睡,会议内容往往在自己脑海萦绕,同期自个儿解析了和煦的失误动作。

这二次,此番课程和线下课程比较,对学科差不离做到了百分百的质感创新。大家将线下收到的真实性难点逐项拆解,然后以18年来BBY成熟的企图情势举行周密解读后,以音频+图像和文字的方式表现给我们。

正文版权归果壳网和小编张宇彤本身共同享有 转发和爬虫请表明原来的小说地址 www.cnblogs.com/tdws

而与此同期她把失误动作分为:口误、笔误、读误、错过和遗忘,笔者的事例就是优异的“错过”。

而这一遍BeBeyond于2018新禧之始,将让一千0+人都找到好办事的线下课的思辨种类,第一次搬到了线上来,与简书联合重磅推出的「职业小课堂」

一.写在头里

类别上线有一段时间了,多少个基于webpack+vue+ES6的无绳电话机端多页面使用。其实说是多页面使用,实际上在webpack中属于多个app,  借使真是做纯单页面,那应该有二叁12个页面吗。所以笔者那边的多页面使用,是分为四个SPA。比方微信最上面,有八个导航,微信,通信录,开掘,笔者。 那么那多少个导航,正是自身的多个SPA,配置多个入口就能够。

在这里就隐瞒太多代码了,项目组织将会停放github上,地址在后头给出,以供参谋,上传的差不多只是三个目录加上配置景况,其实关键点也就在webpack.config.js了,这里根本配置了entry,loader,plugins,output目录啥的。

在此间先附上package.json和webpack.config.js吧:

 

图片 1图片 2

 1 {
 2   "name": "my-web",
 3   "version": "1.0.0",
 4   "description": "desc",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo "Error: no test specified" && exit 1",
 8     "start": "webpack-dev-server --inline --hot",
 9     "dev1": "webpack-dev-server --open",
10     "dev": "webpack-dev-server --inline --hot",
11     "build": "set NODE_ENV=production&&webpack"
12   },
13   "author": "ws",
14   "license": "ISC",
15   "devDependencies": {
16     "babel-core": "^6.24.1",
17     "babel-loader": "^7.0.0",
18     "babel-plugin-transform-runtime": "^6.23.0",
19     "babel-preset-es2015": "^6.24.1",
20     "babel-runtime": "^6.23.0",
21     "css-loader": "^0.28.4",
22     "extract-text-webpack-plugin": "^2.1.0",
23     "glob": "^7.1.2",
24     "html-webpack-plugin": "^2.28.0",
25     "jquery": "^3.2.1",
26     "node-sass": "^4.5.3",
27     "sass-loader": "^6.0.5",
28     "slideout": "^1.0.1",
29     "style-loader": "^0.18.2",
30     "url-loader": "^0.5.8",
31     "vue": "^2.3.3",
32     "vue-croppa": "^0.1.0",
33     "vue-hot-reload-api": "^2.1.0",
34     "vue-html-loader": "^1.2.4",
35     "vue-ios-alertview": "^1.1.1",
36     "vue-loader": "^12.2.1",
37     "vue-resource": "^1.3.3",
38     "vue-router": "^2.7.0",
39     "vue-style-loader": "^3.0.1",
40     "vue-template-compiler": "^2.3.3",
41     "vue-touch": "^2.0.0-beta.4",
42     "webpack": "^2.6.1",
43     "webpack-dev-server": "^2.4.5"
44   }
45 }

View Code

 

图片 3图片 4

  1 var path = require('path');
  2 var webpack = require('webpack');
  3 // 将样式提取到单独的 css 文件中,而不是打包到 js 文件或使用 style 标签插入在 head 标签中
  4 var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 // 生成自动引用 js 文件的HTML
  6 var HtmlWebpackPlugin = require('html-webpack-plugin');
  7 var glob = require('glob');
  8 
  9 var entries = getEntry('./source/**/*.js'); // 获得入口 js 文件
 10 var chunks = Object.keys(entries);
 11 console.log('输出chunks', chunks);
 12 module.exports = {
 13     entry: entries,
 14     output: {
 15         path: path.resolve(__dirname, 'public'), // html, css, js 图片等资源文件的输出路径,将所有资源文件放在 Public 目录
 16         publicPath: '/public/',                  // html, css, js 图片等资源文件的 server 上的路径
 17         filename: 'js/[name].js',         // 每个入口 js 文件的生成配置
 18         chunkFilename: 'js/[id].[hash].js'
 19     },
 20     externals: {
 21         jquery: "$",
 22         EXIF: "EXIF",
 23         wx: "wx"
 24     },
 25     resolve: {
 26         extensions: ['.js', '.vue'],
 27         alias: {
 28             'vue': __dirname + '/lib/vue/vue.js',
 29             //'vue-alert': __dirname + '/lib/vue-alert/vue-alert.js'
 30         },
 31     },
 32 
 33     module: {
 34         loaders: [
 35             {
 36                 test: /.css$/,
 37                 // 使用提取 css 文件的插件,能帮我们提取 webpack 中引用的和 vue 组件中使用的样式
 38                 //loader: "style-loader!css-loader",
 39                 loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
 40             },
 41             {
 42                 // vue-loader,加载 vue 组件
 43                 test: /.vue$/,
 44                 loader: 'vue-loader',
 45                 options: {
 46                     //解析.vue文件中样式表
 47                     loaders: {
 48                         // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 49                         // the "scss" and "sass" values for the lang attribute to the right configs here.
 50                         // other preprocessors should work out of the box, no loader config like this necessary.
 51                         //'scss': 'vue-style-loader!css-loader!sass-loader',
 52                         //'css': 'vue-style-loader!css-loader!sass-loader',
 53                         //'js': 'babel-loader',
 54                         //'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
 55                         css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
 56                         //exclude: [
 57                         //    path.resolve(__dirname, ""),
 58                         //    //path.resolve(__dirname, "app/test")
 59                         //]
 60                         //exclude:'/source/course/course-detail/course-detail.css'
 61                     }
 62                     // other vue-loader options go here
 63                 }
 64             },
 65             {
 66                 test: /.js$/,
 67                 // 使用 es6 开发,这个加载器帮我们处理
 68                 loader: 'babel-loader',
 69                 exclude: /node_modules/
 70             },
 71             {
 72                 test: /.(png|jpg|gif|svg)$/,
 73                 // 图片加载器,较小的图片转成 base64
 74                 loader: 'url-loader',
 75                 query: {
 76                     limit: 10000,
 77                     name: './imgs/[name].[ext]?[hash:7]'
 78                 }
 79             }
 80         ]
 81     },
 82     plugins: [
 83         // 提取公共模块
 84         new webpack.optimize.CommonsChunkPlugin({
 85             name: 'vendors', // 公共模块的名称
 86             chunks: chunks,  // chunks 是需要提取的模块
 87             minChunks: chunks.length
 88         }),
 89         // 配置提取出的样式文件
 90         new ExtractTextPlugin('css/[name].css')
 91     ]
 92 };
 93 
 94 var prod = process.env.NODE_ENV === 'production';
 95 module.exports.plugins = (module.exports.plugins || []);
 96 if (prod) {
 97     module.exports.devtool = 'source-map';
 98     module.exports.plugins = module.exports.plugins.concat([
 99         // 借鉴 vue 官方的生成环境配置
100         new webpack.DefinePlugin({
101             'process.env': {
102                 NODE_ENV: '"production"'
103             }
104         }),
105          new webpack.optimize.UglifyJsPlugin({
106              compress: {
107                  warnings: false
108              }
109          })
110     ]);
111 } else {
112     module.exports.devtool = 'eval-source-map';
113     module.exports.output.publicPath = '/view/';
114 }
115 
116 var pages = getEntry('./source/**/*.html');
117 for (var pathname in pages) {
118     // 配置生成的 html 文件,定义路径等
119     var conf = {
120         filename: prod ? '../views/' + pathname + '.html' : pathname + '.html', // html 文件输出路径
121         template: pages[pathname], // 模板路径
122         inject: true,              // js 插入位置
123         minify: {
124             removeComments: true,
125             collapseWhitespace: false
126         },
127         hash:true
128     };
129     if (pathname in module.exports.entry) {
130         conf.chunks = ['vendors', pathname];
131         //conf.hash = false;
132     }
133     // 需要生成几个 html 文件,就配置几个 HtmlWebpackPlugin 对象
134     module.exports.plugins.push(new HtmlWebpackPlugin(conf));
135 }
136 
137 // 根据项目具体需求,输出正确的 js 和 html 路径
138 function getEntry(globPath) {
139     var entries = {},
140         basename, tmp, pathname;
141 
142     glob.sync(globPath).forEach(function (entry) {
143         basename = path.basename(entry, path.extname(entry));
144         tmp = entry.split('/').splice(-3);
145         pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出 js 和 html 的路径
146         entries[pathname] = entry;
147     });
148     console.log(entries);
149     return entries;
150 }

View Code

 

开拓工具使用的VS2017,本来使用WS,可是用习于旧贯VS的本身要么受不了,终究17依然太强大了呗。既然是vue项目,那数据需要料定便是vue-res, 路由正是vue-loader,编译es6大家都是babel。 下边是项目结构预览:

图片 5图片 6图片 7她俩各自是图片财富,引用库财富,公布打包后的js和css,src源码和包裹后的html

本身想你应当清楚他为什么丢三忘四了,那个事件的幕后是一种忧伤与抗拒,对情绪缺点和失误的指控,对不公道对待的逃离,再深一点,是对女人身份的不认同。

收藏 | 各种华夏学士都应该读的饭碗启蒙白皮书

四.写在结尾

 这几个连串产品将三翻五次支付,但是下一阶段还大概有个门类,作者将动用贰个SPA完毕,关于vue有怎么样好的各类mobile组件,希望dalao不吝推荐。

 

 

借使,您以为读书这篇博客令你有些收获,不要紧点击一下右下加【推荐】按钮。
若果,您希望更易于地意识自身的新博客,无妨点击下方铁黄【关怀】的。
因为,笔者的享用热情也离不开您的一定支持。

感激您的翻阅,小编将不断输出分享,我是蜗牛, 保持学习,谨记谦虚。不端不装,有意思有梦。

本身想,假设他们董事长学过精神分析,一定笑不出去,起先和终止之间相距万里,或然被分析后意识作为人工部门的中层干部,除了不想参会之外,是不是对集团和管理者充满了负面情感。


二.几点重要的获得

1.组件化开采爽啊, 调用者只须求关爱输入和输出,代码明朗,轻松保证

2.vue-res promise异步风格太雅观,太喜欢了。不过有坑,ios8.x,使用基础浏览器运转js, 不帮衬promise语法,所以供给在进口中,import多少个npm下载的node module:

 npm i whatwg-fetch core-js es6-promise --save-dev

 图片 8

3.纪念以前做二个手提式有线电话机端项目,完全未有自动化,各类页面间跳转慢的一比,一点也不流利,项目布局不便于管理,重复代码极度多。

 近百个页面js版本得不到调节,管理js,css引用困难。微信静态财富缓存如此悲惨,未有版本调整,各种页面js版本的改变要人命。

4.消除缓存难点,应禁止html缓存,由于使用extract-text-webpack-plugin,能够确认保障你html入口中唯有大约的几行代码,等着自动化帮你引进所需js,所以纵然禁止html缓存,也不会影响响应速度,究竟大家的html文件      也就1-2k左右.html禁止缓存的由来是严防,js更新后,js hash版本已退换,但浏览器缓存的html中,还是是伸手旧版本js文件,那样一来js版本调控变得未有意义。

  1. js调用手提式有线电话机摄像, 调用安卓手提式无线话机拍照不便于呀,所以借使只想在微信上使用网页的话,提出利用 微信js SDK。

6. 苹果手提式无线电话机和分级安卓手提式无线电话机,使用原生input调用拍录后,图片到页面中会出现旋转难题,所以在微信上 使用js sdk, 在另外浏览器上,就用EXIF.js  手动将其旋转90度 只怕180度进行校对。

7.推荐一款mobile用的没有错的弹窗组件 vue-ios-alert.  ios风格的弹窗。地址以及github:    http://isay.me/vue-ios-alertview/example/![](https://images2017.cnblogs.com/blog/686162/201709/686162-20170904231146210-1849602734.png)

 

8.手提式有线话机上的 日期 时分秒选取器,推荐一个有坑的货  https://github.com/k186  有坑哦,使用以来,请看closed的首先个issue。别的日期采纳依然相比推荐原生。加上时分秒的话原生的或是就不佳用。图片 9

9.页面touch切换tag 使用的贰个vue-tab  github找一找,ios8不支持flex-shrink,要动用-webkit-flex-shrink。

  1. 上拉加载越来越多用的vue-loadmore,侧方滑动菜单 使用了jquery的slideout

11. 只要路由相当多以来,提议路由单独分二个js配置,並且一定要按需加载,不然打包文件太大。假使是顾客点击率很高的路由,能够间接require进去。

12.部分js库,就无须通过require了,直接在html引进进来算了,毕竟那么些库基本不会转移,也没须求决定版本

13.前端AOP,  vue-res的拦截器点个赞,小编能够在拦截器中,为本身每贰个央浼都加上authentication header等新闻,像用jq的时候,作者只得手动把ajax包装一层

14.像微微数据的加载,文字方面,最棒预先给出加载中这种唤醒,无法给空白。列表的加载 要多怀想加载中,加载成功和暂无数据的拍卖。见过大多app和网页都以跻身到列表页,首先三个暂无数据的背景图给出去         了,结果稍等一下,数据又加载出来了....

15.虽说早就组件化了,但小编还建议有三个每种页面公用需求require的js,笔者一般都叫application.js  在那边 能够放一些您的常量,枚举,公共措施,helpers,utils,ajax 等布署,并且在此间能够import footer header vue-res vue-alert 等部分各种组件大概页面都需求的话的零件

16.热轮换是必需的,比从前用gulp livereload方便

17.手提式有线话机端页面调节和测量检验,推荐vConsole(去github找)。 示例:图片 10图片 11

18.通过babel编写翻译es5的都没难点.。  小编有个单身的小作用,没用es6,直接Google调节和测量检验开拓,结果到了ios9.x上  不援助也不报错,以往制止踩进去吧。下边是代码:

图片 12

19. IOS上测算时间 需求new Date('2017/09/09')的格式,  而无法选拔横杠的格式

不仅是在咨询室,现实生活里假如一人平时口误,你能够细细想转手,他怎么了,他毕竟想表明什么?他的心底状态在那一刻是何等?极度是在大伙儿地方,像那位民主人员,口误一定有所意义。

方今大家生产了一篇洋洋洒洒7000字的差事白皮书为远在迷茫的大伙儿进行职业启蒙获得了豪门常见的好评!

能够回看下您自个儿人生中的大事:高等学校统招考试、首要竞技、解说、升职、病魔、事故、乃至结合、生儿女、亲人离世。

2、长按下图保存至微信张开:

你好,作者是冰千里,本文集分为两部分:心理咨询师的孤独、你的孤寂须要被看到。

(P.S.文末有欢乐福利)

爸妈太娇惯她的大哥,什么好吃的都给四哥,而为啥活却都让他去做,比非常的小时候就被阿爹指使去买东西、送东西之类的。

此次的线上课程为BeBeyond与简书合伙推出,课程将于简书平台发表,报超级模特式有两种:

作者清楚,那不仅仅是平时的三心二意,职业五回后,她记起了过多刻钟候细节:

故此,真的存在什么样直接连忙的主意能够飞速击破桎梏打通面前境遇生意困境时打断的脑子吗?

你可能还喜欢:

大家开采在面临这一个困境的时候,他们数次都以病急乱投医。只怕打听对象的观点,或许跟老人谈谈心,或许就是在网络一阵疯狂寻找...当然,结果本来是很难获得别的对当下有价值的新闻。

他平时会出错,譬喻买老抽买成了醋,给亲属送东西弄丢了之类,然后被老爹斟酌乃至处置处罚。

当!然!有!

那是急需被认真对照的,要深切体验和反思,并非随意划过去,严重的的确须要心思专家指点,不然,会三番伍遍重复和持续。

1、在简书大学堂公众号后台回复“职场”

人生大的不满一定伴随重大失误,而那终将会形成心结,永久留在你生命之中,挥之不去,引发的内疚、自责、黯然、羞愧也会影响你现在的生存质量。


她俩公司举行年度大会,将在开幕之际,人力财富COO兼主持人高声说道:“以往,作者颁发,公司年度会议正式闭幕!”,全公司的人应声哄堂大笑。

在这一个便捷时代,人们每日陀螺版运行,我们感到多个高素质的点子课程,会是即时最节省时间开销和流量费用的求学方法。

您能够关注本文集,点击上边链接就能够,迎接转载和评价,作者必然用心回复!

树立十四年来,BeBeyond见过太多的人,在事业发展的进程中,蒙受以上的那些瓶颈,并来向我们求助。

还恐怕有种失误动作令人特别沮丧,就是最首要时候掉链子。

24节课带您打破观念局限

每期8-10分钟,周周两期,持续三个季度,每期至少为观众打破三个生意困局——那是饭碗小课堂在以后八个月里的“课程表”。

咱俩相信,那会是三个集年轻活泼与庄敬严厉于一身,能突围你本来观念局限的专门的工作思虑类节目。

何谓冲破观念局限呢?个中一些,便是打破你对有个别东西的原始认知,刻板影象,进而找到化解难点的新角度。

比如,非常多学生会来问大家那样三个主题材料,“作者以为自己的个性太内向,怎么改?”

内向者总会本能地感觉自个儿的秉性导致自身牵连少,社交本领差,从而导致专门的学问中的各类不顺。不过壹人的人性别变化异来源全体:遗传、境况、教育、实行经验,大概是不可逆的。

你要做的不是一点一滴否定自身的内向特性,而是应该接受它,并发现出内向天性的优势,并加以运用。举例内向者由于本身的敏锐性,相较外向者会更有同理心,做事也会绝对更加细致,那些一样是办事中很爱惜的人头。

传闻上述这么些主题素材,大家的学科所做的正是扩展你对这个人性认识的角度,举例说,大家该从哪些角度去体会。然后能够进一步客观的去对待你的那天性格,并找到符合她的进步的一个偏侧和条件。

*
*


有次大家聊天时候得知,最疼她的曾祖母在次出远门时走失,从此再也没赶回,那时她才9岁,当自身听见这里,浑身起了鸡皮疙瘩,感觉十分的冷。

那说不定会是您见过最具备实际操作性和最具备收听价值的专门的学业建议,同期也是对业余时间最值得的一遍投资。


报名办法

生存中最广大的就是口误,笔者见过最要紧的口误出现在电视直播中,大阅兵停止,摄影媒体人搜罗一人安徽民主职员。

3、点击本白字体积分市肆,使用积分举办买卖。

在本篇推文下方,你还足以将您对此工作的困惑,回复给到大家,还原中式茶食赞最高的难点,大家将非常做一期音频课程,进行标准的解析

建议该难点的同室,还将无偿获取大家的营生小课堂产品,所以,还等怎么着?火速行动起来!

自家翻遍了富有口袋和包装,依旧没找到,而此刻已过了驾驶时间,坐在候车室椅子上的本人,不停寻找着回想。

课程介绍

课程设置

那是BeBeyond第三遍将线下体验式Workshop的探究框架应用到立时大家最关心职业发展的标题上,并分享到线上平台。全期BeBeyond职业小课堂将有24节课,每星期四、礼拜天晚6点为大家准时播放。无限次回听。

学科格局

每一节专门的学业小课堂将配以音频、文章摘要,以及线上社会群体,大家能够在社会群众体育中商量、分享对于职业的见解、困惑、建议等。

互相格局

大家每期会从广大线下的问询者中收取被很多询问的难点看做斟酌的话题进行座谈,同一时候您在倾听之后,能够积极留言你的拿走与思疑,获得点赞最多的主题材料,也将改为商量话题之一。

到场格局

咱俩也是有线上社会群众体育,令你能够和广大的人开展在线研究,获得更加多的角度与专业主张。

问其感受,他答道:“总书记这次阅兵足够隐蔽了,哦不、丰裕掩盖了,不,富含了上上下下民族的……”。

把早就仅仅属于个旁人找寻本身进步,化解事情发展迷茫的门道与越来越多的人分享。

本文由奥门金沙网址发布于技术,转载请注明出处:这24条职场弯路,page应用实战总结和踩坑

上一篇:里偷闲画石头,一下午就能让你聪明起来 下一篇:没有了
猜你喜欢
热门排行
精彩图文