From a04e2266f7ed35341f6c7d2535acf964431a44fa Mon Sep 17 00:00:00 2001 From: codingstar Date: Sun, 20 Sep 2015 16:37:00 +0800 Subject: [PATCH 01/23] add --- .gitignore | 7 + _config.yml | 73 + package.json | 20 + scaffolds/draft.md | 3 + scaffolds/page.md | 3 + scaffolds/post.md | 4 + source/_posts/SCBPM-paper-note.md | 195 ++ source/_posts/daily-life.md | 28 + source/_posts/daily-work.md | 8 + source/_posts/develop-notes.md | 4 + source/_posts/hello-world.md | 37 + source/_posts/hexo-with-github.md | 77 + themes/hexo-theme-yilia | 1 + themes/landscape/Gruntfile.js | 46 + themes/landscape/LICENSE | 7 + themes/landscape/README.md | 111 + themes/landscape/_config.yml | 26 + .../layout/_partial/after-footer.ejs | 24 + .../layout/_partial/archive-post.ejs | 8 + themes/landscape/layout/_partial/archive.ejs | 33 + themes/landscape/layout/_partial/article.ejs | 44 + themes/landscape/layout/_partial/footer.ejs | 11 + .../layout/_partial/google-analytics.ejs | 14 + themes/landscape/layout/_partial/head.ejs | 34 + themes/landscape/layout/_partial/header.ejs | 32 + .../landscape/layout/_partial/mobile-nav.ejs | 5 + .../layout/_partial/post/category.ejs | 10 + .../landscape/layout/_partial/post/date.ejs | 3 + .../layout/_partial/post/gallery.ejs | 11 + themes/landscape/layout/_partial/post/nav.ejs | 22 + themes/landscape/layout/_partial/post/tag.ejs | 6 + .../landscape/layout/_partial/post/title.ejs | 15 + themes/landscape/layout/_partial/sidebar.ejs | 5 + themes/landscape/layout/_widget/archive.ejs | 8 + themes/landscape/layout/_widget/category.ejs | 8 + .../landscape/layout/_widget/recent_posts.ejs | 14 + themes/landscape/layout/_widget/tag.ejs | 8 + themes/landscape/layout/_widget/tagcloud.ejs | 8 + themes/landscape/layout/archive.ejs | 1 + themes/landscape/layout/category.ejs | 1 + themes/landscape/layout/index.ejs | 1 + themes/landscape/layout/layout.ejs | 18 + themes/landscape/layout/page.ejs | 1 + themes/landscape/layout/post.ejs | 1 + themes/landscape/layout/tag.ejs | 1 + themes/landscape/package.json | 12 + themes/landscape/scripts/fancybox.js | 24 + themes/landscape/source/css/_extend.styl | 63 + .../source/css/_partial/archive.styl | 80 + .../source/css/_partial/article.styl | 357 +++ .../source/css/_partial/comment.styl | 9 + .../landscape/source/css/_partial/footer.styl | 14 + .../landscape/source/css/_partial/header.styl | 165 ++ .../source/css/_partial/highlight.styl | 156 ++ .../landscape/source/css/_partial/mobile.styl | 19 + .../source/css/_partial/sidebar-aside.styl | 27 + .../source/css/_partial/sidebar-bottom.styl | 15 + .../source/css/_partial/sidebar.styl | 35 + themes/landscape/source/css/_util/grid.styl | 38 + themes/landscape/source/css/_util/mixin.styl | 31 + themes/landscape/source/css/_variables.styl | 60 + .../source/css/fonts/FontAwesome.otf | Bin 0 -> 62856 bytes .../source/css/fonts/fontawesome-webfont.eot | Bin 0 -> 38205 bytes .../source/css/fonts/fontawesome-webfont.svg | 414 ++++ .../source/css/fonts/fontawesome-webfont.ttf | Bin 0 -> 80652 bytes .../source/css/fonts/fontawesome-webfont.woff | Bin 0 -> 44432 bytes themes/landscape/source/css/images/banner.jpg | Bin 0 -> 245780 bytes themes/landscape/source/css/style.styl | 88 + themes/landscape/source/fancybox/blank.gif | Bin 0 -> 43 bytes .../source/fancybox/fancybox_loading.gif | Bin 0 -> 6567 bytes .../source/fancybox/fancybox_loading@2x.gif | Bin 0 -> 13984 bytes .../source/fancybox/fancybox_overlay.png | Bin 0 -> 1003 bytes .../source/fancybox/fancybox_sprite.png | Bin 0 -> 1362 bytes .../source/fancybox/fancybox_sprite@2x.png | Bin 0 -> 6553 bytes .../fancybox/helpers/fancybox_buttons.png | Bin 0 -> 1080 bytes .../helpers/jquery.fancybox-buttons.css | 97 + .../helpers/jquery.fancybox-buttons.js | 122 + .../fancybox/helpers/jquery.fancybox-media.js | 199 ++ .../helpers/jquery.fancybox-thumbs.css | 55 + .../helpers/jquery.fancybox-thumbs.js | 165 ++ .../source/fancybox/jquery.fancybox.css | 273 +++ .../source/fancybox/jquery.fancybox.js | 2017 +++++++++++++++++ .../source/fancybox/jquery.fancybox.pack.js | 46 + themes/landscape/source/js/script.js | 137 ++ 84 files changed, 5715 insertions(+) create mode 100644 .gitignore create mode 100644 _config.yml create mode 100644 package.json create mode 100644 scaffolds/draft.md create mode 100644 scaffolds/page.md create mode 100644 scaffolds/post.md create mode 100644 source/_posts/SCBPM-paper-note.md create mode 100644 source/_posts/daily-life.md create mode 100644 source/_posts/daily-work.md create mode 100644 source/_posts/develop-notes.md create mode 100644 source/_posts/hello-world.md create mode 100644 source/_posts/hexo-with-github.md create mode 160000 themes/hexo-theme-yilia create mode 100644 themes/landscape/Gruntfile.js create mode 100644 themes/landscape/LICENSE create mode 100644 themes/landscape/README.md create mode 100644 themes/landscape/_config.yml create mode 100644 themes/landscape/layout/_partial/after-footer.ejs create mode 100644 themes/landscape/layout/_partial/archive-post.ejs create mode 100644 themes/landscape/layout/_partial/archive.ejs create mode 100644 themes/landscape/layout/_partial/article.ejs create mode 100644 themes/landscape/layout/_partial/footer.ejs create mode 100644 themes/landscape/layout/_partial/google-analytics.ejs create mode 100644 themes/landscape/layout/_partial/head.ejs create mode 100644 themes/landscape/layout/_partial/header.ejs create mode 100644 themes/landscape/layout/_partial/mobile-nav.ejs create mode 100644 themes/landscape/layout/_partial/post/category.ejs create mode 100644 themes/landscape/layout/_partial/post/date.ejs create mode 100644 themes/landscape/layout/_partial/post/gallery.ejs create mode 100644 themes/landscape/layout/_partial/post/nav.ejs create mode 100644 themes/landscape/layout/_partial/post/tag.ejs create mode 100644 themes/landscape/layout/_partial/post/title.ejs create mode 100644 themes/landscape/layout/_partial/sidebar.ejs create mode 100644 themes/landscape/layout/_widget/archive.ejs create mode 100644 themes/landscape/layout/_widget/category.ejs create mode 100644 themes/landscape/layout/_widget/recent_posts.ejs create mode 100644 themes/landscape/layout/_widget/tag.ejs create mode 100644 themes/landscape/layout/_widget/tagcloud.ejs create mode 100644 themes/landscape/layout/archive.ejs create mode 100644 themes/landscape/layout/category.ejs create mode 100644 themes/landscape/layout/index.ejs create mode 100644 themes/landscape/layout/layout.ejs create mode 100644 themes/landscape/layout/page.ejs create mode 100644 themes/landscape/layout/post.ejs create mode 100644 themes/landscape/layout/tag.ejs create mode 100644 themes/landscape/package.json create mode 100644 themes/landscape/scripts/fancybox.js create mode 100644 themes/landscape/source/css/_extend.styl create mode 100644 themes/landscape/source/css/_partial/archive.styl create mode 100644 themes/landscape/source/css/_partial/article.styl create mode 100644 themes/landscape/source/css/_partial/comment.styl create mode 100644 themes/landscape/source/css/_partial/footer.styl create mode 100644 themes/landscape/source/css/_partial/header.styl create mode 100644 themes/landscape/source/css/_partial/highlight.styl create mode 100644 themes/landscape/source/css/_partial/mobile.styl create mode 100644 themes/landscape/source/css/_partial/sidebar-aside.styl create mode 100644 themes/landscape/source/css/_partial/sidebar-bottom.styl create mode 100644 themes/landscape/source/css/_partial/sidebar.styl create mode 100644 themes/landscape/source/css/_util/grid.styl create mode 100644 themes/landscape/source/css/_util/mixin.styl create mode 100644 themes/landscape/source/css/_variables.styl create mode 100644 themes/landscape/source/css/fonts/FontAwesome.otf create mode 100644 themes/landscape/source/css/fonts/fontawesome-webfont.eot create mode 100644 themes/landscape/source/css/fonts/fontawesome-webfont.svg create mode 100644 themes/landscape/source/css/fonts/fontawesome-webfont.ttf create mode 100644 themes/landscape/source/css/fonts/fontawesome-webfont.woff create mode 100644 themes/landscape/source/css/images/banner.jpg create mode 100644 themes/landscape/source/css/style.styl create mode 100644 themes/landscape/source/fancybox/blank.gif create mode 100644 themes/landscape/source/fancybox/fancybox_loading.gif create mode 100644 themes/landscape/source/fancybox/fancybox_loading@2x.gif create mode 100644 themes/landscape/source/fancybox/fancybox_overlay.png create mode 100644 themes/landscape/source/fancybox/fancybox_sprite.png create mode 100644 themes/landscape/source/fancybox/fancybox_sprite@2x.png create mode 100644 themes/landscape/source/fancybox/helpers/fancybox_buttons.png create mode 100644 themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.css create mode 100644 themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.js create mode 100644 themes/landscape/source/fancybox/helpers/jquery.fancybox-media.js create mode 100644 themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.css create mode 100644 themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.js create mode 100644 themes/landscape/source/fancybox/jquery.fancybox.css create mode 100644 themes/landscape/source/fancybox/jquery.fancybox.js create mode 100644 themes/landscape/source/fancybox/jquery.fancybox.pack.js create mode 100644 themes/landscape/source/js/script.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..063b0e4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +.DS_Store +Thumbs.db +db.json +*.log +node_modules/ +public/ +.deploy*/ \ No newline at end of file diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..7c11a2d --- /dev/null +++ b/_config.yml @@ -0,0 +1,73 @@ +# Hexo Configuration +## Docs: http://hexo.io/docs/configuration.html +## Source: https://github.com/hexojs/hexo/ + +# Site +title: Cool King +subtitle: 酷王——菜鸟的打怪升级之路 +description: +author: Cool King +language: zh-CN +timezone: + +# URL +## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' +url: http://yoursite.com +root: / +permalink: :year/:month/:day/:title/ +permalink_defaults: + +# Directory +source_dir: source +public_dir: public +tag_dir: tags +archive_dir: archives +category_dir: categories +code_dir: downloads/code +i18n_dir: :lang +skip_render: + +# Writing +new_post_name: :title.md # File name of new posts +default_layout: post +titlecase: false # Transform title into titlecase +external_link: true # Open external links in new tab +filename_case: 0 +render_drafts: false +post_asset_folder: false +relative_link: false +future: true +highlight: + enable: true + line_number: true + auto_detect: true + tab_replace: + +# Category & Tag +default_category: uncategorized +category_map: +tag_map: + +# Date / Time format +## Hexo uses Moment.js to parse and display date +## You can customize the date format as defined in +## http://momentjs.com/docs/#/displaying/format/ +date_format: YYYY-MM-DD +time_format: HH:mm:ss + +# Pagination +## Set per_page to 0 to disable pagination +per_page: 10 +pagination_dir: page + +# Extensions +## Plugins: http://hexo.io/plugins/ +## Themes: http://hexo.io/themes/ +theme: hexo-theme-yilia + +# Deployment +## Docs: http://hexo.io/docs/deployment.html +deploy: + type: git + repository: git@github.com:codingstar/codingstar.github.io.git + branch: master \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..71fcc30 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "hexo-site", + "version": "0.0.0", + "private": true, + "hexo": { + "version": "3.1.1" + }, + "dependencies": { + "hexo": "^3.1.1", + "hexo-deployer-git": "0.0.4", + "hexo-generator-archive": "^0.1.2", + "hexo-generator-category": "^0.1.2", + "hexo-generator-index": "^0.1.2", + "hexo-generator-tag": "^0.1.1", + "hexo-renderer-ejs": "^0.1.0", + "hexo-renderer-marked": "^0.2.4", + "hexo-renderer-stylus": "^0.2.0", + "hexo-server": "^0.1.2" + } +} diff --git a/scaffolds/draft.md b/scaffolds/draft.md new file mode 100644 index 0000000..45b1bb7 --- /dev/null +++ b/scaffolds/draft.md @@ -0,0 +1,3 @@ +title: {{ title }} +tags: +--- diff --git a/scaffolds/page.md b/scaffolds/page.md new file mode 100644 index 0000000..f484b76 --- /dev/null +++ b/scaffolds/page.md @@ -0,0 +1,3 @@ +title: {{ title }} +date: {{ date }} +--- diff --git a/scaffolds/post.md b/scaffolds/post.md new file mode 100644 index 0000000..c590d7a --- /dev/null +++ b/scaffolds/post.md @@ -0,0 +1,4 @@ +title: {{ title }} +date: {{ date }} +tags: +--- diff --git a/source/_posts/SCBPM-paper-note.md b/source/_posts/SCBPM-paper-note.md new file mode 100644 index 0000000..2675d99 --- /dev/null +++ b/source/_posts/SCBPM-paper-note.md @@ -0,0 +1,195 @@ +title: SCBPM paper note +date: 2015-06-08 20:15:04 +tags: [学术] +--- +Recently, I read a paper named . Here is some notes about it. + +#Abstract + +### Extraction +* The automatic extraction of metadata and other information from scholarly documents +* In academic digital libraries, search engines, and document management systems +* To allow for the management and categorization of documents and for search to take place + +### A Web-accessible API can *simplify* this extraction +> by providing a single point of operation for extraction that can be incorporated into multiple document workflows without the need for each workflow to implement and support its own extraction functionality + +CiteSeerExtractor +* a *RESTful API* for scholarly information extraction that exploits the fact that there is duplication in scholarly big data and makes use of a near duplicate matching backend + +* the duplicate document matching results in a difference of *8.46%* in the time required to extract header and citation information from approximately *3.5 million* documents compared to a baseline. + +#Introduction + +### Scholarly big data +> refers to the vast amount of data produced as the result of scholarly undertaking and includes journals, conference proceedings, theses, books, patents and experimental data. + +### three V’s => big data +* volume + Microsoft Academic contains over 50 million records for academic documents and that about 43% of the articles published between the years 2008 and 2011 are freely available online +* velocity + in 2010, the annual growth rates of several popular academic databases between 1997 and 2006 ranged from 2.7 to 13.5% +* variety + the the different types of scholarly output that is produced + +furthermore +* value +* veracity +* viscosity +* vulnerability + +### services for managing and providing access to scholarly big data +* Google Scholar +* Microsoft Academic +* CiteSeerχ +* the ArXiv + they are automatic metadata extraction. + +Web-accessible API => simplify this extraction +* provide a single point of operation that can be incorporated into multiple document and scientific workflows +* allow for *easier processing* of data + +since in scholarly publications <= duplication is common +in big data scale, methods are need to improve ectractor performance + +### CiteSeerExtractor +a Web service for scholar information extraction that deals with the issue of big data by storing metadata after it is extracted + +when a new paper is submitted, check if it matches with a previously submitted document + +*The document matching algorithm* is able to deal with matches that are not bitwise identical and that might have minor differences. + +#Related Work +### ParsCit +users submit the plain text of papers then returns the parsed citations + +### GROBID +a library for extracting metadata form scholarly documents +* header metadata, citation metadata & parse the metadata + +includes a RESTful API -> access the service from other programs +* match extracted metadata with Crossref +* if core metadata, such as the title or first author, is matched, +* then the system attempts to retrieve the full publisher metadata. + +### FreeCite +* based on ParsCit +* users submit a single citation string or list of citation strings and they are parsed and tagged. + +### CiteSeerExtractor +* provides a generic framework that can easily be extended to allow for additional extractors to be incorporated (Section IV) + +none of these services specifically try to address the *challenges of big data* +by making use of *near duplicate matching* + +Some tools make use of Web services to perform or improve metadata extraction showing how Web services can be incorporated into metadata extraction workflows + +* PDFMeat +* Mendeley +* Gao's similar system + +#API Design + +### Resource Oriented Architecture + +### CiteSeerExtractor +> a RESTful Web service based on the Resource Oriented Architecture (ROA 资源导向架构). + +benefits: +* being lightweight +* scalable +* easily accessible + +ROA's main concepts: +* resources: + > something that is important enough that it is worth being referenced +* identifiers: + > a URI that is unique for the resource and that allows for one of the **representations of the resource** to be accessed, where a representation of a resource is some view of that resources +* representations of resources +* the links between resources + +ROA's main properties: +* addressability: information is exposed through URIs +* statelessness: HTTP requests are independent of each other and can happen in isolation +* connectedness: there are links between content +* a uniform interface: HTTP provides a uniform interface + +1. *Resources* + > Documents (PDF, PS, TXT) +* Submit a `POST` request to the extractor URL +* Create a new document resource in CiteSeerExtractor +* the text from the document is automatically extracted(PDFBox->pdf, ps2txt->ps) +* return different status code(201 success & XML/JSON document, 503 error, over size) + + + base url/extractor/token/file +
base url/extractor/token/header
+ base url/extractor/token/citations + base url/extractor/token/body + base url/extractor/token/text + +2. *identifiers* + a *unique and random* identifier is assigned when a resource has successfully been created + * violates the ROA practice of having wellnamed resources + * simplifies the resource naming procedure + * since the resources are for the most part temporary, was considered a reasonable approach +3. *representations* + > different views of a resource + in CiteSeerExtractor represent different types of information extracted from the original document as well as the document itself + --> access a resource in CiteSeerExtractor, + an HTTP `GET` request is made to `http://$url/extractor/resource id/representation` and if success, returns an `HTTP 200 OK` status code. + * **file**: The original document that was submitted. + * **header**: The header of the document, including the + title, authors, abstract, venue and any other information + that may be extracted. + * **citations**: The citations extracted from the document. + * **body**: The main body text of the document, excluding + the citations. + * **text**: The full text of the document as extracted by an + appropriate text extraction tool. + +4. *Addressability, Statelessness, Connectedness, and Uniformity* + + +### HTTP Methods +Cite-SeerExtractor supports different **HTTP methods** and **output formats**(XML,JSON). +![HTTP METHODS SUPPORTED BY CITESEEREXTRACTOR](./table1.png "HTTP METHODS SUPPORTED BY CITESEEREXTRACTOR") + +# Architecture +* stand-alone +* able to run in isolation +* able to be integrated with a number of services + +Figure 2 shows the overarching architecture of CiteSeerExtractor +![CiteSeerExtractor architecture](./figure2.png "CiteSeerExtractor architecture") + +As can be seen from the figure, the RESTful API is the entry point and communicates directly with the Python Web Server, which is responsible for handling the creation of resources and for serving various representations of those resources. Security and permissions can also be controlled and implemented at the Python Web Server level. + +### the RESTful API: +handle the creation of resources and serve various representations of those resources.
+provides the functionality as described in Section III. + +### Python Web Serer +CiteSeerExtractor is run as a stand-alone Web server and is implemented using the web.py framework. + +### Extractors +1. Text Extractor: PDFBox for pdf, ps2txt for ps +2. Citation Extractor: ParsCit +3. Header Extractor: based on a tool that classifies various aspects of a header using a support vector machine +4. Body Extractor: the body of text, excluding the citations. + +### File Store +Documents and their associated text representations + +Access, config the permissions or delete the files on the Web server + +##Duplicate Matching Backend +NoSQL backend + +# Duplicate Matching Backend +The purpose of this backend is to store metadata that has already been extracted and retrieve the metadata if a document submitted is a near duplicate of a document that has previously been submitted. + +the performing duplicate matching does not have a detrimental effect on the performance of the system. + +### Near Duplicate Matching Algorithm +![Duplicate Matching Algorithm](./algorithm1.png "Duplicate Matching Algorithm") \ No newline at end of file diff --git a/source/_posts/daily-life.md b/source/_posts/daily-life.md new file mode 100644 index 0000000..d678a4b --- /dev/null +++ b/source/_posts/daily-life.md @@ -0,0 +1,28 @@ +title: 逐渐走上正轨 +date: 2015-05-28 21:23:17 +tags: [总结,生活] +--- +今天，总算是搭好了自己的博客~作为一个有志向的程序媛肿么能木有一个自己的地盘儿捏~~ + +最近事情有点多，理一下吧~ +qdg的项目必须暂时放一放了，待做的事情有： + +1. 【修改】权限管理里面分页的onclick事件绑定方式fun(this)； `done 05-30` +2. 【修改】菜单里的折叠问题； `done 05-30` +3. 【修改】登录界面； `done 05-31` +4. 【添加】header-bar的信息显示； +5. 【添加】退出功能； + +然后就是checkpass的项目，虽然坑，但是还是得做啊。。。_(:зゝ∠)_ +整理出了首先必须做的东西： + +1. 【完成】转账功能的前后连接； `done 2015-05-30` +2. 【完成】注册和退出功能；(nsl) +3. 【修改】完善后台代码健壮性； +4. *【亟需】APP调试*，运行、加webview。 + +比赛：了解基础app + +孵化园：入园材料的准备 + +总之，道阻且长！加油吧骚年！↖(^ω^)↗握爪！ \ No newline at end of file diff --git a/source/_posts/daily-work.md b/source/_posts/daily-work.md new file mode 100644 index 0000000..90a1d69 --- /dev/null +++ b/source/_posts/daily-work.md @@ -0,0 +1,8 @@ +title: 日常 +date: 2015-06-02 11:18:35 +tags: [总结,生活] +--- +昨天尝试用Semantic-ui做了个Easy统计的个人中心，感觉很酷炫~ +回来之后要修改页面的布局，写文档，合成app。 + +暂时就这样吧 \ No newline at end of file diff --git a/source/_posts/develop-notes.md b/source/_posts/develop-notes.md new file mode 100644 index 0000000..23f29dd --- /dev/null +++ b/source/_posts/develop-notes.md @@ -0,0 +1,4 @@ +title: develop notes +date: 2015-06-23 21:00:08 +tags: +--- diff --git a/source/_posts/hello-world.md b/source/_posts/hello-world.md new file mode 100644 index 0000000..d2f9892 --- /dev/null +++ b/source/_posts/hello-world.md @@ -0,0 +1,37 @@ +title: Hello World +--- +Welcome to [Hexo](http://hexo.io/)! This is your very first post. Check [documentation](http://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](http://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues). + +## Quick Start + +### Create a new post + +``` bash +$ hexo new "My New Post" +``` + +More info: [Writing](http://hexo.io/docs/writing.html) + +### Run server + +``` bash +$ hexo server +``` + +More info: [Server](http://hexo.io/docs/server.html) + +### Generate static files + +``` bash +$ hexo generate +``` + +More info: [Generating](http://hexo.io/docs/generating.html) + +### Deploy to remote sites + +``` bash +$ hexo deploy +``` + +More info: [Deployment](http://hexo.io/docs/deployment.html) diff --git a/source/_posts/hexo-with-github.md b/source/_posts/hexo-with-github.md new file mode 100644 index 0000000..f1cf4b9 --- /dev/null +++ b/source/_posts/hexo-with-github.md @@ -0,0 +1,77 @@ +title: 用Github Pages搭建Hexo个人博客 +date: 2015-05-28 09:46:51 +tags: [Github,Hexo,技术] +--- + +Hexo是一种静态博客程序，初次使用，具体效果还不确定，但据说很好用，于是就来试试啦~ + +搭建过程很简单 + +## 安装基本工具 + +首先需要安装nodejs、npm、git，这个之前都用到过，具体安装配置方法就不赘述了。 + +### Github相关 + +注册Github账号，添加ssh公钥等基本配置。然后新建一个仓库，*一定*要命名为`username.github.io`，`username`是你Github的账号。 + +## 安装Hexo + +我现在安装的是hexo3.1+，从版本3往上有些地方跟以前用法不同，按以前的资料操作可能会出现问题，因此查阅资料的时候注意下别人用的版本~ + +可以用Git Bash或终端输入以下命令，#后的为注释。 +``` bash + $ npm install hexo -g #全局安装hexo，有些资料写的是npm install hexo-cli -g，应该按这个来，不过没试过 + $ npm install hexo-deployer-git --save #安装git部署插件，hexo3.0开始必须要这样，不然无法部署 +``` + +cd到你想放博客的文件夹下，比如`E:/Hexo` +``` bash + $ hexo init #初始化，然后该文件夹下就会有一系列的文件 + $ npm install #安装依赖包，这步之前忘记过 +``` + +然后就可以本地查看你的博客啦~ +``` bash + $ hexo g #即编译，hexo generate + $ hexo s #即启动服务器，hexo server +``` +查看`http://localhost:4000/`就可以访问到你的博客啦~ + +## 部署到Github +编辑`E:/Hexo`下的`_config.yml`文件，在文件最下方修改`deploy:`部分为 +``` bash + deploy: + type: git + repository: git@github.com:codingstar/codingstar.github.io.git + branch: master +``` +其中repository部分填写自己的远程仓库的git地址。hexo3.0以上的type应为git而不是github。 + +同时在这个文件开头，也可以修改自己博客的名字、作者等信息，或者绑定已有域名。 + +修改完`_config.yml`文件后，我们可以通过下面的命令部署到Github +``` bash + $ hexo g + $ hexo d #等同于hexo deploy +``` +至此，你可以访问`http://codingstar.github.io/`查看你的博客啦~ + +## Hexo主题 +安装Hexo的主题很简单，只要打开`E:\Hexo\themes\`，然后在这里clone你想要的主题，比如我现在用的主题： +``` bash + $ git clone https://github.com/litten/hexo-theme-yilia.git + $ cd hexo-theme-yilia + $ npm install +``` +然后在`E:\Hexo\_config.yml`中的theme项改为你的主题的文件夹名字即可。 + +## 发表一个文章 +1、在终端执行 `$ hexo new "my new post"` +2、在`E:\Hexo\source\_post`下打开my-new-post.md文件，参考[markdown 简明语法](http://lutaf.com/markdown-simple-usage.htm)，[Markdown 语法说明 (简体中文版)](http://wowubuntu.com/markdown/#html)，很快就能学会~ + +## 参考资料 +1、[使用Hexo搭建个人博客(基于hexo3.0)](http://opiece.me/2015/04/09/hexo-guide/) +2、[升级hexo3遇到的坑](http://ningban.github.io/2015/03/19/hexo3-is-awesome/) +3、[Hexo搭建Github静态博客](http://www.cnblogs.com/zhcncn/p/4097881.html) +4、[如何搭建一个独立博客——简明Github Pages与Hexo教程](http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/) \ No newline at end of file diff --git a/themes/hexo-theme-yilia b/themes/hexo-theme-yilia new file mode 160000 index 0000000..415d35d --- /dev/null +++ b/themes/hexo-theme-yilia @@ -0,0 +1 @@ +Subproject commit 415d35deade88c3e5da9b4ed4add093cf5cf5ff8 diff --git a/themes/landscape/Gruntfile.js b/themes/landscape/Gruntfile.js new file mode 100644 index 0000000..59fd5df --- /dev/null +++ b/themes/landscape/Gruntfile.js @@ -0,0 +1,46 @@ +module.exports = function(grunt){ + grunt.initConfig({ + gitclone: { + fontawesome: { + options: { + repository: 'https://github.com/FortAwesome/Font-Awesome.git', + directory: 'tmp/fontawesome' + }, + }, + fancybox: { + options: { + repository: 'https://github.com/fancyapps/fancyBox.git', + directory: 'tmp/fancybox' + } + } + }, + copy: { + fontawesome: { + expand: true, + cwd: 'tmp/fontawesome/fonts/', + src: ['**'], + dest: 'source/css/fonts/' + }, + fancybox: { + expand: true, + cwd: 'tmp/fancybox/source/', + src: ['**'], + dest: 'source/fancybox/' + } + }, + _clean: { + tmp: ['tmp'], + fontawesome: ['source/css/fonts'], + fancybox: ['source/fancybox'] + } + }); + + require('load-grunt-tasks')(grunt); + + grunt.renameTask('clean', '_clean'); + + grunt.registerTask('fontawesome', ['gitclone:fontawesome', 'copy:fontawesome', '_clean:tmp']); + grunt.registerTask('fancybox', ['gitclone:fancybox', 'copy:fancybox', '_clean:tmp']); + grunt.registerTask('default', ['gitclone', 'copy', '_clean:tmp']); + grunt.registerTask('clean', ['_clean']); +}; \ No newline at end of file diff --git a/themes/landscape/LICENSE b/themes/landscape/LICENSE new file mode 100644 index 0000000..9ce4d32 --- /dev/null +++ b/themes/landscape/LICENSE @@ -0,0 +1,7 @@ +Copyright (c) 2013 Tommy Chen + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/themes/landscape/README.md b/themes/landscape/README.md new file mode 100644 index 0000000..8295fbe --- /dev/null +++ b/themes/landscape/README.md @@ -0,0 +1,111 @@ +# Landscape + +A brand new default theme for [Hexo]. + +- [Preview](http://hexo.io/hexo-theme-landscape/) + +## Installation + +### Install + +``` bash +$ git clone https://github.com/hexojs/hexo-theme-landscape.git themes/landscape +``` + +**Landscape requires Hexo 2.4 and above.** + +### Enable + +Modify `theme` setting in `_config.yml` to `landscape`. + +### Update + +``` bash +cd themes/landscape +git pull +``` + +## Configuration + +``` yml +# Header +menu: + Home: / + Archives: /archives +rss: /atom.xml + +# Content +excerpt_link: Read More +fancybox: true + +# Sidebar +sidebar: right +widgets: +- category +- tag +- tagcloud +- archives +- recent_posts + +# Miscellaneous +google_analytics: +favicon: /favicon.png +twitter: +google_plus: +``` + +- **menu** - Navigation menu +- **rss** - RSS link +- **excerpt_link** - "Read More" link at the bottom of excerpted articles. `false` to hide the link. +- **fancybox** - Enable [Fancybox] +- **sidebar** - Sidebar style. You can choose `left`, `right`, `bottom` or `false`. +- **widgets** - Widgets displaying in sidebar +- **google_analytics** - Google Analytics ID +- **favicon** - Favicon path +- **twitter** - Twiiter ID +- **google_plus** - Google+ ID + +## Features + +### Fancybox + +Landscape uses [Fancybox] to showcase your photos. You can use Markdown syntax or fancybox tag plugin to add your photos. + +``` +![img caption](img url) + +{% fancybox img_url [img_thumbnail] [img_caption] %} +``` + +### Sidebar + +You can put your sidebar in left side, right side or bottom of your site by editing `sidebar` setting. + +Landscape provides 5 built-in widgets: + +- category +- tag +- tagcloud +- archives +- recent_posts + +All of them are enabled by default. You can edit them in `widget` setting. + +## Development + +### Requirements + +- [Grunt] 0.4+ +- Hexo 2.4+ + +### Grunt tasks + +- **default** - Download [Fancybox] and [Font Awesome]. +- **fontawesome** - Only download [Font Awesome]. +- **fancybox** - Only download [Fancybox]. +- **clean** - Clean temporarily files and downloaded files. + +[Hexo]: http://zespia.tw/hexo/ +[Fancybox]: http://fancyapps.com/fancybox/ +[Font Awesome]: http://fontawesome.io/ +[Grunt]: http://gruntjs.com/ diff --git a/themes/landscape/_config.yml b/themes/landscape/_config.yml new file mode 100644 index 0000000..85a1ccf --- /dev/null +++ b/themes/landscape/_config.yml @@ -0,0 +1,26 @@ +# Header +menu: + Home: / + Archives: /archives +rss: /atom.xml + +# Content +excerpt_link: Read More +fancybox: true + +# Sidebar +sidebar: right +widgets: +- category +- tag +- tagcloud +- archive +- recent_posts + +# Miscellaneous +google_analytics: +favicon: /favicon.png +twitter: +google_plus: +fb_admins: +fb_app_id: \ No newline at end of file diff --git a/themes/landscape/layout/_partial/after-footer.ejs b/themes/landscape/layout/_partial/after-footer.ejs new file mode 100644 index 0000000..3ddfbee --- /dev/null +++ b/themes/landscape/layout/_partial/after-footer.ejs @@ -0,0 +1,24 @@ +<% if (config.disqus_shortname){ %> + +<% } %> + + + +<% if (theme.fancybox){ %> + <%- css('fancybox/jquery.fancybox') %> + <%- js('fancybox/jquery.fancybox.pack') %> +<% } %> + +<%- js('js/script') %> diff --git a/themes/landscape/layout/_partial/archive-post.ejs b/themes/landscape/layout/_partial/archive-post.ejs new file mode 100644 index 0000000..36f2cc3 --- /dev/null +++ b/themes/landscape/layout/_partial/archive-post.ejs @@ -0,0 +1,8 @@ +
+
+
+ <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %> + <%- partial('post/title', {class_name: 'archive-article-title'}) %> +
+
+
\ No newline at end of file diff --git a/themes/landscape/layout/_partial/archive.ejs b/themes/landscape/layout/_partial/archive.ejs new file mode 100644 index 0000000..c2c994b --- /dev/null +++ b/themes/landscape/layout/_partial/archive.ejs @@ -0,0 +1,33 @@ +<% if (pagination == 2){ %> + <% page.posts.each(function(post){ %> + <%- partial('article', {post: post, index: true}) %> + <% }) %> + <% if (page.total > 1){ %> + + <% } %> +<% } else { %> + <% var last; %> + <% page.posts.each(function(post, i){ %> + <% var year = post.date.year(); %> + <% if (last != year){ %> + <% if (last != null){ %> + + <% } %> + <% last = year; %> +
+
+ <%= year %> +
+
+ <% } %> + <%- partial('archive-post', {post: post, even: i % 2 == 0}) %> + <% }) %> + <% if (page.posts.length){ %> +
+ <% } %> +<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_partial/article.ejs b/themes/landscape/layout/_partial/article.ejs new file mode 100644 index 0000000..84efe9c --- /dev/null +++ b/themes/landscape/layout/_partial/article.ejs @@ -0,0 +1,44 @@ +
+
+ <%- partial('post/date', {class_name: 'article-date', date_format: null}) %> + <%- partial('post/category') %> +
+
+ <%- partial('post/gallery') %> + <% if (post.link || post.title){ %> +
+ <%- partial('post/title', {class_name: 'article-title'}) %> +
+ <% } %> +
+ <% if (post.excerpt && index){ %> + <%- post.excerpt %> + <% if (theme.excerpt_link){ %> +

+ <%= theme.excerpt_link %> +

+ <% } %> + <% } else { %> + <%- post.content %> + <% } %> +
+
+ Share + <% if (post.comments && config.disqus_shortname){ %> + Comments + <% } %> + <%- partial('post/tag') %> +
+
+ <% if (!index){ %> + <%- partial('post/nav') %> + <% } %> +
+ +<% if (!index && post.comments && config.disqus_shortname){ %> +
+
+ +
+
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_partial/footer.ejs b/themes/landscape/layout/_partial/footer.ejs new file mode 100644 index 0000000..902d39c --- /dev/null +++ b/themes/landscape/layout/_partial/footer.ejs @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/themes/landscape/layout/_partial/google-analytics.ejs b/themes/landscape/layout/_partial/google-analytics.ejs new file mode 100644 index 0000000..84e75f0 --- /dev/null +++ b/themes/landscape/layout/_partial/google-analytics.ejs @@ -0,0 +1,14 @@ +<% if (theme.google_analytics){ %> + + + +<% } %> diff --git a/themes/landscape/layout/_partial/head.ejs b/themes/landscape/layout/_partial/head.ejs new file mode 100644 index 0000000..27f0d07 --- /dev/null +++ b/themes/landscape/layout/_partial/head.ejs @@ -0,0 +1,34 @@ + + + + + <% + var title = page.title; + + if (is_archive()){ + title = 'Archives'; + + if (is_month()){ + title += ': ' + page.year + '/' + page.month; + } else if (is_year()){ + title += ': ' + page.year; + } + } else if (is_category()){ + title = 'Category: ' + page.category; + } else if (is_tag()){ + title = 'Tag: ' + page.tag; + } + %> + <% if (title){ %><%= title %> | <% } %><%= config.title %> + + <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %> + <% if (theme.rss){ %> + + <% } %> + <% if (theme.favicon){ %> + + <% } %> + + <%- css('css/style') %> + <%- partial('google-analytics') %> + \ No newline at end of file diff --git a/themes/landscape/layout/_partial/header.ejs b/themes/landscape/layout/_partial/header.ejs new file mode 100644 index 0000000..d536d10 --- /dev/null +++ b/themes/landscape/layout/_partial/header.ejs @@ -0,0 +1,32 @@ + \ No newline at end of file diff --git a/themes/landscape/layout/_partial/mobile-nav.ejs b/themes/landscape/layout/_partial/mobile-nav.ejs new file mode 100644 index 0000000..7c1d2af --- /dev/null +++ b/themes/landscape/layout/_partial/mobile-nav.ejs @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/themes/landscape/layout/_partial/post/category.ejs b/themes/landscape/layout/_partial/post/category.ejs new file mode 100644 index 0000000..db2ed48 --- /dev/null +++ b/themes/landscape/layout/_partial/post/category.ejs @@ -0,0 +1,10 @@ +<% if (post.categories && post.categories.length){ %> +
+ <%- list_categories(post.categories, { + show_count: false, + class: 'article-category', + style: 'none', + separator: '►' + }) %> +
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_partial/post/date.ejs b/themes/landscape/layout/_partial/post/date.ejs new file mode 100644 index 0000000..3f49613 --- /dev/null +++ b/themes/landscape/layout/_partial/post/date.ejs @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/themes/landscape/layout/_partial/post/gallery.ejs b/themes/landscape/layout/_partial/post/gallery.ejs new file mode 100644 index 0000000..886c8ec --- /dev/null +++ b/themes/landscape/layout/_partial/post/gallery.ejs @@ -0,0 +1,11 @@ +<% if (post.photos && post.photos.length){ %> +
+
+ <% post.photos.forEach(function(photo, i){ %> + + + + <% }) %> +
+
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_partial/post/nav.ejs b/themes/landscape/layout/_partial/post/nav.ejs new file mode 100644 index 0000000..0406e5b --- /dev/null +++ b/themes/landscape/layout/_partial/post/nav.ejs @@ -0,0 +1,22 @@ +<% if (post.prev || post.next){ %> + +<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_partial/post/tag.ejs b/themes/landscape/layout/_partial/post/tag.ejs new file mode 100644 index 0000000..e0f327f --- /dev/null +++ b/themes/landscape/layout/_partial/post/tag.ejs @@ -0,0 +1,6 @@ +<% if (post.tags && post.tags.length){ %> + <%- list_tags(post.tags, { + show_count: false, + class: 'article-tag' + }) %> +<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_partial/post/title.ejs b/themes/landscape/layout/_partial/post/title.ejs new file mode 100644 index 0000000..69d646f --- /dev/null +++ b/themes/landscape/layout/_partial/post/title.ejs @@ -0,0 +1,15 @@ +<% if (post.link){ %> +

+ +

+<% } else if (post.title){ %> + <% if (index){ %> +

+ <%= post.title %> +

+ <% } else { %> +

+ <%= post.title %> +

+ <% } %> +<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_partial/sidebar.ejs b/themes/landscape/layout/_partial/sidebar.ejs new file mode 100644 index 0000000..c1e48e5 --- /dev/null +++ b/themes/landscape/layout/_partial/sidebar.ejs @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/themes/landscape/layout/_widget/archive.ejs b/themes/landscape/layout/_widget/archive.ejs new file mode 100644 index 0000000..9a428ba --- /dev/null +++ b/themes/landscape/layout/_widget/archive.ejs @@ -0,0 +1,8 @@ +<% if (site.posts.length){ %> +
+

Archives

+
+ <%- list_archives() %> +
+
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_widget/category.ejs b/themes/landscape/layout/_widget/category.ejs new file mode 100644 index 0000000..7836a27 --- /dev/null +++ b/themes/landscape/layout/_widget/category.ejs @@ -0,0 +1,8 @@ +<% if (site.categories.length){ %> +
+

Categories

+
+ <%- list_categories() %> +
+
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_widget/recent_posts.ejs b/themes/landscape/layout/_widget/recent_posts.ejs new file mode 100644 index 0000000..7780920 --- /dev/null +++ b/themes/landscape/layout/_widget/recent_posts.ejs @@ -0,0 +1,14 @@ +<% if (site.posts.length){ %> +
+

Recents

+
+ +
+
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_widget/tag.ejs b/themes/landscape/layout/_widget/tag.ejs new file mode 100644 index 0000000..c163c41 --- /dev/null +++ b/themes/landscape/layout/_widget/tag.ejs @@ -0,0 +1,8 @@ +<% if (site.tags.length){ %> +
+

Tags

+
+ <%- list_tags() %> +
+
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/_widget/tagcloud.ejs b/themes/landscape/layout/_widget/tagcloud.ejs new file mode 100644 index 0000000..4b82283 --- /dev/null +++ b/themes/landscape/layout/_widget/tagcloud.ejs @@ -0,0 +1,8 @@ +<% if (site.tags.length){ %> +
+

Tag Cloud

+
+ <%- tagcloud() %> +
+
+<% } %> \ No newline at end of file diff --git a/themes/landscape/layout/archive.ejs b/themes/landscape/layout/archive.ejs new file mode 100644 index 0000000..52f9b21 --- /dev/null +++ b/themes/landscape/layout/archive.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: config.archive, index: true}) %> \ No newline at end of file diff --git a/themes/landscape/layout/category.ejs b/themes/landscape/layout/category.ejs new file mode 100644 index 0000000..3ffe252 --- /dev/null +++ b/themes/landscape/layout/category.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: config.category, index: true}) %> \ No newline at end of file diff --git a/themes/landscape/layout/index.ejs b/themes/landscape/layout/index.ejs new file mode 100644 index 0000000..60a2c68 --- /dev/null +++ b/themes/landscape/layout/index.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: 2, index: true}) %> \ No newline at end of file diff --git a/themes/landscape/layout/layout.ejs b/themes/landscape/layout/layout.ejs new file mode 100644 index 0000000..cf88daf --- /dev/null +++ b/themes/landscape/layout/layout.ejs @@ -0,0 +1,18 @@ +<%- partial('_partial/head') %> + +
+
+ <%- partial('_partial/header', null, {cache: !config.relative_link}) %> +
+
<%- body %>
+ <% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> + <%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %> + <% } %> +
+ <%- partial('_partial/footer', null, {cache: !config.relative_link}) %> +
+ <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %> + <%- partial('_partial/after-footer') %> +
+ + \ No newline at end of file diff --git a/themes/landscape/layout/page.ejs b/themes/landscape/layout/page.ejs new file mode 100644 index 0000000..bea6318 --- /dev/null +++ b/themes/landscape/layout/page.ejs @@ -0,0 +1 @@ +<%- partial('_partial/article', {post: page, index: false}) %> \ No newline at end of file diff --git a/themes/landscape/layout/post.ejs b/themes/landscape/layout/post.ejs new file mode 100644 index 0000000..bea6318 --- /dev/null +++ b/themes/landscape/layout/post.ejs @@ -0,0 +1 @@ +<%- partial('_partial/article', {post: page, index: false}) %> \ No newline at end of file diff --git a/themes/landscape/layout/tag.ejs b/themes/landscape/layout/tag.ejs new file mode 100644 index 0000000..048cdb0 --- /dev/null +++ b/themes/landscape/layout/tag.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: config.tag, index: true}) %> \ No newline at end of file diff --git a/themes/landscape/package.json b/themes/landscape/package.json new file mode 100644 index 0000000..a11e9f6 --- /dev/null +++ b/themes/landscape/package.json @@ -0,0 +1,12 @@ +{ + "name": "hexo-theme-landscape", + "version": "0.0.1", + "private": true, + "devDependencies": { + "grunt": "~0.4.2", + "load-grunt-tasks": "~0.2.0", + "grunt-git": "~0.2.2", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-copy": "~0.4.1" + } +} diff --git a/themes/landscape/scripts/fancybox.js b/themes/landscape/scripts/fancybox.js new file mode 100644 index 0000000..83f1fdc --- /dev/null +++ b/themes/landscape/scripts/fancybox.js @@ -0,0 +1,24 @@ +var rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[.\!\/\\w]*))?)/; + +/** +* Fancybox tag +* +* Syntax: +* {% fancybox /path/to/image [/path/to/thumbnail] [title] %} +*/ + +hexo.extend.tag.register('fancybox', function(args){ + var original = args.shift(), + thumbnail = ''; + + if (args.length && rUrl.test(args[0])){ + thumbnail = args.shift(); + } + + var title = args.join(' '); + + return '' + + '' + title + '' + '' + + (title ? '' + title + '' : ''); +}); \ No newline at end of file diff --git a/themes/landscape/source/css/_extend.styl b/themes/landscape/source/css/_extend.styl new file mode 100644 index 0000000..96a1817 --- /dev/null +++ b/themes/landscape/source/css/_extend.styl @@ -0,0 +1,63 @@ +$block-caption + text-decoration: none + text-transform: uppercase + letter-spacing: 2px + color: color-grey + margin-bottom: 1em + margin-left: 5px + line-height: 1em + text-shadow: 0 1px #fff + font-weight: bold + +$block + background: #fff + box-shadow: 1px 2px 3px #ddd + border: 1px solid color-border + border-radius: 3px + +$base-style + h1 + font-size: 2em + h2 + font-size: 1.5em + h3 + font-size: 1.3em + h4 + font-size: 1.2em + h5 + font-size: 1em + h6 + font-size: 1em + color: color-grey + hr + border: 1px dashed color-border + strong + font-weight: bold + em, cite + font-style: italic + sup, sub + font-size: 0.75em + line-height: 0 + position: relative + vertical-align: baseline + sup + top: -0.5em + sub + bottom: -0.2em + small + font-size: 0.85em + acronym, abbr + border-bottom: 1px dotted + ul, ol, dl + margin: 0 20px + line-height: line-height + ul, ol + ul, ol + margin-top: 0 + margin-bottom: 0 + ul + list-style: disc + ol + list-style: decimal + dt + font-weight: bold \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/archive.styl b/themes/landscape/source/css/_partial/archive.styl new file mode 100644 index 0000000..90ef053 --- /dev/null +++ b/themes/landscape/source/css/_partial/archive.styl @@ -0,0 +1,80 @@ +.archives-wrap + margin: block-margin 0 + +.archives + clearfix() + +.archive-year-wrap + margin-bottom: 1em + +.archive-year + @extend $block-caption + +.archives + column-gap: 10px + @media mq-tablet + column-count: 2 + @media mq-normal + column-count: 3 + +.archive-article + avoid-column-break() + +.archive-article-inner + @extend $block + padding: 10px + margin-bottom: 15px + +.archive-article-title + text-decoration: none + font-weight: bold + color: color-default + transition: color 0.2s + line-height: line-height + &:hover + color: color-link + +.archive-article-footer + margin-top: 1em + +.archive-article-date + color: color-grey + text-decoration: none + font-size: 0.85em + line-height: 1em + margin-bottom: 0.5em + display: block + +#page-nav + clearfix() + margin: block-margin auto + background: #fff + box-shadow: 1px 2px 3px #ddd + border: 1px solid color-border + border-radius: 3px + text-align: center + color: color-grey + overflow: hidden + a, span + padding: 10px 20px + line-height: 1 + height: 2ex + a + color: color-grey + text-decoration: none + &:hover + background: color-grey + color: #fff + .prev + float: left + .next + float: right + .page-number + display: inline-block + @media mq-mobile + display: none + .current + color: color-default + font-weight: bold + .space + color: color-border \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/article.styl b/themes/landscape/source/css/_partial/article.styl new file mode 100644 index 0000000..46094f9 --- /dev/null +++ b/themes/landscape/source/css/_partial/article.styl @@ -0,0 +1,357 @@ +.article + margin: block-margin 0 + +.article-inner + @extend $block + overflow: hidden + +.article-meta + clearfix() + +.article-date + @extend $block-caption + float: left + +.article-category + float: left + line-height: 1em + color: #ccc + text-shadow: 0 1px #fff + margin-left: 8px + &:before + content: "\2022" + +.article-category-link + @extend $block-caption + margin: 0 12px 1em + +.article-header + padding: article-padding article-padding 0 + +.article-title + text-decoration: none + font-size: 2em + font-weight: bold + color: color-default + line-height: line-height-title + transition: color 0.2s + a&:hover + color: color-link + +.article-entry + @extend $base-style + clearfix() + color: color-default + padding: 0 article-padding + p, table + line-height: line-height + margin: line-height 0 + h1, h2, h3, h4, h5, h6 + font-weight: bold + h1, h2, h3, h4, h5, h6 + line-height: line-height-title + margin: line-height-title 0 + a + color: color-link + text-decoration: none + &:hover + text-decoration: underline + ul, ol, dl + margin-top: line-height + margin-bottom: line-height + img, video + max-width: 100% + height: auto + display: block + margin: auto + iframe + border: none + table + width: 100% + border-collapse: collapse + border-spacing: 0 + th + font-weight: bold + border-bottom: 3px solid color-border + padding-bottom: 0.5em + td + border-bottom: 1px solid color-border + padding: 10px 0 + blockquote + font-family: font-serif + font-size: 1.4em + margin: line-height 20px + text-align: center + footer + font-size: font-size + margin: line-height 0 + font-family: font-sans + cite + &:before + content: "—" + padding: 0 0.5em + .pullquote + text-align: left + width: 45% + margin: 0 + &.left + margin-left: 0.5em + margin-right: 1em + &.right + margin-right: 0.5em + margin-left: 1em + .caption + color: color-grey + display: block + font-size: 0.9em + margin-top: 0.5em + position: relative + text-align: center + // http://webdesignerwall.com/tutorials/css-elastic-videos + .video-container + position: relative + padding-top: (9 / 16 * 100)% // 16:9 ratio + height: 0 + overflow: hidden + iframe, object, embed + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + margin-top: 0 + +.article-more-link a + display: inline-block + line-height: 1em + padding: 6px 15px + border-radius: 15px + background: color-background + color: color-grey + text-shadow: 0 1px #fff + text-decoration: none + &:hover + background: color-link + color: #fff + text-decoration: none + text-shadow: 0 1px darken(color-link, 20%) + +.article-footer + clearfix() + font-size: 0.85em + line-height: line-height + border-top: 1px solid color-border + padding-top: line-height + margin: 0 article-padding article-padding + a + color: color-grey + text-decoration: none + &:hover + color: color-default + +.article-tag-list-item + float: left + margin-right: 10px + +.article-tag-list-link + &:before + content: "#" + +.article-comment-link + float: right + &:before + content: "\f075" + font-family: font-icon + padding-right: 8px + +.article-share-link + cursor: pointer + float: right + margin-left: 20px + &:before + content: "\f064" + font-family: font-icon + padding-right: 6px + +#article-nav + clearfix() + position: relative + @media mq-normal + margin: block-margin 0 + &:before + absolute-center(8px) + content: "" + border-radius: 50% + background: color-border + box-shadow: 0 1px 2px #fff + +.article-nav-link-wrap + text-decoration: none + text-shadow: 0 1px #fff + color: color-grey + box-sizing: border-box + margin-top: block-margin + text-align: center + display: block + &:hover + color: color-default + @media mq-normal + width: 50% + margin-top: 0 + +#article-nav-newer + @media mq-normal + float: left + text-align: right + padding-right: 20px + +#article-nav-older + @media mq-normal + float: right + text-align: left + padding-left: 20px + +.article-nav-caption + text-transform: uppercase + letter-spacing: 2px + color: color-border + line-height: 1em + font-weight: bold + #article-nav-newer & + margin-right: -2px + +.article-nav-title + font-size: 0.85em + line-height: line-height + margin-top: 0.5em + +.article-share-box + position: absolute + display: none + background: #fff + box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2) + border-radius: 3px + margin-left: -145px + overflow: hidden + z-index: 1 + &.on + display: block + +.article-share-input + width: 100% + background: none + box-sizing: border-box + font: 14px font-sans + padding: 0 15px + color: color-default + outline: none + border: 1px solid color-border + border-radius: 3px 3px 0 0 + height: 36px + line-height: 36px + +.article-share-links + clearfix() + background: color-background + +$article-share-link + width: 50px + height: 36px + display: block + float: left + position: relative + color: #999 + text-shadow: 0 1px #fff + &:before + font-size: 20px + font-family: font-icon + absolute-center(@font-size) + text-align: center + &:hover + color: #fff + +.article-share-twitter + @extend $article-share-link + &:before + content: "\f099" + &:hover + background: color-twitter + text-shadow: 0 1px darken(color-twitter, 20%) + +.article-share-facebook + @extend $article-share-link + &:before + content: "\f09a" + &:hover + background: color-facebook + text-shadow: 0 1px darken(color-facebook, 20%) + +.article-share-pinterest + @extend $article-share-link + &:before + content: "\f0d2" + &:hover + background: color-pinterest + text-shadow: 0 1px darken(color-pinterest, 20%) + +.article-share-google + @extend $article-share-link + &:before + content: "\f0d5" + &:hover + background: color-google + text-shadow: 0 1px darken(color-google, 20%) + +.article-gallery + background: #000 + position: relative + +.article-gallery-photos + position: relative + overflow: hidden + +.article-gallery-img + display: none + max-width: 100% + &:first-child + display: block + &.loaded + position: absolute + display: block + img + display: block + max-width: 100% + margin: 0 auto +/* +$article-gallery-ctrl + position: absolute + top: 0 + height: 100% + width: 60px + color: #fff + text-shadow: 0 0 3px rgba(0, 0, 0, 0.3) + opacity: 0.3 + transition: opacity 0.2s + cursor: pointer + &:hover + opacity: 0.8 + &:before + font-size: 30px + font-family: font-icon + position: absolute + top: 50% + margin-top: @font-size * -0.5 + +.article-gallery-prev + @extend $article-gallery-ctrl + left: 0 + &:before + content: "\f053" + left: 15px + +.article-gallery-next + @extend $article-gallery-ctrl + right: 0 + &:before + content: "\f054" + right: 15px*/ \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/comment.styl b/themes/landscape/source/css/_partial/comment.styl new file mode 100644 index 0000000..296b7dd --- /dev/null +++ b/themes/landscape/source/css/_partial/comment.styl @@ -0,0 +1,9 @@ +#comments + background: #fff + box-shadow: 1px 2px 3px #ddd + padding: article-padding + border: 1px solid color-border + border-radius: 3px + margin: block-margin 0 + a + color: color-link \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/footer.styl b/themes/landscape/source/css/_partial/footer.styl new file mode 100644 index 0000000..fe2fd24 --- /dev/null +++ b/themes/landscape/source/css/_partial/footer.styl @@ -0,0 +1,14 @@ +#footer + background: color-footer-background + padding: 50px 0 + border-top: 1px solid color-border + color: color-grey + a + color: color-link + text-decoration: none + &:hover + text-decoration: underline + +#footer-info + line-height: line-height + font-size: 0.85em \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/header.styl b/themes/landscape/source/css/_partial/header.styl new file mode 100644 index 0000000..d18ebc8 --- /dev/null +++ b/themes/landscape/source/css/_partial/header.styl @@ -0,0 +1,165 @@ +#header + height: banner-height + position: relative + border-bottom: 1px solid color-border + &:before, &:after + content: "" + position: absolute + left: 0 + right: 0 + height: 40px + &:before + top: 0 + background: linear-gradient(rgba(0, 0, 0, 0.2), transparent) + &:after + bottom: 0 + background: linear-gradient(transparent, rgba(0, 0, 0, 0.2)) + +#header-outer + height: 100% + position: relative + +#header-inner + position: relative + overflow: hidden + +#banner + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + background: url(banner-url) center #000 + background-size: cover + z-index: -1 + +#header-title + text-align: center + height: logo-size + position: absolute + top: 50% + left: 0 + margin-top: logo-size * -0.5 + +$logo-text + text-decoration: none + color: #fff + font-weight: 300 + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) + +#logo + @extend $logo-text + font-size: logo-size + line-height: logo-size + letter-spacing: 2px + +#subtitle + @extend $logo-text + font-size: subtitle-size + line-height: subtitle-size + letter-spacing: 1px + +#subtitle-wrap + margin-top: subtitle-size + +#main-nav + float: left + margin-left: -15px + +$nav-link + float: left + color: #fff + opacity: 0.6 + text-decoration: none + text-shadow: 0 1px rgba(0, 0, 0, 0.2) + transition: opacity 0.2s + display: block + padding: 20px 15px + &:hover + opacity: 1 + +.nav-icon + @extend $nav-link + font-family: font-icon + text-align: center + font-size: font-size + width: font-size + height: font-size + padding: 20px 15px + position: relative + cursor: pointer + +.main-nav-link + @extend $nav-link + font-weight: 300 + letter-spacing: 1px + @media mq-mobile + display: none + +#main-nav-toggle + display: none + &:before + content: "\f0c9" + @media mq-mobile + display: block + +#sub-nav + float: right + margin-right: -15px + +#nav-rss-link + &:before + content: "\f09e" + +#nav-search-btn + &:before + content: "\f002" + +#search-form-wrap + position: absolute + top: 15px + width: 150px + height: 30px + right: -150px + opacity: 0 + transition: 0.2s ease-out + &.on + opacity: 1 + right: 0 + @media mq-mobile + width: 100% + right: -100% + +.search-form + position: absolute + top: 0 + left: 0 + right: 0 + background: #fff + padding: 5px 15px + border-radius: 15px + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) + +.search-form-input + border: none + background: none + color: color-default + width: 100% + font: 13px font-sans + outline: none + &::-webkit-search-results-decoration + &::-webkit-search-cancel-button + -webkit-appearance: none + +.search-form-submit + position: absolute + top: 50% + right: 10px + margin-top: -7px + font: 13px font-icon + border: none + background: none + color: #bbb + cursor: pointer + &:hover, &:focus + color: #777 \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/highlight.styl b/themes/landscape/source/css/_partial/highlight.styl new file mode 100644 index 0000000..ccc352c --- /dev/null +++ b/themes/landscape/source/css/_partial/highlight.styl @@ -0,0 +1,156 @@ +// https://github.com/chriskempson/tomorrow-theme +highlight-background = #2d2d2d +highlight-current-line = #393939 +highlight-selection = #515151 +highlight-foreground = #cccccc +highlight-comment = #999999 +highlight-red = #f2777a +highlight-orange = #f99157 +highlight-yellow = #ffcc66 +highlight-green = #99cc99 +highlight-aqua = #66cccc +highlight-blue = #6699cc +highlight-purple = #cc99cc + +$code-block + background: highlight-background + margin: 0 article-padding * -1 + padding: 15px article-padding + border-style: solid + border-color: color-border + border-width: 1px 0 + overflow: auto + color: highlight-foreground + line-height: font-size * line-height + +$line-numbers + color: #666 + font-size: 0.85em + +.article-entry + pre, code + font-family: font-mono + code + background: color-background + text-shadow: 0 1px #fff + padding: 0 0.3em + pre + @extend $code-block + code + background: none + text-shadow: none + padding: 0 + .highlight + @extend $code-block + pre + border: none + margin: 0 + padding: 0 + table + margin: 0 + width: auto + td + border: none + padding: 0 + figcaption + clearfix() + font-size: 0.85em + color: highlight-comment + line-height: 1em + margin-bottom: 1em + a + float: right + .gutter pre + @extend $line-numbers + text-align: right + padding-right: 20px + .line + height: font-size * line-height + .gist + margin: 0 article-padding * -1 + border-style: solid + border-color: color-border + border-width: 1px 0 + background: highlight-background + padding: 15px article-padding 15px 0 + .gist-file + border: none + font-family: font-mono + margin: 0 + .gist-data + background: none + border: none + .line-numbers + @extend $line-numbers + background: none + border: none + padding: 0 20px 0 0 + .line-data + padding: 0 !important + .highlight + margin: 0 + padding: 0 + border: none + .gist-meta + background: highlight-background + color: highlight-comment + font: 0.85em font-sans + text-shadow: 0 0 + padding: 0 + margin-top: 1em + margin-left: article-padding + a + color: color-link + font-weight: normal + &:hover + text-decoration: underline + +pre + .comment + .title + color: highlight-comment + .variable + .attribute + .tag + .regexp + .ruby .constant + .xml .tag .title + .xml .pi + .xml .doctype + .html .doctype + .css .id + .css .class + .css .pseudo + color: highlight-red + .number + .preprocessor + .built_in + .literal + .params + .constant + color: highlight-orange + .class + .ruby .class .title + .css .rules .attribute + color: highlight-green + .string + .value + .inheritance + .header + .ruby .symbol + .xml .cdata + color: highlight-green + .css .hexcolor + color: highlight-aqua + .function + .python .decorator + .python .title + .ruby .function .title + .ruby .title .keyword + .perl .sub + .javascript .title + .coffeescript .title + color: highlight-blue + .keyword + .javascript .function + color: highlight-purple \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/mobile.styl b/themes/landscape/source/css/_partial/mobile.styl new file mode 100644 index 0000000..eb68b3a --- /dev/null +++ b/themes/landscape/source/css/_partial/mobile.styl @@ -0,0 +1,19 @@ +@media mq-mobile + #mobile-nav + position: absolute + top: 0 + left: 0 + width: mobile-nav-width + height: 100% + background: color-mobile-nav-background + border-right: 1px solid #fff + +@media mq-mobile + .mobile-nav-link + display: block + color: color-grey + text-decoration: none + padding: 15px 20px + font-weight: bold + &:hover + color: #fff diff --git a/themes/landscape/source/css/_partial/sidebar-aside.styl b/themes/landscape/source/css/_partial/sidebar-aside.styl new file mode 100644 index 0000000..838b167 --- /dev/null +++ b/themes/landscape/source/css/_partial/sidebar-aside.styl @@ -0,0 +1,27 @@ +#sidebar + @media mq-normal + column(sidebar-column) + +.widget-wrap + margin: block-margin 0 + +.widget-title + @extend $block-caption + +.widget + color: color-sidebar-text + text-shadow: 0 1px #fff + background: color-widget-background + box-shadow: 0 -1px 4px color-widget-border inset + border: 1px solid color-widget-border + padding: 15px + border-radius: 3px + a + color: color-link + text-decoration: none + &:hover + text-decoration: underline + ul, ol, dl + ul, ol, dl + margin-left: 15px + list-style: disc \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/sidebar-bottom.styl b/themes/landscape/source/css/_partial/sidebar-bottom.styl new file mode 100644 index 0000000..b385275 --- /dev/null +++ b/themes/landscape/source/css/_partial/sidebar-bottom.styl @@ -0,0 +1,15 @@ +.widget-wrap + margin-bottom: block-margin !important + @media mq-normal + column(sidebar-column) + +.widget-title + color: #ccc + text-transform: uppercase + letter-spacing: 2px + margin-bottom: 1em + line-height: 1em + font-weight: bold + +.widget + color: color-grey \ No newline at end of file diff --git a/themes/landscape/source/css/_partial/sidebar.styl b/themes/landscape/source/css/_partial/sidebar.styl new file mode 100644 index 0000000..e43d66a --- /dev/null +++ b/themes/landscape/source/css/_partial/sidebar.styl @@ -0,0 +1,35 @@ +if sidebar is bottom + @import "sidebar-bottom" +else + @import "sidebar-aside" + +.widget + @extend $base-style + line-height: line-height + word-wrap: break-word + font-size: 0.9em + ul, ol + list-style: none + margin: 0 + ul, ol + margin: 0 20px + ul + list-style: disc + ol + list-style: decimal + +.category-list-count +.tag-list-count +.archive-list-count + padding-left: 5px + color: color-grey + font-size: 0.85em + &:before + content: "(" + &:after + content: ")" + +.tagcloud + a + margin-right: 5px + display: inline-block diff --git a/themes/landscape/source/css/_util/grid.styl b/themes/landscape/source/css/_util/grid.styl new file mode 100644 index 0000000..2a14dd2 --- /dev/null +++ b/themes/landscape/source/css/_util/grid.styl @@ -0,0 +1,38 @@ +///////////////// +// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/ +///////////////// + +// Utility function — you should never need to modify this +// _gridsystem-width = (column-width + gutter-width) * columns +gridsystem-width(_columns = columns) + (column-width + gutter-width) * _columns + +// Set @total-width to 100% for a fluid layout +// total-width = gridsystem-width(columns) +total-width = 100% + +////////// +// GRID // +////////// + +body + clearfix() + width: 100% + +row(_columns = columns) + clearfix() + display: block + width: total-width * ((gutter-width + gridsystem-width(_columns)) / gridsystem-width(_columns)) + margin: 0 total-width * (((gutter-width * .5) / gridsystem-width(_columns)) * -1) + +column(x, _columns = columns) + display: inline + float: left + width: total-width * ((((gutter-width + column-width) * x) - gutter-width) / gridsystem-width(_columns)) + margin: 0 total-width * ((gutter-width * .5) / gridsystem-width(_columns)) + +push(offset = 1) + margin-left: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns)) + +pull(offset = 1) + margin-right: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns)) \ No newline at end of file diff --git a/themes/landscape/source/css/_util/mixin.styl b/themes/landscape/source/css/_util/mixin.styl new file mode 100644 index 0000000..b56f037 --- /dev/null +++ b/themes/landscape/source/css/_util/mixin.styl @@ -0,0 +1,31 @@ +// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ +hide-text() + text-indent: 100% + white-space: nowrap + overflow: hidden + +// http://codepen.io/shshaw/full/gEiDt +absolute-center(width, height = width) + // margin: auto + // position: absolute + // top: 50% + // top: 0 + // left: 0 + // bottom: 0 + // right: 0 + // width: width + // height: height + // overflow: auto + width: width + height: height + position: absolute + top: 50% + left: 50% + margin-top: width * -0.5 + margin-left: height * -0.5 + +avoid-column-break() + vendor("column-break-inside", avoid, only: webkit) + page-break-inside: avoid // for firefox + overflow: hidden // fix for firefox + break-inside: avoid-column diff --git a/themes/landscape/source/css/_variables.styl b/themes/landscape/source/css/_variables.styl new file mode 100644 index 0000000..1215bb1 --- /dev/null +++ b/themes/landscape/source/css/_variables.styl @@ -0,0 +1,60 @@ +// Config +support-for-ie = false +vendor-prefixes = webkit moz ms official + +// Colors +color-default = #555 +color-grey = #999 +color-border = #ddd +color-link = #258fb8 +color-background = #eee +color-sidebar-text = #777 +color-widget-background = #ddd +color-widget-border = #ccc +color-footer-background = #262a30 +color-mobile-nav-background = #191919 +color-twitter = #00aced +color-facebook = #3b5998 +color-pinterest = #cb2027 +color-google = #dd4b39 + +// Fonts +font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif +font-serif = Georgia, "Times New Roman", serif +font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace +font-icon = FontAwesome +font-icon-path = "fonts/fontawesome-webfont" +font-icon-version = "4.0.3" +font-size = 14px +line-height = 1.6em +line-height-title = 1.1em + +// Header +logo-size = 40px +subtitle-size = 16px +banner-height = 300px +banner-url = "images/banner.jpg" + +sidebar = hexo-config("sidebar") + +// Layout +block-margin = 50px +article-padding = 20px +mobile-nav-width = 280px +main-column = 9 +sidebar-column = 3 + +if sidebar and sidebar isnt bottom + _sidebar-column = sidebar-column +else + _sidebar-column = 0 + +// Grids +column-width = 80px +gutter-width = 20px +columns = main-column + _sidebar-column + +// Media queries +mq-mobile = "screen and (max-width: 479px)" +mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)" +mq-normal = "screen and (min-width: 768px)" \ No newline at end of file diff --git a/themes/landscape/source/css/fonts/FontAwesome.otf b/themes/landscape/source/css/fonts/FontAwesome.otf new file mode 100644 index 0000000000000000000000000000000000000000..8b0f54e47e1d356dcf1496942a50e228e0f1ee14 GIT binary patch literal 62856 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 -

#Introduction

Scholarly big data

refers to the vast amount of data produced as the result of scholarly undertaking and includes journals, conference proceedings, theses, books, patents and experimental data.

@@ -296,7 +297,7 @@

GROBIDincludes a RESTful API -> access the service from other programs

  • match extracted metadata with Crossref
    • -
  • if core metadata, such as the title or first author, is matched,
    • +
  • if core metadata, such as the title or first author, is matched,
  • then the system attempts to retrieve the full publisher metadata.

FreeCite

-

JavaScript

    -

  • 介绍JavaScript的基本数据类型。

    -
    • -

  • 说说写JavaScript的基本规范？

    -
    • -

  • JavaScript原型，原型链 ? 有什么特点？

    -
    • -

  • JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？

    -
    • -

  • Javascript如何实现继承？

    -
    • -

  • Javascript创建对象的几种方式？

    -
    • -

  • Javascript作用链域?

    -
    • -

  • 谈谈this对象的理解。

    -
    • -

  • eval是做什么的？

    -
    • -

  • 什么是window对象? 什么是document对象?

    -
    • -

  • null，undefined的区别？

    -
    • -

  • 写一个通用的事件侦听器函数(机试题)。

    -
    • -

  • [“1”, “2”, “3”].map(parseInt) 答案是多少？

    -
    • -

  • 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

    -
    • -

  • 什么是闭包（closure），为什么要用它？

    -
    • -

  • javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

    -
    • -

  • 如何判断一个对象是否属于某个类？

    -
    • -

  • new操作符具体干了什么呢?

    -
    • -

  • 用原生JavaScript的实现过什么功能吗？

    -
    • -

  • Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

    -
    • -

  • 对JSON的了解？

    -
    • -

  • [].forEach.call($$("*"),function(a){ -a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) -}) 能解释一下这段代码的意思吗？

    -
    • -

  • js延迟加载的方式有哪些？

    -
    • -

  • Ajax 是什么? 如何创建一个Ajax？

    -
    • -

  • 同步和异步的区别?

    -
    • -

  • 如何解决跨域问题?

    -
    • -

  • 页面编码和被请求的资源编码如果不一致如何处理？

    -
    • -

  • 模块化开发怎么做？

    -
    • -

  • AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

    -
    • -

  • requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何
    缓存的？）

    -
    • -

  • 谈一谈你对ECMAScript6的了解？

    -
    • -

  • ECMAScript6 怎么写class，为什么会出现class这种东西?

    -
    • -

  • 异步加载的方式有哪些？

    -
    • -

  • documen.write和 innerHTML的区别?

    -
    • -

  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

    -
    • -

  • .call() 和 .apply() 的作用和区别？

    -
    • -

  • 数组和对象有哪些原生方法，列举一下？

    -
    • -

  • JS 怎么实现一个类。怎么实例化这个类

    -
    • -

  • JavaScript中的作用域与变量声明提升？

    -
    • -

  • 如何编写高性能的Javascript？

    -
    • -

  • 那些操作会造成内存泄漏？

    -
    • -

  • JQuery的源码看过吗？能不能简单概况一下它的实现原理？

    -
    • -

  • jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

    -
    • -

  • jquery中如何将数组转化为json字符串，然后再转化回来？

    -
    • -

  • jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

    -
    • -

  • jquery.extend 与 jquery.fn.extend的区别？

    -
    • -

  • jQuery 的队列是如何实现的？队列可以用在哪些地方？

    -
    • -

  • 谈一下Jquery中的bind(),live(),delegate(),on()的区别？

    + +

    总体37分钟，根据面试官的反馈，我说话要更流利一点，自信一点才行，然后去了解一下ES6。另外，要学会根据他的问题看到他真正想问的技术问题。

    + + + + +
    + +
    + +
    + + + + +
    +
    + + + + + + + + + + + +
    + +
    + + + +
    + +
    + + + + +
    + + +

    + 腾讯TST 前端面试总结（二） +

    + + +
    + + +
    + +

    上午刚回家，晚饭前二面就突然来了😂

    +

    这次请求了十分钟准备😂：

    +
      +

    1. 如果一个页面打开了之后空白，你会如何定位问题？如果不是网络、服务器的问题，就是前端问题，该如何定位？

      2. -

    2. JQuery一个对象可以同时绑定多个事件，这是如何实现的？

      +

    3. 平常用什么浏览器?怎么调试的？chrome开发者工具平常都用到了什么？关于性能的调试用到了啥？
      我说主要是chrome；用chrome的开发者工具；除了性能，我其它的基本都有了😂。

      4. -

    4. 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？

      +

    5. 关于HTTP，cache怎么控制的？如果允许缓存，一个页面访问缓存的流程是怎样的？
      我说用cache-control,pragma;

      6. -

    6. jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）

      +

    7. 关于项目：php用的什么版本？nodejs的websocket是自己实现的还是用的组件？如何划分模块？开发环境是windows还是linux？
      这个基本上就照实说了。

      8. -

    8. 针对 jQuery性能的优化方法？

      +

    9. 用了什么前端构建工具？
      grunt，介绍了用过什么功能，是否自己搭建。

      10. -

    10. Jquery与jQuery UI有啥区别？

      +

    11. js中setTimeout的函数执行时间？触发了setTimeout后会立即执行吗？

      12. -

    12. JQuery的源码看过吗？能不能简单说一下它的实现原理？

      +

    13. 关于前端性能、安全性问题？提到了CSIF

      14. -

    14. jquery 中如何将数组转化为json字符串，然后再转化回来？

      +

    15. H5的移动端和PC端页面开发有什么区别？

      16. -

    16. jQuery和Zepto的区别？各自的使用场景？

      +

    17. window.onload 是什么时候触发的？
      啊这个问题前两天才看过T^T…然后不确定，本来想说是在完全加载完成后执行的，结果最后还是答了个错的答案。。QAQ。。。window.onload与document.ready的区别.

      18. -

    18. 针对 jQuery 的优化方法？

      +

    19. jquery的入口函数写在哪里？为什么？
      我说写在页面的body结束前，因为这样页面都会加载完再执行js代码。应该少说了个 页面的加载不会被js代码阻塞 吧。

      20. -

    20. Zepto的点透问题如何解决？

      +
    +

    同样的，这次的面试官声音也好好听啊。。。😂然而基本都是问我了解过的东西，不是很深，感觉还是比较看重基础扎实的。

    + + +
    + +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + + + + +
    + +
    + + + +
    + +
    + + + + +
    + + +

    + 腾讯TST 前端面试总结（一） +

    + + +
    + + +
    + +

    校招终于拉开帷幕了，投了几个公司，企鹅动作最快了，简直不知道开心还是不开心好了～😂

    +

    第一次正式的电话面试就献给企鹅了～

    +

    7月19日投的内推简历，21日就来电话了～幸好当时在工作室里刚吃完晚饭。。。😂

    +

    投的是前端开发，凭回忆记录下几个题目吧：

    +
      +

    1. 首先介绍下做过的自我感觉最好的项目
      我就只能拿枪弹柜这个说了，只是因为我全程都参与这个项目，最为了解，但是其实说实话它虽然体量还算庞大，用到了好些个相关技术，但是却不深，感觉并没有太大说服力。面试官也没有太多地深入问。所以感觉最好要有一个自己从头开发的有难度的小项目就好了，若是在github上有star或者fork肯定更加分～

      2. -

    2. jQueryUI如何自定义组件?

      +

    3. css的margin重叠问题
      说实话，之前并没有系统地了解过，只有个大概的映像，答的不好，详细答案在这里。

      4. -

    4. 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

      +

    5. javascript的事件绑定

      6. -

    6. 如何判断当前脚本运行在浏览器还是node环境中？（阿里）

      +

    7. 性能优化问题
      这个不太了解，没说

      8. -

    8. 移动端最小触控区域是多大？

      -
      9. -

    9. jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

      -
      10. -

    10. 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

      -
      11. -

    11. 移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）

      -
      12. -

    12. 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?

      -
      13. -

    13. Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？

      -
      14. -

    14. 解释JavaScript中的作用域与变量声明提升？

      -
      15. -

    15. 那些操作会造成内存泄漏？

      -
      16. -

    16. JQuery一个对象可以同时绑定多个事件，这是如何实现的？

      -
      17. -

    17. Node.js的适用场景？

      -
      18. -

    18. (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

      -
      19. -

    19. 解释一下 Backbone 的 MVC 实现方式？

      -
      20. -

    20. 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

      -
      21. -

    21. 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

      -
      22. -

    22. 如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

      -
      23. -

    23. 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

      -
      24. -

    24. 简述一下 Handlebars 的基本用法？

      -
      25. -

    25. 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？

      -
      26. -

    26. 用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)

      -
      27. -

    27. 检测浏览器版本版本有哪些方式？

      -
      28. -

    28. What is a Polyfill?

      -
      29. -

    29. 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？

      -
      30. -

    30. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

      -
      31. -
-

ECMAScript6 相关

    -
  • Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？
    • -
-

前端框架相关

    -
  • react-router 路由系统的实现原理？
    • -
-
    -
  • React中如何解决第三方类库的问题?
    • -
-

其他问题

    -

  • 原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？

    -
    • -

  • 你遇到过比较难的技术问题是？你是如何解决的？

    -
    • -

  • 设计模式 知道什么是singleton, factory, strategy, decrator么?

    -
    • -

  • 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

    -
    • -

  • 页面重构怎么操作？

    -
    • -

  • 列举IE与其他浏览器不一样的特性？

    -
    • -

  • 99%的网站都需要被重构是那本书上写的？

    -
    • -

  • 什么叫优雅降级和渐进增强？

    -
    • -

  • 是否了解公钥加密和私钥加密。

    -
    • -

  • WEB应用从服务器主动推送Data到客户端有那些方式？

    -
    • -

  • 对Node的优点和缺点提出了自己的看法？

    -
    • -

  • 你有用过哪些前端性能优化的方法？

    -
    • -

  • http状态码有那些？分别代表是什么意思？

    -
    • -

  • 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

    -
    • -

  • 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？

    -
    • -

  • 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?

    -
    • -

  • 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

    -
    • -

  • 你用的得心应手用的熟练地编辑器&开发环境是什么样子？

    -
    • -

  • 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

    -
    • -

  • 你怎么看待Web App 、hybrid App、Native App？

    -
    • -

  • 你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）

    -
    • -

  • 你对加班的看法？

    -
    • -

  • 平时如何管理你的项目？

    -
    • -

  • 说说最近最流行的一些东西吧？常去哪些网站？

    -
    • -

  • 如何设计突发大规模并发架构？

    -
    • -

  • 说说最近最流行的一些东西吧？常去哪些网站？

    -
    • -

  • 是否了解开源的工具 bower、npm、yeoman、grunt、gulp，一个 npm 的包里的 package.json 具备的必要的字段都有哪些？（名称、版本号，依赖）

    -
    • -

  • 每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的？

    -
    • -

  • Git知道branch, diff, merge么?

    -
    • -

  • 如何设计突发大规模并发架构？

    -
    • -

  • 当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？

    -
    • -

  • 说说最近最流行的一些东西吧？平时常去哪些网站？

    -
    • -

  • 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?

    -
    • -

  • 移动端（Android IOS）怎么做好用户体验?

    -
    • -

  • 简单描述一下你做过的移动APP项目研发流程？

    -
    • -

  • 你在现在的团队处于什么样的角色，起到了什么明显的作用？

    -
    • -

  • 你认为怎样才是全端工程师（Full Stack developer）？

    -
    • -

  • 介绍一个你最得意的作品吧？

    -
    • -

  • 你有自己的技术博客吗，用了哪些技术？

    -
    • -

  • 对前端安全有什么看法？

    -
    • -

  • 是否了解Web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度？

    -
    • -

  • 项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？。

    -
    • -

  • 最近在学什么东西？

    -
    • -

  • 你的优点是什么？缺点是什么？

    -
    • -

  • 如何管理前端团队?

    -
    • -

  • 最近在学什么？能谈谈你未来3，5年给自己的规划吗？

    -
    • -
-

有趣的问题

    -
  • .A、B两人分别在两座岛上。B生病了，A有B所需要的药。C有一艘小船和一个可以上锁的箱子。C愿意在A和B之间运东西，但东西只能放在箱子里。只要箱子没被上锁，C都会偷走箱子里的东西，不管箱子里有什么。如果A和B各自有一把锁和只能开自己那把锁的钥匙，A应该如何把东西安全递交给B？
    • -
-
答案：A把药放进箱子，用自己的锁把箱子锁上。B拿到箱子后，再在箱子上加一把自己的锁。
-箱子运回A后，A取下自己的锁。箱子再运到B手中时，B取下自己的锁，获得药物。
-
    -

  • Amazon主页的左上角有一个商品分类浏览的下拉菜单 没有延迟，而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢？

    -
    答案是通过探测鼠标移动的方向和轨迹，具体查看Khan Academy工程师 Ben Kamens 写的 jQuery插件
-

    这是 Khan Academy工程师 Ben Kamens 写的 jQuery插件

    -
    • -
-

前端学习网站推荐

1. 极客标签：     http://www.gbtags.com/
-
-2. 码农周刊：     http://weekly.manong.io/issues/
-
-3. 前端周刊：     http://www.feweekly.com/issues
-
-4. 慕课网：       http://www.imooc.com/
-
-5. div.io：         http://div.io
-
-6. Hacker News： https://news.ycombinator.com/news
-
-7. InfoQ：       http://www.infoq.com/
-
-8. w3cplus：     http://www.w3cplus.com/
-
-9. Stack Overflow： http://stackoverflow.com/
-
-10.w3school：    http://www.w3school.com.cn/
-
-11.mozilla：     https://developer.mozilla.org/zh-CN/docs/Web/
-

文档推荐

    -

  1. jQuery 基本原理

    -
    2. -

  2. JavaScript 秘密花园

    -
    3. -

  3. CSS参考手册

    -
    4. -

  4. JavaScript 标准参考教程

    -
    5. -

  5. ECMAScript 6入门

    +

  6. 安全性问题
    这个不太了解，没说

-

###更新时间: 2016-3-25

-
资料答案不够正确和全面，欢迎欢迎Star和提交issues。我的微博：http://weibo.com/920802999
-
+

其他的想到再补充吧。。。😂

+

总的来说，自我感觉不太满意，但是面试哥哥的声音好好听啊。。。😄人也好nice，最后问我还有没有啥问题，我问了他们现在用的前端技术都是啥，结果他很详细的跟我介绍了一遍，还是很有收获哒～
真正公司里的前端需要考虑的地方有很多，平常许多没注意到或者没精力顾及到的问题，在这里都需要考虑，而且还很重要。

+
- +
@@ -941,11 +805,11 @@

+
- - + +
@@ -958,7 +822,7 @@

- 判断是否存在欧拉回路、欧拉路，输出欧拉路 + 前端面试题 积累

@@ -967,258 +831,542 @@

-

前两天做到的题目。

-

题目描述

给定若干个长度为4的字符串，用空格分隔，判断这些字符串能否排成首尾相连的字符串。字母区分大小写。

-

若不能，则输出ERROR；
若可以形成首尾相连的圈，则输出CIRCLE；
否则，依次输出排序后的所有字符串。
- -

- -
- -
- -
- - - - -

- more >> -

- -
-
- -

- - - - - - - +

基础知识是一切的基石！

+

由于目前前端的东西全都是自己自学然后实践得来的，并不系统，写这篇blog的直接目的是为了记录前端面试可能会遇到的问题，间接目的主要是能够让自己开始系统地学习这些知识，为更长远的发展奠定基础。问题是转来的1，答案是用自己的理解叙述的。

+

#前端基础知识点
HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、
HTML5、CSS3、Flexbox

+
JavaScript：
+    数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、
+    DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs
 
-  
-    

-  
-    

-      
-  	
-
-    

-  
-  

-    
-      
-    
-    
-      

-        
-  
-    

-      ife-2016s task4笔记
-    

-  
-
-      

-      
-    
-    

-      
-        
题目要求 传送门
实现灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

-
关键实现方法
由于需要在任何情况下都能使元素水平垂直居中，因此考虑将body设置为fixed，然后用绝对定位定位灰色元素，其中的黄色扇形由position: absolute控制使其相对于灰色矩形位于左上角和右下角。

-
Tips
1、相对（relative）定位元素的默认位置还是被元素自身占用，别的元素是无法占用的。也就是说相对定位元素的位移是相对于元素自身的边缘进行位移。
2、绝对（absolute）定位元素的位置是相对于最近的一个设置为相对 或 绝对定位的祖先元素的。
3、固定（fixed）定位元素相对于浏览器窗口，并且不会随滚动条进行滚动（不兼容IE6）。

-      
-    

-    
-    

-      
-	

-		
-	

-
-      
-
-      
-        

-          more >>
-        

-      
-      

-    

-    
-  

-  
-

-
-
-
-
-
-
-  
-    

-  
-    

-      
-  	
-
-    

-  
-  

-    
-      
-    
-    
-      

-        
-  
-    

-      判断一棵树是否是另一棵树的子树
-    

-  
-
-      

-      
-    
-    

-      
-        
昨天做到一道百度的笔试题，感觉对深搜的理解很有帮助，记录一下。

-
题目描述
给定两个子树，树节点的数值唯一，问第二棵树是否是第一棵树的子树。是就返回1，否则-1。
给定树节点的定义为：
1
2
3
4
5
6
7
8
9
10
11
struct tnode
{
	int value;
	tnode* left;
	tnode* right;
	tnode(int v) {   //这个构造函数是我为了调试时构造节点方便而写的
		value = v;
		left = NULL;
		right = NULL;
	}
};

-      
-    

-    
-    

-      
-	

-		
-	

-
-      
-
-      
-        

-          more >>
-        

-      
-      

-    

-    
-  

-  
-

-
-
-
-
-
-
-  
-    

-  
-    

-      
-  	
-
-    

-  
-  

-    
-      
-    
-    
-      

-        
-  
-    

-      一般推荐问题和搭配问题的异同
-    

-  
+其他：
+    移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
+

#前端开发面试题

+

目录

    +
  1. HTML部分
    2. +
  2. CSS部分
    3. +
  3. JavaScript部分
    4. +
  4. 其他问题
    5. +
  5. 前端学习网站推荐
    6. +
+

HTML

    +

  • Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

    +
    1. Doctype是用于标识文档的HTML或XHTML规范，浏览器根据这个标签使用相应的规范解析页面，DOCTYPE不对或不存在将以兼容模式呈现；
+2. 严格模式是以该浏览器的最高标准运行；混杂模式（兼容模式）是以宽松的向后兼容的模式运行，模拟老式浏览器的行为使页面得以正常显示。
+
    • +

  • HTML5 为什么只需要写 <!DOCTYPE HTML>？

    +
    1. HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
+2. 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
+
    • +

  • 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

    +
    1. 行内元素：span、a、b、img、input、select、strong、i
+2. 块级元素：div、form、h1(2,3...)、p、ul、ol、li、dl、dt、dd
+3. 空元素：hr、br、img、input、link、meta；textarea
+
    • +

  • 页面导入样式时，使用link和@import有什么区别？

    +
    1. link在页面加载时同时加载，而@import在页面加载后再加载；
+2. link属于XHTML标签，除了加载css外还可用于定义rss、rel连接属性用；@import只用于在css中引入其他css文件；
+3. import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
+
    • +

  • 介绍一下你对浏览器内核的理解？

    +
    1. 浏览器内核包括渲染引擎和JS引擎；
+2. 渲染引擎：负责获得网页内容（html、xhtml、图像等）、整理讯息（css等），计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
+3. JS引擎：解析和执行javascript来实现网页的动态效果。
+
    • +

  • 常见的浏览器内核有哪些？

    +
    1. Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
+2. Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
+3. Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]
+4. Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]
+
    • +

  • html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和
    HTML5？

    +
    1. 新特性：
+HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
+      绘画 canvas;
+      用于媒介回放的 video 和 audio 元素;
+      本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
+      sessionStorage 的数据在浏览器关闭后自动删除;
+      语意化更好的内容元素，比如 article、footer、header、nav、section;
+      表单控件，calendar、date、time、email、url、search;
+      新的技术webworker, websocket, Geolocation;
+移除的元素：
+    纯表现的元素：basefont，big，center，font, s，strike，tt，u;
+    对可用性产生负面影响的元素：frame，frameset，noframes；
+2. 兼容问题：
+支持HTML5新标签：
+     IE8/IE7/IE6支持通过document.createElement方法产生的标签，
+     可以利用这一特性让这些浏览器支持HTML5新标签，
+     浏览器支持新标签后，还需要添加标签默认的样式。
+
+     当然也可以直接使用成熟的框架、比如html5shim;
+     
    1
    2
    3
    <!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
    <![endif]-->
    
+
+3. 区分：通过doctype定义/新增的结构元素/新增的功能元素
+
    • +

  • 简述一下你对HTML语义化的理解？

    +
    1. 语义化就是在去掉css之后页面呈现的文档顺序依然正确，用户也可以理解页面内容。
+2. 语义化对于开发者理解和维护代码有帮助
+3. 语义化有利于搜索引擎的爬虫（根据HTML标记来确定上下文和各个关键字的权重）解析页面内容，利于SEO
+
    • +

  • HTML5的离线储存怎么使用，工作原理能不能解释一下？

    +
    1. sessionStorage
+
    • +

  • 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

    +
    • +

  • 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

    +
    1. cookies：
+1. sessionStorage：就是会话时间内的存储
+1. localStorage：本地存储，可以在关闭浏览器后继续保存。
+
    • +

  • iframe有那些缺点？

    +
    • +

  • Label的作用是什么？是怎么用的？（加 for 或 包裹）

    +
    • +

  • HTML5的form如何关闭自动完成功能？

    +
    • +

  • 如何实现浏览器内多个标签页之间的通信? (阿里)

    +
    • +

  • webSocket如何兼容低浏览器？(阿里)

    +
    • +

  • 页面可见性（Page Visibility API） 可以有哪些用途？

    +
    • +

  • 如何在页面上实现一个圆形的可点击区域？

    +
    • +

  • 实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

    +
    • +

  • 网页验证码是干嘛的，是为了解决什么安全问题？

    +
    • +

  • title与h1的区别、b与strong的区别、i与em的区别？

    +
    • +
+

CSS

    +

  • 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

    +
    • +

  • CSS选择符有哪些？哪些属性可以继承？

    +
    • +

  • CSS优先级算法如何计算？

    +
    • +

  • CSS3新增伪类有那些？

    +
    • +

  • 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

    +
    • +

  • display有哪些值？说明他们的作用。

    +
    • +

  • position的值relative和absolute定位原点是？

    +
    • +

  • CSS3有哪些新特性？

    +
    • +

  • 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

    +
    • +

  • 用纯CSS创建一个三角形的原理是什么？

    +
    • +

  • 一个满屏 品 字布局 如何设计?

    +
    • +

  • 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

    +
    • +

  • li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

    +
    • +

  • 为什么要初始化CSS样式?

    +
    • +

  • absolute的containing block计算方式跟正常流有什么不同？

    +
    • +

  • CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

    +
    • +

  • position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    +
    • +

  • 对BFC规范(块级格式化上下文：block formatting context)的理解？

    +
    • +

  • CSS权重优先级是如何计算的？

    +
    • +

  • 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

    +
    • +

  • 移动端的布局用过媒体查询吗？

    +
    • +

  • 使用 CSS 预处理器吗？喜欢那个？

    +
    • +

  • CSS优化、提高性能的方法有哪些？

    +
    • +

  • 浏览器是怎样解析CSS选择器的？

    +
    • +

  • 在网页中的应该使用奇数还是偶数的字体？为什么呢？

    +
    • +

  • margin和padding分别适合什么场景使用？

    +
    • +

  • 抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

    +
    • +

  • 元素竖向的百分比设定是相对于容器的高度吗？

    +
    • +

  • 全屏滚动的原理是什么？用到了CSS的那些属性？

    +
    • +

  • 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

    +
    • +

  • 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

    +
    • +

  • ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

    +
    • +

  • 如何修改chrome记住密码后自动填充表单的黄色背景 ？

    +
    • +

  • 你对line-height是如何理解的？

    +
    • +

  • 设置元素浮动后，该元素的display值是多少？（自动变成display:block）

    +
    • +

  • 怎么让Chrome支持小于12px 的文字？

    +
    • +

  • 让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

    +
    • +

  • font-style属性可以让它赋值为“oblique” oblique是什么意思？

    +
    • +

  • position:fixed;在android下无效怎么处理？

    +
    • +

  • 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

    +
    • +

  • display:inline-block 什么时候会显示间隙？(携程)

    +
    • +

  • overflow: scroll时不能平滑滚动的问题怎么处理？

    +
    • +

  • 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

    +
    • +

  • png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

    +
    • +

  • 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

    +
    • +

  • style标签写在body后与body前有什么区别？

    +
    • +

  • 什么是CSS 预处理器 / 后处理器？

    +
    • +
+

JavaScript

    +

  • 介绍JavaScript的基本数据类型。

    +
    • +

  • 说说写JavaScript的基本规范？

    +
    • +

  • JavaScript原型，原型链 ? 有什么特点？

    +
    • +

  • JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？

    +
    • +

  • Javascript如何实现继承？

    +
    • +

  • Javascript创建对象的几种方式？

    +
    • +

  • Javascript作用链域?

    +
    • +

  • 谈谈this对象的理解。

    +
    • +

  • eval是做什么的？

    +
    • +

  • 什么是window对象? 什么是document对象?

    +
    • +

  • null，undefined的区别？

    +
    • +

  • 写一个通用的事件侦听器函数(机试题)。

    +
    • +

  • [“1”, “2”, “3”].map(parseInt) 答案是多少？

    +
    • +

  • 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

    +
    • +

  • 什么是闭包（closure），为什么要用它？

    +
    • +

  • javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

    +
    • +

  • 如何判断一个对象是否属于某个类？

    +
    • +

  • new操作符具体干了什么呢?

    +
    • +

  • 用原生JavaScript的实现过什么功能吗？

    +
    • +

  • Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

    +
    • +

  • 对JSON的了解？

    +
    • +

  • [].forEach.call($$("*"),function(a){ +a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) +}) 能解释一下这段代码的意思吗？

    +
    • +

  • js延迟加载的方式有哪些？

    +
    • +

  • Ajax 是什么? 如何创建一个Ajax？

    +
    • +

  • 同步和异步的区别?

    +
    • +

  • 如何解决跨域问题?

    +
    • +

  • 页面编码和被请求的资源编码如果不一致如何处理？

    +
    • +

  • 模块化开发怎么做？

    +
    • +

  • AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

    +
    • +

  • requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何
    缓存的？）

    +
    • +

  • 谈一谈你对ECMAScript6的了解？

    +
    • +

  • ECMAScript6 怎么写class，为什么会出现class这种东西?

    +
    • +

  • 异步加载的方式有哪些？

    +
    • +

  • documen.write和 innerHTML的区别?

    +
    • +

  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

    +
    • +

  • .call() 和 .apply() 的作用和区别？

    +
    • +

  • 数组和对象有哪些原生方法，列举一下？

    +
    • +

  • JS 怎么实现一个类。怎么实例化这个类

    +
    • +

  • JavaScript中的作用域与变量声明提升？

    +
    • +

  • 如何编写高性能的Javascript？

    +
    • +

  • 那些操作会造成内存泄漏？

    +
    • +

  • JQuery的源码看过吗？能不能简单概况一下它的实现原理？

    +
    • +

  • jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

    +
    • +

  • jquery中如何将数组转化为json字符串，然后再转化回来？

    +
    • +

  • jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

    +
    • +

  • jquery.extend 与 jquery.fn.extend的区别？

    +
    • +

  • jQuery 的队列是如何实现的？队列可以用在哪些地方？

    +
    • +

  • 谈一下Jquery中的bind(),live(),delegate(),on()的区别？

    +
    • +

  • JQuery一个对象可以同时绑定多个事件，这是如何实现的？

    +
    • +

  • 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？

    +
    • +

  • jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）

    +
    • +

  • 针对 jQuery性能的优化方法？

    +
    • +

  • Jquery与jQuery UI有啥区别？

    +
    • +

  • JQuery的源码看过吗？能不能简单说一下它的实现原理？

    +
    • +

  • jquery 中如何将数组转化为json字符串，然后再转化回来？

    +
    • +

  • jQuery和Zepto的区别？各自的使用场景？

    +
    • +

  • 针对 jQuery 的优化方法？

    +
    • +

  • Zepto的点透问题如何解决？

    +
    • +

  • jQueryUI如何自定义组件?

    +
    • +

  • 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

    +
    • +

  • 如何判断当前脚本运行在浏览器还是node环境中？（阿里）

    +
    • +

  • 移动端最小触控区域是多大？

    +
    • +

  • jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

    +
    • +

  • 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

    +
    • +

  • 移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）

    +
    • +

  • 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?

    +
    1. React基本模式：
