原创 加載,渲染,繪製

瀏覽器加載過程(1)、瀏覽器通過DNS獲取域名對應IP(2)、建立TCP連接(3)、發送http請求(4)、html邊下載邊渲染(5)、碰到內嵌JS 和 CSS,啓動新的連接下載,阻塞渲染和JS執行(因此要把腳本放後面)(6)、獲取到CS

原创 小程序、快應用 框架

運行平臺 小程序平臺:百度智能小程序、支付寶小程序、微信小程序、QQ小程序、字節跳動小程序 快應用平臺:努比亞手機、聯想手機、一加手機、小米手機、vivo手機、華爲手機、OPPO手機、金立手機、魅族手機、中興手機 跨平臺框架 omix:是

原创 webpack loader編寫 與 npm module上傳

目標:打不同環境的包,對文件進行特定處理 案例:打生成環境包時,刪除掉mock相關代碼 成果:https://www.npmjs.com/package/profile-loader 1、webpack配置 resolveLoade

原创 MV*(MVC、MVP、MVVM)

參考:http://blog.csdn.net/kevin_1025745654/article/details/45815109 MV*   已知:M(數據與數據邏輯,例如ajax、本地存儲模塊) 後端的MVC:M提供數據API;V 即

原创 微信公衆號、微信小程序

微信公衆號網頁開發 授權流程 1、設置授權回調域名:微信公衆平臺-接口權限-網頁授權獲取用戶基本信息 2、自定義菜單:微信公衆平臺-自定義菜單  或者 微信公衆平臺接口調試工具-發送請求 方案一:菜單的URL設置爲 https://ope

原创 新興前端技術

React Native:Facebook推出的Native App方案,使用React框架開發 Weex:阿里推出的Native App方案,使用Vue框架開發 Flutter:Google推出的Native App方案,使用Dart語

原创 桌面Web Electron

  electron 整合 vue 1、搭建vue + webpack 項目 2、在同一個目錄下搭建 electron 項目 (1)安裝electron,npm install --save-dev electron (2)配置elec

原创 RP、PS、AI、AE、XD、藍湖、墨刀

原型與設計 PRD:Product Requirements Document,產品需求文檔 原型圖:線框圖、低保真 設計稿:視覺稿,高保真 UI設計師(美工)的工作:原型圖 -> 設計稿 -> 標註、切圖 切圖:從設計稿中抽出前端開發所

原创 學習方法總結

學習必須要有記錄,否則過段時間就忘記了,記錄的東西的自己對知識的整理,回頭複習時非常容易重新掌握 記錄的東西必須容易獲取,即要看時,馬上可以從網上獲取 學習一門語言或代碼運行環境,必須通過自己編寫樣例來學習。啓動新項目時可以直接拿來參考,

原创 backbone.js / underscore.js / sea.js / html2js

demo : https://github.com/saoraozhe3hao/BackboneDemo 組件嵌套(一個路由下的頁面包含多個部分)解決方案: 方案1:一個路由對應一個主頁面,頁面的其他部分由它引入 方案2:一個路由對應一

原创 reactjs、webpack、babel、eslint

demo: https://github.com/saoraozhe3hao/webpackDemo   react的優點:組件式開發,高複用、低耦合   react生命週期 render: getDefaultProps、getInit

原创 筆試面試總結

1、Array API :join,pop,push,shift(從頭刪除),unshift(從頭插入),sort,reserve(反轉),slice(返回一段),splice(刪除一段) 2、string API: charAt,con

原创 動畫 與 過渡

CSS3 transition 過渡 緩動效果:線性、慢進、慢出、貝塞爾曲線cubic-bezier Vue中, 使用<transition>可以在 元素插入和移除時,添加過渡效果 CSS3 animation 關鍵幀動畫 效果:可以

原创 組件,控件,插件

組件的概念 包含 控件、插件 根據功能分,可以分爲 控件(UI組件) 和 工具 根據實現方式分,可以分爲 基礎 和 插件 demo: https://github.com/saoraozhe3hao/BackboneDemo 控件(U

原创 圖片定位與裁剪

案例一:給定圖片 和 圖片上人臉的位置,要求框出人臉 思路:先確定圖片的顯示模式,計算出圖片左上角的座標 和 圖片縮放比,再畫框 <!-- 微信小程序中的 aspectFit 模式,即 將最長邊顯示完全,且短邊貼邊 --> <img c