{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"contributes":[{"sourceColumn":{"lastUpdated":,"description":"","permission":"COLUMN_PUBLIC","memberId":,"contributePermission":"COLUMN_PUBLIC","translatedCommentPermission":"all","canManage":true,"intro":"老司机已上线","urlToken":"onclick","id":20495,"imagePath":"v2-36a7d7cb709b9a95cd18.jpg","slug":"onclick","applyReason":"0","name":"码农在线","title":"码农在线","url":"/onclick","commentPermission":"COLUMN_ALL_CAN_COMMENT","canPost":true,"created":,"state":"COLUMN_NORMAL","followers":3795,"avatar":{"id":"v2-36a7d7cb709b9a95cd18","template":"/{id}_{size}.jpg"},"activateAuthorRequested":false,"following":false,"imageUrl":"/v2-36a7d7cb709b9a95cd18_l.jpg","articlesCount":16},"state":"accepted","targetPost":{"titleImage":"/v2-ed16a9ba30fefe5786adf_r.jpg","lastUpdated":,"imagePath":"v2-ed16a9ba30fefe5786adf.jpg","permission":"ARTICLE_PUBLIC","topics":[99,225,445],"summary":"自从工资长时没升后，小编上了各种招聘app看了各种招聘要求，好吧，小编还是安安定定的呆在这里吧。招聘要求五花八门。 蓝瘦， 香菇。为了面向工资编程，一起看看怎么入手这么一个react.js吧。纯小白编程入门。-------请关注我： 一起学习、交流、…","copyPermission":"ARTICLE_COPYABLE","translatedCommentPermission":"all","likes":0,"origAuthorId":0,"publishedTime":"T14:03:00+08:00","sourceUrl":"","urlToken":,"id":1324197,"withContent":false,"slug":,"bigTitleImage":true,"title":"面向工资编程：React速度入门。","url":"/p/","commentPermission":"ARTICLE_ALL_CAN_COMMENT","snapshotUrl":"","created":,"comments":0,"columnId":20495,"content":"","parentId":0,"state":"ARTICLE_PUBLISHED","imageUrl":"/v2-ed16a9ba30fefe5786adf_r.jpg","author":{"bio":"小程序码农","isFollowing":false,"hash":"10983bbd4ca4fd85daf2c04","uid":609900,"isOrg":false,"slug":"zhi-duo-shao-26","isFollowed":false,"description":"码农在线，前端开发，欢迎关注！微信公众号：小道门户","name":"小萧ovo","profileUrl":"/people/zhi-duo-shao-26","avatar":{"id":"c3e07edfc5e7","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"memberId":,"excerptTitle":"","voteType":"ARTICLE_VOTE_CLEAR"},"id":446281},{"sourceColumn":{"lastUpdated":,"description":"只分享干货","permission":"COLUMN_PUBLIC","memberId":,"contributePermission":"COLUMN_PUBLIC","translatedCommentPermission":"all","canManage":true,"intro":"老司机带你装逼带你飞","urlToken":"c_","id":18431,"imagePath":"v2-a04ae7e7f6a673cbaecaf6.jpg","slug":"c_","applyReason":"0","name":"干货分享录","title":"干货分享录","url":"/c_","commentPermission":"COLUMN_ALL_CAN_COMMENT","canPost":true,"created":,"state":"COLUMN_NORMAL","followers":33871,"avatar":{"id":"v2-a04ae7e7f6a673cbaecaf6","template":"/{id}_{size}.jpg"},"activateAuthorRequested":false,"following":false,"imageUrl":"/v2-a04ae7e7f6a673cbaecaf6_l.jpg","articlesCount":45},"state":"accepted","targetPost":{"titleImage":"/v2-ed16a9ba30fefe5786adf_r.jpg","lastUpdated":,"imagePath":"v2-ed16a9ba30fefe5786adf.jpg","permission":"ARTICLE_PUBLIC","topics":[99,225,445],"summary":"自从工资长时没升后，小编上了各种招聘app看了各种招聘要求，好吧，小编还是安安定定的呆在这里吧。招聘要求五花八门。 蓝瘦， 香菇。为了面向工资编程，一起看看怎么入手这么一个react.js吧。纯小白编程入门。-------请关注我： 一起学习、交流、…","copyPermission":"ARTICLE_COPYABLE","translatedCommentPermission":"all","likes":0,"origAuthorId":0,"publishedTime":"T14:03:00+08:00","sourceUrl":"","urlToken":,"id":1324197,"withContent":false,"slug":,"bigTitleImage":true,"title":"面向工资编程：React速度入门。","url":"/p/","commentPermission":"ARTICLE_ALL_CAN_COMMENT","snapshotUrl":"","created":,"comments":0,"columnId":20495,"content":"","parentId":0,"state":"ARTICLE_PUBLISHED","imageUrl":"/v2-ed16a9ba30fefe5786adf_r.jpg","author":{"bio":"小程序码农","isFollowing":false,"hash":"10983bbd4ca4fd85daf2c04","uid":609900,"isOrg":false,"slug":"zhi-duo-shao-26","isFollowed":false,"description":"码农在线，前端开发，欢迎关注！微信公众号：小道门户","name":"小萧ovo","profileUrl":"/people/zhi-duo-shao-26","avatar":{"id":"c3e07edfc5e7","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"memberId":,"excerptTitle":"","voteType":"ARTICLE_VOTE_CLEAR"},"id":446290}],"title":"面向工资编程：React速度入门。","author":"zhi-duo-shao-26","content":"自从工资长时没升后，小编上了各种招聘app看了各种招聘要求，好吧，小编还是安安定定的呆在这里吧。招聘要求五花八门。 蓝瘦，香菇。为了面向工资编程，一起看看怎么入手这么一个react.js吧。纯小白编程入门。-------请关注我：
一起学习、交流、分享。React 起源于 Facebook 的内部项目，于2013年5月开源。先总结一下：React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。下载地址：ReactJS官网地址：Github地址：这里面有所需要引用的js文件： ReactJs下载非常简单，下载完成后，看到的是一个压缩包。解压后，我们新建一个html文件，引用里面的 react.js 和 react-dom.js 这两个js文件以及browser.js。并非必需引入browser.js引入它的作用是使浏览器支持babel，你可以使用ES2015进行编码。如果你用ES5，可以不引入。到这里我们就可以开始编写代码了，首先我们先来认识一下ReactJs里面的ReactDOM.render方法：ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。下面我们在script标签里面编写代码，来输出Hello，world，代码如下：（这里我引入了browser.js）&!DOCTYPE html&\n&html&\n&head&\n&meta charset=\"utf-8\"&\n&meta content=\"telephone=no\" name=\"format-detection\"&\n&title&热点电视&/title&\n&meta name=\"keywords\" content=\"热点电视的关键词\"&\n&meta name=\"description\" content=\"热点电视的网站描述\"&\n&script src=\"build/react.js\"&&/script& \n&script src=\"build/react-dom.js\"&&/script& \n&script src=\"build/browser.min.js\"&&/script& \n&link rel=\"stylesheet\" href=\"css/main.css\"/&\n\n&/head&\n&body&\n
&div id=\"example\"&&/div&\n
&script type=\"text/babel\"&\n
ReactDOM.render(\n
&h1&Hello, world!&/h1&,\n
document.getElementById('example')\n
&/script&\n&/body&\n&/html&\n上面代码有两个地方需要注意。首先，最后一个 上面代码有两个地方需要注意。首先，最后一个 &script& 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=\"text/babel\" 。react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。（转换只要在 浏览器解析之前就可以了）上面代码中， browser.js 是Babel提供的转换器脚本，可以在浏览器运行。用户的ES6脚本放在 script 标签之中，但是要注明 type=\"text/babel\" 。注意，网页中实时将ES6代码转为ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。下面是如何将代码打包成浏览器可以使用的脚本，以 Babel 配合 Browserify 为例。首先，安装 babelify 模块： （这个自阅，暂时先让他影响着，先把门入了）。ReactDOM.render()：ReactDOM.render 是 React 的最基本方法。用于将模板转为 HTML 语言，并插入指定的 DOM 节点。上面例子里的代码就是将一个 h1 标题，插入到 example 节点里面。JSX 语法：&!DOCTYPE html&\n&html&\n&head&\n&meta charset=\"utf-8\"&\n&meta content=\"telephone=no\" name=\"format-detection\"&\n&title&热点电视&/title&\n&meta name=\"keywords\" content=\"热点电视的关键词\"&\n&meta name=\"description\" content=\"热点电视的网站描述\"&\n&script src=\"build/react.js\"&&/script& \n&script src=\"build/react-dom.js\"&&/script& \n&script src=\"build/browser.min.js\"&&/script& \n&link rel=\"stylesheet\" href=\"css/main.css\"/&\n&/head&\n&body&\n
&div id=\"example\"&&/div&\n
&script type=\"text/babel\"&\n
var names = ['Alice', 'Emily', 'Kate'];\n\n
ReactDOM.render(\n
names.map(function (name) {\n
return &div&Hello, {name}!&/div&\n
document.getElementById('example')\n
&/script&\n&/body&\n&/html&\nHTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是JSX 的语法。允许 HTML 与 JavaScript 的混写。体现了 JSX 的基本语法规则：遇到 HTML 标签（以 & 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。&!DOCTYPE html&\n&html&\n&head&\n&meta charset=\"utf-8\"&\n&meta content=\"telephone=no\" name=\"format-detection\"&\n&title&热点电视&/title&\n&meta name=\"keywords\" content=\"热点电视的关键词\"&\n&meta name=\"description\" content=\"热点电视的网站描述\"&\n&script src=\"build/react.js\"&&/script& \n&script src=\"build/react-dom.js\"&&/script& \n&script src=\"build/browser.min.js\"&&/script& \n&link rel=\"stylesheet\" href=\"css/main.css\"/&\n&/head&\n&body&\n
&div id=\"example\"&&/div&\n
&script type=\"text/babel\"&\n
var arr = [\n\t
&h1&Hello world!&/h1&,\n\t
&h2&React is awesome&/h2&,\n\t];\n\tReactDOM.render(\n\t
&div&{arr}&/div&,\n\t
document.getElementById('example')\n\t);\n
&/script&\n&/body&\n&/html&\n上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板。上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板。ReactJS组件ReactJS是基于组件化的开发，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。写第一个组件Greet，有一个name属性，然后输出hello + name的值：&!DOCTYPE html&\n&html&\n&head&\n&meta charset=\"utf-8\"&\n&meta content=\"telephone=no\" name=\"format-detection\"&\n&title&热点电视&/title&\n&meta name=\"keywords\" content=\"热点电视的关键词\"&\n&meta name=\"description\" content=\"热点电视的网站描述\"&\n&script src=\"build/react.js\"&&/script& \n&script src=\"build/react-dom.js\"&&/script& \n&script src=\"build/browser.min.js\"&&/script& \n&link rel=\"stylesheet\" href=\"css/main.css\"/&\n&/head&\n&body&\n
&div id=\"example\"&&/div&\n
&script type=\"text/babel\"&\n
var Greet = React.createClass({\n
\trender: function(){\n
\t\treturn &h1&Hello {this.props.name}&/h1&;\n
ReactDOM.render(\n
\t&Greet name=\"Jack\" /&,\n
\tdocument.getElementById('example')\n
&/script&\n&/body&\n&/html&\n看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：1）获取属性的值用的是this.props.属性名2）创建的组件名称首字母必须大写。3）为元素添加css的class时，要用className。4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。组件状态组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面写一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。&!DOCTYPE html&\n&html&\n&head&\n&meta charset=\"utf-8\"&\n&meta content=\"telephone=no\" name=\"format-detection\"&\n&title&热点电视&/title&\n&meta name=\"keywords\" content=\"热点电视的关键词\"&\n&meta name=\"description\" content=\"热点电视的网站描述\"&\n&script src=\"build/react.js\"&&/script& \n&script src=\"build/react-dom.js\"&&/script& \n&script src=\"build/browser.min.js\"&&/script& \n&/head&\n&body&\n
&div id=\"example\"&&/div&\n
&script type=\"text/babel\"&\n
var InputState = React.createClass({\n\t
getInitialState: function() {\n\t
return {enable: false};\n\t
\thandleClick: function(event){\n
\t\tthis.setState({enable: !this.state.enable});\n
\trender: function(){\n\t
\treturn(\n\t
\t\t&div&\n\t
\t\t\t&input type=\"text\" ref=\"getInputState\"
disabled={this.state.enable}/&\n\t
\t\t\t&button onClick={this.handleClick} &dianji&/button&\n\t
\t\t&/div&\n\t
ReactDOM.render(\n
\t&InputState /&,\n
\tdocument.getElementById('example')\n
&/script&\n&/body&\n&/html&\nclick：click：使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。原理分析：当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。这里值得注意的几点如下：1）getInitialState函数必须有返回值，可以是NULL或者一个对象。2）访问state的方法是this.state.属性名。3）变量用{}包裹，不需要再加双引号。组件的生命周期组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()此外，React 还提供两种特殊状态的处理函数。componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用下面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。&!DOCTYPE html&\n&html&\n&head&\n&meta charset=\"utf-8\"&\n&meta content=\"telephone=no\" name=\"format-detection\"&\n&title&热点电视&/title&\n&meta name=\"keywords\" content=\"热点电视的关键词\"&\n&meta name=\"description\" content=\"热点电视的网站描述\"&\n&script src=\"build/react.js\"&&/script& \n&script src=\"build/react-dom.js\"&&/script& \n&script src=\"build/browser.min.js\"&&/script& \n&/head&\n&body&\n
&div id=\"example\"&&/div&\n
&script type=\"text/babel\"&\n
var Hello = React.createClass({\n
getInitialState: function () {\n
return {\n
opacity: 1.0\n
componentDidMount: function () {\n
this.timer = setInterval(function () {\n
var opacity = this.state.opacity;\n
opacity -= .05;\n
if (opacity & 0.1) {\n
opacity = 1.0;\n
this.setState({\n
opacity: opacity\n
}.bind(this), 100);\n
render: function () {\n
return (\n
&div style={{opacity: this.state.opacity}}&\n
Hello {this.props.name}\n
}\n});\n\nReactDOM.render(\n
&Hello name=\"world\"/&,\n
document.body\n);\n
&/script&\n&/body&\n&/html&\n主要是理解这些功能的使用，其次就是
this.props.children ：表示组件的所有子节点。PropTypes：用来验证组件实例的属性是否符合要求。表单：文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。Ajax：通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI，可以使用 jQuery 完成 Ajax 请求。ReactJS小结关于ReactJS就先学习到这里了，下面来总结一下，主要有以下几点：1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留着研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。3、为组件添加外部css样式时，类名应该写成className而不是添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style=\"opacity:{this.state.opacity};\"。因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。4、组件名称首字母必须大写。5、变量名用{}包裹，且不能加双引号。参考资料","updated":"T06:03:00.000Z","canComment":false,"commentPermission":"anyone","commentCount":59,"collapsedCount":0,"likeCount":490,"state":"published","isLiked":false,"slug":"","lastestTipjarors":[{"isFollowed":false,"name":"不再","headline":"","avatarUrl":"/da8e974dc_s.jpg","isFollowing":false,"type":"people","slug":"zhang-wen-jun-16","bio":null,"hash":"1f4e07b474a6ccb580a5b7f697fe1501","uid":00,"isOrg":false,"description":"","profileUrl":"/people/zhang-wen-jun-16","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"isFollowed":false,"name":"帕吉","headline":"世界是噪音的花园","avatarUrl":"/0ab442ee442a07e860dd4deb215a2647_s.jpg","isFollowing":false,"type":"people","slug":"pa-ji-61","bio":"web和音乐","hash":"7b4f3f1b76db254bddaeccdf","uid":16,"isOrg":false,"description":"世界是噪音的花园","profileUrl":"/people/pa-ji-61","avatar":{"id":"0ab442ee442a07e860dd4deb215a2647","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"isFollowed":false,"name":"陈炙","headline":"","avatarUrl":"/v2-e8f92e275d2d0afdc7ff3e_s.jpg","isFollowing":false,"type":"people","slug":"cheng-zhi-45-72","bio":"各项数值还凑合","hash":"4c7932fdccd","uid":942900,"isOrg":false,"description":"","profileUrl":"/people/cheng-zhi-45-72","avatar":{"id":"v2-e8f92e275d2d0afdc7ff3e","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"isFollowed":false,"name":"杨广毫","headline":"","avatarUrl":"/v2-58d9be788_s.jpg","isFollowing":false,"type":"people","slug":"yang-guang-hao-8","bio":"前端","hash":"d","uid":548400,"isOrg":false,"description":"","profileUrl":"/people/yang-guang-hao-8","avatar":{"id":"v2-58d9be788","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"isTitleImageFullScreen":true,"rating":"none","titleImage":"/v2-ed16a9ba30fefe5786adf_r.jpg","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"互联网"},{"url":"/topic/","id":"","name":"前端开发"},{"url":"/topic/","id":"","name":"设计"}],"adminClosedComment":false,"titleImageSize":{"width":1440,"height":829},"href":"/api/posts/","excerptTitle":"","column":{"slug":"onclick","name":"码农在线"},"tipjarState":"activated","tipjarTagLine":"小编编辑得这么辛苦，不来点吗= =","sourceUrl":"","pageCommentsCount":59,"tipjarorCount":4,"annotationAction":[],"hasPublishingDraft":false,"snapshotUrl":"","publishedTime":"T14:03:00+08:00","url":"/p/","lastestLikers":[{"bio":"学生","isFollowing":false,"hash":"515d5b0fbc57bab2fbf5b8c40b1a84a1","uid":40,"isOrg":false,"slug":"hululu1356","isFollowed":false,"description":"","name":"呼噜噜","profileUrl":"/people/hululu1356","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"程序员","isFollowing":false,"hash":"ca43f611f212e73ba3d62","uid":144700,"isOrg":false,"slug":"liu-hf","isFollowed":false,"description":"","name":"柳HF","profileUrl":"/people/liu-hf","avatar":{"id":"e53f8d7d81bcff1ec93015","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"GO SPURS GO","isFollowing":false,"hash":"88b990b2a491b9c4f2745","uid":862500,"isOrg":false,"slug":"jackie-cheung-1996","isFollowed":false,"description":"","name":"Jackie.Meowww","profileUrl":"/people/jackie-cheung-1996","avatar":{"id":"v2-b6c8aeff3","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"","isFollowing":false,"hash":"032f40303f","uid":20,"isOrg":false,"slug":"foo_hack","isFollowed":false,"description":"离开知乎","name":"Steven Yun","profileUrl":"/people/foo_hack","avatar":{"id":"141c45deb8f078db8c088a11eb2da8ce","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":null,"isFollowing":false,"hash":"6f37bc71b9eaf9c3ff43a4a03a9ba6ef","uid":572500,"isOrg":false,"slug":"happy123-38","isFollowed":false,"description":"","name":"happy123","profileUrl":"/people/happy123-38","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"summary":"自从工资长时没升后，小编上了各种招聘app看了各种招聘要求，好吧，小编还是安安定定的呆在这里吧。招聘要求五花八门。 蓝瘦， 香菇。为了面向工资编程，一起看看怎么入手这么一个react.js吧。纯小白编程入门。-------请关注我： 一起学习、交流、…","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":true,"rating":"none","titleImage":"/v2-3f1d54bcf3b390f318f92a_r.png","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"JavaScript"},{"url":"/topic/","id":"","name":"互联网"},{"url":"/topic/","id":"","name":"IT 行业"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"小程序码农","isFollowing":false,"hash":"10983bbd4ca4fd85daf2c04","uid":609900,"isOrg":false,"slug":"zhi-duo-shao-26","isFollowed":false,"description":"码农在线，前端开发，欢迎关注！微信公众号：小道门户","name":"小萧ovo","profileUrl":"/people/zhi-duo-shao-26","avatar":{"id":"c3e07edfc5e7","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"onclick","name":"码农在线"},"content":"我来跟你讲个笑话，JavaScript程序员和ECMAScript程序员最大的不同就是能写出只能在Firefox上运行的JavaScript。做为一个前端，我们 需要掌握些什么？前端开发知识点大纲有：HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。\nJavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。\n其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 \n然而2016年你入门JavaScript需要掌握哪些知识以及新技术？是不是有一些从业很多年的在你耳边来一句：如此循环下去，牵扯出无穷无尽的库与依赖。比如：我只是想在页面上展示数据，你就告诉我用哪个模板引擎就好了。我的项目有那么大吗？需要用到这些吗？JQuery就能搞定的东西却极度复杂化？本来直接写一周就能搞定的问题，被各种复杂化，选框架，选构建工具就花了半个月，得不偿失。然而现在大家只谈框架。这是一个用JQuery都被鄙视的时代。而在这个时代是不是有很多新人花了几个月独自摸索勤学苦练，基本了解了文中的一些名词，期间一度怀疑自己怀疑人生，前端真难，各种求带啊……？框架太多反而浪费时间。有些事情根本jquery就能解决。前端就是这么折腾。从技术角度说，新东西层出不穷是不可避免的，都是为解决某些特定需求出现的，但是从程序员角度来说，这玩意儿太浪费时间，有那功夫干点别的多好啊。有些事只有经历过才明白，看上去很美的东西都是陷阱，而且是连环套，出来很难。程序员如果能改行就改行，不能改行就找个相对稳定的技术研究，腾出时间去玩点别的业余爱好。大部分程序员热衷于研究“如何装修房子好看和相关的技术”，但那些都是个人品味的问题，犯不着投入精力和时间，建好房子是关键，怎么不是住啊。本来一个jq搞定的，现在vue vue-router webpack巴拉巴拉一大堆，前端新人是不是表示心好累？打好基础才能更好的了解和掌握飞速迭代的技术产品！也不是所有的项目都适合添加所谓的新名词，redux的开发模式对于小的项目是没有必要的！而那些大量使用未发布或未广泛支持的语言特性的事情就让那些喜欢折腾的人去搞事情吧。我们只需一步一个脚印做好易维护的前端，不至于你撒手不管辞职了，来个新人接手你的项目并改需求重构了还需要一步步问你解决各种只有你看得了的问题。说说reactjs，各种类库的出现都是为了方便一种复杂的业务逻辑得以简单的呈现，比如jq，是一个轻巧的链式js库，用它来实现的东西写的少，易看懂，表现力足，甚至不用考虑兼容 。但是，我完全有能力用原生js去模拟jq的功能，相同的，我们也可以用jq去模拟出reactjs的功能 ，所以并没有白学。放心的打好JavaScript基础，其实前端没有想象的可怕。","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T16:47:48+08:00","url":"/p/","title":"如何看待JS社区大量使用未发布或未广泛支持的语言特性？","summary":"我来跟你讲个笑话，JavaScript程序员和ECMAScript程序员最大的不同就是能写出只能在Firefox上运行的JavaScript。 做为一个前端，我们 需要掌握些什么？前端开发知识点大纲有：HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":51,"likesCount":197},"next":{"isTitleImageFullScreen":true,"rating":"none","titleImage":"/v2-c8bf17c79024_r.png","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"前端开发"},{"url":"/topic/","id":"","name":"设计"},{"url":"/topic/","id":"","name":"JavaScript"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"小程序码农","isFollowing":false,"hash":"10983bbd4ca4fd85daf2c04","uid":609900,"isOrg":false,"slug":"zhi-duo-shao-26","isFollowed":false,"description":"码农在线，前端开发，欢迎关注！微信公众号：小道门户","name":"小萧ovo","profileUrl":"/people/zhi-duo-shao-26","avatar":{"id":"c3e07edfc5e7","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"onclick","name":"码农在线"},"content":"昨天刷了一天微博，不敢蓝瘦香菇了，会被打断腿的。其他人都装逼，为什么只打我一个人。想写个装逼点的入门教程，可是要先有工具环境，接着就有了 这篇文章了，正所谓工欲善其事，必先利其器嘛~
-------------请关注我，一起学习、交流、分享。开发工具webstorm。是在windows环境下的。webstorm官网下载： 下载后安装，直接下一步，安装在哪里自己喜欢。购买服务或自行百度xx方法。到这里，你可以愉快的使用webstorm了。这部分可以忽略（不怎么推荐使用这个汉化包【使用了会影响 设置 无法使用这个问题】） {汉化方法：
密码: 66gw
（一般不推荐汉化，装逼指南嘛，英语更有feel点。）将汉化包中的文件，复制到WebStorm安装目录中lib文件夹中即可。（特殊说明在使用汉化包的过程中，会导致无法使用设置的问题！！！）【Web Storm 编辑器字体修改】（按需修改）地址：C:\\Users\\账户名\\.WebStorm2016.2\\config\\colors 中有个 fontsize.icls 的文件，用编辑器打开它&option name=\"LINE_SPACING\" value=\"1.0\" /&
&option name=\"EDITOR_FONT_SIZE\" value=\"12\" /&
&option name=\"CONSOLE_FONT_NAME\" value=\"Courier New\" /&
&option name=\"EDITOR_FONT_NAME\" value=\"微软雅黑\" /&
}这个是汉化后的，文件里面设置按钮已废。按Alt + 1 键成下边这样展示= = （其他自行摸索）配置和使用：1.主题，把下载好的主题包放在C:\\Users\\jikey(用户名)\\.WebIde10\\config\\colors目录下，然后重启webstorm，settings –& colors & fonts –&scheme name中选择主题名。如果出现特别长代码对齐白线，在Editor –& Appearance –& Show vertical indent guides 前面的勾去掉即可。主题包网站：或者推荐： （小编哪个都没装）2.添加VIM插件：File -& Settings -& Plugins -& Browse repositories -& 搜索vim，对它单击右键Download and install，然后重启IDE就可以了。3.除了webstorm之外，此公司还提供另外一个针对phper的开发工具,phpStorm，主页上说明，phpstorm包括所有webstorm的功能。但是习惯于大括号去方法名在同一行显示，所以还得配置：File -& Settings -& code style -& PHP -& Wrapping and Braces -& Braces placement -&In method declaration : End of line.4.zencoding默认的快捷键是Tab，如果你需要修改zencoding快捷键的话：File -& Setting -& Live Templates 。5.在开发js时发现，需要ctrl + return 才能选提示候选项，又需要配置：File -& Setting -& Editor -& Code Completion -& Preselect the first suggestion:’Smart’ 改为 Always6.注意的地方是：Webstorm的调试不支持中文路径中文文件名。下面是Webstorm的一些常用快捷键：1. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。2. ctrl + j: 输出模板3. ctrl + b: 跳到变量申明处4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)5. ctrl + []: 匹配 {}[]6. ctrl + F12: 可以显示当前文件的结构7. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容8. alt + left/right:标签切换9. ctrl + r: 替换10. ctrl + shift + up: 行移动11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)12. ctrl + d: 行复制13. ctrl + shift + ]/[: 选中块代码14. ctrl + / : 单行注释15. ctrl + shift + / : 块注释16. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息17. ctrl + '-/+': 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。18. ctrl + '.': 折叠选中的代码的代码。ctrl+/ 单行注释ctrl+shift+/块注释ctrl+shift+ +/-展开/折叠ctrl+alt+L 格式化代码ctrl+shift+ up/down 上下移动句子Alt+回车 导入包,自动修正Ctrl+N 查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L 格式化代码Ctrl+Alt+O 优化导入的类和包Alt+Insert 生成代码(如get,set方法,构造函数等)Ctrl+E或者Alt+Shift+C 最近更改的代码Ctrl+R 替换文本Ctrl+F 查找文本Ctrl+Shift+Space 自动补全代码Ctrl+空格 代码提示Ctrl+Alt+Space 类名或接口名提示Ctrl+P 方法参数提示Ctrl+Shift+Alt+N 查找类中的方法或变量Alt+Shift+C 对比最近修改的代码Shift+F6 重构-重命名Ctrl+Shift+先上键Ctrl+X 删除行Ctrl+D 复制行Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/*...*/ ）Ctrl+J 自动代码Ctrl+E 最近打开的文件Ctrl+H 显示类结构图Ctrl+Q 显示注释文档Alt+F1 查找代码所在位置Alt+1 快速打开或隐藏工程面板Ctrl+Alt+ left/right 返回至上次浏览的位置Alt+ left/right 切换代码视图Alt+ Up/Down 在方法间快速移动定位Ctrl+Shift+Up/Down 代码向上/下移动。F2 或Shift+F2 高亮错误或警告快速定位代码标签输入完成后，按Tab，生成代码。选中文本，按Ctrl+Shift+F7 ，高亮显示所有该文本，按Esc高亮消失。Ctrl+W 选中代码，连续按会有其他效果选中文本，按Alt+F3 ，逐个往下查找相同文本，并高亮显示。Ctrl+Up/Down 光标跳转到第一行或最后一行下Ctrl+B 快速打开光标处的类或方法这里由 推荐了两款插件觉得蛮不错在这里分享下：大家有什么好用的的可以一起分享
觉得有用，给个赞呗（由于压力，小编买了正版一年使用，现在支付宝已大出血。请支持正版谢谢）","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T10:54:14+08:00","url":"/p/","title":"装逼工具指南：webstorm（工欲善其事，必先利其器 常用快捷键）","summary":"昨天刷了一天微博，不敢蓝瘦香菇了，会被打断腿的。其他人都装逼，为什么只打我一个人。想写个装逼点的入门教程，可是要先有工具环境，接着就有了 这篇文章了，正所谓工欲善其事，必先利其器嘛~ -------------请关注我，一起学习、交流、分享。 开…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":86,"likesCount":468}},"annotationDetail":null,"commentsCount":59,"likesCount":490,"FULLINFO":true}},"User":{"zhi-duo-shao-26":{"isFollowed":false,"name":"小萧ovo","headline":"码农在线，前端开发，欢迎关注！微信公众号：小道门户","avatarUrl":"/c3e07edfc5e7_s.jpg","isFollowing":false,"type":"people","slug":"zhi-duo-shao-26","bio":"小程序码农","hash":"10983bbd4ca4fd85daf2c04","uid":609900,"isOrg":false,"description":"码农在线，前端开发，欢迎关注！微信公众号：小道门户","profileUrl":"/people/zhi-duo-shao-26","avatar":{"id":"c3e07edfc5e7","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{"next":{},"onclick":{"following":false,"canManage":false,"href":"/api/columns/onclick","name":"码农在线","creator":{"slug":"zhi-duo-shao-26"},"url":"/onclick","slug":"onclick","avatar":{"id":"v2-36a7d7cb709b9a95cd18","template":"/{id}_{size}.jpg"}}},"columnPosts":{},"columnSettings":{"colomnAuthor":[],"uploadAvatarDetails":"","contributeRequests":[],"contributeRequestsTotalCount":0,"inviteAuthor":""},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"isTitleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"drafts":{"draftsList":[],"next":{}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{}}