+    
    1
    2
    3
    4
    5
    var HelloComponent = React.createClass({   //ES5
        render: function() {
            return <div>Hello {this.props.name}</div>;
        }
    });
    
 
-      
-      
-    
-    
    
-      
-        
    现有数据集
    三部分：
        商品信息    －》    基于内容的、相似度   《－ 搭配类目过滤
        专家搭配    －》    概率模型（马尔可夫？）专家知识    X
        历史记录    －》    同时购买次数－》相关性特征构建
    
-
    问题角度
    一般的推荐问题是：   把物品推荐给人
    搭配推荐问题是：    把物品推荐给物品，找搭配
    
-
    基于协同过滤
      一般的协同过滤，就是原本是直接评价人和物品的关系的，现在通过协同历史评分表现，把对应评分高的物品的相似物品推荐给用户（item-based）；或者把物品推荐给评分兴趣相似的用户（user-based）。
      因此，若是用协同过滤，评分rate就是物品对于物品的关系。
    
+    
    1
    2
    3
    4
    5
    class HelloComponent extends React.Component {  //ES6
      render() {
        return <div>Hello {this.props.name}</div>;
      }
    }
    
+
    • +

  • Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？

    +
    • +

  • 解释JavaScript中的作用域与变量声明提升？

    +
    • +

  • 那些操作会造成内存泄漏？

    +
    • +

  • JQuery一个对象可以同时绑定多个事件，这是如何实现的？

    +
    • +

  • Node.js的适用场景？

    +
    • +

  • (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

    +
    • +

  • 解释一下 Backbone 的 MVC 实现方式？

    +
    • +

  • 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

    +
    • +

  • 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

    +
    • +

  • 如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

    +
    • +

  • 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

    +
    • +

  • 简述一下 Handlebars 的基本用法？

    +
    • +

  • 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？

    +
    • +

  • 用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)

    +
    • +

  • 检测浏览器版本版本有哪些方式？

    +
    • +

  • What is a Polyfill?

    +
    • +

  • 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？

    +
    • +

  • 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

    +
    • +
