content.json

[{"title":"从十个问题重学PHP (一) 错误和异常的区别","date":"2017-03-03T02:40:42.000Z","path":"learn-php-from-question-error-exception-different/","text":"author：oceanbj； created：2017-03-02； last update；2017-03-03 问题：异常和错误的有什么区别？php错误处理和异常处理的说明如下，但二者有什么不同？分别在什么时候使用？ PHP 错误处理基本的错误处理，使用 die()可以通过 set_error_handler() 设置，使用自定义的函数处理所有错误。使用 trigger_error() 错误触发函数使用 error_log() 函数向指定的文件或远程发送错误记录错误有报告级别而异常没有E_WARNING，非致命的 run-time 错误。不暂停脚本执行。E_NOTICE，Run-time 通知。脚本发现可能有错误发生，但也可能在脚本正常运行时发生。E_USER_ERROR，致命的用户生成的错误。这类似于程序员使用 PHP 函数 trigger_error() 设置的 E_ERROR。E_USER_WARNING，非致命的用户生成的警告。这类似于程序员使用 PHP 函数 trigger_error() 设置的 E_WARNING。E_USER_NOTICE，用户生成的通知。这类似于程序员使用 PHP 函数 trigger_error() 设置的 E_NOTICE。E_RECOVERABLE_ERROR，可捕获的致命错误。类似 E_ERROR，但可被用户定义的处理程序捕获。E_ALL，所有错误和警告，除级别 E_STRICT 以外。 PHP 异常处理try, throw, catchphp.net参考手册说，PHP 5 has an exception model similar to that of other programming languages. An exception can be thrown, and caught (“catched”) within PHP. Code may be surrounded in a try block, to facilitate the catching of potential exceptions. Each try must have at least one corresponding catch or finally block.Tip：The Standard PHP Library (SPL) provides a good number of built-in exceptions.SPL provides a set of standard Exceptions.• BadFunctionCallException• BadMethodCallException• DomainException• InvalidArgumentException• LengthException• LogicException• OutOfBoundsException• OutOfRangeException• OverflowException• RangeException• RuntimeException• UnderflowException• UnexpectedValueException 细节可以看一下参考资料，这里只说一下学习心得：异常是强类型的，类型安全的分支处理技术；而返回错误是其弱化的，不安全的版本。 自己简单总结以下几点：1、异常处理的代码更简洁可读；2、在嵌套循环里使用异常能减少很多条件判断；3、在复杂系统里使用异常能够简化大量错误码定义导致复杂的问题；4、异常处理在某些方面性能更好；5、有错误预支时才用try／catch，不可预知错误使用try都是耍流氓。 ref1， https://www.zhihu.com/question/36278363/answer/67013226ref2， http://www.laruence.com/2012/02/02/2515.htmlref3， https://shipilev.net/blog/2014/exceptional-performance/ 遗留问题，php.net手册里spl给出的代码异常没有报错，原因未知，待查http://php.net/manual/en/class.invalidargumentexception.php <?php function tripleInteger($int) { if(!is_int($int)) throw new InvalidArgumentException('tripleInteger function only accepts integers. Input was: '.$int); return $int * 3; } $x = tripleInteger(4); //$x == 12 $x = tripleInteger(2.5); //exception will be thrown as 2.5 is a float $x = tripleInteger('foo'); //exception will be thrown as 'foo' is a string $x = tripleInteger('4'); //exception will throw as '4' is also a string","tags":[{"name":"php","slug":"php","permalink":"https://oceanchang.github.io/tags/php/"}]},{"title":"学习笔记 - Vue.js","date":"2017-02-22T05:11:19.000Z","path":"oceanbj-study-notes-vuejs/","text":"author：oceanbj； created：2017-02-17； last update；2017-02-21 本文适用于：初级了解css、javascript，能用的bootstrap+jquery写传统web页面，对前端开发一系列技术不了解的后台开发人员，想了解一些前端框架知识，想了解vuejs。 ps: 由Laravel框架看到Vue.js的介绍，就找来官方文档学习一下前端框架，但本人水平实在有限，看完官方文档后感觉还是身在此山中云山雾罩，于是多方Google不懂的相关名词概念，写笔记记录一下，鉴于本人前端开发水平较初级，若文中解释错误还请各位指正 实在忍不住吐槽一下：看Vue.js文档中文翻译看的好痛苦，英文也需要常常猜测究竟是什么意思，然后各种google，举例：https://vuejs.org/v2/guide/instance.html Properties and Methods部分 proxy这是被当成动词使用了了嘛？从google到韦伯词典都没看到有动词的词性Each Vue instance proxies all the properties found in its data object:It should be noted that only these proxied properties are reactive. expose被翻译为暴露原文：Vue instances expose a number of useful instance properties翻译：Vue 实例暴露了一些有用的实例属性与方法 导读 123456781. vue.js是什么？ 1.1. Vue.js和熟悉的jQuery有什么区别？ 1.2. 前端框架是什么，解决了什么问题，有什么意义？ 1.3. Vue.js和其他前端框架比较 2. vue使用和理解 2.1. 从 hello world 开始 2.2. 理解使用过程中的知识点 2.3. 使用vue遇到的问题 1. vue.js是什么？Vue.js的作者为Evan You（尤雨溪），曾任职于Google Creative Lab vue.js 是一个轻量级的渐进式框架（a progressive framework）（当前2.1.10版本官方文档http://cn.vuejs.org/这样介绍）;ps: “什么渐进式框架”搞的似乎很高深，反而不如最初介绍的Vue.js就是一个库简单易懂。 Vue.js 提供的核心是 MVVM 中的 VM，也就是 ViewModel。ViewModel 负责连接 View 和 Model，保证视图和数据的一致性。ps: ViewModel图如下。高深说法ViewModel是“响应式的数据绑定系统” Vue.js 最大的特点就是简单，在定义中，View 就是用户实际看到的 DOM 元素，而 Model 就是原生的JavaScript 对象。作为开发者，真正需要关注的只有 ViewModel，也就是 Vue.js 所提供的 Vue 构建函数: 123var vm = new Vue({ // 选项...}) 作者2015年在0.11版本文档介绍“Vue.js 不是一个框架，它只是一个提供 MVVM 风格的双向数据绑定的库，专注于 UI 层面” (原文) 。 在当前github上的项目说明。Vue.js is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API. Core features include: Declarative rendering with a plain JavaScript object based reactivity system. Component-oriented development style with tooling support Lean and extensible core Flexible transition effect system Fast without the need for complex optimization Vue的数据驱动模型 Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。 当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。 当Model层的数据发生改变时，Vue会通过Data Bingings来监听并改变View层的展示。 这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。 1.1. Vue.js和熟悉的jQuery有什么区别？[9]jQuery是一个类库，Vue是一个框架，二者有本质不同。ps: 从上一节介绍可知Vue近似一个框架 jQuery是使用选择器$选取DOM对象，对其进行赋值、取值、事件绑定等操作，数据和界面是在一起的。比如需要获取label标签的内容：$(“lable").val()它还是依赖DOM元素的值。 Vue则是通过Vue对象将数据和View完全分离开来了。框架，准确来说是MVC框架，是以模型（model）为中心，而DOM操作是附加的。可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。 参考附录“JavaScript和ECMA[10]”，jQuery和vue分别是ECMA标准和前端开发需要在不同阶段依次出现的产物，vue相对jQuery代表了更新更复杂的技术应用，使用vue.js可以完全实现jQuery的功能，重点是两者适用场景不同开发效率不同，目前看起来较多用户交互操作涉及数据更新、单页面开发需求、需要前后端分离、不考虑SEO等可以用vue.js或其他前端框架，若只是简单的js需求使用jQuery就可以了。 1.2. 前端框架是什么，解决了什么问题，有什么意义？物有始终，想搞明白前端框架是什么，先从前端什么时候开始有框架的讲起。 早期网站的前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，这个时期每个界面上只有很少的JavaScript逻辑，基本不太需要框架。 随着AJAX的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，以jQuery为代表，针对界面上常见的DOM操作，远程请求，数据处理等作了封装，也有专注于处理数据的Underscore，严格来说，这些都不能算框架，而是算库。 类库，库它是一种工具，提供了，可以不用，即使用了，也不会影响自己的代码结构。 类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。 伴随着一些Web产品逐渐往应用（APP）方向发展，导致不得不做“前端的架构”这个事情了 用户体验要求越来越高( 加载速度快, 响应快, 无闪烁 ) 前端功能的增强需求越来越多 前端代码越来越庞大 移动端快速发展对 h5 前端的需求 而 jQuery等只解决了 Javascript 工具库的问题, 但工程化需求无好的解决方案。 于是产生了两种不同的演进方案. 后端渲染技术: ajax -> pjax -> sjr ( 需要服务端提供支持 )后端渲染技术很快就发展到顶了. 但技术理解还是足够简单的. 我们还是回到前端框架上. NodeJS, AMD(CMD), ES6 的出现, 使得组织起一个前端框架成为现实. 于是乎, 百团大战, 出现了上面众多框架混战的画面.无论是 AngularJS, EmberJS, Backbone, ReactJS, VueJS 都是围绕着这几点进行的不同的尝试. 框架，是面向一个领域，提供一套解决方案，如果用了，就要按照给出的游戏玩法和方式办事。 框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，为了实现M和V的解耦，把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案，提高开发效率，如果我们选择了使用某框架，就应该遵循该框架所规定的规则。 上文出现的名词解释： 这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。 网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，那么一个JQuery前端类库就可以了，真的没必要用上一些高大上的框架。 当然，框架的确是很有用的，重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要，值得学习借鉴，但我们不能因此变得盲从。只有深刻去理解前端框架，知道什么时候该用什么什么框架解决什么问题，才能有的放矢，直击要害。 前端MV*框架的意义[12]jQuery的思维方式是：以DOM操作为中心MV*框架的思维方式是：以模型为中心，DOM操作只是附加 所以回到那个问题上，jQuery满足了你的业务需要，你还有什么必要引入MV*框架？ 这个是要看产品类型的，如果是页面型产品，多数确实不太需要它，因为页面中的JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。 长期做某个行业软件的公司，一般都会沉淀下来一些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，在前端很少有相应的组织。在以往的经验里，他们是有做MVC的，也尝试做了一些界面组件，但做法比较过时，比如说使用JSF或者GWT这样的方式。 JSF的问题是什么？它的问题并不在于界面跟逻辑混合，所谓的纵向切分组件，Polymer这种纯前端框架也是这么切分的，它问题在于组件的生成和渲染不在同一个地方。所以，逻辑代码的位置很尴尬，如果这个界面简单还好说，复杂起来就很麻烦了，就是很多明明是前端逻辑代码，却需要通过后端去生成。 GWT这种方式相对要好一些，它的问题是留给UI调节的余地太小了，比较缺乏灵活性。 这类基于某种服务端技术的组件化方式有一些局限性，比如它较大程度限制了前端的发挥，在早一些的时候，这种方式可能还不错，但是现在随着时代发展，用户对前端用户体验要求越来越高，需要我们把很大一部分精力继续放回前端来。JSF等方案的另外一个问题是绑定了某种服务端环境，很难切换到另外一种后端上，如果碰上要用Hybird方式开发，想复用一些前端逻辑，几乎毫无可能。 归根结底，前端MV*框架带来的是一整套工作流程的变更，后端工程师也可以编写前端的模型代码，把它跟后端彻底打通，交互工程师处理UI跟模型的互动关系，UI工作人员可以专注、无障碍地处理HTML源码，把它们以界面模版的形式提供给交互工程师。这一整套协作机制能够大大提高B/S架构系统的开发效率，如果再有外围的管控平台，生产效率将真正踏进工业化的阶段。 上文出现的名词解释： Google Web Toolkit（简称GWT），是一个前端使用JavaScript，后端使用Java的AJAX framework，以Apache许可证2.0版本开放源始码。GWT透过编译器将Java程式码编译成JavaScript，可让开发人员使用Java程式设计语言，快速建置与维护复杂但高效能的JavaScript前端应用程式，借此减轻开发人员负担。 JavaServer Faces（JSF），新一代的Java Web应用技术标准，吸收了很多Java Servlet、JavaServer Pages（JSP）以及其他的Web应用框架的特性。JSF为Web应用开发定义了一个事件驱动的、基于组件的模型。 2. vuejs使用和理解？从 Hello Vue 开始 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue demo</title><script src="https://unpkg.com/vue/vue.js"></script></head><body>// ------------ 模板语法说明部分 -----<div id=“demo1”> <p v-if="seen"> {{ message }} </p> // 条件指令和文本显示模板语法 <input v-model="message"> // 表单的双向数据绑定指令 <li v-for="todo in todos"> // 循环指令 {{ todo.text }} </li> <button v-on:click="reverseMessage">Reverse Message</button> // 事件指令 <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol></div>// ---------- 模板部分 end ------// ---------- javascript 部分 ----<script>Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'})var app = new Vue({ // 每个Vuejs应用都通过构造函数 Vue 创建实例启动， // 按需初始化 挂载dom，数据，模板，方法，生命周期钩子等 el: ‘#demo1’, // 挂载DOM data: { // 数据都在这儿 message: 'Hello Vue!’, seen: true, todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ], groceryList: [ { text: 'Vegetables' }, { text: 'Cheese' }, { text: 'Whatever else humans are supposed to eat' } ] }, methods: { // 方法都写在这里 reverseMessage: function () { this.message = this.message.split('').reverse().join('') } }, computed: { // 计算属性都写在这儿, 和方法比能够缓存结果不用每次都重新计算 // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } }, created: function () { // 生命周期钩子，有created、mounted、destoryed等等 console.log('a is: ' + this.a) }})</script></body></html> Vue.js分为 View 和 Model 两块，Vue.js的核心vm（ViewModel）在底层完成数据和DOM的绑定。 模型中的View部分：指令(directive)指令语法和使用很简单，可以理解是一个特殊的HTML属性(attribute)，声明式的将数据渲染为需要的DOM展现，指令写在DOM元素标签里或标签之间，指令包括文本和html操作、条件循环语句操作、DOM属性和样式操作、表单操作等，常见如下： 12v-text, v-html, v-show, v-if/v-else/v-else-fi, v-for, \\v-on ,v-bind, v-model, v-pre, v-cloak, v-once 示例： <input type="checkbox" v-model="class1" id="r1"> <span>{{ message }}</span> ps: 详细指令说明可以去看参考文档：https://vuefe.cn/api/#指令 模型中的Model部分英文文档和中文文档实在读不下去了，各种痛苦，罢工。。。。。 组件和实例的关系，all Vue components are essentially extended Vue instances 生命周期钩子（Instance Lifecycle Hooks）：beforeCreate, created, beforeMount, mounted, beforeDestroy, destroyed The Vue Instance, Vue实例 HTML-based template syntax, 模板语法 Computed Properties and Watchers, 计算属性 Class and Style Bindings, Class与Style绑定 Conditional Rendering, 条件渲染 List Rendering, 列表渲染 Event Handing, 事件处理器 Form Input Bindings, 表单控件绑定 Components, 组件 Advanced Reactivity in Depth, 深入响应式原理 Transition Effects, 过渡效果 Transition State, 过渡状态 Render Functions, Render函数 Custom Directives, 自定义指令 Mixins, 混合 Plugins, 插件 Single File Components, 单文件组件 Production Develoyment Tips, 生产环境部署 Routing, 路由 State Management, 状态管理 Unit Testing, 单元测试 Server-Side Rendering, 服务端渲染 TypeScript Support 学习参考资料 [1] 官网，https://cn.vuejs.org/v2/guide/ [2] 2016 年后 Web 开发趋势是什么，http://yafeilee.me/blogs/86 [3] 尤小右专栏：Vue.js中文入门，http://www.html-js.com/article/column/99 [4] 前端开发之走进Vue.js，http://www.cnblogs.com/luozhihao/p/6014098.html [5] webpack入门必知必会，http://www.cnblogs.com/luozhihao/p/6287820.html [6] 我们为什么要尝试前后端分离，http://www.cnblogs.com/luozhihao/p/5761515.html [7] 使用 Webpack 模块化 Angular 应用程序，https://www.ibm.com/developerworks/cn/web/wa-modularize-angular-apps-with-webpack-trs/index.html [8] VUE（现代库） VS jquery（传统库）区别，http://www.cnblogs.com/wteam-xq/p/5002976.html [9] jQuery为什么过时了（贺师俊），https://www.zhihu.com/question/34892985/answer/60466608 [10] 廖雪峰JavaScript教程，http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 [11] Web前端框架与类库的思考，http://www.cnblogs.com/coco1s/p/4040108.html [12] 前端MV*框架的意义，http://www.ituring.com.cn/article/59237 [13] 浅谈vuejs，http://www.cnblogs.com/luozhihao/p/5329440.html Vue.js——vue-resource全攻略，http://www.cnblogs.com/keepfool/p/5657065.html，http://www.cnblogs.com/keepfool/category/845804.html https://github.com/robin22333/vuejs-demo.git https://github.com/keepfool/vue-tutorials https://zhuanlan.zhihu.com/p/21347849，理解Vue.js https://github.com/thx/brix-bisheng，纯粹的数据双向绑定库 什么是语法糖？ 什么是“字符串模式”？string templates and HTML templates 参考资料摘抄[9] jQuery为什么已经过时jQuery为什么已经过时。说这个你得知道jQuery提供的核心价值是什么。 总结有几点： 发扬光大了$和CSS选择器的天才idea（尽管都不是发明者） 处理浏览器的兼容性问题和各种bug 链式调用为核心的DSL（此为jQuery独创） 基于jQuery的生态（大量插件，各种工具如IDE也对其有良好支持） 链式调用？DSL？polyfill？三个名词不知道什么意思？赶紧去google DSL（Domain Specified Language）领域专用语言，总的来说 DSL 是为了解决系统（包括硬件系统和软件系统）构建初期，使用者和构建者的语言模型不一致导致需求收集的困难。 “链式调用”用google和baidu都没有搜到明确定义，有人给出解释如下，例子可以去baidu 让调用过程更接近自然语言。 把原本参数列表复杂的方法化作多个参数列表简单的方法来使用。 减少不必要的代码量。 Polyfill的准确意思为：用于实现浏览器并不支持的原生API的代码。Polyfill或者Polyfiller，是英国Web开发者 Remy Sharp 在咖啡店蹲坑的时候拍脑袋造出来的。当时他想用一个词来形容”用JavaScript（或者Flash之类的什么鬼）来实现一些浏览器不支持的原生API”。Shim这个已经有的词汇第一时间出现在他的脑海里。但是他回头想了一下Shim一般有自己的API，而不是单纯实现原生不支持的API。苦思冥想一直想不到合适的单词，于是他一怒之下造了一个单词Polyfill。除了他自己用这个词以外，他还给其他开发者用。随着他在各种Web会议演讲和他写的书《Introducing HTML5》中频繁提到这个词，大家用了都觉得很好，就一起来用。https://segmentfault.com/a/1190000002593432 看一下前两点， 新的DOM标准（借鉴jQuery）加入了许多新的方法，覆盖了绝大部分use cases； 目前主流浏览器的兼容性已经大幅提高，且因为都是Evergreen browsers了，所以以后也不太会出现严重的兼容性问题了；此外新标准比以往要更详尽清晰，出现不一致和bug的机率也小了； 之前说过了，大框架没有机会。但是注意到一点，jQuery等仍然是建立在前ES5前HTML5时代的。因此那些库其实都干了大量重复的事情。真正有益的是把这些事情做一次，做好它，怎么做好？不是发明各种自己的api，而是大家努力按照html5的规范，去尽量实现一套一致的符合html5语义的底层dom api。 但直到去年（2014），我一直没说可以抛弃jQuery，那就是因为第三点（基于链式调用的DSL）。即使新的query接口已经直接返回Element数组，因此可链式调用forEach/map之类的方法，但总体上，标准DOM API体系仍然无法像jQuery一样提供一致且（插件）可扩展的链式调用DSL。 然而ES6+的发展终于解决了这个问题，那就是bind operator的出现。且拜JS这一世界上最好的编程语言的强大生态所赐，这个还是草案的语言特性已经可以在生产环境里使用了！ BTW，这一语言特性也同样宣告了 Underscore/Lodash 的终结。 至于第四点，原本其实就有利有弊，比方插件体系就一直被诟病。现在直接换成了ES6 module，且jQuery的生态不再独自孤立，而是可以融入更大的JS和Web的生态，只会更好。 综上，从今年（2015）年年初开始，我终于可以断言 jQuery/Zepto/Underscore/Lodash 的时代已经结束了。 最后，关于Angular/React等框架或WebComponents取代jQuery，这是在另外完全不同的层面上的，我这里不赘述。 [10] JavaScript和ECMA在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。 由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。 ECMAScript 因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。 所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。 那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。 JavaScript语言是在10天时间内设计出来的，虽然语言的设计者水平非常NB，但谁也架不住“时间紧，任务重”，所以，JavaScript有很多设计缺陷。 此外，由于JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。 ECMAScript标准的历史版本分别是1、2、3、5、6。 那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。 让浏览器加载Nodejs模块目前NPM上有二十多万个NodeJS模块，它们都是通过CMD的方式打包的，除了特定的可以使用CMD模块加载器加载的模块，大部分nodejs模块无法直接使用到浏览器环境中。 Browserify是一个供浏览器环境使用的模块打包工具，像在node环境一样，也是通过require(‘modules’)来组织模块之间的引用和依赖，既可以引用npm中的模块，也可以引用自己写的模块，然后打包成js文件，再在页面中通过 <script> 标签加载。 当然对于很多NodeJS模块，比如涉及到io操作的模块，就算通过browserify打包后肯定也无法运行在浏览器环境中，这种情况下就会用到为它们重写的支持浏览器端的分支模块，可以在browserify search搜索到这些模块。 转载请注明出自:https://oceanchang.github.io/oceanbj-study-notes-vuejs/https://3600cn.com/oceanbj-study-notes-vuejs/","tags":[{"name":"vue.js","slug":"vue-js","permalink":"https://oceanchang.github.io/tags/vue-js/"}]},{"title":"centos6.5系统gunicorn、supervisor、nginx部署flask","date":"2017-01-17T08:58:00.000Z","path":"centos6-5-gunicorn-supervisor-nginx-flask/","text":"_author:oceanbj create:2016-11-15 last update:_2016-11-20 flask 安装配置python版本2.7.9我的flask涉及到配置需要说明的文件目录如下 1234567891011121314151617myblog|+- app/| || +- __init__.py| || +- static/| || +- templates/| || +- views/| |+- run.py|+- deploy_config.py|+- config.py /usr/loca/nginx/ngix/usr/loca/nginx/ngix.conf /etc/supervisor/conf.d/myblog.conf/etc/supervisord.conf 为你的flask创建运行文件run.pyfrom app import appif __name__ == '__main__': app.run(host=‘0.0.0.0’, debug = True) 简单的flask启动程序注意事项，一定要用if __name__ == '__main__’:，否则在用gunicorn启动flask程序时会出现error: [Errno 98] Address already in use这个错误 安装GunicornGunicorn (独角兽)是一个高效的Python WSGI Server,通常用它来运行 wsgi application(由我们自己编写遵循WSGI application的编写规范) 或者 wsgi framework(如Django,Paster),地位相当于Java中的Tomcat。 可以采用easy_install 或下载源码安装git clone git://github.com/benoitc/gunicorn.git 但最好的方式是使用pip安装，因为可以卸载和管理 pip install gunicorn gunicorn 默认使用同步阻塞的网络模型(-k sync)，对于大并发的访问可能表现不够好， 它还支持其它更好的模式，比如：gevent或meinheld，需要安装如下插件 pip install greenlet pip install eventlet pip install gevent 运行 # gunicorn -k gevent -w 2 -b 127.0.0.1:3721 run:app 可以为gunicorn创建运行配置文件，deploy_config.py Gunicorn worker的数量从经验的角度一般配置 2 * core + 1, core指的核心数。 1 #-*- coding:utf-8 -*- 2 import os 3 bind=‘127.0.0.1:3721' #绑定的端口 4 workers=2 #worker数量 5 backlog=2048 6 worker_class=\"gevent\" #\"sync\" 7 debug=True 8 proc_name='gunicorn.pid' 9 pidfile='/var/log/gunicorn/debug.log' 10 loglevel='debug’ 运行:# gunicorn -c deploy_config.py run:app 此时你的flask程序已经能够正常运行了，下面的supervisor是一个守护程序 安装配置Supervisoryum可以直接安装Supervisor，需要注意的是Supervisor只支持Python2，所以不要在虚拟环境中使用pip安装supervisor。 yum install supervisor 安装后创建配置文件/etc/supervisor/conf.d/myblog.conf 1 [program:myblog] 2 command = /usr/bin/python /usr/bin/gunicorn -c /opt/www/myblog/deploy_config.py run:app 3 directory = /opt/www/myblog 4 autostart = true 5 autorestart = true 6 user = root 7 startsecs = 3 8 startretries = 20 9 redirect_stderr = true 10 stdout_logfile_maxbytes = 50MB 11 stdout_logfile_backups = 10 12 stdout_logfile = /opt/www/myblog/log/myblog.log 创建配置文件后修改/etc/supervisord.conf将刚才的配置文件包含进来 ; 包含其他的配置文件[include]files = /etc/supervisor/conf.d/*.conf ; 可以是 *.conf 或 *.ini 配置完成后启动生效 # supervisord -c /etc/supervisord.conf 基本用法 supervisord -c supervisor.conf 通过配置文件启动supervisor supervisorctl -c supervisor.conf status 察看supervisor的状态 supervisorctl -c supervisor.conf reload 重新载入 配置文件 supervisorctl -c supervisor.conf start [all]|[appname] 启动指定/所有 supervisor管理的程序进程 supervisorctl -c supervisor.conf stop [all]|[appname] 关闭指定/所有 supervisor管理的程序进程 上面由supervisor启动gunicorn安装配置完毕，下面配置nginx的反向代理 nginx 安装配置nginx安装可以自己找其他资料关于正向代理和反向代理的概念只是不同位置请求网络资源的不同说法，你用笔记本上网浏览网页通过的一个代理就叫正向代理，如果互联网过来的一个请求访问一个IDC机房的一个内网web服务，这个服务由nginx转进来就叫做反向代理，nginx 一般用于反向代理和负载均衡，这个IDC机房的web服务也可以直接用公网IP访问，但是为了解决高并发负载均衡的问题引入了nginx反向代理这个概念。 nginx配置文件 35server {36 listen 5001;37 server_name localhost;38 root /opt/www/myblog/app;39 access_log /opt/www/myblog/log/access_log;40 error_log /opt/www/myblog/log/error_log;4142 #charset koi8-r;4344 #access_log logs/host.access.log main;45 # 处理静态资源:46 location ~ ^\\/static\\/.*$ {47 root /opt/www/myblog/app;48 }495051 location / {52 #root html;53 #index index.html index.htm;54 #请求转向本机ip:372155 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;56 proxy_set_header X-Real-IP $remote_addr;57 proxy_set_header Host $host:5001;58 proxy_redirect off;59 proxy_pass http://127.0.0.1:3721; # 这里是gunicorn监听的地址60 }过程中，配置完配置文件重新启动nginx执行命令# /usr/local/nginx/nginx -c /usr/local/nginx/nginx.conf遇到错误如下：nginx: [emerg] bind() to 0.0.0.0:5001 failed (98: Address already in use)原因是nginx已经在运行了，执行killall nginx后再次执行如下命令就正常运行起来了# /usr/local/nginx/nginx -c /usr/local/nginx/nginx.conf https://oceanchang.github.io/centos6-5-gunicorn-supervisor-nginx-flask/https://3600cn.com/centos6-5-gunicorn-supervisor-nginx-flask/","tags":[{"name":"python","slug":"python","permalink":"https://oceanchang.github.io/tags/python/"},{"name":"flask","slug":"flask","permalink":"https://oceanchang.github.io/tags/flask/"}]},{"title":"Hello World","date":"2017-01-17T06:52:00.000Z","path":"hello-world/","text":"Welcome to ocean chang ‘s blog.Enjoy life, discover self and explore the world!ocean.chang@qq.com","tags":[]}]