web前端開發最佳實踐--(筆記之JavaScript最佳實踐)

如何避免全局變量污染?

  1. 避免定義全局變量或全局函數
  2. 用一個變量進行封裝,并返回外部需要訪問的接口
    809384-20171121140303321-1477959848.png

如何寫出高維護的js代碼

  1. 配置數據和代碼邏輯分離
    如:809384-20171121141718336-1730276881.png
    改成:809384-20171121141728399-852293044.png
    809384-20171121141737461-13301830.png
    ---
  2. 用js模板
  • mustache
  • handlebarsjs
  1. MVC的數據模式
    model:數據層
    view:用戶表現層
    controller:用戶交互控制層

  2. 模塊化開發
    利用立即執行函數,可以在不暴露私有數據的情況下公開一些公共的接口
    809384-20171121144708899-884629258.png
    ···
    //全局變量jQuery和module2被傳入module1中
    var module1=(function($,module2){})(jQuery,module2);
    ···

  3. 盡量不適用全局變量,因為全局變量在整個生命周期中不會被釋放
  4. 確保解除不需要的事件監聽
  5. 不要在閉包中返回外部不需要的對象

使用事件托管方式綁定事件

//獲取父節點并添加一個click事件document.getElementById("list").addEventListener("click",function(e){//檢查事件源元素if(e.target&&e.target.nodeName.toUpperCase=="LI"){//針對子元素的處理}})    

常見的web前端攻擊方式

  1. XSS (Cross Site Scripting)跨站點腳本攻擊,如:
    809384-20171121161407133-1435879951.png
    上述例子在chrome瀏覽器中會被攔截
    809384-20171121161547727-2120659017.png
    總結:XSS攻擊的特點就是:盡一切辦法在目標網站上執行非目標網上原有的代碼
  2. CSRF(Cross Site Request Forgery):跨站請求偽造
    809384-20171121162031930-1656716515.png
    809384-20171121162051993-484495210.png
  3. 界面劫持
    809384-20171121162205805-2013887340.png

防范web前端攻擊的最重要一個常識是:永遠也不要輕易相信用戶輸入的數據。一定要針對用戶輸入做相關的格式過濾檢查,防止任何可能的前端注入

  • 更安全的使用Cookie

移動web前端開發

  1. 使用流式布局
  2. 借助css Media queries(媒體查詢),如:
    809384-20171121165015211-733095837.png
    809384-20171121165112399-1568674461.png
  3. 使用響應式設計框架
  4. 利用工具檢查移動設備兼容性 如:
    MobiReady
    howtogomo

開發移動web端的準備工作

  1. 確定支持的移動設備
  2. 處理和桌面端主網站的交互
    一些移動設備的開發庫如下:
    Mobile-Detect
  3. 設置移動站點為單頁模式不,避免 頁面跳轉,改成更友好的彈出層顯示
  4. 選擇合適的移動前端框架,如:
    jquerymobile
    sencha touch
    kendo
    ionic

一些定義解釋

作用域鏈:多個函數嵌套定義時,就會形成作用域包含的關系,這個關系稱為作用域鏈,在內部函數內調用外部對象會降低性能

一些工具介紹

  1. picturefill 處理圖片在不同設備上的顯示問題 picturefill

轉載于:https://www.cnblogs.com/elian/p/7873433.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370559.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370559.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370559.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

yum mysql5.7位置_CentOS yum 安裝 Mysql5.7

1 Steps for a Fresh Installation of MySQL# wget https://dev.mysql.com/get/mysql57-community-release-el6-9.noarch.rpm# yum localinstall mysql57-community-release-el6-9.noarch.rpm以上步驟其實是把 MySQL Yum repository 添加到了系統的 repository list 里去了。ll…

HTML/CSS基礎知識(四)

WEB標準和W3C的理解與認識 Web標準是一系列標準的集合。 網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)。 對應的標準也分三方面:結構化標準語言主要包…

python做一個系統代碼_python初學者,用python3實現基本的學生管理系統代碼實例...

這篇文章分享了管理系統,python學生管理系統的使用,這篇文章非常詳細地介紹了通過示例代碼實現的學生管理系統,該系統對每個人的研究或工作都有一定的參考學習價值。 這個是用python實現的基本的增刪改查的學生管理系統吧,其中主要…

Python入門筆記

Python變量和數據類型 數據類型 print語句 注釋 Python的注釋以 # 開頭,后面的文字直到行尾都算注釋 # 這一行全部都是注釋... print hello # 這也是注釋 什么是變量 定義字符串 字符串可以用或者""括起來表示。 如果字符串本身包含怎么辦?比如…

1058. 選擇題(20)

原題: https://www.patest.cn/contests/pat-b-practise/1058 思路: 本題主要就是怎么讀取數據的問題, 一定要注意scanf函數匹配到 空格或者回車會結束當前變量的賦值, 并且會丟棄這個空格或回車. 關于如何判斷一項答題是否正確, 可以采用循環一個一個判斷, 也可拼成 字符串用st…

使用Spring和Hibernate進行集成測試有多酷

我有罪,直到現在才寫集成測試(至少針對數據庫相關事務)。 因此,為了消除內感,我閱讀了如何在周末以最少的努力實現這一目標。 提供了一個小示例,描述了如何使用Spring和Hibernate輕松實現這一目標。 通過集…