+

ECMAScript6 相关

    +
  • Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？
    • +
+

前端框架相关

    +
  • react-router 路由系统的实现原理？
    • +
    -
  • 第一步，关键在于这个rate的构建，rate就是我所说的搭配度
    • -
  • 第二步，对评分矩阵的处理：
      -
    • 稀疏矩阵分解？
      • -
    • 用于协同过滤
      • +
    • React中如何解决第三方类库的问题?
      • +
    +

    其他问题

      +

    • 原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？

      +
      • +

    • 你遇到过比较难的技术问题是？你是如何解决的？

      +
      • +

    • 设计模式 知道什么是singleton, factory, strategy, decrator么?

      +
      • +

    • 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

      +
      • +

    • 页面重构怎么操作？

      +
      • +

    • 列举IE与其他浏览器不一样的特性？

      +
      • +

    • 99%的网站都需要被重构是那本书上写的？

      +
      • +

    • 什么叫优雅降级和渐进增强？

      +
      • +

    • 是否了解公钥加密和私钥加密。

      +
      • +

    • WEB应用从服务器主动推送Data到客户端有那些方式？

      +
      • +

    • 对Node的优点和缺点提出了自己的看法？

      +
      • +

    • 你有用过哪些前端性能优化的方法？

      +
      • +

    • http状态码有那些？分别代表是什么意思？

      +
      • +

    • 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

      +
      • +

    • 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？

      +
      • +

    • 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?

      +
      • +

    • 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

      +
      • +

    • 你用的得心应手用的熟练地编辑器&开发环境是什么样子？

      +
      • +

    • 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

      +
      • +

    • 你怎么看待Web App 、hybrid App、Native App？

      +
      • +

    • 你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）

      +
      • +

    • 你对加班的看法？

      +
      • +

    • 平时如何管理你的项目？

      +
      • +

    • 说说最近最流行的一些东西吧？常去哪些网站？

      +
      • +

    • 如何设计突发大规模并发架构？

      +
      • +

    • 说说最近最流行的一些东西吧？常去哪些网站？

      +
      • +

    • 是否了解开源的工具 bower、npm、yeoman、grunt、gulp，一个 npm 的包里的 package.json 具备的必要的字段都有哪些？（名称、版本号，依赖）

      +
      • +

    • 每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的？

      +
      • +

    • Git知道branch, diff, merge么?

      +
      • +

    • 如何设计突发大规模并发架构？

      +
      • +

    • 当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？

      +
      • +

    • 说说最近最流行的一些东西吧？平时常去哪些网站？

      +
      • +

    • 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?

      +
      • +

    • 移动端（Android IOS）怎么做好用户体验?

      +
      • +

    • 简单描述一下你做过的移动APP项目研发流程？

      +
      • +

    • 你在现在的团队处于什么样的角色，起到了什么明显的作用？

      +
      • +

    • 你认为怎样才是全端工程师（Full Stack developer）？

      +
      • +

    • 介绍一个你最得意的作品吧？

      +
      • +

    • 你有自己的技术博客吗，用了哪些技术？

      +
      • +

    • 对前端安全有什么看法？

      +
      • +

    • 是否了解Web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度？

      +
      • +

    • 项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？。

      +
      • +

    • 最近在学什么东西？

      +
      • +

    • 你的优点是什么？缺点是什么？

      +
      • +

    • 如何管理前端团队?

      +
      • +

    • 最近在学什么？能谈谈你未来3，5年给自己的规划吗？

      +
      • +
    +

    有趣的问题

      +
    • .A、B两人分别在两座岛上。B生病了，A有B所需要的药。C有一艘小船和一个可以上锁的箱子。C愿意在A和B之间运东西，但东西只能放在箱子里。只要箱子没被上锁，C都会偷走箱子里的东西，不管箱子里有什么。如果A和B各自有一把锁和只能开自己那把锁的钥匙，A应该如何把东西安全递交给B？
    +
    答案：A把药放进箱子，用自己的锁把箱子锁上。B拿到箱子后，再在箱子上加一把自己的锁。
