#前端

CSS技术笔记

转眼就要 10 月了，依旧赋闲在家。8 月份确定 Offer 以来，心安了很多(后续会列举出完整的时间线)。 这次的就活顺利结束，接着休息、看技术、学日语。等待出发。 林芝·雅鲁藏布江大峡谷 下面是掘金CSS 技术揭秘与实战通关这本小册的一些 Note。相当用心的一本小册(可以说开了眼界，学到了很多) 今年以来唯二值得推荐的掘金小册，link：https://juejin.cn…

项目图片优化：整体替换WEBP

具体方案： 开发脚本 整体生成 WEBP图片(Eg.: 项目中a.png，再生成一份a.png.webp) Shell脚本(需安装：brew install webp)(https://developers.google.com/speed/webp/docs/cwebp)

Snowpack

什么是Snowpack Snowpack is a modern, lightweight toolchain for web application development. Traditional dev bundlers like webpack or Parcel need to rebuild & rebundle entire chunks of your appl…

React Portal 小谈

最近在看ReactV16带来的新东西，V16版本直接支持了Portal。今儿就总结一下Portal这个自己不是那么熟悉却又非常重要的“传送门”吧。 先说说为什么需要传送门。React的世界一切皆组件，进行render就需要一个root根节点进行挂载。组件套组件一层一层，不过最外面一层都是挂在在这个root根节点上的。 有一个常见的需求Dialog(弹窗),通常它会显示在屏幕正中…

2018.7

上篇博文至今，又间隔了一个多月。其实这一个月自我感觉成长了不少，学到也用到了不少东西。一直懒于动笔拖到了七月的尾巴。 工作上 工作上正式开搞了一个新项目。前端这边React全家桶。React全家桶无非就那点东西，但这回确实收获了不少。最大的收获还是工程化和拆分这一块。之前自己写前端项目亦或是在无二写RN回头来看离工程化差的好远，这次的工作才真真切切感受到了什么是前端工程。 在这…

CSS混合模式

前几天在一个一个技术网站看到了一篇通过CSS3特性，完成酷炫效果的文章。在公司搞App移动端以来，好一阵没有写纯粹的html和css了。今儿学到了一个以前不知道的CSS3属性：混合模式。 关于混合模式 CSS3出现了两个与混合模式有关的属性，mix-blend-mode和background-blend-mode. 兼容性如下： 可见，Chrome和FireFox已经支持了，并…

CSS预处理工具--Stylus

（2017.10.4 兰州·黄河） 为什么是Stylus？ Stylus vs Sass ：Sass 在win下中文字符兼容不是太好。出现的比较早，相比之下少一些新晋的功能 Stylus vs PostCSS：势均力敌，速度都很快，支持自己写扩展。都是用node开发。 stylus优势： 1，语法上，无限接近JS。 2，极尽简化，又向上兼容。 3，强力的@extend （不仅可…

CSS预处理工具--Stylus（2）

内建函数： 颜色函数： darken/lighten

React-Native IOS及安卓打包

开发了快两个月的RN终于到了要打包发布的阶段。 网上有不少文章博客，还是RN更新太快的缘由，有些并不适用于当前版本。这里简单说一下吧。（这里用的是RN0.43.4） IOS 首先在项目根目录创建一个空文件夹，我这里创建的是：release ios 之后执行打包命令（有点像webpack将JS代码压缩合并，并且导出所使用的静态资源） 命令具体含义： --entry-file ,i…

React Native 配置自定义字体

本想着配置自定义字体不是什么大坑，官网文档找了一下，没有。遂关键字：“React Native 配置自定义字体”这么一搜。都是一样的文章，作者名却是各式各样，真是天下文章大家抄。然而试了一下并不好用。 （这里使用最新的RN 0.48.4 测试） 这里想一下React Native最新的，最省事的配置自定自定义字体的方法： 1）随便下载一个字体（不要改名字，会有坑）我这里随便下了…

React-Native用到的第三方组件

这一个多月一直在搞公司的App项目，采用的技术就是React Native。一个人蒙着眼摸着石头过河，第一版总算是接近尾声了。（其实还有好多好多坑···）在这里总结一下，开发中用到的第三方组件。 （2016·秋--湘南） 说道第三方组件，React Native的社区非常非常的活跃。各式各样的开源组件。开发时需要什么功能，google一下，绝大多数情况都能找到符合需求的组件。不…

yarn-cli笔记

前一阵看到一句话，搞技术既要仰望星空，又要脚踏实地。特别是前端，三天两头出来新东西。为了跟上时代，趋势。得学。。然而JS/CSS最基础的东西也不能落下。想学的的东西太多，坑越挖越多。亚历山大 ，加油吧 （济南·大明湖 2017-04-30） 这两天看了看Yarn，其实之前在微信公众号上看过，自己也照着敲了敲。之后就没在意。还是继续用NPM。没有GET到yarn的优势。恰逢看到一…

Vuex学习笔记

什么是Vuex？ 专门为Vue开发的状态管理模式。采用集中存储管理应用的所有组件状态。在没有用Vuex的时候，我们在进行组件化开发时，数据（也就是状态一般都分散在各个组件中。加入我们要使用这些状态是，我们就得在不同组件中去取状态值，然后进行状态修改，最后还要相互读取对方状态值。 父子组件中： 我们可以通过事件触发/props进行状态传递。 子组件之间： 由于Vue本身组件之间有…

VueJS组件化开发实践总结

前言 接触Vuejs，好一阵了。清明节前在慕课网学了一门课。前前后后花了40多个小时琢磨，搭建起了组件化开发的饿了么SPA。这40小时收获了很多，也踩了不少坑。这里总结一下。 源码： https://github.com/laclys/vueApp 技术栈 VueJS+Vue-resource+Vue-router+Sass+webpack+ES6 具体细节 目录结构 comm…

Webpack2小试

前端的水很深很杂，因而前端相关的工具也像雨后春笋一个一个的冒出来。最近大热的应该就数webpack--这个模块化解决方案工具。 Gulp/Grunt VS Webpack 首先这三者都是前端工具，都等让我们高效自动化的解决一些问题。但实质上webpack和Gulp/Grunt有本质的区别。 先谈谈前者。Gulp/Grunt两者的区别，暂且不在这说了。用处的话，两者可以帮我们自动…

Angular1.5到Angular1.6的JSONP交互相关的设置及小Demo

不管学习那个前端框架（其实后端也是）都回避不了，数据的交互。在交互中在重要的两个就是AJax以及跨域的JSONP。 Angular--Ajax交互 在之前的博文中开头先跑题一下说说第一种Angular的Ajax交互。 废话不多说上代码： 这里在文件夹内建了一个a.txt文件里面随便打了一些数字。在angular包裹的控制器中调用$http，设置url以及所使用的method。如…

深入理解javascript原型和闭包笔记总结

这两天发现一系列很好很棒的javascript原型和闭包深入理解的文章。 http://www.cnblogs.com/wangfupeng1988/p/3977924.html 在javascript的学习中，个人认为最容易犯错，坑最多的就是原型链和闭包这一块。 原型链这一块也算是js的一大特色，闭包捏则是大量运用于JQ的源码中。 很有必要好好总结学学习一番。 由于很重要，也…

icomoon图标

周末研究布局，遇到了获取图标的问题。在之前遇到图标第一时间想到的是切图，在页面放图片。在慕课网看了关于性能优化的雅虎军规之后发现这样很不好。遂翻了翻大厂们的页面，使用的都是字体图标（大家都知道，字体图标相比图片省了太多资源大大减少请求数量不说，任意缩放也不会失真。）搜索了一下发现了icomoon这个好东西。 使用icomoon借用的是一个在线生成网站： https://icom…

JSONP的原生实现和JQ实现(上)

JSONP JSONP，全称：JSON with padding乍一看应该是和用来数据解析描述的JSON的某个远房亲戚。通过学习， 这两者本质上完全是不同的东西 。 JSONP的概念在这就不赘言。自己的理解，由于Ajax直接请求文件数据时，跨域无权访问（为了安全）。为了解决跨域问题，我们发现在页面调用JS文件时不受跨域影响（例如，我们在任意文件中都可以引入jq文件，从而使用jq…

JSONP的原生实现和JQ实现(下)

JQ实现方式： JQ实现JSONP的时候看起来和ajax调用方式很像，目的也一样，都是请求url，染过获得服务器的数据之后进行处理。但两者完全是两个不同的东西。只是JQ这个框架将jsonp作为ajax的一种形式进行了封装。 实质上：ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。 ajax…

JS中的cookie,localStorage和sessionStorage

说到cookie通俗一点就是服务器留在用户计算机中的小文件。 在JS中创建cookie很简单，比如：document.cookie=123 这样就存储了一条没有名字的cookie。 cookie的存储都是字符串，如果存储一条名字是name，值是‘lac’的cookie只需要：document.cookie='name=lac'即可！取出存储的cookie也只需要： docume…

css3 伪类：hover 特性小探索

伪类在css3中相对还是很容易理解，也正是因为他很容易理解，平时也不纠结。不过前两天看到这个写法，还是小懵逼了一下： 这两个有什么去别捏，不费事就写了两个demo：

JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

JS原型与原型链学习笔记

这一周在慕课以及网上搜索，好好学习理解了一下JS的原型/原型链。在这里笔记一下自己觉得重要的东西，在这总结一下。 普通对象与函数： JavaScript 中分为普通对象和函数对象。凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。 构造函数： 上面的例子中 person1 和 person2 都是 Person 的实例。这两个实例都有一个 co…

在Github中演示前端demo

在浏览他人Github时，经常能看到他们的前端项目的Readme.md中，放有在线演示Demo。自己也想实现这样的效果，在网上自己摸索。总结为下文=。= 需求： 一般情况，我们将自己写成的网页上传到github仓库，点进相应的html界面出来的是该文件的代码。他人看起来非常不直观。 因此，我们需要一个在线演示demo的平台。

VSCODE1.8下TypeScript（win10）

TypeScript TypeScript是微软开发的一个Js的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。完全支持ES6规范。 TypeScript也是Google公司推出前端框架Angular2的开发语言。 (可以说是Google，微软强强联手吧。一直想学Angular框架自然的学学这TypeScript) 由于TypeSc…

HTML/CSS代码快速编写---Emmet

最近学习前端，一开始用sublime，现在转到vscode上。它们通过安装插件都支持Emmet的HTML语法规则。在这里，一边自己学习一边分享一下啊。 什么是Emment？ Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。 eg：输入!,然后按T…

通过class名获取元素（解决IE8不兼容问题）

Js中获取元素通常有三种方式通过ID（getElementById）,标签（getElementsByTagName）以及CLASS名（getElementsByClassName）。前两种方式最为常用，在Chrome，FireFox以及低版本IE8下都好使（win10自带的ie只支持模拟到IE8，再古老的版本直接忽略好了）。可是CLASS名获取元素时，在IE8下出现这样的问题…

JavaScript知识点总结1

近期学习js知识的总结，，还会有2，3，4···· 事件： onclick,onmouseover,onmouseout,onmouseup,onmousedown,onchange，onload 获取元素： 通过id获取元素 ：document.getElementById(); 通过Tag获取元素： document.getElementsByTagName(); 函数：…

浅谈Responsive设计

这两天一直在看CSS3相关的东西，提到CSS3有个很重要的特性就是Media Queries,说到Media Queries,到头来还是网页的响应式开发（ Responsive设计简单的称为RWD ）。 说到响应式开发，自己第一想到的就是这个带有‘栅格系统’的Bootstrap。它可以让你的网站在不同设备中展现不同的风格，版面不会因为屏幕大小变化而乱掉。说俗一点就是‘有求必应’…

SASS基础语法总结

SASS CSS预处理器。一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。 ------- 语法 1.变量 $开头紧跟变量名，变量名值以：分隔，！表示默认值 。$blue : #1875e7; 2.导入@import； 导入其他sass文件。（优于css的@import） 3.计算功能； 允许在代码中使用算式