假設mysql數據表t1有字段_使用ROMA Connect集成數據

概述ROMA Connect支持接入多種類型的數據源,并通過數據集成任務實現源端到目標端的數據集成轉換。ROMA Connect支持相同結構數據之間進行集成轉換,也支持異構數據之間進行集成轉換。本章節通過完成一個SQL Server到MySQL的數據集成配置樣例,幫…

vue-wechat-title

html中的title安裝:npm install vue-wechat-title --save1.在mian.js中//網頁titleimport VueTitle from vue-wechat-title Vue.use(VueTitle);2. 路由中加下 title { path: /, component: Index, meta: { title: 首頁 } }3. 在app.vue 中修改 router-view &a…

如何保證input的輸入值不會隨著提交 而變空_如何對web界面的應用進行測試?

一、輸入框:1、字符型輸入框:(1)字符型輸入框:英文全角、英文半角、數字、空或者空格、特殊字符“~!#¥%……&*?[]{}”特別要注意單引號和&符號。禁止直接輸入特殊字符時&…

CentOS6.x下,tomcat - web項目部署

1. 安裝tomcat tomcat安裝方法&#xff1a;http://www.cnblogs.com/vurtne-lu/p/6478440.html 2. 配置tomcat 修改server.xml文件 <!-- 使用 80 端口 (也可以使用其它端口)--> <Connector port"80" protocol"HTTP/1.1"connectionTimeout"200…

dedecms列表頁面隨機縮略圖調用

如果要利用dedecms制作扁平化主題&#xff0c;大概也能夠遇到相似的問題&#xff0c;那就是dedecms的縮略圖機制&#xff0c;在沒有縮略圖的情況下顯示單一的默認圖片&#xff0c;如果是wordpress可以很方便的定義函數調用隨機的縮略圖&#xff0c;即便是在沒有設置縮略圖并且文…

使用地圖觸發功能處理相干事件

本文介紹如何通過使用映射觸發器來處理一致性事件。 基本上&#xff0c;建議使用Oracle Coherence中的分布式數據管理來研究Oracle Coherence API的基本配置和實現。 映射觸發器是Oracle Coherence提供最高度定制的緩存管理系統的最重要功能之一。 MapTrigger代表一個功能代理…

阿里云服務器mysql莫名丟失_mysql數據庫丟失

mysql數據庫丟失云服務器(Elastic Compute Service&#xff0c;簡稱ECS)是阿里云提供的性能卓越、穩定可靠、彈性擴展的IaaS(Infrastructure as a Service)級別云計算服務。云服務器ECS免去了您采購IT硬件的前期準備&#xff0c;讓您像使用水、電、天然氣等公共資源一樣便捷、高…

01-HTML深入

1.1 瀏覽器的工作原理 把一些標簽解析成用戶可視化的頁面 1.2 HTML中的標簽與元素 在HTML中以<xx>開始&#xff0c;以</xx>結束&#xff0c;比如<html></html>等。 標簽和其內容統稱為元素&#xff0c;比如&#xff1a;<xx>h5</xx> 元素…

gitlab使用_使用 Docker 部署 Gitlab

GitLab 是一個用于倉庫管理系統的開源項目&#xff0c;使用Git作為代碼管理工具&#xff0c;并在此基礎上搭建起來的web服務&#xff0c;具有wiki和issue跟蹤功能。GitLab是當前應用非常廣泛的源代碼管理系統。1. 安裝docker引擎并啟動2. 獲取gitlab鏡像包查看下載好的鏡像3. 在…

js--webSocket入門

Websocket 1.websocket是什么&#xff1f; WebSocket是為解決客戶端與服務端實時通信而產生的技術。其本質是先通過HTTP/HTTPS協議進行握手后創建一個用于交換數據的TCP連接&#xff0c; 此后服務端與客戶端通過此TCP連接進行實時通信。 2.websocket的優點 以前我們實現推送技術…

node.js繼承

person.js module.exports function(){   this.name "person";   this.sleep function(){     console.log("sleep in the night");   }   this.eat function(){     console.log(eat food);   }} student.js var util require(&qu…

研究死鎖–第5部分:使用顯式鎖定

在我的上一個博客中&#xff0c;我研究了使用Java的傳統synchronized關鍵字和鎖排序來修復破碎的&#xff0c;死鎖的余額轉移示例代碼。 但是&#xff0c;有一種替代方法稱為顯式鎖定。 這里&#xff0c;將鎖定機制稱為顯式而非隱式的想法是&#xff0c; 顯式表示它不是Java語…

mysql 經典入門教程_MySQL 經典入門教程

MySQL 經典入門教程1 定義數據庫中的表&#xff1a;一行叫一條記錄。每一列叫一個屬性&#xff0c;或一個字段。主鍵&#xff1a;表中的某個特殊字段&#xff0c;具有唯一的確定的值&#xff0c;可以根據該字段唯一的確定一條記錄外鍵&#xff1a;表中的某個字段的值為另一張表…

druid連接池初始化慢_7、SpringBoot -連接池(Durid)

一導入相關核心包<dependencies>二 在application.ymlspring三、配置Druid Datasource(可選)Configuration五、監控訪問 http://localhost:8080/druid&#xff0c; 使用上面配置的賬號密碼。四、自動配置原理源代碼Configuration說明DataSourceProperties 配置相關 首先找…