+箱子运回A后，A取下自己的锁。箱子再运到B手中时，B取下自己的锁，获得药物。
+
      +

    • Amazon主页的左上角有一个商品分类浏览的下拉菜单 没有延迟，而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢？

      +
      答案是通过探测鼠标移动的方向和轨迹，具体查看Khan Academy工程师 Ben Kamens 写的 jQuery插件
+

      这是 Khan Academy工程师 Ben Kamens 写的 jQuery插件

    - - - -
    - -
    - -
    +

    前端学习网站推荐

    1. 极客标签：     http://www.gbtags.com/
 
-      
+2. 码农周刊：     http://weekly.manong.io/issues/
 
-      
-        
    
-          more >>
-        
    
-      
-      
    
-
    - - - - +3. 前端周刊： http://www.feweekly.com/issues +4. 慕课网： http://www.imooc.com/ +5. div.io： http://div.io +6. Hacker News： https://news.ycombinator.com/news +7. InfoQ： http://www.infoq.com/ +8. w3cplus： http://www.w3cplus.com/ - -
    - -
    - - - -
    - -
    - - - - -
    - - -

    - mysql访问权限控制命令 -

    - +9. Stack Overflow： http://stackoverflow.com/ -
    - - -
    - -

    为了保证安全性，mysql默认都是只允许localhost访问的，但是实际操作中，会需要远程访问。可以用下面的命令：

    -

    授权法

    1
    2
    mysql> GRANT ALL PRIVILEGES ON dbname.* TO 'myuser'@'%' IDENTIFIED BY 'mypassword' WITH GRANT OPTION;
    flush PRIVILEGES;
    -

    表示将dbname数据库的所有表的权限 授权给 任意ip 以myuser用户名和mypassword密码登录。然后立即刷新，使授权生效。

    -

    还有另一种方法是改表法，命令比较多，实际用起来不如授权法方便，这里就不写了～

    -

    参考资料

    1、解决MySQL不允许从远程访问的方法

    +10.w3school： http://www.w3school.com.cn/ +11.mozilla： https://developer.mozilla.org/zh-CN/docs/Web/ +

    文档推荐

      +

    1. jQuery 基本原理

      +
      2. +

    2. JavaScript 秘密花园

      +
      3. +

    3. CSS参考手册

      +
      4. +

    4. JavaScript 标准参考教程

      +
      5. +

    5. ECMAScript 6入门

      +
      6. +
    +

    ###更新时间: 2016-3-25

    +
    资料答案不够正确和全面，欢迎欢迎Star和提交issues。我的微博：http://weibo.com/920802999
