Monthly Archives: 十一月 2017

Enable SASS in Angular4

If you use angular-cli to create an Angular4 project. The project will use css by default. If you want to use sass, you can do things like this:

In angular-cli.json: Revise apps.styles to be [“styles.scss”], and defaults.styleExt to be “scss”. This will enable you to generate .scss file instead of .css file when using command like “ng generate component componentName”.

Rename styles.css in src to be styles.scss. If your command line tool present some error, just restart your local server, and everything will be okay again.

Rename app.component.css in src/app to app.component.scss, and make corresponding revision in app.component.ts file:

If you have created other components, do the same revision as above.

Last but not the least, there is no need for you to install sass by your self, it seems that angular will do the work.

一种字符串拼接的高效方法

比较一下下面几种字符串拼接的方法:

经过在Chrome浏览器多次尝试,总的来说,testByForLoop1方法(用了ES6字符串模板的for循环)耗时最长,testByForLoop2方法(没用ES6字符串模板的for循环)耗时其次,testByArrayJoinMethod方法(利用了数组的join方法)耗时最短,它们的耗时在数组长度越长时越是差异显著。尤其是testByArrayJoinMethod方法简直是效果拔群。下面是一个截图(截图里有个地方</ul></ul>是当时写错了,上面的代码里以纠正,截图就不换了。。):

处理小数据时怎么方便怎么来,因为在这种情况下可以认为上面三种方法的耗时是一样的,但是如果要处理很长的数据的话,能用数据join方法实现的话,效果不是一般的好。

CSS自定义属性(变量)

Github上有个叫electron-api-demos的项目,看代码的时候发现了这么一个css文件(variables.css):

:root在html文档里对应的就是html标签选择器,:root伪类和html标签选择器这两个的区别基本上就是前者的优先级更高一些。但是,那些–color是什么东西?

根据文档https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables,这个叫CSS自定义属性(CSS变量),是具有继承性质的,在:root中定义CSS变量的话,等于是在定义全局变量,在其他具体的选择器(如上述代码中的.u-category-windows)里定义CSS变量等于是在该选择器及其后台选择器这个范围内定义了一个局部变量。下面是这种变量的使用示例:

说明:.about中定义了一个–about-space局部变量,其值为4rem,在.about-header中通过var(–about-space)来使用前面定义的值4rem,也就是说.about-header的样式等价于:

写在最后,CSS自定义属性,嗯,IE浏览器是不支持的。

FormData的使用及请求头分析

本文核心内容:

  1. FormData简介
  2. FormData的使用(jQuery、XHR、fetch、axios,及对应源码解析)
  3. 请求头分析

一、FormData简介

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

——https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

二、FormData的使用

要构建一个FormData数据的话,只需要用类似下面的伪代码:

跟jQuery一起使用:

注意:要发送FormData数据的话,jquery ajax的配置里processData和contentType的值需要显性得设置为false。

跟axios一起使用:

三、请求头分析

这块主要的内容就是请求头里Content-Type里有个boundary,它的值在Request Payload里出现了好多次。它的作用就是作为请求参数里各个key-value对的分界线(boundary)。前文我们有说过append方法的第三个参数可以指定filename,如果我们没传第三个参数的话,像上面截图里filename=”blablabla.jpeg”的部分就不会出现了。有时候这个地方接口联调失败有可能是后台取了filename但是前端没有指定filename。

发布静态文件到服务器上的简化操作

Of course, you can use a client tool such as FileZilla to deploy your static files to the server. But you will certainly feel tired in the end if you need to repeat this work almost every day in case your target server is for test purpose. For me, I used webpack for local development, when I want to deploy something to the test server, I need to execute command “npm run build” first and then “npm run deployToTestServer”, it’s already very convenient, but things can be even convenient with only one command needed to type ^_^.

In your project root path, create a file named gulpfile.js, then type something like this:

Then in you package.json file, add a script:

With the above preparation, you can now type “npm run deploy” to deploy your files under local dist folder to remote server, and these files will be under the path /usr/tomcat/apache-tomcat/webapps/wechat/static/demo/dist/.

One step further, let’s install a node package called “npm-run-all” with command like:

Now let assume you use command like “npm run build” to generate your static files. Modify the package.json file and add a new line in “scripts”:

See the script “buildAndDeployToTestServer”, right? The argument “–serial” after “npm-run-all” will enable you to run several tasks one after another. In the above example, if you execute “buildAndDeployToTestServer”, the result will be the same as executing  “npm run build” first, waiting for its completion, and executing “npm run deploy”.

That’s all.

Yakima,

Nov. 17, 2017, in Shanghai, China.

Spring Web MVC系列

接下来会翻译一下spring官方的一些文档,此次为Spring Web MVC系列的内容。Spring Web MVC是建立在Servlet API之上的web框架,Spring框架很早就包含了Spring Web MVC。“Spring Web MVC”这个正式名称来源于其源模块“spring-webmvc”,但是它被大家所熟悉的叫法是“Spring MVC”。

目录:

  1. DispatcherServlet
  2. Filters(过滤器)
  3. Annotated Controllers(注释的控制器)
  4. URI链接
  5. Exception Handling(对意外的处理)
  6. Async Requests(异步请求)
  7. CORS(跨域资源分享)
  8. Web Security(网络安全)
  9. HTTP Caching(HTTP缓存)
  10. MVC Config(MVC配置)
  11. View Techonologies(视图技术)
  12. HTTP/2支持

参考资料:

  • https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html#mvc

自然科学的诞生和发展与faith的联系

配图是动漫《海贼王》里草帽海贼团的成员(罗宾彼时不在)。配图中的文字挺温馨,摘录下:

From now on no matter what happens, this sign on this left arm… will forever be the sign of our friendship.
(自此往后,无论发生了什么,我们的友谊一直存在,这左手上的标识,就是我们友谊的标识。)

——The Straw Hat Crew(草帽海贼团)

今日去听了一场复旦大学物理系老教授的演讲,主题是《自然科学的诞生和发展与faith的联系》。抱歉我不知道教授的具体信息,这次活动的介绍文案里唯一的修饰内容就是一个“老”字(老教授),教授年纪是有点大。由于是偏文科性质的话题,老师讲得也挺好的,所以听起来不会觉得没意思。

我们的义务教育课本中一度将宗教和科学放在了对立面上。但事实上,科学体系是基于宗教的基础上建立起来的。其中有个很重要的观点——一神论。

一神论,认为只存在一个神的信仰,它同多神论不同。最早的一神论起源自公元前14世纪的埃及阿肯那顿统治时期。一神论是犹太教、基督教和伊斯兰教的特点。它们都将“上帝”看做是世界的惟一创造者,并且是仁慈的神圣的至善者,管理并插手人类的活动。犹太教中的一神论起源于古以色列,它将耶和华作为惟一的崇拜对象,并排斥任何别的种族和国家的神,起初并不否认他们的存在。伊斯兰教明确指出只有一个永恒的、自生的、无可比拟的神,而基督教则认为惟一的上帝体现在神圣的三位一体中。

——百度百科

我觉得,我们所说的科学,是基于理论证明和实践检验的对于客观事实、规律的一种总结。太多的变量会延缓甚至阻碍这种【总结】活动,而“神”就是一个影响因素很大的变量。如果认为存在有很多的神,有些有共同点但是表现略有差异的现象,可能就被解释成是因为不同的神参与其中才导致的不同,有这种先入为主的想法后,很多可以被早些总结的事实、规律被执行【总结】操作的可能性就大大降低/延迟了。

这个算是整个演讲听下来最大的收获之一了。

分享环节,有个人举例了圣经上的一些条款,来说明圣经上很多东西也是有科学依据在的,感觉这个什么都说明不了,让你写一本圣经那样厚度的科幻书,那么多描述模糊不具体的语句写出来,几百年后,里面也会有些是会被当时的科技水平证实为有科学依据的东西的

提问环节有个人提问说真理是掌握在少部分人手中的,感觉这句话里的真理跟科学里的真理是两回事,后者是科学一直在寻找的东西,是否被找到是无法被下定结论的,是个终极的大boss,感觉无意中被偷换概念了。

另外一个收获就是这种渠道比较方便结识有相同爱好的人,真的是各种各样的人都有——昨天的听众里,有大学法律老师、有核研究者,当然,还有很多年轻人——学生?

私下还是觉得,花上四五个小时的时间成本(算上通勤时间)去听这样的课,对现阶段的我来说,好像有点浪费时间,可能因为我对这个话题不太感兴趣吧,也可能因为大部分内容以前都是知道的。。。