+
    - +
    @@ -1237,11 +1385,11 @@

    +
    - - + +
    @@ -1254,7 +1402,7 @@

    - ife-2016s task3笔记 + 判断是否存在欧拉回路、欧拉路，输出欧拉路

    @@ -1263,22 +1411,23 @@

    -

    题目要求 传送门

    实现三栏式布局，要求左右两宽度固定，中间一栏填充父元素宽度

    -

    关键实现方法

    页面结构主要是由一个wrap包裹住所有模块，内含left、right、middle三个部分，其中left、right的float属性分别为left、right，middle的html代码一定要写在最后。然后固定左右两部分的宽度，设置中间栏的左右margin，差不多就可以完成三栏式的基本布局了。
    +

    前两天做到的题目。

    +

    题目描述

    给定若干个长度为4的字符串，用空格分隔，判断这些字符串能否排成首尾相连的字符串。字母区分大小写。

    +

    若不能，则输出ERROR；
    若可以形成首尾相连的圈，则输出CIRCLE；
    否则，依次输出排序后的所有字符串。

    - +

    - more >> + more >>

    @@ -1296,7 +1445,7 @@

    - 12 + 123

    diff --git a/public/tags/Github/index.html b/public/tags/Github/index.html index e4c5c43..d8cc207 100644 --- a/public/tags/Github/index.html +++ b/public/tags/Github/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git a/public/tags/Hexo/index.html b/public/tags/Hexo/index.html index b4a96e5..5c3af8d 100644 --- a/public/tags/Hexo/index.html +++ b/public/tags/Hexo/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git "a/public/tags/\345\210\233\344\270\232/index.html" "b/public/tags/\345\210\233\344\270\232/index.html" index 31adde6..806a062 100644 --- "a/public/tags/\345\210\233\344\270\232/index.html" +++ "b/public/tags/\345\210\233\344\270\232/index.html" @@ -109,7 +109,7 @@

    Cool King

    diff --git "a/public/tags/\345\211\215\347\253\257/index.html" "b/public/tags/\345\211\215\347\253\257/index.html" index cfbdb11..a6e185c 100644 --- "a/public/tags/\345\211\215\347\253\257/index.html" +++ "b/public/tags/\345\211\215\347\253\257/index.html" @@ -109,7 +109,7 @@

    Cool King

    @@ -198,6 +198,161 @@

    Cool King

    + + + + + + + + + + + + + + + + + + + +
    diff --git "a/public/tags/\345\244\247\346\225\260\346\215\256/index.html" "b/public/tags/\345\244\247\346\225\260\346\215\256/index.html" index 818b2a1..9c0695b 100644 --- "a/public/tags/\345\244\247\346\225\260\346\215\256/index.html" +++ "b/public/tags/\345\244\247\346\225\260\346\215\256/index.html" @@ -109,7 +109,7 @@

    Cool King

    diff --git "a/public/tags/\345\255\246\346\234\257/index.html" "b/public/tags/\345\255\246\346\234\257/index.html" index c6425d0..4ae77a3 100644 --- "a/public/tags/\345\255\246\346\234\257/index.html" +++ "b/public/tags/\345\255\246\346\234\257/index.html" @@ -109,7 +109,7 @@

    Cool King

    diff --git "a/public/tags/\345\267\245\344\275\234/index.html" "b/public/tags/\345\267\245\344\275\234/index.html" index aa1078b..0fbda29 100644 --- "a/public/tags/\345\267\245\344\275\234/index.html" +++ "b/public/tags/\345\267\245\344\275\234/index.html" @@ -109,7 +109,7 @@

    Cool King

    diff --git "a/public/tags/\346\200\273\347\273\223/index.html" "b/public/tags/\346\200\273\347\273\223/index.html" index 0867e02..f7845be 100644 --- "a/public/tags/\346\200\273\347\273\223/index.html" +++ "b/public/tags/\346\200\273\347\273\223/index.html" @@ -109,7 +109,7 @@

    Cool King

    @@ -202,14 +202,14 @@

    Cool King

    - - + +

    - 腾讯TST 前端面试总结（二） + 网易 前端面试总结

    @@ -233,14 +233,14 @@

    - - + +

    - 腾讯TST 前端面试总结（一） + 百度 前端面试总结（三）

    @@ -264,21 +264,21 @@

    - - + +

    - ife-2016s task4笔记 + 百度 前端面试总结（二）

    - +
    @@ -295,21 +295,21 @@

    - - + +

    - ife-2016s task3笔记 + 百度 前端面试总结（一）

    - +
    @@ -326,21 +326,21 @@

    - - + +

    - develop notes + 阿里提前批 前端面试总结（一）

    - +
    @@ -353,35 +353,56 @@

    - -

    - - -
    -
    - 2015 + + +
    - - + +

    - 【天池】穿衣搭配-第一赛季 + 腾讯TST 前端面试总结（一）

    - +
    @@ -398,21 +419,21 @@

    - - + +

    - 最近工作梳理 + ife-2016s task4笔记

    - +
    @@ -429,21 +450,21 @@

    - - + +

    - 日常 + ife-2016s task3笔记

    - +
    @@ -460,21 +481,21 @@

    - - + +

    - 逐渐走上正轨 + develop notes

    - +
    diff --git "a/public/tags/\346\212\200\346\234\257/index.html" "b/public/tags/\346\212\200\346\234\257/index.html" index 9a042c7..70ab110 100644 --- "a/public/tags/\346\212\200\346\234\257/index.html" +++ "b/public/tags/\346\212\200\346\234\257/index.html" @@ -109,7 +109,7 @@

    Cool King

    @@ -202,14 +202,14 @@

    Cool King

    - - + +

    - 腾讯TST 前端面试总结（二） + 网易 前端面试总结

    @@ -233,14 +233,14 @@

    - - + +

    - 腾讯TST 前端面试总结（一） + 百度 前端面试总结（三）

    @@ -264,21 +264,21 @@

    - - + +

    - ife-2016s task4笔记 + 百度 前端面试总结（二）

    - +
    @@ -295,21 +295,21 @@

    - - + +

    - mysql访问权限控制命令 + 百度 前端面试总结（一）

    - +
    @@ -326,21 +326,21 @@

    - - + +

    - ife-2016s task3笔记 + 阿里提前批 前端面试总结（一）

    - +
    @@ -357,21 +357,21 @@

    - - + +

    - develop notes + 腾讯TST 前端面试总结（二）

    - +
    @@ -384,35 +384,118 @@

    - -

    - - -
    -
    - 2015 + + + + + + + + + + +
    +
    +
    +
    + + + +
    + + +

    + ife-2016s task3笔记 +

    + + +
    + +
    +
    diff --git "a/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" "b/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" index 926ca6b..04b1f9e 100644 --- "a/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" +++ "b/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" @@ -109,7 +109,7 @@

    Cool King

    diff --git "a/public/tags/\347\224\237\346\264\273/index.html" "b/public/tags/\347\224\237\346\264\273/index.html" index 45c68f9..5665743 100644 --- "a/public/tags/\347\224\237\346\264\273/index.html" +++ "b/public/tags/\347\224\237\346\264\273/index.html" @@ -109,7 +109,7 @@

    Cool King

    diff --git "a/public/tags/\347\247\257\347\264\257/index.html" "b/public/tags/\347\247\257\347\264\257/index.html" index 786d689..ddf0cc3 100644 --- "a/public/tags/\347\247\257\347\264\257/index.html" +++ "b/public/tags/\347\247\257\347\264\257/index.html" @@ -109,7 +109,7 @@

    Cool King

    @@ -202,21 +202,21 @@

    Cool King

    - +

    - 围棋 判断是否需要吃子，吃掉多少 + 前端面试题 积累

    - +
    @@ -233,21 +233,21 @@

    - +

    - 前端面试题 积累 + 围棋 判断是否需要吃子，吃掉多少

    - +
    diff --git a/source/_posts/TST-frontend-interview.md b/source/_posts/TST-frontend-interview.md deleted file mode 100644 index e82d441..0000000 --- a/source/_posts/TST-frontend-interview.md +++ /dev/null @@ -1,30 +0,0 @@ -title: 腾讯TST 前端面试总结（一） -date: 2016-07-26 16:46:51 -tags: [前端,总结,技术,面试] ---- -校招终于拉开帷幕了，投了几个公司，企鹅动作最快了，简直不知道开心还是不开心好了～😂 - -第一次正式的电话面试就献给企鹅了～ - -7月19日投的内推简历，21日就来电话了～幸好当时在工作室里刚吃完晚饭。。。😂 - -投的是前端开发，凭回忆记录下几个题目吧： - -1. 首先介绍下做过的自我感觉最好的项目 - 我就只能拿枪弹柜这个说了，只是因为我全程都参与这个项目，最为了解，但是其实说实话它虽然体量还算庞大，用到了好些个相关技术，但是却不深，感觉并没有太大说服力。面试官也没有太多地深入问。所以感觉最好要有一个自己从头开发的有难度的小项目就好了，若是在github上有star或者fork肯定更加分～ - -2. css的margin重叠问题 - 说实话，之前并没有系统地了解过，只有个大概的映像，答的不好，详细答案在[这里](http://www.hujuntao.com/web/css/css-margin-overlap.html)。 - -3. javascript的事件绑定 - -4. 性能优化问题 - 这个不太了解，没说 - -5. 安全性问题 - 这个不太了解，没说 - -其他的想到再补充吧。。。😂 - -总的来说，自我感觉不太满意，但是面试哥哥的声音好好听啊。。。😄人也好nice，最后问我还有没有啥问题，我问了他们现在用的前端技术都是啥，结果他很详细的跟我介绍了一遍，还是很有收获哒～ -真正公司里的前端需要考虑的地方有很多，平常许多没注意到或者没精力顾及到的问题，在这里都需要考虑，而且还很重要。 diff --git a/source/_posts/TST-frontend-interview2.md b/source/_posts/TST-frontend-interview2.md deleted file mode 100644 index 2311541..0000000 --- a/source/_posts/TST-frontend-interview2.md +++ /dev/null @@ -1,35 +0,0 @@ -title: 腾讯TST 前端面试总结（二） -date: 2016-07-26 19:00:51 -tags: [前端,总结,技术,面试] ---- -上午刚回家，晚饭前二面就突然来了😂 - -这次请求了十分钟准备😂： - -1. 如果一个页面打开了之后空白，你会如何定位问题？如果不是网络、服务器的问题，就是前端问题，该如何定位？ - -2. 平常用什么浏览器?怎么调试的？chrome开发者工具平常都用到了什么？关于性能的调试用到了啥？ - 我说主要是chrome；用chrome的开发者工具；除了性能，我其它的基本都有了😂。 - -3. 关于HTTP，cache怎么控制的？如果允许缓存，一个页面访问缓存的流程是怎样的？ - 我说用cache-control,pragma; - -4. 关于项目：php用的什么版本？nodejs的websocket是自己实现的还是用的组件？如何划分模块？开发环境是windows还是linux？ - 这个基本上就照实说了。 - -5. 用了什么前端构建工具？ - grunt，介绍了用过什么功能，是否自己搭建。 - -6. js中setTimeout的函数执行时间？触发了setTimeout后会立即执行吗？ - -7. 关于前端性能、安全性问题？提到了CSIF - -8. H5的移动端和PC端页面开发有什么区别？ - -9. window.onload 是什么时候触发的？ - 啊这个问题前两天才看过T^T...然后不确定，本来想说是在完全加载完成后执行的，结果最后还是答了个错的答案。。QAQ。。。[window.onload与document.ready的区别](http://www.jb51.net/article/21628.htm). - -10. jquery的入口函数写在哪里？为什么？ - 我说写在页面的body结束前，因为这样页面都会加载完再执行js代码。应该少说了个 页面的加载不会被js代码阻塞 吧。 - -同样的，这次的面试官声音也好好听啊。。。😂然而基本都是问我了解过的东西，不是很深，感觉还是比较看重基础扎实的。 diff --git a/source/_posts/front-end-interview-questions.md b/source/_posts/front-end-interview-questions.md deleted file mode 100644 index c962ec0..0000000 --- a/source/_posts/front-end-interview-questions.md +++ /dev/null @@ -1,532 +0,0 @@ -title: 前端面试题 积累 -date: 2016-05-30 14:09:24 -tags: [算法, 积累, 前端, 面试] ---- -基础知识是一切的基石！ - -由于目前前端的东西全都是自己自学然后实践得来的，并不系统，写这篇blog的直接目的是为了记录前端面试可能会遇到的问题，间接目的主要是能够让自己开始系统地学习这些知识，为更长远的发展奠定基础。问题是转来的[1](https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Question/README.md)，答案是用自己的理解叙述的。 - -#前端基础知识点 - HTML&CSS： - 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 - HTML5、CSS3、Flexbox - - JavaScript： - 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 - DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs - - 其他： - 移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力 - - -#前端开发面试题 - - -## 目录 - - 1. [HTML部分](#html) - 1. [CSS部分](#css) - 1. [JavaScript部分](#js) - 1. [其他问题](#other) - 1. [前端学习网站推荐](#web) - - -## HTML - -- Doctype作用？严格模式与混杂模式如何区分？它们有何意义? - 1. Doctype是用于标识文档的HTML或XHTML规范，浏览器根据这个标签使用相应的规范解析页面，DOCTYPE不对或不存在将以兼容模式呈现； - 2. - 3. 严格模式是以该浏览器的最高标准运行；混杂模式（兼容模式）是以宽松的向后兼容的模式运行，模拟老式浏览器的行为使页面得以正常显示。 - -- HTML5 为什么只需要写 ？ - -- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ - 1. 行内元素：span、a、b、img、input、select、strong、i - 2. 块级元素：div、form、h1(2,3...)、p、ul、ol、li、dl、dt、dd - 3. 空元素：hr、br、img、input、link、meta；textarea - -- 页面导入样式时，使用link和@import有什么区别？ - 1. link在页面加载时同时加载，而@import在页面加载后再加载； - 2. link；@import只用于css中引入其他css - -- 介绍一下你对浏览器内核的理解？ - -- 常见的浏览器内核有哪些？ - 1. webkit - -- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 -HTML5？ - -- 简述一下你对HTML语义化的理解？ - 1. 语义化就是在去掉css之后页面呈现的文档顺序依然正确，用户也可以理解页面内容。 - 2. 语义化对于开发者理解和维护代码有帮助 - -- HTML5的离线储存怎么使用，工作原理能不能解释一下？ - 1. sessionStorage - -- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ - -- 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ - 1. cookies： - 1. sessionStorage：就是会话时间内的存储 - 1. localStorage：本地存储，可以在关闭浏览器后继续保存。 - -- iframe有那些缺点？ - -- Label的作用是什么？是怎么用的？（加 for 或 包裹） - -- HTML5的form如何关闭自动完成功能？ - -- 如何实现浏览器内多个标签页之间的通信? (阿里) - -- webSocket如何兼容低浏览器？(阿里) - -- 页面可见性（Page Visibility API） 可以有哪些用途？ - -- 如何在页面上实现一个圆形的可点击区域？ - -- 实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。 - -- 网页验证码是干嘛的，是为了解决什么安全问题？ - -- title与h1的区别、b与strong的区别、i与em的区别？ - - -## CSS - -- 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ - -- CSS选择符有哪些？哪些属性可以继承？ - -- CSS优先级算法如何计算？ - -- CSS3新增伪类有那些？ - -- 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ - -- display有哪些值？说明他们的作用。 - -- position的值relative和absolute定位原点是？ - -- CSS3有哪些新特性？ - -- 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？ - -- 用纯CSS创建一个三角形的原理是什么？ - -- 一个满屏 品 字布局 如何设计? - -- 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？ - -- li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ - -- 为什么要初始化CSS样式? - -- absolute的containing block计算方式跟正常流有什么不同？ - -- CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？ - -- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ - -- 对BFC规范(块级格式化上下文：block formatting context)的理解？ - -- CSS权重优先级是如何计算的？ - -- 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式 - -- 移动端的布局用过媒体查询吗？ - -- 使用 CSS 预处理器吗？喜欢那个？ - -- CSS优化、提高性能的方法有哪些？ - -- 浏览器是怎样解析CSS选择器的？ - -- 在网页中的应该使用奇数还是偶数的字体？为什么呢？ - -- margin和padding分别适合什么场景使用？ - -- 抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题] - -- 元素竖向的百分比设定是相对于容器的高度吗？ - -- 全屏滚动的原理是什么？用到了CSS的那些属性？ - -- 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？ - -- 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？） - -- ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。 - -- 如何修改chrome记住密码后自动填充表单的黄色背景 ？ - -- 你对line-height是如何理解的？ - -- 设置元素浮动后，该元素的display值是多少？（自动变成display:block） - -- 怎么让Chrome支持小于12px 的文字？ - -- 让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;） - -- font-style属性可以让它赋值为“oblique” oblique是什么意思？ - -- position:fixed;在android下无效怎么处理？ - -- 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） - -- display:inline-block 什么时候会显示间隙？(携程) - -- overflow: scroll时不能平滑滚动的问题怎么处理？ - -- 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。 - -- png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？ - -- 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做） - -- style标签写在body后与body前有什么区别？ - -- 什么是CSS 预处理器 / 后处理器？ - -## JavaScript - -- 介绍JavaScript的基本数据类型。 - -- 说说写JavaScript的基本规范？ - -- JavaScript原型，原型链 ? 有什么特点？ - -- JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？ - -- Javascript如何实现继承？ - -- Javascript创建对象的几种方式？ - -- Javascript作用链域? - -- 谈谈this对象的理解。 - -- eval是做什么的？ - -- 什么是window对象? 什么是document对象? - -- null，undefined的区别？ - -- 写一个通用的事件侦听器函数(机试题)。 - -- ["1", "2", "3"].map(parseInt) 答案是多少？ - -- 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？ - -- 什么是闭包（closure），为什么要用它？ - -- javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？ - -- 如何判断一个对象是否属于某个类？ - -- new操作符具体干了什么呢? - -- 用原生JavaScript的实现过什么功能吗？ - -- Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ - -- 对JSON的了解？ - -- `[].forEach.call($$("*"),function(a){ - a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) -})` 能解释一下这段代码的意思吗？ - -- js延迟加载的方式有哪些？ - -- Ajax 是什么? 如何创建一个Ajax？ - -- 同步和异步的区别? - -- 如何解决跨域问题? - -- 页面编码和被请求的资源编码如果不一致如何处理？ - -- 模块化开发怎么做？ - -- AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？ - -- requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 -缓存的？） - -- 谈一谈你对ECMAScript6的了解？ - -- ECMAScript6 怎么写class，为什么会出现class这种东西? - -- 异步加载的方式有哪些？ - -- documen.write和 innerHTML的区别? - -- DOM操作——怎样添加、移除、移动、复制、创建和查找节点? - -- .call() 和 .apply() 的作用和区别？ - -- 数组和对象有哪些原生方法，列举一下？ - -- JS 怎么实现一个类。怎么实例化这个类 - -- JavaScript中的作用域与变量声明提升？ - -- 如何编写高性能的Javascript？ - -- 那些操作会造成内存泄漏？ - -- JQuery的源码看过吗？能不能简单概况一下它的实现原理？ - -- jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？ - -- jquery中如何将数组转化为json字符串，然后再转化回来？ - -- jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？ - -- jquery.extend 与 jquery.fn.extend的区别？ - -- jQuery 的队列是如何实现的？队列可以用在哪些地方？ - -- 谈一下Jquery中的bind(),live(),delegate(),on()的区别？ - -- JQuery一个对象可以同时绑定多个事件，这是如何实现的？ - -- 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？ - -- jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle） - -- 针对 jQuery性能的优化方法？ - -- Jquery与jQuery UI有啥区别？ - -- JQuery的源码看过吗？能不能简单说一下它的实现原理？ - -- jquery 中如何将数组转化为json字符串，然后再转化回来？ - -- jQuery和Zepto的区别？各自的使用场景？ - -- 针对 jQuery 的优化方法？ - -- Zepto的点透问题如何解决？ - -- jQueryUI如何自定义组件? - -- 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？ - -- 如何判断当前脚本运行在浏览器还是node环境中？（阿里） - -- 移动端最小触控区域是多大？ - -- jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢? - -- 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？ - -- 移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。） - -- 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么? -- Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？ - -- 解释JavaScript中的作用域与变量声明提升？ - -- 那些操作会造成内存泄漏？ - -- JQuery一个对象可以同时绑定多个事件，这是如何实现的？ - -- Node.js的适用场景？ - -- (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么? -- 解释一下 Backbone 的 MVC 实现方式？ - -- 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点? - -- 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么? - -- 如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)? - -- 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用? - -- 简述一下 Handlebars 的基本用法？ - -- 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？ - -- 用js实现千位分隔符?(来源：[前端农民工](http://div.io/topic/744)，提示：正则+replace) - -- 检测浏览器版本版本有哪些方式？ - -- What is a Polyfill? - -- 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？ - -- 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？ - - -#### ECMAScript6 相关 - -- Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？ - - -#### 前端框架相关 - -- react-router 路由系统的实现原理？ - - -- React中如何解决第三方类库的问题? - - - -## 其他问题 - -- 原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？ - -- 你遇到过比较难的技术问题是？你是如何解决的？ - -- 设计模式 知道什么是singleton, factory, strategy, decrator么? - -- 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？ - -- 页面重构怎么操作？ - -- 列举IE与其他浏览器不一样的特性？ - -- 99%的网站都需要被重构是那本书上写的？ - -- 什么叫优雅降级和渐进增强？ - -- 是否了解公钥加密和私钥加密。 - -- WEB应用从服务器主动推送Data到客户端有那些方式？ - -- 对Node的优点和缺点提出了自己的看法？ - -- 你有用过哪些前端性能优化的方法？ - -- http状态码有那些？分别代表是什么意思？ - -- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好） - -- 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？ - -- 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决? - -- 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？ - -- 你用的得心应手用的熟练地编辑器&开发环境是什么样子？ - -- 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？ - -- 你怎么看待Web App 、hybrid App、Native App？ - -- 你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？） - -- 你对加班的看法？ - -- 平时如何管理你的项目？ - -- 说说最近最流行的一些东西吧？常去哪些网站？ - -- 如何设计突发大规模并发架构？ - -- 说说最近最流行的一些东西吧？常去哪些网站？ - -- 是否了解开源的工具 bower、npm、yeoman、grunt、gulp，一个 npm 的包里的 package.json 具备的必要的字段都有哪些？（名称、版本号，依赖） - -- 每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的？ - -- Git知道branch, diff, merge么? - -- 如何设计突发大规模并发架构？ - -- 当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？ - -- 说说最近最流行的一些东西吧？平时常去哪些网站？ - -- 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么? - -- 移动端（Android IOS）怎么做好用户体验? - -- 简单描述一下你做过的移动APP项目研发流程？ - -- 你在现在的团队处于什么样的角色，起到了什么明显的作用？ - -- 你认为怎样才是全端工程师（Full Stack developer）？ - -- 介绍一个你最得意的作品吧？ - -- 你有自己的技术博客吗，用了哪些技术？ - -- 对前端安全有什么看法？ - -- 是否了解Web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度？ - -- 项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？。 - -- 最近在学什么东西？ - -- 你的优点是什么？缺点是什么？ - -- 如何管理前端团队? - -- 最近在学什么？能谈谈你未来3，5年给自己的规划吗？ - - - -## 有趣的问题 - - -- .A、B两人分别在两座岛上。B生病了，A有B所需要的药。C有一艘小船和一个可以上锁的箱子。C愿意在A和B之间运东西，但东西只能放在箱子里。只要箱子没被上锁，C都会偷走箱子里的东西，不管箱子里有什么。如果A和B各自有一把锁和只能开自己那把锁的钥匙，A应该如何把东西安全递交给B？ - - - 答案：A把药放进箱子，用自己的锁把箱子锁上。B拿到箱子后，再在箱子上加一把自己的锁。 - 箱子运回A后，A取下自己的锁。箱子再运到B手中时，B取下自己的锁，获得药物。 - -- Amazon主页的左上角有一个商品分类浏览的下拉菜单 没有延迟，而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢？ - - 答案是通过探测鼠标移动的方向和轨迹，具体查看Khan Academy工程师 Ben Kamens 写的 jQuery插件 -![这是 Khan Academy工程师 Ben Kamens 写的 jQuery插件](http://a.36krcnd.com/photo/3f716d75a80cdce23c803fc6f088846e.png) - - -## 前端学习网站推荐 - - 1. 极客标签： http://www.gbtags.com/ - - 2. 码农周刊： http://weekly.manong.io/issues/ - - 3. 前端周刊： http://www.feweekly.com/issues - - 4. 慕课网： http://www.imooc.com/ - - 5. div.io： http://div.io - - 6. Hacker News： https://news.ycombinator.com/news - - 7. InfoQ： http://www.infoq.com/ - - 8. w3cplus： http://www.w3cplus.com/ - - 9. Stack Overflow： http://stackoverflow.com/ - - 10.w3school： http://www.w3school.com.cn/ - - 11.mozilla： https://developer.mozilla.org/zh-CN/docs/Web/ - - - -## 文档推荐 - - -1. [jQuery 基本原理](http://docs.huihoo.com/jquery/jquery-fundamentals/zh-cn/index.html "jQuery 基本原理") - -2. [JavaScript 秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/) - -3. [CSS参考手册](http://css.doyoe.com/) - -4. [JavaScript 标准参考教程](http://javascript.ruanyifeng.com/) - -5. [ECMAScript 6入门](http://es6.ruanyifeng.com/) - - -###更新时间: 2016-3-25 - - - - 资料答案不够正确和全面，欢迎欢迎Star和提交issues。我的微博：http://weibo.com/920802999 From bd630a252d126b181add77d81f85ee69145b4713 Mon Sep 17 00:00:00 2001 From: codingstar Date: Tue, 1 Nov 2016 16:32:05 +0800 Subject: [PATCH 23/23] add post --- public/2015/05/28/daily-life/index.html | 2 +- public/2015/05/28/hexo-with-github/index.html | 2 +- public/2015/06/02/daily-work/index.html | 2 +- public/2015/06/08/SCBPM-paper-note/index.html | 2 +- public/2015/09/20/recent-for-0920/index.html | 2 +- .../2015/10/28/tianchi-round-one/index.html | 2 +- public/2016/03/19/develop-notes/index.html | 2 +- public/2016/03/28/ife-task3/index.html | 2 +- public/2016/03/30/mysql-privileges/index.html | 2 +- public/archives/2015/05/index.html | 2 +- public/archives/2015/06/index.html | 2 +- public/archives/2015/09/index.html | 2 +- public/archives/2015/10/index.html | 2 +- public/archives/2015/index.html | 2 +- public/archives/2016/03/index.html | 2 +- public/archives/2016/index.html | 105 +- public/archives/index.html | 92 +- public/index.html | 917 +++--------------- public/tags/Github/index.html | 2 +- public/tags/Hexo/index.html | 2 +- .../tags/\345\210\233\344\270\232/index.html" | 2 +- .../tags/\345\211\215\347\253\257/index.html" | 250 +---- .../index.html" | 2 +- .../tags/\345\255\246\346\234\257/index.html" | 2 +- .../tags/\345\267\245\344\275\234/index.html" | 43 +- .../tags/\346\200\273\347\273\223/index.html" | 134 +-- .../tags/\346\212\200\346\234\257/index.html" | 203 +--- .../index.html" | 2 +- .../tags/\347\224\237\346\264\273/index.html" | 2 +- .../tags/\347\247\257\347\264\257/index.html" | 33 +- source/_posts/2016-season3.md | 24 + 31 files changed, 378 insertions(+), 1467 deletions(-) create mode 100644 source/_posts/2016-season3.md diff --git a/public/2015/05/28/daily-life/index.html b/public/2015/05/28/daily-life/index.html index eebb1fc..e74dbfb 100644 --- a/public/2015/05/28/daily-life/index.html +++ b/public/2015/05/28/daily-life/index.html @@ -113,7 +113,7 @@

    Cool King

    diff --git a/public/2015/05/28/hexo-with-github/index.html b/public/2015/05/28/hexo-with-github/index.html index 158c707..5da27a7 100644 --- a/public/2015/05/28/hexo-with-github/index.html +++ b/public/2015/05/28/hexo-with-github/index.html @@ -119,7 +119,7 @@

    Cool King

    diff --git a/public/2015/06/02/daily-work/index.html b/public/2015/06/02/daily-work/index.html index ebfa24b..cc418d3 100644 --- a/public/2015/06/02/daily-work/index.html +++ b/public/2015/06/02/daily-work/index.html @@ -113,7 +113,7 @@

    Cool King

    diff --git a/public/2015/06/08/SCBPM-paper-note/index.html b/public/2015/06/08/SCBPM-paper-note/index.html index 1212607..da744dc 100644 --- a/public/2015/06/08/SCBPM-paper-note/index.html +++ b/public/2015/06/08/SCBPM-paper-note/index.html @@ -126,7 +126,7 @@

    Cool King

    diff --git a/public/2015/09/20/recent-for-0920/index.html b/public/2015/09/20/recent-for-0920/index.html index 5bdb4b3..4c1345a 100644 --- a/public/2015/09/20/recent-for-0920/index.html +++ b/public/2015/09/20/recent-for-0920/index.html @@ -116,7 +116,7 @@

    Cool King

    diff --git a/public/2015/10/28/tianchi-round-one/index.html b/public/2015/10/28/tianchi-round-one/index.html index 10626b1..55086df 100644 --- a/public/2015/10/28/tianchi-round-one/index.html +++ b/public/2015/10/28/tianchi-round-one/index.html @@ -116,7 +116,7 @@

    Cool King

    diff --git a/public/2016/03/19/develop-notes/index.html b/public/2016/03/19/develop-notes/index.html index 63ca90a..9c8e775 100644 --- a/public/2016/03/19/develop-notes/index.html +++ b/public/2016/03/19/develop-notes/index.html @@ -116,7 +116,7 @@

    Cool King

    diff --git a/public/2016/03/28/ife-task3/index.html b/public/2016/03/28/ife-task3/index.html index 9347617..c9bc699 100644 --- a/public/2016/03/28/ife-task3/index.html +++ b/public/2016/03/28/ife-task3/index.html @@ -113,7 +113,7 @@

    Cool King

    diff --git a/public/2016/03/30/mysql-privileges/index.html b/public/2016/03/30/mysql-privileges/index.html index bb6b995..016cbe7 100644 --- a/public/2016/03/30/mysql-privileges/index.html +++ b/public/2016/03/30/mysql-privileges/index.html @@ -116,7 +116,7 @@

    Cool King

    diff --git a/public/archives/2015/05/index.html b/public/archives/2015/05/index.html index 240b0d1..a045b1d 100644 --- a/public/archives/2015/05/index.html +++ b/public/archives/2015/05/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git a/public/archives/2015/06/index.html b/public/archives/2015/06/index.html index 90beb79..2f73882 100644 --- a/public/archives/2015/06/index.html +++ b/public/archives/2015/06/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git a/public/archives/2015/09/index.html b/public/archives/2015/09/index.html index fe907d6..9872993 100644 --- a/public/archives/2015/09/index.html +++ b/public/archives/2015/09/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git a/public/archives/2015/10/index.html b/public/archives/2015/10/index.html index 251c3af..5dfc040 100644 --- a/public/archives/2015/10/index.html +++ b/public/archives/2015/10/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git a/public/archives/2015/index.html b/public/archives/2015/index.html index 252615a..87e0e99 100644 --- a/public/archives/2015/index.html +++ b/public/archives/2015/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git a/public/archives/2016/03/index.html b/public/archives/2016/03/index.html index d8c721b..dabc3eb 100644 --- a/public/archives/2016/03/index.html +++ b/public/archives/2016/03/index.html @@ -109,7 +109,7 @@

    Cool King

    diff --git a/public/archives/2016/index.html b/public/archives/2016/index.html index ece84ba..ce2ecef 100644 --- a/public/archives/2016/index.html +++ b/public/archives/2016/index.html @@ -109,7 +109,7 @@

    Cool King

    @@ -202,21 +202,21 @@

    Cool King

    - - + +

    - 网易 前端面试总结 + 2016-season3

    - +
    @@ -233,52 +233,21 @@

    - - - -
    - - -

    - 百度 前端面试总结（三） -

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

    - - - -
    -
    -
    -
    - - + +

    - 百度 前端面试总结（二） + 围棋 判断是否需要吃子，吃掉多少

    - +
    @@ -295,21 +264,21 @@

    - - + +

    - 百度 前端面试总结（一） + 判断是否存在欧拉回路、欧拉路，输出欧拉路

    - +
    @@ -326,21 +295,21 @@

    - - + +

    - 阿里提前批 前端面试总结（一） + ife-2016s task4笔记

    - +
    @@ -357,21 +326,21 @@

    - - + +

    - 腾讯TST 前端面试总结（二） + 判断一棵树是否是另一棵树的子树

    - +
    @@ -388,21 +357,21 @@

    - - + +

    - 腾讯TST 前端面试总结（一） + 一般推荐问题和搭配问题的异同

    - +
    @@ -419,21 +388,21 @@

    - - + +

    - 围棋 判断是否需要吃子，吃掉多少 + mysql访问权限控制命令

    - +
    @@ -450,21 +419,21 @@

    - - + +

    - 前端面试题 积累 + ife-2016s task3笔记

    - +
    @@ -481,21 +450,21 @@

    - - + +

    - 判断是否存在欧拉回路、欧拉路，输出欧拉路 + develop notes

    - +
    diff --git a/public/archives/index.html b/public/archives/index.html index cb1f559..dd5d038 100644 --- a/public/archives/index.html +++ b/public/archives/index.html @@ -109,7 +109,7 @@

    Cool King

    @@ -202,21 +202,21 @@

    Cool King

    - - + +

    - 网易 前端面试总结 + 2016-season3

    - +
    @@ -233,21 +233,21 @@

    - - + +

    - 百度 前端面试总结（三） + 围棋 判断是否需要吃子，吃掉多少

    - +
    @@ -264,21 +264,21 @@

    - - + +

    - 百度 前端面试总结（二） + 判断是否存在欧拉回路、欧拉路，输出欧拉路

    - +
    @@ -295,21 +295,21 @@

    - - + +

    - 百度 前端面试总结（一） + ife-2016s task4笔记

    - +
    @@ -326,21 +326,21 @@

    - - + +

    - 阿里提前批 前端面试总结（一） + 判断一棵树是否是另一棵树的子树

    - +
    @@ -357,21 +357,21 @@

    - - + +

    - 腾讯TST 前端面试总结（二） + 一般推荐问题和搭配问题的异同

    - +
    @@ -388,21 +388,21 @@

    - - + +

    - 腾讯TST 前端面试总结（一） + mysql访问权限控制命令

    - +
    @@ -419,21 +419,21 @@

    - - + +

    - 围棋 判断是否需要吃子，吃掉多少 + ife-2016s task3笔记

    - +
    @@ -450,21 +450,21 @@

    - - + +

    - 前端面试题 积累 + develop notes

    - +
    @@ -477,25 +477,35 @@

    + +

    + + +
    +
    + 2015 +
    +
    +
    - - + +

    - 判断是否存在欧拉回路、欧拉路，输出欧拉路 + 【天池】穿衣搭配-第一赛季

    - +
    diff --git a/public/index.html b/public/index.html index 0b09b31..676e0d2 100644 --- a/public/index.html +++ b/public/index.html @@ -109,7 +109,7 @@

    Cool King

    @@ -187,11 +187,11 @@

    Cool King

    -
    +
    - - + +
    @@ -204,7 +204,7 @@

    Cool King

    - 网易 前端面试总结 + 2016-season3

    @@ -213,38 +213,20 @@

    -

    现场面试，定的时间是四点钟，结果两点不到就到了，本来还希望可能能早点开始面呢，结果还是得四点开始。16:00～16:50一面，19:00左右开始二面，然后紧接着hr面。

    -

    #一面
    自我介绍，然后介绍一个项目，自己做了哪些？然后就是根据说的想到哪儿问到哪儿。基本都是启发式的基础问题，都不是直接问知识点，而是从你的项目中寻找可能的知识点来问，所以最好要能识破她问的目的，然后尽可能地给出各种解决方案。一面面试官好温柔，一直笑眯眯地期待你给出答案，所以我就扯得比较多。主要能想起来的问题如下：

    +

    校招总算告一段落了，从七月底开始关注内推，到10月底把自己的卖身契寄出去，总算是有了个比较满意的结果了～

    +

    简单经过就是：内推A(1)T(2)B(3)W(3)轮挂，校招基本目标公司笔试都过，面试除了滴滴岗位不合适挂了，其他的基本都到了终面，BATW可能由于内推也挂了，京东不清楚，最终收获了远景、新美大、小米、携程、七牛的offer。

    +

    但拿再多的offer，最终也只能在一家打工～ 但是这段经历确实是走入工作岗位前的一笔不小的财富。

    +

    对于后来者，有几个建议：

      -

    1. 闭包的作用，用法。

      -
      2. -

    2. ES6有用过哪些特性？

      -
      3. -

    3. 给了段代码，问输出什么。主要是考作用域链和this

      -
      4. -

    4. 实现左定宽右撑满的布局。盒子模型。要使盒子表现与IE一致该如何？

      -
      5. -

    5. 事件机制，如何绑定事件处理函数。

      -
      6. -

    6. js异步模式如何实现？

      -
      7. -

    7. 如何获取某个DOM节点，节点遍历方式？

      -
      8. -

    8. 用LESS如何给某些属性加浏览器前缀？

      -
      9. -
    -

    我问的问题：
    杭研公共技术团队是做什么的？

    -

    #二面
    二面等了好久，中间还吃了个饭，开始的时候面试官还问是不是等久了。。。😂这个面试官感觉就完全不一样，好有压迫感。。。紧脏
    随后就是自我介绍，然后他就问我最薄弱的部分是啥？我就说是原生js，然后我的噩梦就开始了。。。😂

    -
      -

    1. js类的继承方式，并实现。

      -
      2. -

    2. 要实现函数内每隔5秒调用自己这个函数，100次以后停止，怎么办。

      -

      第一个问题是我最不想被问到的问题，一紧张全忘光乱套了，被鄙视；第二个问题其实静下心来想应该是可以做好的，但是由于第一题的影响，哎还是乱了阵脚。可能面试官也觉得我很low吧。。。＝ ＝。。但是可能看我等了这么久，还是放我去hr面了。

      -
      3. +
    3. 尽早确定目标并制定复习计划，尽早复习相关知识；
      4. +
    4. 内推有利有弊，有把握的同学大可放心去参加内推收割offer，但是如果没准备好，有可能会影响校招的结果；然而我内推的虽然都没通过校招拿到offer，却让我短时间内了解到企业需要的知识点，好让我针对性地复习，快速掌握所需技能；
      5. +
    5. 笔试很重要，平常注重算法编程能力的训练，校招前再集中刷下选择题，问题就不会太大；
      6. +
    6. 面试之后一定、一定、一定要及时总结！整理问到的问题，不会的搞懂，说的不好的可以请教下同学，讨论下怎么说会更好；
      7. +
    7. 求职过程中要及时认清所属阶段，是处于海投期还是笔试期，0 offer或没有什么满意offer的时候，还是有了比较好的在找更好的时候，这有助于调整笔试面试策略；
    -

    我问的问题：
    为什么不问我别的知识点？比如css之类的？他说css和js是前端的两个大头，然后貌似说css他也不太熟。。。？？（可能我听差了吧。。😂）
    团队中尤其是新人，一般都做些什么工作？
    用什么技术框架？

    -

    #HR面
    这个就是各种扯吧，择业观啊啥的，感觉是按他们电脑上的问题问的。不知道啥情况。

    -

    #总结
    js代码能力亟需加强，要动手实践，加深印象。

    +

    对于自己，更重要的则是面试过程中，与面试官交流时提到的一些技术，需要有更多的时间去深入学习沉淀，才能使自己的技能树更加完善。对于前端工程师，可能前端入门容易，所以很多人都认为是切图的😂，但是它首先是个程序员，其次才是前端，一些必要的基础知识还是要多去了解，不能把自己局限在一个框里。

    +

    最后，对于自己的第三季度的结果，还是挺满意的，震荡上升的潜力股啊哦吼吼吼～（不要脸😂）期间也有很多小伙伴帮忙，也认识了一些可爱的大神，希望以后有机会可以面基～后面要专心写论文啦～

    +

    想对自己说：不忘技术初心！

    @@ -252,7 +234,7 @@

    - +
    @@ -271,11 +253,11 @@

    -
    +
    - - + +
    @@ -288,7 +270,7 @@

    - 百度 前端面试总结（三） + 围棋 判断是否需要吃子，吃掉多少

    @@ -297,41 +279,29 @@

    -

    新的里程碑，三面了，视频面，不造会问些啥，以为会现场写代码呢，结果发现准备偏了。。。QAQ

    -

    #Questions

    -
      -

    1. 自我介绍

      -
      2. -

    2. 介绍印象最深刻的项目，为什么？
      这种要好好总结自己的项目，组织好语言，我就是因为没准备好，讲得比较乱，给人感觉逻辑不清晰。

      -
      3. -

    3. 详细介绍下某个项目？

      -
      4. -

    4. 大学期间最自豪的事情是什么？

      -
      5. -

    5. ACM经历，研究生课题。

      -
      6. -

    6. 关于我研究的推荐算法，比较下京东、天猫的商品推荐哪个好？
      略懵比。

      -
      7. -

    7. 比如淘宝的推荐系统和用户画像系统，有了解么？
      持续懵比。

      -
      8. -

    8. 比如秦淮区，要想估计大概有多少个药房，怎么办？
      。。。。彻底懵比了。。。。QAQ

      -
      9. -
    -

    然后我问的问题：
    您带的都有哪些团队？希望应届生具有哪些技能？给我的建议？

    -

    #总结
    三面面试官还是很nice的，没有太大的压迫感，对我的评价还是很中肯的，一针见血地给我提出了一些问题和建议，还是很感谢他的。说到项目的时候，要善于熟练运用STAR法则描述。
    感觉他们这个提前批需要的除了技术过关之外，还希望有优秀的聪明的同学加入，学习能力和灵活性要强，在自己的工作中要追求极致，要有主人翁意识。

    - +

    前两天做到的题目。

    +

    题目描述

    给定一个10*10的棋盘，0代表空，1代表白子，2代表黑子。
    双方可以连续下子。
    一个上下左右连续的棋子块，其上下左右的空白位置就是它的气，当某次下子使对手的棋子的气为0时，就要吃掉那些气为0的棋子。
    有几种情况：

    +
    1. 当落子仅使自己的气为0(a)，或下到非空白处时(b)，输出`2147483647`；
+2. 当落子正确且没有吃子时，输出`0`；
+3. 当落子将对手的气为0时，输出吃掉的棋子个数，正数为白子，负数为黑子；
+4. 当落子使双方气都为0时，只能吃掉对手的棋，输出棋子个数（同3）。
+
    - +
    +

    + more >> +

    +
    @@ -345,11 +315,11 @@

    -
    +
    - - + +
    @@ -362,7 +332,7 @@

    - 百度 前端面试总结（二） + 判断是否存在欧拉回路、欧拉路，输出欧拉路

    @@ -371,57 +341,25 @@

    -

    百度运维部

    -

    每次等电话之前都好煎熬好紧脏啊。。。😂

    -
      -

    1. 介绍项目，一个个来，细节、难点之类的

      -
      2. -

    2. 提到node.js实现过什么组件？

      -
      3. -

    3. 消息通知这个为什么选择用websocket？如何技术选型的，为什么要用nodejs实现？

      -
      4. -

    4. 之前讲的是PC端的页面，那么H5之于移动端的实现有什么注意点？有什么针对网络制式的优化？
      这边网络制式只是讲了个大概，具体实现还是没太去了解，汗

      -
      5. -

    5. 分析慢请求的原因，如何优化。
      这里主要讲了加载优化，其实还有css优化、图片优化之类的可以讲。

      -
      6. -

    6. 对于HTTPS的了解，原理？
      这题答得不是很好，首先不太确定他意思，我以为onclick是指在html标签中指定属性，就按这个答了，后来发现他可能指的是dom属性设置的方式。。＝ ＝

      -
      7. -

    7. Jquery绑定事件如何实现？
      说了事件代理。

      -
      8. -

    8. $(document).ready()和window.onload的区别，同时存在时，执行顺序是怎样的？
      当时二叉了，前面区别都答得好好的，但是问到执行顺序时，由于没有实践过，一时不敢说谁先执行，其实当然是ready()先执行咯，哎。。。犹豫怕错，是病得治。。＝ ＝

      -
      9. -

    9. 设计思路：有个表单，要填身份证号码，如何验证？假如后台用nodejs查询是否有身份证号码重复，前后端要如何交互？可以设计怎样的协议？
      这里nodejs确实还没做过数据库相关的，但是我说如果用php的做法，然后交互用AJAX，不知道行不行。

      -
      10. -

    10. 有没有做过站点的压力测试？

      -
      11. -

    11. 你做过微信支付，怎么实现的？
      这里他指出了HTTPS协议，你不是接触过嘛。。。😂

      -
      12. -

    12. 除了学校里这些项目，自己还做过什么东西？

      -
      13. -

    13. 页面跨浏览器兼容性问题如何处理的？
      从CSS、JS上面讲了一些，然后貌似提到了JQuery，他还要继续追问，然后我就蒙比了，一时想不起来了。。。QAQ

      -
      14. -

    14. 关于SEO，做过哪些工作？
      就简单说了两个，哎，没有细致了解过，感觉面试官有点失望。。。。＝ ＝

      -
      15. -

    15. 放爬虫，不想被搜索到可以怎么做？
      这里直接说不太清楚了。（汗。。我做的就没百度被搜索到过。。。😂别的都可以）

      -
      16. -

    16. 提问面试官：我还有哪些需要加强才能胜任这个职位？面试流程？如果可以的话多久能有消息？
      这里面试官说要基础知识扎实，多了解点新技术，比如HTTPS、SBD、HTTP2.0之类的。然后后面还有一个技术面，可能下周一吧2、3天的样子。

      -
      17. -
    -

    后记：
    面完之后没多久HR姐姐就打电话来通知下周一下午四点视频面试了。。。😂面试官还是说的很准的嘛～

    -

    总结：之前就预料到二面会更往深了挖，果然感觉身体被掏空。。。。😂。。然而这一面其实是对着简历上的项目把面试官能想到的点都问到了。答得不是很完美，还是要再放开一点才行。

    - +

    前两天做到的题目。

    +

    题目描述

    给定若干个长度为4的字符串，用空格分隔，判断这些字符串能否排成首尾相连的字符串。字母区分大小写。

    +

    若不能，则输出ERROR；
    若可以形成首尾相连的圈，则输出CIRCLE；
    否则，依次输出排序后的所有字符串。

    - +
    +

    + more >> +

    +
    @@ -435,11 +373,11 @@

    -
    +
    - - + +
    @@ -452,7 +390,7 @@

    - 百度 前端面试总结（一） + ife-2016s task4笔记

    @@ -461,50 +399,25 @@

    -

    百度运维部

    -

    吸取了之前的教训，好好准备了一下：

    -
      -

    1. 自我介绍，提到关注新技术，问了下都有什么技术？

      -
      2. -

    2. 说到React，它有什么好？
      说了组件化、虚拟DOM之类的。

      -
      3. -

    3. 介绍做的最好的项目。
      提到bootstrap、php、react、grunt、less构建等

      -
      4. -

    4. grunt用了什么功能？为什么？如何提高页面性能，优化加载速度？

      -
      5. -

    5. 前后端如何交互？介绍下JQuery中ajax的实现原理。

      -
      6. -

    6. 事件绑定&事件代理，用on()和用onclick有啥区别？
      这题答得不是很好，首先不太确定他意思，我以为onclick是指在html标签中指定属性，就按这个答了，后来发现他可能指的是dom属性设置的方式。。＝ ＝

      -
      7. -

    7. 浏览器缓存了解么？Max-age知道么？
      这里没讲好，max-age大概应该知道是什么意思的，但是不确定，就怂了，直接说不太清楚。。＝ ＝。。而且即使这样也应该迁移到别的我会的相关知识上去的，当时没反应过来。。＝ ＝

      -
      8. -

    8. 跨域有哪些方法？
      我着重讲了CORS和JSONP，然后被问到json和jsonp有什么区别

      -
      9. -

    9. CSS了解么？讲一下盒模型？
      啊这个问题前两天才看过T^T…然后不确定，本来想说是在完全加载完成后执行的，结果最后还是答了个错的答案。。QAQ。。。window.onload与document.ready的区别.

      -
      10. -

    10. ECharts之类的绘图框架用过么？数据是实时获取的还是通过前端js？

      -
      11. -

    11. 前端代码如何组织？js、css模块化怎么做的？

      -
      12. -

    12. AMD和CMD的区别？

      -
      13. -

    13. js中.apply()和.call()的区别？函数中this指代什么？在函数中的ajax的回调函数要用this怎么办？

      -
      14. -
    -

    总结：自我介绍的时候要突出自己的能力，关注的新技术要组织好语言；遇到不确定或者不会的问题不要懵，善于迁移问题。

    - +

    题目要求 传送门

    实现灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

    +

    关键实现方法

    由于需要在任何情况下都能使元素水平垂直居中，因此考虑将body设置为fixed，然后用绝对定位定位灰色元素，其中的黄色扇形由position: absolute控制使其相对于灰色矩形位于左上角和右下角。

    +

    Tips

    1、相对（relative）定位元素的默认位置还是被元素自身占用，别的元素是无法占用的。也就是说相对定位元素的位移是相对于元素自身的边缘进行位移。
    2、绝对（absolute）定位元素的位置是相对于最近的一个设置为相对 或 绝对定位的祖先元素的。
    3、固定（fixed）定位元素相对于浏览器窗口，并且不会随滚动条进行滚动（不兼容IE6）。

    - +
    +

    + more >> +

    +
    @@ -518,11 +431,11 @@

    -
    +
    - - + +
    @@ -535,7 +448,7 @@

    - 阿里提前批 前端面试总结（一） + 判断一棵树是否是另一棵树的子树

    @@ -544,45 +457,24 @@

    -

    阿里的提前批内推：
    感觉面试官是引导式的提问风格，和腾讯不一样，其实还是比较喜欢这种的，但是感觉自己没抓住机会。。。sad

    -
      -

    1. 首先自我介绍
      之前没有特意准备过这个问题，前面的面试也没有问的，所以一问到之后就只能简单地说一下个人信息啥的，怕说一些无关紧要的东西，于是就没再说啥，结果发现蜜汁尴尬～😂要再准备一下。

      -
      2. -

    2. 用过bootstrap，那么如何实现响应式的？
      说了媒体查询，然后百分比宽度，然后被问css中如何定义长度的，然后终于把我引到了rem上。。😂

      -
      3. -

    3. 如何用react构建组件，使用组件的？react的数据是如何显示的？

      -
      4. -

    4. 性能优化问题

      -
      5. -

    5. ES6的特性是否了解？

      -
      6. -

    6. ajax如何发请求的？http请求是用什么实现的？跨域怎么处理？

      -
      7. -

    7. 做过的复杂的项目？
      这里他比较看重前端部分，要着重说。

      -
      8. -

    8. nodejs的websocket怎么实现的？是否有日志，怎么实现的？有没有用组件？

      -
      9. -

    9. 有哪些方式引入css？@import为啥不用？

      -
      10. -

    10. 如果有长时间的js处理代码，比如10万条记录的显示，会影响用户操作吗？如何处理？
      setTimeout

      -
      11. -

    11. 还有什么问题么？

      -
      12. -
    -

    总体37分钟，根据面试官的反馈，我说话要更流利一点，自信一点才行，然后去了解一下ES6。另外，要学会根据他的问题看到他真正想问的技术问题。

    - +

    昨天做到一道百度的笔试题，感觉对深搜的理解很有帮助，记录一下。

    +

    题目描述

    给定两个子树，树节点的数值唯一，问第二棵树是否是第一棵树的子树。是就返回1，否则-1。
    给定树节点的定义为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    struct tnode
    {
    	int value;
    	tnode* left;
    	tnode* right;
    	tnode(int v) {   //这个构造函数是我为了调试时构造节点方便而写的
    		value = v;
    		left = NULL;
    		right = NULL;
    	}
    };

    - +
    +

    + more >> +

    +
    @@ -596,11 +488,11 @@

    -
    +
    - - + +
    @@ -613,7 +505,7 @@

    - 腾讯TST 前端面试总结（二） + 一般推荐问题和搭配问题的异同

    @@ -622,44 +514,33 @@

    -

    上午刚回家，晚饭前二面就突然来了😂

    -

    这次请求了十分钟准备😂：

    -
      -

    1. 如果一个页面打开了之后空白，你会如何定位问题？如果不是网络、服务器的问题，就是前端问题，该如何定位？

      -
      2. -

    2. 平常用什么浏览器?怎么调试的？chrome开发者工具平常都用到了什么？关于性能的调试用到了啥？
      我说主要是chrome；用chrome的开发者工具；除了性能，我其它的基本都有了😂。

      -
      3. -

    3. 关于HTTP，cache怎么控制的？如果允许缓存，一个页面访问缓存的流程是怎样的？
      我说用cache-control,pragma;

      -
      4. -

    4. 关于项目：php用的什么版本？nodejs的websocket是自己实现的还是用的组件？如何划分模块？开发环境是windows还是linux？
      这个基本上就照实说了。

      -
      5. -

    5. 用了什么前端构建工具？
      grunt，介绍了用过什么功能，是否自己搭建。

      -
      6. -

    6. js中setTimeout的函数执行时间？触发了setTimeout后会立即执行吗？

      -
      7. -

    7. 关于前端性能、安全性问题？提到了CSIF

      -
      8. -

    8. H5的移动端和PC端页面开发有什么区别？

      -
      9. -

    9. window.onload 是什么时候触发的？
      啊这个问题前两天才看过T^T…然后不确定，本来想说是在完全加载完成后执行的，结果最后还是答了个错的答案。。QAQ。。。window.onload与document.ready的区别.

      -
      10. -

    10. jquery的入口函数写在哪里？为什么？
      我说写在页面的body结束前，因为这样页面都会加载完再执行js代码。应该少说了个 页面的加载不会被js代码阻塞 吧。

      +

      现有数据集

      三部分：
      商品信息 －》 基于内容的、相似度 《－ 搭配类目过滤
      专家搭配 －》 概率模型（马尔可夫？）专家知识 X
      历史记录 －》 同时购买次数－》相关性特征构建

      +

      问题角度

      一般的推荐问题是： 把物品推荐给人
      搭配推荐问题是： 把物品推荐给物品，找搭配

      +

      基于协同过滤

        一般的协同过滤，就是原本是直接评价人和物品的关系的，现在通过协同历史评分表现，把对应评分高的物品的相似物品推荐给用户（item-based）；或者把物品推荐给评分兴趣相似的用户（user-based）。
        因此，若是用协同过滤，评分rate就是物品对于物品的关系。

      +
        +
      • 第一步，关键在于这个rate的构建，rate就是我所说的搭配度
        • +
      • 第二步，对评分矩阵的处理：
          +
        • 稀疏矩阵分解？
          • +
        • 用于协同过滤
          • +
        • -
    -

    同样的，这次的面试官声音也好好听啊。。。😂然而基本都是问我了解过的东西，不是很深，感觉还是比较看重基础扎实的。

    - +

- +
+

+ more >> +

+
@@ -673,11 +554,11 @@

-
+
- - + +
@@ -690,7 +571,7 @@

- 腾讯TST 前端面试总结（一） + mysql访问权限控制命令

@@ -699,24 +580,11 @@

-

校招终于拉开帷幕了，投了几个公司，企鹅动作最快了，简直不知道开心还是不开心好了～😂

-

第一次正式的电话面试就献给企鹅了～

-

7月19日投的内推简历，21日就来电话了～幸好当时在工作室里刚吃完晚饭。。。😂

-

投的是前端开发，凭回忆记录下几个题目吧：

-
    -

  1. 首先介绍下做过的自我感觉最好的项目
    我就只能拿枪弹柜这个说了，只是因为我全程都参与这个项目，最为了解，但是其实说实话它虽然体量还算庞大，用到了好些个相关技术，但是却不深，感觉并没有太大说服力。面试官也没有太多地深入问。所以感觉最好要有一个自己从头开发的有难度的小项目就好了，若是在github上有star或者fork肯定更加分～

    -
    2. -

  2. css的margin重叠问题
    说实话，之前并没有系统地了解过，只有个大概的映像，答的不好，详细答案在这里。

    -
    3. -

  3. javascript的事件绑定

    -
    4. -

  4. 性能优化问题
    这个不太了解，没说

    -
    5. -

  5. 安全性问题
    这个不太了解，没说

    -
    6. -
-

其他的想到再补充吧。。。😂

-

总的来说，自我感觉不太满意，但是面试哥哥的声音好好听啊。。。😄人也好nice，最后问我还有没有啥问题，我问了他们现在用的前端技术都是啥，结果他很详细的跟我介绍了一遍，还是很有收获哒～
真正公司里的前端需要考虑的地方有很多，平常许多没注意到或者没精力顾及到的问题，在这里都需要考虑，而且还很重要。

+

为了保证安全性，mysql默认都是只允许localhost访问的，但是实际操作中，会需要远程访问。可以用下面的命令：

+

授权法

1
2
mysql> GRANT ALL PRIVILEGES ON dbname.* TO 'myuser'@'%' IDENTIFIED BY 'mypassword' WITH GRANT OPTION;
flush PRIVILEGES;
+

表示将dbname数据库的所有表的权限 授权给 任意ip 以myuser用户名和mypassword密码登录。然后立即刷新，使授权生效。

+

还有另一种方法是改表法，命令比较多，实际用起来不如授权法方便，这里就不写了～

+

参考资料

1、解决MySQL不允许从远程访问的方法

@@ -724,7 +592,7 @@

- +
@@ -743,11 +611,11 @@

-
+
- - + +
@@ -760,7 +628,7 @@

- 围棋 判断是否需要吃子，吃掉多少 + ife-2016s task3笔记

@@ -769,27 +637,22 @@

-

前两天做到的题目。

-

题目描述

给定一个10*10的棋盘，0代表空，1代表白子，2代表黑子。
双方可以连续下子。
一个上下左右连续的棋子块，其上下左右的空白位置就是它的气，当某次下子使对手的棋子的气为0时，就要吃掉那些气为0的棋子。
有几种情况：

-
1. 当落子仅使自己的气为0(a)，或下到非空白处时(b)，输出`2147483647`；
-2. 当落子正确且没有吃子时，输出`0`；
-3. 当落子将对手的气为0时，输出吃掉的棋子个数，正数为白子，负数为黑子；
-4. 当落子使双方气都为0时，只能吃掉对手的棋，输出棋子个数（同3）。
-
+

题目要求 传送门

实现三栏式布局，要求左右两宽度固定，中间一栏填充父元素宽度

+

关键实现方法

页面结构主要是由一个wrap包裹住所有模块，内含left、right、middle三个部分，其中left、right的float属性分别为left、right，middle的html代码一定要写在最后。然后固定左右两部分的宽度，设置中间栏的左右margin，差不多就可以完成三栏式的基本布局了。

- +

- more >> + more >>

@@ -805,11 +668,11 @@

+
- - + +
@@ -822,7 +685,7 @@

- 前端面试题 积累 + develop notes

@@ -831,547 +694,25 @@

-

基础知识是一切的基石！

-

由于目前前端的东西全都是自己自学然后实践得来的，并不系统，写这篇blog的直接目的是为了记录前端面试可能会遇到的问题，间接目的主要是能够让自己开始系统地学习这些知识，为更长远的发展奠定基础。问题是转来的1，答案是用自己的理解叙述的。

-

#前端基础知识点
HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、
HTML5、CSS3、Flexbox

-
JavaScript：
-    数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、
-    DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs
-
-其他：
-    移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
-

#前端开发面试题

-

目录

    -
  1. HTML部分
    2. -
  2. CSS部分
    3. -
  3. JavaScript部分
    4. -
  4. 其他问题
    5. -
  5. 前端学习网站推荐
    6. -
-

HTML

    -

  • Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

    -
    1. Doctype是用于标识文档的HTML或XHTML规范，浏览器根据这个标签使用相应的规范解析页面，DOCTYPE不对或不存在将以兼容模式呈现；
-2. 严格模式是以该浏览器的最高标准运行；混杂模式（兼容模式）是以宽松的向后兼容的模式运行，模拟老式浏览器的行为使页面得以正常显示。
-
    • -

  • HTML5 为什么只需要写 <!DOCTYPE HTML>？

    -
    1. HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
-2. 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
-
    • -

  • 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

    -
    1. 行内元素：span、a、b、img、input、select、strong、i
-2. 块级元素：div、form、h1(2,3...)、p、ul、ol、li、dl、dt、dd
-3. 空元素：hr、br、img、input、link、meta；textarea
-
    • -

  • 页面导入样式时，使用link和@import有什么区别？

    -
    1. link在页面加载时同时加载，而@import在页面加载后再加载；
-2. link属于XHTML标签，除了加载css外还可用于定义rss、rel连接属性用；@import只用于在css中引入其他css文件；
-3. import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
-
    • -

  • 介绍一下你对浏览器内核的理解？

    -
    1. 浏览器内核包括渲染引擎和JS引擎；
-2. 渲染引擎：负责获得网页内容（html、xhtml、图像等）、整理讯息（css等），计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
-3. JS引擎：解析和执行javascript来实现网页的动态效果。
-
    • -

  • 常见的浏览器内核有哪些？

    -
    1. Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
-2. Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
-3. Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]
-4. Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]
-
    • -

  • html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和
    HTML5？

    -
    1. 新特性：
-HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
-      绘画 canvas;
-      用于媒介回放的 video 和 audio 元素;
-      本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
-      sessionStorage 的数据在浏览器关闭后自动删除;
-      语意化更好的内容元素，比如 article、footer、header、nav、section;
-      表单控件，calendar、date、time、email、url、search;
-      新的技术webworker, websocket, Geolocation;
-移除的元素：
-    纯表现的元素：basefont，big，center，font, s，strike，tt，u;
-    对可用性产生负面影响的元素：frame，frameset，noframes；
-2. 兼容问题：
-支持HTML5新标签：
-     IE8/IE7/IE6支持通过document.createElement方法产生的标签，
-     可以利用这一特性让这些浏览器支持HTML5新标签，
-     浏览器支持新标签后，还需要添加标签默认的样式。
-
-     当然也可以直接使用成熟的框架、比如html5shim;
-     
    1
    2
    3
    <!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
    <![endif]-->
    
-
-3. 区分：通过doctype定义/新增的结构元素/新增的功能元素
-
    • -

  • 简述一下你对HTML语义化的理解？

    -
    1. 语义化就是在去掉css之后页面呈现的文档顺序依然正确，用户也可以理解页面内容。
-2. 语义化对于开发者理解和维护代码有帮助
-3. 语义化有利于搜索引擎的爬虫（根据HTML标记来确定上下文和各个关键字的权重）解析页面内容，利于SEO
-
    • -

  • HTML5的离线储存怎么使用，工作原理能不能解释一下？

    -
    1. sessionStorage
-
    • -

  • 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

    -
    • -

  • 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

    -
    1. cookies：
-1. sessionStorage：就是会话时间内的存储
-1. localStorage：本地存储，可以在关闭浏览器后继续保存。
-
    • -

  • iframe有那些缺点？

    -
    • -

  • Label的作用是什么？是怎么用的？（加 for 或 包裹）

    -
    • -

  • HTML5的form如何关闭自动完成功能？

    -
    • -

  • 如何实现浏览器内多个标签页之间的通信? (阿里)

    -
    • -

  • webSocket如何兼容低浏览器？(阿里)

    -
    • -

  • 页面可见性（Page Visibility API） 可以有哪些用途？

    -
    • -

  • 如何在页面上实现一个圆形的可点击区域？

    -
    • -

  • 实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

    -
    • -

  • 网页验证码是干嘛的，是为了解决什么安全问题？

    -
    • -

  • title与h1的区别、b与strong的区别、i与em的区别？

    -
    • -
-

CSS

    -

  • 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

    -
    • -

  • CSS选择符有哪些？哪些属性可以继承？

    -
    • -

  • CSS优先级算法如何计算？

    -
    • -

  • CSS3新增伪类有那些？

    -
    • -

  • 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

    -
    • -

  • display有哪些值？说明他们的作用。

    -
    • -

  • position的值relative和absolute定位原点是？

    -
    • -

  • CSS3有哪些新特性？

    -
    • -

  • 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

    -
    • -

  • 用纯CSS创建一个三角形的原理是什么？

    -
    • -

  • 一个满屏 品 字布局 如何设计?

    -
    • -

  • 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

    -
    • -

  • li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

    -
    • -

  • 为什么要初始化CSS样式?

    -
    • -

  • absolute的containing block计算方式跟正常流有什么不同？

    -
    • -

  • CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

    -
    • -

  • position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    -
    • -

  • 对BFC规范(块级格式化上下文：block formatting context)的理解？

    -
    • -

  • CSS权重优先级是如何计算的？

    -
    • -

  • 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

    -
    • -

  • 移动端的布局用过媒体查询吗？

    -
    • -

  • 使用 CSS 预处理器吗？喜欢那个？

    -
    • -

  • CSS优化、提高性能的方法有哪些？

    -
    • -

  • 浏览器是怎样解析CSS选择器的？

    -
    • -

  • 在网页中的应该使用奇数还是偶数的字体？为什么呢？

    -
    • -

  • margin和padding分别适合什么场景使用？

    -
    • -

  • 抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

    -
    • -

  • 元素竖向的百分比设定是相对于容器的高度吗？

    -
    • -

  • 全屏滚动的原理是什么？用到了CSS的那些属性？

    -
    • -

  • 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

    -
    • -

  • 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

    -
    • -

  • ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

    -
    • -

  • 如何修改chrome记住密码后自动填充表单的黄色背景 ？

    -
    • -

  • 你对line-height是如何理解的？

    -
    • -

  • 设置元素浮动后，该元素的display值是多少？（自动变成display:block）

    -
    • -

  • 怎么让Chrome支持小于12px 的文字？

    -
    • -

  • 让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

    -
    • -

  • font-style属性可以让它赋值为“oblique” oblique是什么意思？

    -
    • -

  • position:fixed;在android下无效怎么处理？

    -
    • -

  • 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

    -
    • -

  • display:inline-block 什么时候会显示间隙？(携程)

    -
    • -

  • overflow: scroll时不能平滑滚动的问题怎么处理？

    -
    • -

  • 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

    -
    • -

  • png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

    -
    • -

  • 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

    -
    • -

  • style标签写在body后与body前有什么区别？

    -
    • -

  • 什么是CSS 预处理器 / 后处理器？

    -
    • -
-

JavaScript

    -

  • 介绍JavaScript的基本数据类型。

    -
    • -

  • 说说写JavaScript的基本规范？

    -
    • -

  • JavaScript原型，原型链 ? 有什么特点？

    -
    • -

  • JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？

    -
    • -

  • Javascript如何实现继承？

    -
    • -

  • Javascript创建对象的几种方式？

    -
    • -

  • Javascript作用链域?

    -
    • -

  • 谈谈this对象的理解。

    -
    • -

  • eval是做什么的？

    -
    • -

  • 什么是window对象? 什么是document对象?

    -
    • -

  • null，undefined的区别？

    -
    • -

  • 写一个通用的事件侦听器函数(机试题)。

    -
    • -

  • [“1”, “2”, “3”].map(parseInt) 答案是多少？

    -
    • -

  • 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

    -
    • -

  • 什么是闭包（closure），为什么要用它？

    -
    • -

  • javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

    -
    • -

  • 如何判断一个对象是否属于某个类？

    -
    • -

  • new操作符具体干了什么呢?

    -
    • -

  • 用原生JavaScript的实现过什么功能吗？

    -
    • -

  • Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

    -
    • -

  • 对JSON的了解？

    -
    • -

  • [].forEach.call($$("*"),function(a){ -a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) -}) 能解释一下这段代码的意思吗？

    -
    • -

  • js延迟加载的方式有哪些？

    -
    • -

  • Ajax 是什么? 如何创建一个Ajax？

    -
    • -

  • 同步和异步的区别?

    -
    • -

  • 如何解决跨域问题?

    -
    • -

  • 页面编码和被请求的资源编码如果不一致如何处理？

    -
    • -

  • 模块化开发怎么做？

    -
    • -

  • AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

    -
    • -

  • requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何
    缓存的？）

    -
    • -

  • 谈一谈你对ECMAScript6的了解？

    -
    • -

  • ECMAScript6 怎么写class，为什么会出现class这种东西?

    -
    • -

  • 异步加载的方式有哪些？

    -
    • -

  • documen.write和 innerHTML的区别?

    -
    • -

  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

    -
    • -

  • .call() 和 .apply() 的作用和区别？

    -
    • -

  • 数组和对象有哪些原生方法，列举一下？

    -
    • -

  • JS 怎么实现一个类。怎么实例化这个类

    -
    • -

  • JavaScript中的作用域与变量声明提升？

    -
    • -

  • 如何编写高性能的Javascript？

    -
    • -

  • 那些操作会造成内存泄漏？

    -
    • -

  • JQuery的源码看过吗？能不能简单概况一下它的实现原理？

    -
    • -

  • jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

    -
    • -

  • jquery中如何将数组转化为json字符串，然后再转化回来？

    -
    • -

  • jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

    -
    • -

  • jquery.extend 与 jquery.fn.extend的区别？

    -
    • -

  • jQuery 的队列是如何实现的？队列可以用在哪些地方？

    -
    • -

  • 谈一下Jquery中的bind(),live(),delegate(),on()的区别？

    -
    • -

  • JQuery一个对象可以同时绑定多个事件，这是如何实现的？

    -
    • -

  • 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？

    -
    • -

  • jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）

    -
    • -

  • 针对 jQuery性能的优化方法？

    -
    • -

  • Jquery与jQuery UI有啥区别？

    -
    • -

  • JQuery的源码看过吗？能不能简单说一下它的实现原理？

    -
    • -

  • jquery 中如何将数组转化为json字符串，然后再转化回来？

    -
    • -

  • jQuery和Zepto的区别？各自的使用场景？

    -
    • -

  • 针对 jQuery 的优化方法？

    -
    • -

  • Zepto的点透问题如何解决？

    -
    • -

  • jQueryUI如何自定义组件?

    -
    • -

  • 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

    -
    • -

  • 如何判断当前脚本运行在浏览器还是node环境中？（阿里）

    -
    • -

  • 移动端最小触控区域是多大？

    -
    • -

  • jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

    -
    • -

  • 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

    -
    • -

  • 移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）

    -
    • -

  • 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?

    -
    1. React基本模式：
-    
    1
    2
    3
    4
    5
    var HelloComponent = React.createClass({   //ES5
        render: function() {
            return <div>Hello {this.props.name}</div>;
        }
    });
    
-
-    
    1
    2
    3
    4
    5
    class HelloComponent extends React.Component {  //ES6
      render() {
        return <div>Hello {this.props.name}</div>;
      }
    }
    
-
    • -

  • Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？

    -
    • -

  • 解释JavaScript中的作用域与变量声明提升？

    -
    • -

  • 那些操作会造成内存泄漏？

    -
    • -

  • JQuery一个对象可以同时绑定多个事件，这是如何实现的？

    -
    • -

  • Node.js的适用场景？

    -
    • -

  • (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

    -
    • -

  • 解释一下 Backbone 的 MVC 实现方式？

    -
    • -

  • 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

    -
    • -

  • 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

    -
    • -

  • 如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

    -
    • -

  • 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

    -
    • -

  • 简述一下 Handlebars 的基本用法？

    -
    • -

  • 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？

    -
    • -

  • 用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)

    -
    • -

  • 检测浏览器版本版本有哪些方式？

    -
    • -

  • What is a Polyfill?

    -
    • -

  • 做的项目中，有没有用过或自己实现一些 polyfill 方案（兼容性处理方案）？

    -
    • -

  • 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

    -
    • -
-

ECMAScript6 相关

    -
  • Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？
    • -
-

前端框架相关

    -
  • react-router 路由系统的实现原理？
    • -
-
    -
  • React中如何解决第三方类库的问题?
    • -
-

其他问题

    -

  • 原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？

    -
    • -

  • 你遇到过比较难的技术问题是？你是如何解决的？

    -
    • -

  • 设计模式 知道什么是singleton, factory, strategy, decrator么?

    -
    • -

  • 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

    -
    • -

  • 页面重构怎么操作？

    -
    • -

  • 列举IE与其他浏览器不一样的特性？

    -
    • -

  • 99%的网站都需要被重构是那本书上写的？

    -
    • -

  • 什么叫优雅降级和渐进增强？

    -
    • -

  • 是否了解公钥加密和私钥加密。

    -
    • -

  • WEB应用从服务器主动推送Data到客户端有那些方式？

    -
    • -

  • 对Node的优点和缺点提出了自己的看法？

    -
    • -

  • 你有用过哪些前端性能优化的方法？

    -
    • -

  • http状态码有那些？分别代表是什么意思？

    -
    • -

  • 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

    -
    • -

  • 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？

    -
    • -

  • 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?

    -
    • -

  • 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

    -
    • -

  • 你用的得心应手用的熟练地编辑器&开发环境是什么样子？

    -
    • -

  • 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

    -
    • -

  • 你怎么看待Web App 、hybrid App、Native App？

    -
    • -

  • 你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）

    -
    • -

  • 你对加班的看法？

    -
    • -

  • 平时如何管理你的项目？

    -
    • -

  • 说说最近最流行的一些东西吧？常去哪些网站？

    -
    • -

  • 如何设计突发大规模并发架构？

    -
    • -

  • 说说最近最流行的一些东西吧？常去哪些网站？

    -
    • -

  • 是否了解开源的工具 bower、npm、yeoman、grunt、gulp，一个 npm 的包里的 package.json 具备的必要的字段都有哪些？（名称、版本号，依赖）

    -
    • -

  • 每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的？

    -
    • -

  • Git知道branch, diff, merge么?

    -
    • -

  • 如何设计突发大规模并发架构？

    -
    • -

  • 当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？

    -
    • -

  • 说说最近最流行的一些东西吧？平时常去哪些网站？

    -
    • -

  • 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?

    -
    • -

  • 移动端（Android IOS）怎么做好用户体验?

    -
    • -

  • 简单描述一下你做过的移动APP项目研发流程？

    -
    • -

  • 你在现在的团队处于什么样的角色，起到了什么明显的作用？

    -
    • -

  • 你认为怎样才是全端工程师（Full Stack developer）？

    -
    • -

  • 介绍一个你最得意的作品吧？

    -
    • -

  • 你有自己的技术博客吗，用了哪些技术？

    -
    • -

  • 对前端安全有什么看法？

    -
    • -

  • 是否了解Web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度？

    -
    • -

  • 项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？。

    -
    • -

  • 最近在学什么东西？

    -
    • -

  • 你的优点是什么？缺点是什么？

    -
    • -

  • 如何管理前端团队?

    -
    • -

  • 最近在学什么？能谈谈你未来3，5年给自己的规划吗？

    -
    • -
-

有趣的问题

    -
  • .A、B两人分别在两座岛上。B生病了，A有B所需要的药。C有一艘小船和一个可以上锁的箱子。C愿意在A和B之间运东西，但东西只能放在箱子里。只要箱子没被上锁，C都会偷走箱子里的东西，不管箱子里有什么。如果A和B各自有一把锁和只能开自己那把锁的钥匙，A应该如何把东西安全递交给B？
    • -
-
答案：A把药放进箱子，用自己的锁把箱子锁上。B拿到箱子后，再在箱子上加一把自己的锁。
-箱子运回A后，A取下自己的锁。箱子再运到B手中时，B取下自己的锁，获得药物。
-
    -

  • Amazon主页的左上角有一个商品分类浏览的下拉菜单 没有延迟，而且子菜单也不会在不应该的时候消失。它是怎样做到这一点的呢？

    -
    答案是通过探测鼠标移动的方向和轨迹，具体查看Khan Academy工程师 Ben Kamens 写的 jQuery插件
-

    这是 Khan Academy工程师 Ben Kamens 写的 jQuery插件

    -
    • -
-

前端学习网站推荐

1. 极客标签：     http://www.gbtags.com/
-
-2. 码农周刊：     http://weekly.manong.io/issues/
-
-3. 前端周刊：     http://www.feweekly.com/issues
-
-4. 慕课网：       http://www.imooc.com/
-
-5. div.io：         http://div.io
-
-6. Hacker News： https://news.ycombinator.com/news
-
-7. InfoQ：       http://www.infoq.com/
-
-8. w3cplus：     http://www.w3cplus.com/
-
-9. Stack Overflow： http://stackoverflow.com/
-
-10.w3school：    http://www.w3school.com.cn/
-
-11.mozilla：     https://developer.mozilla.org/zh-CN/docs/Web/
-

文档推荐

    -

  1. jQuery 基本原理

    -
    2. -

  2. JavaScript 秘密花园

    -
    3. -

  3. CSS参考手册

    -
    4. -

  4. JavaScript 标准参考教程

    -
    5. -

  5. ECMAScript 6入门

    -
    6. -
-

###更新时间: 2016-3-25

-
资料答案不够正确和全面，欢迎欢迎Star和提交issues。我的微博：http://weibo.com/920802999
-
+

最近在做的一些项目，大多都是第一次接触这么复杂的项目，一路做下来，有一些经验教训，记录在这里~

+

关于数据库设计

· 键值
作为表中每条记录的唯一标识，即使表述对象本身有唯一标识比如身份证号之类的，也最好有一个随机生成或是时间戳与其他信息组成的字符串作为键值。否则，在处理删除及删除后新建相同id的记录时会产生很麻烦的问题。

+

关于系统设计

- +
+

+ more >> +

+
@@ -1385,11 +726,11 @@

+
- - + +
@@ -1402,7 +743,7 @@

- 判断是否存在欧拉回路、欧拉路，输出欧拉路 + 【天池】穿衣搭配-第一赛季

@@ -1411,23 +752,25 @@

-

前两天做到的题目。

-

题目描述

给定若干个长度为4的字符串，用空格分隔，判断这些字符串能否排成首尾相连的字符串。字母区分大小写。

-

若不能，则输出ERROR；
若可以形成首尾相连的圈，则输出CIRCLE；
否则，依次输出排序后的所有字符串。
+

最近阴差阳错地入了天池大数据比赛的坑，第一次参加这种比赛，收获还是不少的~在此记录一下~

+

麻麻我不会穿衣搭配

最初看到这个题目，第一感觉是好难啊，理解题目理解了好久，那么多数据集，组织形式都不一样，而且还有图像，都不知道如何下手，不知如何把这些数据组织起来。

+

好在袁老板和君哥跟我进行了初步的探讨，带我稍稍入了下门~让我知道了协同过滤、关联规则挖掘这些算法的存在。然后袁老板的由简入繁的思想一直影响着我整个比赛过程，不然按照我强迫症和懒癌晚期的性子来的话，肯定没法开始就放弃了。

+

拖了好久，看了好些资料才决定用python来写这个代码，到10月13日才正式开始敲代码来做这道题，而我还没学过python。幸好这个时候找到了姐姐和我玩这道题，于是我们先用搭配套餐划分了测试集和训练集，姐姐给力地完成了线下评测程序。

+

然后我们就开始各种摸索：

- +

- more >> + more >>

@@ -1445,7 +788,7 @@

- 123 + 12

diff --git a/public/tags/Github/index.html b/public/tags/Github/index.html index d8cc207..a72ce04 100644 --- a/public/tags/Github/index.html +++ b/public/tags/Github/index.html @@ -109,7 +109,7 @@

Cool King

diff --git a/public/tags/Hexo/index.html b/public/tags/Hexo/index.html index 5c3af8d..cbe883e 100644 --- a/public/tags/Hexo/index.html +++ b/public/tags/Hexo/index.html @@ -109,7 +109,7 @@

Cool King

diff --git "a/public/tags/\345\210\233\344\270\232/index.html" "b/public/tags/\345\210\233\344\270\232/index.html" index 806a062..0afdb22 100644 --- "a/public/tags/\345\210\233\344\270\232/index.html" +++ "b/public/tags/\345\210\233\344\270\232/index.html" @@ -109,7 +109,7 @@

Cool King

diff --git "a/public/tags/\345\211\215\347\253\257/index.html" "b/public/tags/\345\211\215\347\253\257/index.html" index a6e185c..5e5faa1 100644 --- "a/public/tags/\345\211\215\347\253\257/index.html" +++ "b/public/tags/\345\211\215\347\253\257/index.html" @@ -109,7 +109,7 @@

Cool King

@@ -198,254 +198,6 @@

Cool King

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git "a/public/tags/\345\244\247\346\225\260\346\215\256/index.html" "b/public/tags/\345\244\247\346\225\260\346\215\256/index.html" index 9c0695b..ccc4bf8 100644 --- "a/public/tags/\345\244\247\346\225\260\346\215\256/index.html" +++ "b/public/tags/\345\244\247\346\225\260\346\215\256/index.html" @@ -109,7 +109,7 @@

Cool King

diff --git "a/public/tags/\345\255\246\346\234\257/index.html" "b/public/tags/\345\255\246\346\234\257/index.html" index 4ae77a3..6176d5e 100644 --- "a/public/tags/\345\255\246\346\234\257/index.html" +++ "b/public/tags/\345\255\246\346\234\257/index.html" @@ -109,7 +109,7 @@

Cool King

diff --git "a/public/tags/\345\267\245\344\275\234/index.html" "b/public/tags/\345\267\245\344\275\234/index.html" index 0fbda29..870a620 100644 --- "a/public/tags/\345\267\245\344\275\234/index.html" +++ "b/public/tags/\345\267\245\344\275\234/index.html" @@ -109,7 +109,7 @@

Cool King

@@ -192,6 +192,47 @@

Cool King

+
+
+ 2016 +
+
+ + + + + + +
+ +
2015 diff --git "a/public/tags/\346\200\273\347\273\223/index.html" "b/public/tags/\346\200\273\347\273\223/index.html" index f7845be..9766e7a 100644 --- "a/public/tags/\346\200\273\347\273\223/index.html" +++ "b/public/tags/\346\200\273\347\273\223/index.html" @@ -109,7 +109,7 @@

Cool King

@@ -202,21 +202,21 @@

Cool King

- - + +

- 网易 前端面试总结 + 2016-season3

- +
@@ -233,52 +233,21 @@

- - - -
- - -

- 百度 前端面试总结（三） -

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

- - - -
-
-
-
- - + +

- 百度 前端面试总结（二） + ife-2016s task4笔记

- +
@@ -295,21 +264,21 @@

- - + +

- 百度 前端面试总结（一） + ife-2016s task3笔记

- +
@@ -326,21 +295,21 @@

- - + +

- 阿里提前批 前端面试总结（一） + develop notes

- +
@@ -353,56 +322,35 @@

- - - +
- - + +

- 腾讯TST 前端面试总结（一） + 【天池】穿衣搭配-第一赛季

- +
@@ -419,21 +367,21 @@

- - + +

- ife-2016s task4笔记 + 最近工作梳理

- +
@@ -450,21 +398,21 @@

- - + +

- ife-2016s task3笔记 + 日常

- +
@@ -481,21 +429,21 @@

- - + +

- develop notes + 逐渐走上正轨

- +
diff --git "a/public/tags/\346\212\200\346\234\257/index.html" "b/public/tags/\346\212\200\346\234\257/index.html" index 70ab110..499e995 100644 --- "a/public/tags/\346\212\200\346\234\257/index.html" +++ "b/public/tags/\346\212\200\346\234\257/index.html" @@ -109,7 +109,7 @@

Cool King

@@ -202,145 +202,21 @@

Cool King

- - - -
- - -

- 网易 前端面试总结 -

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

- - - - - - - - - - - - - - - -
-
-
-
- - + +

- 阿里提前批 前端面试总结（一） + ife-2016s task4笔记

- +
@@ -357,21 +233,21 @@

- - + +

- 腾讯TST 前端面试总结（二） + mysql访问权限控制命令

- +
@@ -388,21 +264,21 @@

- - + +

- 腾讯TST 前端面试总结（一） + ife-2016s task3笔记

- +
@@ -419,21 +295,21 @@

- - + +

- ife-2016s task4笔记 + develop notes

- +
@@ -446,56 +322,35 @@

- - - +
- - + +

- ife-2016s task3笔记 + 用Github Pages搭建Hexo个人博客

- +
diff --git "a/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" "b/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" index 04b1f9e..beafd5d 100644 --- "a/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" +++ "b/public/tags/\346\234\272\345\231\250\345\255\246\344\271\240/index.html" @@ -109,7 +109,7 @@

Cool King

diff --git "a/public/tags/\347\224\237\346\264\273/index.html" "b/public/tags/\347\224\237\346\264\273/index.html" index 5665743..5265f27 100644 --- "a/public/tags/\347\224\237\346\264\273/index.html" +++ "b/public/tags/\347\224\237\346\264\273/index.html" @@ -109,7 +109,7 @@

Cool King

diff --git "a/public/tags/\347\247\257\347\264\257/index.html" "b/public/tags/\347\247\257\347\264\257/index.html" index ddf0cc3..28b4e40 100644 --- "a/public/tags/\347\247\257\347\264\257/index.html" +++ "b/public/tags/\347\247\257\347\264\257/index.html" @@ -109,7 +109,7 @@

Cool King

@@ -198,37 +198,6 @@

Cool King

- - - -
diff --git a/source/_posts/2016-season3.md b/source/_posts/2016-season3.md new file mode 100644 index 0000000..e703804 --- /dev/null +++ b/source/_posts/2016-season3.md @@ -0,0 +1,24 @@ +title: 2016-season3 +date: 2016-11-01 16:00:30 +tags: [总结, 工作] +--- + +校招总算告一段落了，从七月底开始关注内推，到10月底把自己的卖身契寄出去，总算是有了个比较满意的结果了～ + +简单经过就是：内推A(1)T(2)B(3)W(3)轮挂，校招基本目标公司笔试都过，面试除了滴滴岗位不合适挂了，其他的基本都到了终面，BATW可能由于内推也挂了，京东不清楚，最终收获了远景、新美大、小米、携程、七牛的offer。 + +但拿再多的offer，最终也只能在一家打工～ 但是这段经历确实是走入工作岗位前的一笔不小的财富。 + +对于后来者，有几个建议： + +1. 尽早确定目标并制定复习计划，尽早复习相关知识； +2. 内推有利有弊，有把握的同学大可放心去参加内推收割offer，但是如果没准备好，有可能会影响校招的结果；然而我内推的虽然都没通过校招拿到offer，却让我短时间内了解到企业需要的知识点，好让我针对性地复习，快速掌握所需技能； +3. 笔试很重要，平常注重算法编程能力的训练，校招前再集中刷下选择题，问题就不会太大； +4. 面试之后一定、一定、一定要及时总结！整理问到的问题，不会的搞懂，说的不好的可以请教下同学，讨论下怎么说会更好； +5. 求职过程中要及时认清所属阶段，是处于海投期还是笔试期，0 offer或没有什么满意offer的时候，还是有了比较好的在找更好的时候，这有助于调整笔试面试策略； + +对于自己，更重要的则是面试过程中，与面试官交流时提到的一些技术，需要有更多的时间去深入学习沉淀，才能使自己的技能树更加完善。对于前端工程师，可能前端入门容易，所以很多人都认为是切图的😂，但是它首先是个程序员，其次才是前端，一些必要的基础知识还是要多去了解，不能把自己局限在一个框里。 + +最后，对于自己的第三季度的结果，还是挺满意的，震荡上升的潜力股啊哦吼吼吼～（不要脸😂）期间也有很多小伙伴帮忙，也认识了一些可爱的大神，希望以后有机会可以面基～后面要专心写论文啦～ + +想对自己说：不忘技术初心！